@charset "UTF-8";

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

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

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

    50%,
    to {
        transform: translateX(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 fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10%,
    90% {
        opacity: 1;
    }

    to {
        transform: translateY(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 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 kingPulse {
    0%,
    to {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

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

@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 scanEffect {
    0% {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(200%);
    }
}

@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%,
    to {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.diamond-element {
    box-shadow: 0 0 30px #00e5ff;
    border-color: #fff;
    animation: diamond-pulse 2s infinite;
}

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

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

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

@keyframes distinct-white-glow {
    0%,
    to {
        opacity: 0.85;
        transform: scale(1.08);
    }

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

.glowing-element {
    filter: drop-shadow(0 0 15px #fff);
}

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

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

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

@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 smooth-enter-animation {
    0% {
        opacity: 0;
        transform: scale(.97) translateY(20px);
    }

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

@keyframes sheen-flow {
    0% {
        transform: translateX(-150%);
    }

    40%,
    to {
        transform: translateX(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 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 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 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 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 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 techScan {
    0% {
        transform: translateX(-100%);
    }

    50%,
    to {
        transform: translateX(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 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 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 spinBorder {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes rotation {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes rotateGlow {
    to {
        transform: rotateZ(360deg);
    }
}

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

@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 blink {
    0%,
    to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@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 menuFadeIn {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

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

@keyframes modalFadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    20%,
    to {
        transform: translateX(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 bounce-badge {
    0%,
    to {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -3px, 0);
    }
}

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

    50% {
        transform: translate3d(0, -5px, 0);
    }
}

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

    50% {
        transform: translate3d(0, -3px, 0);
    }
}

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

    50% {
        transform: translate3d(0, -5px, 0);
    }
}

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

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

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

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

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

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@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 heartBeat {
    0%,
    to {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.3, 1.3, 1);
    }
}

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

    50% {
        transform: scale3d(1.15, 1.15, 1);
    }
}

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

    50% {
        transform: scale3d(1.1, 1.1, 1);
        opacity: .3;
    }
}

.gpu-accelerated {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@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 popIn {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) 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;
}

.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;
    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;
}

.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;
}

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

.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;
    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;
}

#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;
}

#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;
}

.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;
}

.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;
    }
}

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

.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;
}

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

.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;
}

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

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

    #pubgPageContainer,
    #valorantPointsPageContainer,
    #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;
    }
}

.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;
    border-radius: 50%;
}

.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;
}

.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;
}

.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;
}

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

.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);
}

.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;
}

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

.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;
}

.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.success {
    border-color: #2ecc71;
    color: #2ecc71;
}

.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);
border-color: #ff4757;
}

#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);
}

.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);
    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 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 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: var(--berlin-z-modal) !important;
    background: rgba(0, 0, 0, .9) !important;
    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);
    background: rgba(0, 0, 0, 0.7);
    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-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;
        z-index: -1;
    }

    .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: var(--berlin-z-modal) !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;
}

.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%);
    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));
    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;
}

#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;
}

.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;
}

@media (max-width: 768px) {
    .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;
        z-index: 2;
        box-sizing: border-box;
flex-direction: column-reverse;
        text-align: center;
        padding: 20px;
}

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

    .bundle-title {
color: #fff;
        font-size: 1.3rem;
        margin: 10px 0;
        font-weight: 800;
        line-height: 1.4;
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-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: 0;
    transform: translateX(-100%) skewX(-20deg);
    transition: transform .5s ease;
    will-change: transform;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .4), transparent);
}

.buy-reward-btn:hover::before {
    transform: translateX(150%) skewX(-20deg);
}

.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) {

    .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;
}

.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;
}

.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::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;
}

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

.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));
    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;
}

#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;
    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;
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;
}

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

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

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

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

    .promo-btn {
        width: 100%;
    }
}

#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;
}

#bundle-games-grid .bundle-product-details {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding-top: 2px;
    pointer-events: none;
}

#bundle-games-grid .bundle-product-title {
    margin: 8px 0 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#bundle-games-grid .bundle-product-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 5px 9px;
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 999px;
    background: rgba(124, 58, 237, .12);
    color: #ddd6fe;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

#bundle-games-grid .bundle-product-type span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bundle-games-grid .bundle-product-original-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
    color: #aeb7c7;
    font-size: 9px;
    line-height: 1.4;
}

#bundle-games-grid .bundle-product-original-price strong {
    flex: 0 0 auto;
    color: #fbbf24;
    font-size: 11px;
    white-space: nowrap;
}

#bundle-games-grid .bundle-product-action-hint {
    margin: 0;
    color: #94a3b8;
    font-size: 10px;
}

.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: block;
    line-height: 30px;
    text-align: 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: 860px;
    background: rgba(10, 10, 15, .9);
    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);
}

.bundle-pricing-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 250px;
}

.bundle-savings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #e2e8f0;
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
}

.bundle-savings > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    white-space: nowrap;
}

.bundle-original-total {
    color: #cbd5e1;
}

.bundle-saved-amount {
    color: #86efac;
    border-color: rgba(34, 197, 94, .25) !important;
    background: rgba(34, 197, 94, .08) !important;
}

.bundle-discount-percent {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, .25) !important;
    background: rgba(251, 191, 36, .08) !important;
}

.bundle-savings-placeholder {
    color: #94a3b8;
    white-space: normal !important;
}

#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;
}

@media (max-width: 768px) {

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

    .bundle-pricing-summary {
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .bundle-savings {
        justify-content: center;
        font-size: .72rem;
    }

    #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;
}

.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;
}

#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: -6px;
    left: -8px;
    right: -8px;
    bottom: -6px;
    background: linear-gradient(45deg, red, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, red);
    background-size: 400%;
    border-radius: 50px;
    opacity: .7;
    animation: rgb-title-glow 20s linear;
}

.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;
}

.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 {
display: block;
    font-size: .9rem;
    margin-bottom: 5px;
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 {
background: linear-gradient(90deg, #00c0ff, #0f0);
    position: relative;
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:focus-within {
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, .2);
    transform: translateY(-2px);
}

@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 .product-description-text,
    .subscription-item .sub-description {
        display: none !important;
    }

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

.interactive-pill {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 150px;
    height: auto;
    z-index: var(--berlin-z-modal);
    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));
}

.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;
}

.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 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;
}

#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;
}

.confirm-payment-btn:hover {
    background: #00cc6a !important;
    color: #ffffff !important;
    border-style: solid !important;
    border-color: #00cc6a !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 204, 106, 0.3) !important;
    text-shadow: none;
}

.confirm-payment-btn:active {
    transform: translateY(-1px);
}

.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 {
background: rgba(15, 15, 20, .95);
    border: 1px solid rgba(255, 255, 255, .1);
    min-width: 250px;
z-index: var(--berlin-z-toast) !important;
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 .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;
}

.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 {
margin-top: -10px !important;
    margin-bottom: 5px !important;
font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-yellow);
    line-height: 1;
}

#name-input-wrapper-center {
transition: all .3s ease;
    border: 1px solid rgba(255, 255, 255, .3);
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 {
align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.profile-actions-container button {
transition: transform .2s ease, box-shadow .2s ease;
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;
    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;
    }

    .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;
    }

}

#itakura-trick-text {
margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1;
color: var(--dark-bg) !important;
    font-size: 10px;
    font-weight: 400;
    text-shadow: none !important;
}

#itakura-trick-text::selection,
#itakura-trick-text::-moz-selection{
    background: var(--accent-yellow);
    color: #000;
}#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-reviews-list .comment-text {
    font-size: 15px;
    color: var(--light-text);
    line-height: 1.6;
    margin: 0;
}

#feedback-section > :last-child {
    margin-bottom: 0 !important;
}

#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 {
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);
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;
}

.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 h2 {
    color: #fff !important;
    margin: 0 0 10px !important;
    font-size: 24px !important;
    border: 0 !important;
}

.auth-fields-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.auth-input-group i.input-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: #8e6abf !important;
    font-size: 18px !important;
    pointer-events: none !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;
background-color: var(--accent-yellow) !important;
    color: var(--black-text) !important;
    border: 0 !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::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);
}

.google-auth-btn:active {
    transform: scale(.98);
}

.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-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
}

.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::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;
    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::-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 {
max-width: 500px !important;
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;
}

.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: var(--berlin-z-modal, 2000);
    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,
#sohayl-diary-overlay ::-moz-selection{
    background-color: #fc0 !important;
    color: #000 !important;
}#sohayl-diary-overlay .close-diary-btn {
    color: #000;
}

::selection,
::-moz-selection{
    background-color: #d8b4fe;
    color: #2e1065;
    text-shadow: none;
}#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,
#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;
}#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: var(--berlin-z-modal, 2000);
    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: var(--berlin-z-modal);
    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;
}

.close-diary-btn {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #000;
    cursor: pointer;
    z-index: var(--berlin-z-modal);
    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);
}

@media (max-width: 768px) {
    .subscription-item .add-to-cart-btn,
    .subscription-item .sub-price {
        display: none !important;
    }

    .subscription-item .buy-btn {
font-size: 12px !important;
        padding: 6px 10px !important;
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;
    display: inline-block;
    font-weight: 700;
    will-change: background-position;
}

#navbar .logo-area img:hover {
    animation: distinct-white-glow 2s ease-in-out;
}

.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;
}

#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: var(--berlin-z-nav);
    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-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 4px 10px !important;
        height: auto !important;
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,
.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: 55px !important;
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;
    }
}

#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;
}

.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;
}

#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;
}

.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;
}

.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 .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));
    animation: smooth-xbox-glow 2.5s 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 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;
}

#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);
}

#valorant-boosting > * {
    position: relative;
    z-index: 1;
}

#valorant-boosting:not(.calculator-view-active):hover #boosting-cover {
    transform: translateY(-10px);
}

#ps-games-offer-card {
    padding: 5px;
}

.ps-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch;
}

.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;
}

#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);
    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);
    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;
}

.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::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);
    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,
#pubg .product-item,
#leagueoflegends .product-item,
#mobilelegends .product-item,
#minecraft .product-item,
#roblox .product-item,
#rocketleague .product-item,
#marvelRivals .product-item {
    width: 145px !important;
    min-height: 250px !important;
    padding: 10px !important;
}

#fortnite .product-item .product-image-wrapper,
#valorantPoints .product-item .product-image-wrapper,
#pubg .product-item .product-image-wrapper,
#leagueoflegends .product-item .product-image-wrapper,
#mobilelegends .product-item .product-image-wrapper,
#minecraft .product-item .product-image-wrapper,
#roblox .product-item .product-image-wrapper,
#rocketleague .product-item .product-image-wrapper,
#marvelRivals .product-item .product-image-wrapper {
    height: 130px !important;
}

#fortnite .product-item h3,
#valorantPoints .product-item h3,
#pubg .product-item h3,
#leagueoflegends .product-item h3,
#mobilelegends .product-item h3,
#minecraft .product-item h3,
#roblox .product-item h3,
#rocketleague .product-item h3,
#marvelRivals .product-item h3 {
    font-size: 14px !important;
    min-height: 40px !important;
}

#fortnite .product-item p,
#valorantPoints .product-item p,
#pubg .product-item p,
#leagueoflegends .product-item p,
#mobilelegends .product-item p,
#minecraft .product-item p,
#roblox .product-item p,
#rocketleague .product-item p,
#marvelRivals .product-item p {
    font-size: 14px !important;
}

#fortnite .product-item .buy-btn,
#valorantPoints .product-item .buy-btn,
#pubg .product-item .buy-btn,
#leagueoflegends .product-item .buy-btn,
#mobilelegends .product-item .buy-btn,
#minecraft .product-item .buy-btn,
#roblox .product-item .buy-btn,
#rocketleague .product-item .buy-btn,
#marvelRivals .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,
#pubg .product-item .add-to-cart-btn img,
#leagueoflegends .product-item .add-to-cart-btn img,
#mobilelegends .product-item .add-to-cart-btn img,
#minecraft .product-item .add-to-cart-btn img,
#roblox .product-item .add-to-cart-btn img,
#rocketleague .product-item .add-to-cart-btn img,
#marvelRivals .product-item .add-to-cart-btn img {
    width: 30px !important;
    height: 30px !important;
}

@media (max-width: 768px) {
    #fortniteContainer,
    #pubgPageContainer,
    #leagueOfLegendsPageContainer,
    #mobileLegendsPageContainer,
    #minecraftPageContainer,
    #robloxContainer,
    #rocketleagueContainer,
    #marvelRivalsContainer,
    #valorantPointsPageContainer {
        justify-items: center !important;
        place-items: center !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;
}

.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;
}

.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 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 {
opacity: 1 !important;
    visibility: visible !important;
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 {
z-index: 1;
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);
    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;
}

.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-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 #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 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:focus {
    border-color: var(--accent-yellow);
}

.category-header {
flex-direction: column;
    gap: 5px !important;
    margin-bottom: 15px !important;
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 {
border: 1px solid rgba(255, 255, 255, .3) !important;
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%);
    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 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 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 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));
    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;
}

#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 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()"],
#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));
    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));
    padding: 40px 20px;
}

.fn-boosting-content p {
    text-align: center;
    color: var(--light-text);
    font-size: 1rem;
    line-height: 1.6;
}

.level-input-group {
max-width: 180px;
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 .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 .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;
}

.tab-button:not(.active):hover {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

#about {
    position: relative;
}

#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;
}

#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;
}

#discord-decorations-section,
#discordDecorationsPage {
    background-size: cover;
    background-position: center;
    border-color: #7289da;
}

#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;
}

#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: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;
}

#theme-toggle-btn .moon-icon {
    display: none;
}

.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 {
width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
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;
}

.product-image-section img {
    height: auto;
    max-height: 300px;
    width: 100%;
    object-fit: contain;
}

.product-actions-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: auto;
}

#addToCartBtn {
    margin-top: 10px;
    align-self: flex-start;
}

#valorant-boosting::before {
transform: translate(-50%, -50%);
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 20s linear;
}

#valorant-boosting,
#valorant-boosting::after {
    background-size: cover !important;
    background-position: center !important;
}

#valorant-boosting::after {
transition: filter .5s ease-in-out;
content: "";
    position: absolute;
    inset: 2px;
    background-image: url("https://i.postimg.cc/Y0V3YxN1/valorantreynass.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !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 {
box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
    cursor: pointer;
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);
}

#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;
}

.calculator-inputs {
    background: rgba(0, 0, 0, .2);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--main-purple);
}

.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);
}

.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: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));
    border: 1px solid rgba(255, 255, 255, .3);
    transition: all .4s ease;
    animation: smooth-white-glow 8s ease-in-out;
}

.calculator-card:hover {
transform: translateY(-10px) scale(1.03);
    border: 1px solid rgba(255, 255, 255, .3);
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);
    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);
    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;
    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 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;
}

#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;
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-right: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    border-inline-start: 0 !important;
    border-inline-end: 0 !important;
    padding-left: 0;
    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;
}

#footer h3,
.modal-body h2,
h3 {
    border-left: none;
    padding-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;
}

.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;
}

.service-offer-card:hover::before {
    opacity: 1;
}

.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;
}

#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;
}

#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.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 {
opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in .3s;
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: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;
}

.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 ease-in-out;
    border-color: #ff4655;
}

#fortnite-card:hover {
    animation: glow-blue 1.5s ease-in-out;
    border-color: #00b8ff;
}

#roblox-card:hover {
    animation: glow-white 1.5s ease-in-out;
    border-color: #fff;
}

#genshin-card:hover {
    animation: glow-gold 1.5s ease-in-out;
    border-color: #f5d685;
}

#rocket-card:hover {
    animation: glow-blue 1.5s ease-in-out;
    border-color: #00a8ff;
}

#marvel-card:hover {
    animation: glow-purple 1.5s ease-in-out;
    border-color: #a450ff;
}

#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);
    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;
    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 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);
}

.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);
    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: var(--berlin-z-toast, 820);
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px) scale(0.95);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.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) !important;
    box-shadow: 0 15px 35px rgba(0, 102, 255, .6) !important;
transform: translateY(-8px) scale(1.02);
    animation: smooth-glow 1.5s ease-in-out;
    border-color: #00c0ff;
}

#steam-points-section::before {
    background-image: url(https://i.postimg.cc/VLT3m9vv/steamgirl.png);
}

#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;
}

#games-section {
    position: relative;
    background: rgba(30, 17, 50, .6);
    background-size: cover;
    background-position: center 90%;
    background-attachment: fixed;
    border-radius: 15px;
}

#game-topup-section,
#genshinImpact {
    background-size: cover;
    background-position: center;
}

#genshinImpact {
    background-image: url(https://i.postimg.cc/2jxsm65R/genshinimpactbackground.webp);
    background-repeat: no-repeat;
    padding: 50px 20px;
    color: #fff;
}

#modalPrice {
    margin-bottom: 15px;
}

#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 {
z-index: 1;
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;
}

.reviews-carousel-container {
padding: 0 !important;
    height: 0 !important;
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;
}

.reviews-carousel-container:hover .reviews-carousel-track {
    animation-play-state: paused;
}

#store-reviews-list {
margin: 20px auto 10px !important;
display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
}

#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;
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 {
text-shadow: none;
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 {
text-align: right;
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;
    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 {
border-color: #cda1ff;
    box-shadow: 0 0 20px rgba(170, 100, 255, .7);
transform: translateY(-3px);
    animation: rgb-glow-pulse-intense 4s linear;
}

.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 {
border-color: var(--accent-yellow);
    box-shadow: 0 0 20px rgba(170, 100, 255, .7);
animation: rgb-glow-pulse-intense 4s linear;
}

.subscription-option-label input[type=radio]:checked + .subscription-option-card .price {
    color: #fff;
}

#subscription-group.compact-options-group {
    width: min(700px, 100%);
    max-height: 31vh;
    margin: 8px auto !important;
    padding: 7px 12px;
}

#subscription-group.compact-options-group > label {
    margin-bottom: 7px !important;
    font-size: 15px;
    line-height: 1.25;
}

#subscription-options-container.compact-options {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
    margin-top: 5px;
}

#subscription-options-container.compact-options .subscription-option-card {
    min-height: 44px;
    padding: 6px 5px;
    border-width: 1px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#subscription-options-container.compact-options .subscription-option-card .period {
    font-size: 12.5px;
    line-height: 1.2;
}

#subscription-options-container.compact-options .subscription-option-card .price {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.15;
}

#subscription-options-container.compact-options.tabbed-layout {
    gap: 8px;
}

#subscription-options-container.compact-options.tabbed-layout .tier-tabs {
    padding: 3px;
}

#subscription-options-container.compact-options.tabbed-layout .tier-tab-button {
    padding: 7px 9px;
    font-size: .85rem;
}

#subscription-options-container.compact-options.tabbed-layout .tier-content.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px;
}

@media (max-width: 480px) {
    #subscription-options-container.compact-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    #subscription-options-container.compact-options .subscription-option-card {
        min-height: 44px;
        padding: 6px 5px;
    }

    #subscription-options-container.compact-options .subscription-option-card .period {
        font-size: 12px;
    }

    #subscription-options-container.compact-options .subscription-option-card .price {
        font-size: 11px;
    }

    #subscription-options-container.compact-options.tabbed-layout .tier-content.active {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
}

.cart-item-extra-info {
    font-size: 12px;
    color: #ccc;
    margin-top: 4px;
    direction: ltr;
    text-align: right;
}

:root {
    --berlin-z-nav: 100;
    --berlin-z-dropdown: 300;
    --berlin-z-floating: 500;
    --berlin-z-profile-save: 650;
    --berlin-z-tooltip: 720;
    --berlin-z-toast: 820;
    --berlin-z-overlay: 1900;
    --berlin-z-modal: 2000;
    --berlin-z-priority-modal: 2200;
    --berlin-z-system: 3000;
--loot-bg-image: url("./images/P97JL4qb6z2ofr_OgOOH30QggmrvQWMhEYPrUJZaHw4.gif");
--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 {
top: 0 !important;
    position: static !important;
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;
font-display: swap;
overflow-x: hidden;
}

.glass-card {
    background: linear-gradient(135deg, #a4c6ff, #1a0e2a);
    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;
}

#steamGiftCards {
    background-image: url(./images/steamwallpaper.png);
}

#navbar.navbar-scrolled {
    background: linear-gradient(145deg, rgba(44, 26, 64, .7), rgba(30, 17, 50, .7));
}

#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;
}

#navbar .nav-utility-section select {
    margin-top: 0 !important;
}

.by-sohayl,
.by-sohayl a {
    color: var(--accent-yellow);
}

.by-sohayl a {
    text-decoration: none;
    transition: color .3s ease;
}

.by-sohayl a:hover {
    color: #e6b800;
}

.country-name {
display: none !important;
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);
    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 {
box-shadow: none !important;
    filter: brightness(1) !important;
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-left: 0;
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);
}

.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 {
background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    border: 1px dashed rgba(0, 255, 136, 0.6) !important;
    border-radius: 12px !important;
    padding: 12px 30px !important;
    min-width: 180px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4), 0 0 30px rgba(0, 255, 136, 0.2), inset 0 0 10px rgba(0, 255, 136, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
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 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translate3d(-180%,0,0);
    will-change: transform;
    animation: berlin-image-shimmer-sweep-v2 1.35s ease-in-out infinite;
}

/*
 * Product images no longer run a permanent placeholder animation.
 * The v2 loading runtime enables a compositor-only shimmer only while loading.
 */
.product-image-wrapper::before {
    content: none;
}

.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;
}

.content-page {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    line-height: 1.8;
}

.content-page h2 {
margin-right: 0;
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);
}

.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 {
    vertical-align: middle;
    height: 20px;
    margin-right: 5px;
}

.payment-option-logo {
    height: 18px;
    width: auto;
    vertical-align: middle;
    margin-left: 8px;
}

.payment-logo {
margin-right: 5px;
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 {
vertical-align: middle;
    margin-left: 8px;
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 5s ease-in-out;
}

#marvelRivals {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #0a0014 0%, #1a0033 30%, #3d0a4e 60%, #6b1840 90%, #8b2a1a 100%) !important;
    background-color: #0a0014 !important;
}

#marvelRivals::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(180, 0, 80, 0.25) 0%, transparent 55%), radial-gradient(circle at 80% 70%, rgba(200, 100, 0, 0.18) 0%, transparent 55%), radial-gradient(circle at 50% 50%, rgba(100, 0, 200, 0.15) 0%, transparent 65%);
    background-image: none;
    z-index: 0;
    pointer-events: none;
}

#marvelRivals > * {
    position: relative;
    z-index: 1;
}

#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;
}

.overlay {
background-color: rgba(0, 0, 0, .6);
display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--berlin-z-overlay);
    animation: fadeInOverlay .3s ease-in-out;
}

.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);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
position: fixed;
    z-index: var(--berlin-z-modal);
    -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;
}

.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 {
left: auto;
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 {
padding-right: 0;
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-image-section {
display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
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 {
position: relative;
    overflow: hidden;
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 {
max-width: 100px;
    max-height: 100px;
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 {
transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 204, 0, .5);
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;
}

.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 {
display: none;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
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;
}

.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);
}

#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: linear-gradient(135deg, #1d2b4a, #1a1a2a);
    border-right: 3px solid #0070d1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
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;
}

.rating-input {
justify-content: center !important;
    align-items: center !important;
    background: 0 0 !important;
    border: 0 !important;
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 {
border: 1px solid #8e6abf;
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 {
margin-left: 0;
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 {
margin: 0;
    text-align: center;
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;
}

#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;
}

#commentList {
    margin-top: 20px;
    text-align: right;
}

.cart-modal-item,
.comment-item {
    border-radius: 8px;
    margin-bottom: 10px;
}

.cart-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-modal-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.cart-modal-item .item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.cart-modal-item .item-details > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    width: 100%;
    gap: 8px;
}

.cart-modal-item .item-details h4 {
    line-height: 1.3;
    text-align: right;
    margin: 0;
    font-size: 15px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-modal-item .item-details p {
    text-align: right;
    margin: 0;
    font-size: 14px;
    color: var(--accent-yellow);
    font-weight: 700;
}

.cart-modal-item .quantity-controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.cart-modal-item .quantity-controls button {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #a855f7;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.cart-modal-item .quantity-controls button:hover {
    background: rgba(168, 85, 247, 0.2);
    color: #fff;
}

.cart-modal-item .quantity-controls button:active {
    background: rgba(168, 85, 247, 0.4);
    transform: scale(0.95);
}

.cart-modal-item .quantity-controls span {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-left: 1px solid rgba(168, 85, 247, 0.3);
    border-right: 1px solid rgba(168, 85, 247, 0.3);
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .cart-modal-item {
        gap: 8px;
        padding: 10px;
    }

    .cart-modal-item img {
        width: 60px !important;
        height: 60px !important;
    }

    .cart-modal-item .quantity-controls button,
    .cart-modal-item .quantity-controls span {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 14px;
    }
}

.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 h2 {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

.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;
    z-index: -1;
    border-radius: 12px;
}

.checkout-btn-centered {
    font-family: "Cairo", sans-serif;
    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: background-color .2s ease, color .2s ease, transform .2s ease;
    animation: rgb-glow-pulse-intense 4s infinite linear;
}

.checkout-btn-centered:hover {
background-color: #f0f0f0 !important;
    color: var(--main-purple) !important;
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 {
border-right: none;
    padding-right: 0;
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;
}

.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 {
margin-bottom: 40px;
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-weight: 700;
    color: var(--accent-yellow);
font-size: 2rem;
}

#productPagePrice,
.product-page-rating {
    margin-bottom: 20px;
}

#productPageShortDescription {
margin-top: -150px !important;
    display: none;
    line-height: 1.6;
    flex-grow: 1;
font-size: 1.1rem;
    color: #d1cde0;
    margin-bottom: 30px;
}

.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 input {
    width: 180px;
    margin: 0;
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 {
border-bottom: none !important;
    padding-bottom: 0 !important;
padding: 0;
    border: 0;
    max-width: 800px;
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 .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) {

    .product-item {
        min-width: 150px;
    }

    .product-item,
    .product-item.valorant-item {
        width: calc(50% - 20px);
    }

    .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;
    pointer-events: none;
    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;
}

.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 .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) {

    .subscription-item {
min-height: 220px !important;
width: 90%;
        max-width: 340px;
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: 90px !important;
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: 13px !important;
        min-height: 30px !important;
        margin: 5px 0 !important;
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: 14px !important;
        margin: 5px 0 !important;
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: 14px !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        line-height: 1.4 !important;
    }

    .subscription-item .buy-btn::before,
    .subscription-item .buy-btn::after,
    .subscription-item .subscribe-btn::before,
    .subscription-item .subscribe-btn::after{
        content: none !important;
        display: none !important;
    }
}

.quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: .2;
    position: absolute;
    top: 20px;
    left: 20px;
}

.stars {
flex-direction: row-reverse !important;
    gap: 8px !important;
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) {
    #navbar,
    .glass-card,
    .main-products-section,
    .modal-content-v2,
    .product-item,
    .service-offer-card {
        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;
    }

    #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;
    }

    .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;
    }

    #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;
    }

    .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;
    }
}

.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;
        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;
    }
}

@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);
}

.bg-options-grid,
.steam-sticky-note {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.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.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: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 techScan;
}

.shipping-cards-container,
.shipping-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipping-cards-container {
    gap: 120px;
    margin-top: 70px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    direction: rtl;
}

.shipping-card {
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(0, 212, 255, .2) 0, rgba(0, 212, 255, .05) 60%, transparent 100%);
    border: 1px solid rgba(0, 212, 255, .3);
    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(0, 212, 255, .4) 0, rgba(0, 212, 255, .1) 70%, transparent 100%);
    border-color: #00d4ff;
    box-shadow: 0 0 40px rgba(0, 212, 255, .3);
    cursor: pointer;
}

.card-icon svg {
    width: 42px;
    height: 42px;
    color: #fff;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, .8));
    transition: .4s;
}

.shipping-card:hover .card-icon svg {
    transform: rotate(360deg) scale(1.1);
    color: #00d4ff;
}

.shipping-card h3 {
    font-size: 15px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

.shipping-card p {
    display: block;
    color: #ccf6ff;
    font-size: 11px;
    margin-top: 2px;
    opacity: .9;
    font-family: sans-serif;
}

.legal_full_page_v2 {
    display: none;
    position: fixed;
    z-index: var(--berlin-z-modal, 2000);
    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;
}

.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;
}

#chat-bot-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 50%;
    background: rgba(138, 43, 226, .4);
    border: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--berlin-z-floating, 500);
    transition: .3s cubic-bezier(.2, .8, .2, 1);
    animation: 50s infinite pulseButton;
}

#chat-bot-toggle i,
#chat-bot-toggle svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

#chat-bot-toggle span {
    display: none;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    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);
}

@media (max-width: 768px) {
    #marvelStepsSection .marvel-card {
        width: 100%;
        margin-bottom: 15px;
    }

    .shipping-cards-container {
        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;
    }

}

.nav-link:active {
    transform: none !important;
}

@media (max-width: 768px) {
    .client-mini-info {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 10px !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;
    }

    .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 .input-group,
    .quantity-selector-inline {
        display: flex !important;
        width: 100% !important;
        align-items: center !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;
}

@property --angle {
    syntax: "<angle > ";
    initial-value: 0deg;
    inherits: false;
}

.glass-glow-btn {
    position: relative;
    background: rgba(255, 255, 255, .03);
    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;
pointer-events: 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: 5s 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: 14px;
        z-index: var(--berlin-z-floating, 500);
    }

    .mobile-fab-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        direction: ltr;
    }

    .fab-main-button,
    .fab-search-button {
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .32);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 100;
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .fab-main-button {
        width: 62px;
        height: 62px;
        background: linear-gradient(135deg, #6200ea 0, #b000d4 100%);
        font-size: 24px;
    }

    .fab-search-button {
        width: 52px;
        height: 52px;
        background: rgba(22, 12, 38, .96);
        border-color: rgba(251, 191, 36, .5);
        color: #fbbf24;
        font-size: 20px;
    }

    .fab-main-button:active,
    .fab-search-button:active {
        transform: scale(.92);
    }

    .fab-search-button.active {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-color: rgba(255, 255, 255, .6);
        color: #17120a;
    }

    .fab-main-button i,
    .fab-search-button i {
        transition: transform .2s ease;
    }

    .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 {
text-decoration: none;
        transition: .2s;
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;
    }

    .fab-steam-label,
    .fab-steam-primary-link {
        background: none !important;
        color: #dff4ff !important;
        -webkit-text-fill-color: #dff4ff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .fab-steam-label {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .fab-steam-label i,
    .fab-steam-primary-link i {
        color: #69c4f5 !important;
        -webkit-text-fill-color: #69c4f5 !important;
    }

    .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;
    }

    .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;
    }
}

.tech-item {
    user-select: none;
}

.is-scrolling .product-item:hover,
.is-scrolling .glass-card:hover,
.is-scrolling .platform-icon,
.is-scrolling [class*="animation"],
.is-scrolling [style*="animation"] {
    animation-play-state: paused !important;
    transition: none !important;
}

.footer-section,
.product-card,
.sidebar {
    contain: paint layout;
}

.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 alternate-reverse glitch-anim;
}

.glitch-effect::after {
    left: -2px;
    text-shadow: -2px 0#00fff9;
    animation: 5s linear 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: var(--berlin-z-modal, 2000);
    overflow-y: auto;
    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;
}

.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 {
position: absolute;
    top: 25px;
    left: 25px;
    z-index: 5;
display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.about-us-logo {
display: block;
position: absolute;
    top: 25px;
    left: 25px;
    width: 100px;
    opacity: .7;
    border-radius: 8px;
max-width: 150px;
    height: auto;
}

.about-us-discord-logo {
height: auto;
    opacity: .8;
    border-radius: 50%;
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);
}

.pay-img-corner,
.pay-img-custom {
    width: auto !important;
    cursor: pointer;
}

.copyright-text {
    margin: 0;
    font-size: .9rem;
    color: var(--text-secondary);
}

.payment-icons-corner {
position: absolute;
    left: 20px;
    top: auto;
    bottom: 15px;
display: flex;
    align-items: center;
    gap: 10px;
}

.pay-img-corner {
    height: 25px !important;
    filter: none;
    opacity: 1;
    transition: transform .3s;
}

@media (max-width: 768px) {
    .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 .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 .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;
    }

    .section.glass-card {
        width: auto !important;
        margin: 10px 8px !important;
        padding: 25px 12px !important;
        border-radius: 18px !important;
    }

    .card-form-section,
    .card-info-section {
        width: 100% !important;
        flex: none !important;
    }

    #discord-calculator-card select,
    #discord-price-display,
    .calculator-controls,
    .input-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #boosting-calculator-container {
        gap: 15px !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,
    #pubgPageContainer,
    #valorantPointsPageContainer {
        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 {
align-items: center !important;
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(auto-fill, minmax(50px, 1fr)) !important;
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;
}

#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;
    background-color: transparent;
    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;
}

#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;
}

.add-to-cart-product-page:active {
    transform: scale(.92) !important;
    background: #22c55e !important;
}

@media (max-width: 992px) {
    #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 berlinSectionColorShift;
    }

    .card {
        background: rgba(10, 10, 15, .75) !important;
        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 berlinSectionColorShift {
        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 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-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;
}

#discordModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#discordModal,
#withdrawModal {
    background: rgba(0, 0, 0, .85);
}

.total-amount {
    color: #10b981;
    font-size: 20px;
}

.discord-note {
    color: #a78bfa;
    font-size: 14px;
    margin: 15px 0;
}

.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 {
font-size: 16px;
    margin-top: 15px;
    transition: .3s;
color: #fff;
    border-radius: 8px;
}

.discord-btn {
display: inline-flex;
    align-items: center;
    font-weight: 700;
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);
}

.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 {
border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    border: 2px solid;
    animation: static-rgb-calm 6s linear;
position: relative !important;
    background-color: transparent !important;
    z-index: 1;
position: relative;
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 {
    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 {
display: flex;
    flex-direction: column;
    gap: 25px;
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%;
    }
}

.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;
    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;
}

.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 {
margin: 0 auto;
    background: rgba(10, 20, 40, .6);
    border: 1px solid rgba(0, 192, 255, .5);
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 {
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;
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 {
display: block;
    width: 100%;
    margin-right: 0;
    font-size: 1rem !important;
color: var(--white-text);
    border: 0;
    padding: 0;
text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    color: #ccc;
}

.fn-calculator {
display: flex;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

#fn-price-display {
background-color: rgba(0, 0, 0, .2);
    border: 1px solid #00c0ff;
    margin: 20px auto;
    max-width: 350px;
background: rgba(142, 68, 173, .1);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px dashed var(--fn-primary);
}

.fn-user-info-form {
margin-top: 30px;
    border-top: 1px solid rgba(0, 192, 255, .2);
background: rgba(0, 0, 0, .2);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.form-step-title {
text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-top: 0;
font-size: 14px;
    margin-bottom: 15px;
    color: #aaa;
}

.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: var(--berlin-z-dropdown);
    width: 200px;
    background: rgba(15, 15, 25, .95);
    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;
}

@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;
    }

    #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;
    }
}

.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);
}

.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);
}

.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: 25px 25px 100px;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
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 {
padding: 10px;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
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 {
align-items: center;
    margin-top: 30px;
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 {
padding: 25px;
    background: rgba(0, 0, 0, .2);
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;
    }

}

#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;
}

.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 {
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);
display: none !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;
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: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;
}

.portfolio-icon {
    animation: 3s ease-in-out infinite floatUpDn;
}

.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:active {
        transform: scale(.95);
    }

    .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);
    z-index: var(--berlin-z-priority-modal) !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;
}

.tab-btn.active {
    opacity: 1;
    background: #06f !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 102, 255, .3);
}

.dropdown-content i {
    margin-left: 8px;
}

.paypal-confirm-btn {
flex: unset;
    min-width: unset;
    box-sizing: border-box;
    height: auto;
    line-height: normal;
font-size: 18px;
    text-align: center;
    background-color: #0070ba;
    box-shadow: 0 4px 15px rgba(0, 112, 186, .3);
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-color: #00457c;
    border-color: #00457c;
    transform: translateY(-2px);
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;
}

body.performance-mode {
    top: 80px;
}

#pwa-install-btn,
.perf-level-3 .non-essential {
    display: none !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: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
width: 100%;
    aspect-ratio: 16/9;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.section-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 10px;
}

.ad-link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden !important;
    border-radius: 12px;
    z-index: 10;
    will-change: auto;
    transition: transform .3s ease-out, box-shadow .3s ease-out;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ad-link-wrapper::before,
.ad-link-wrapper::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.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::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:active::after {
    opacity: 1;
    transition: opacity 50ms ease-in;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.current-pos {
    transform: translate3d(0, 0, 0);
    z-index: 2;
}

.next-pos {
    transform: translate3d(100%, 0, 0);
    z-index: 2;
}

.move-left {
    transform: translate3d(-100%, 0, 0) !important;
}

.move-center {
    transform: translate3d(0, 0, 0) !important;
}

.animate-move {
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.hero-ad-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease-in, transform .3s ease-out, filter .3s ease-out;
}

.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;
}

#xbox-gifting-section .calculator-card:hover .animated-border-box-glow,
.img-loaded {
    opacity: 1 !important;
}

.skeleton-loader {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent !important;
    z-index: 1;
    display: block;
    contain: paint;
    pointer-events: none;
}

.skeleton-loader::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 24%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.035) 76%, transparent 100%);
    transform: translate3d(-180%,0,0);
    will-change: transform;
    animation: berlin-image-shimmer-sweep-v2 1.35s ease-in-out infinite;
}

.skeleton-loader::after {
    content: none;
    display: none;
}

body,
.scroll-optimized {
    -webkit-overflow-scrolling: touch;
}

.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);
        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;
    }

    .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;
    }
}

#feedback-message .success-box,
.logo-box {
    display: flex !important;
    align-items: center !important;
}

.logo-box {
background: rgba(0, 0, 0, .2);
    border: 0;
    border-radius: 10px;
    padding: 8px;
width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
}

#rating-name {
margin-bottom: 5px !important;
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;
}

.error-message {
height: 20px;
color: #ff4757;
}

.warning-message {
    color: #ff9f43;
}

#feedback-message {
font-weight: 700;
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;
    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;
}

.stock-badge.stock-high {
    color: #4ade80;
}

.stock-badge.stock-low {
    color: #fbbf24;
}

.stock-badge.stock-out {
    color: #f87171;
}

* {
scrollbar-width: thin;
    scrollbar-color: #8e6abf var(--dark-bg);
outline: 0 !important;
-webkit-tap-highlight-color: transparent !important;
    -moz-osx-font-smoothing: grayscale;
}

@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;
    }

    #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;
    }
}

.floating-button,
.header,
.product-card,
.product-item,
.service-offer-card {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

#submit-rating-btn {
border: 0 !important;
padding-left: 33px !important;
    padding-right: 33px !important;
    margin-top: 15px !important;
    width: auto !important;
    display: inline-block !important;
}

#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;
}

.animate-on-scroll {
    animation: .5s cubic-bezier(.4, 0, .2, 1) both smoothFadeIn;
}

[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 {
        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 {
        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: visible;
    }

    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;
    }

    .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) {
    #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 .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;
padding: 6px 12px !important;
        font-size: 11px !important;
        height: 35px !important;
        box-shadow: none !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;
content: "تواصل" !important;
        font-size: 11px !important;
        margin-right: 5px !important;
        display: inline-block !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;
        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: var(--berlin-z-modal) !important;
        min-width: 200px !important;
        transition: .3s !important;
width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, .1) !important;
        border-radius: 50% !important;
        justify-content: center !important;
        color: gold !important;
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;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
        width: auto !important;
        min-width: auto !important;
width: 35px !important;
        height: 35px !important;
        background: 0 0 !important;
        border: 1px solid rgba(255, 255, 255, .2) !important;
}

    #gameRentalsContainer,
    #gamesContainer,
    #servicesContainer,
    #steamGiftCardsHomeContainer,
    #steamPointsContainer {
        transform: translateX(13px);
    }

    #gamesContainer {
        padding-left: 17px;
        box-sizing: border-box;
    }

    #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 {
display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 5px !important;
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;
    }

    #mobile-nav {
display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        z-index: var(--berlin-z-modal) !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;
height: 52px !important;
        min-height: 52px !important;
        box-sizing: border-box !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;
    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;
}

.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 {
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;
background-attachment: scroll !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: 13px !important;
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;
    }
}

.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;
}

@supports not (aspect-ratio: 16 / 9) {
    .product-promo-slider-viewport {
        min-height: clamp(220px, 50vw, 720px);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.berlin-social-hub {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 230px;
}

.berlin-social-panel {
    min-width: 0;
    min-height: 190px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .11);
    border-radius: 15px;
    background: #0c1422;
    box-sizing: border-box;
    contain: layout paint style;
}

.berlin-social-title {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.berlin-social-title h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    border: 0;
    color: #f8fafc;
    font-size: .82rem;
}

.berlin-social-title h4 i {
    color: #a78bfa;
}

.berlin-social-title > strong {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(245, 158, 11, .12);
    color: #fcd34d;
    font-size: .72rem;
}

.berlin-social-title > small {
    color: #64748b;
    font-size: .64rem;
    font-weight: 900;
}

#berlin-refresh-social-signals {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 8px;
    background: #101a28;
    color: #94a3b8;
    cursor: pointer;
}

.berlin-social-challenge-list {
    display: grid;
    gap: 6px;
}

.berlin-social-challenge {
    min-height: 34px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 9px;
    background: #101a28;
    color: #cbd5e1;
    font-size: .68rem;
    font-weight: 800;
}

.berlin-social-challenge > i {
    color: #8b5cf6;
    text-align: center;
}

.berlin-social-challenge > b {
    color: #fbbf24;
    font-size: .63rem;
}

.berlin-social-challenge.is-done {
    border-color: rgba(34, 197, 94, .22);
    color: #86efac;
    opacity: .82;
}

.berlin-social-challenge.is-done > i,
.berlin-social-challenge.is-done > b {
    color: #4ade80;
}

.berlin-social-secondary,
.berlin-social-wide-action {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
    padding: 7px 10px;
    border: 1px solid rgba(167, 139, 250, .25);
    border-radius: 9px;
    background: #251b46;
    color: #ddd6fe;
    font: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

.berlin-social-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.berlin-social-controls .berlin-social-secondary {
    min-width: 0;
    padding-inline: 6px;
    font-size: .63rem;
}

.berlin-social-notifications,
.berlin-social-leaderboard {
    display: grid;
    gap: 7px;
}

.berlin-social-notification {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(96, 165, 250, .14);
    border-radius: 10px;
    background: #101a28;
}

.berlin-social-notification > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(124, 58, 237, .18);
    color: #c4b5fd;
}

.berlin-social-notification > div:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.berlin-social-notification strong,
.berlin-social-notification small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-social-notification strong {
    color: #f8fafc;
    font-size: .68rem;
}

.berlin-social-notification small {
    color: #94a3b8;
    font-size: .6rem;
}

.berlin-social-notification > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 5px;
}

.berlin-social-notification .berlin-friend-action {
    flex: 1 1 0;
}

.berlin-social-rank-row {
    min-height: 35px;
    display: grid;
    grid-template-columns: 22px 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 4px 7px;
    border-radius: 9px;
    background: #101a28;
}

.berlin-social-rank-row.is-self {
    outline: 1px solid rgba(245, 158, 11, .24);
}

.berlin-social-rank-number {
    color: #64748b;
    font-size: .65rem;
    font-weight: 900;
    text-align: center;
}

.berlin-social-rank-row img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #070d17;
}

.berlin-social-rank-row strong {
    overflow: hidden;
    color: #e2e8f0;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-social-rank-row b {
    color: #fcd34d;
    font-size: .62rem;
    white-space: nowrap;
}

.berlin-social-empty {
    min-height: 48px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 8px;
    border: 1px dashed rgba(148, 163, 184, .12);
    border-radius: 9px;
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    text-align: center;
}

#berlin-friends-list .berlin-friend-card {
    grid-template-columns: 48px minmax(0, 1fr);
}

#berlin-friends-list .berlin-friend-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.berlin-friend-presence {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: .58rem;
    font-weight: 800;
}

.berlin-friend-presence::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #64748b;
    content: "";
}

.berlin-friend-presence.is-online {
    color: #4ade80;
}

.berlin-friend-presence.is-online::before {
    background: #22c55e;
}

.berlin-friend-action.is-play {
    border-color: rgba(34, 211, 238, .25);
    background: #155e75;
}

.berlin-friend-action.is-public-profile {
    grid-column: span 2;
    border-color: rgba(167, 139, 250, .34);
    background: linear-gradient(135deg, #5b21b6, #3730a3);
}

.berlin-friend-action.is-more {
    border-color: rgba(148, 163, 184, .24);
    background: #334155;
}

.berlin-friend-action.is-gift {
    border-color: rgba(245, 158, 11, .28);
    background: #854d0e;
}

.berlin-friend-action.is-profile {
    border-color: rgba(129, 140, 248, .25);
    background: #3730a3;
}

.berlin-friend-action.is-report,
.berlin-friend-action.is-block {
    border-color: rgba(248, 113, 113, .24);
    background: #7f1d1d;
}

.berlin-gift-friend-recipient {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px auto 0;
    padding: 7px 11px;
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 999px;
    background: rgba(22, 101, 52, .35);
    color: #bbf7d0;
    font-size: .72rem;
    font-weight: 900;
}

.berlin-gift-friend-recipient[hidden] {
    display: none !important;
}

body.berlin-social-modal-open {
    overflow: hidden !important;
}

.berlin-social-modal {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-modal);
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 6, 23, .9);
    box-sizing: border-box;
}

.berlin-social-modal-card {
    width: min(100%, 560px);
    max-height: min(86vh, 760px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 18px;
    background: #0b1220;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    contain: layout paint style;
}

.berlin-social-modal-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.berlin-social-modal-card > header h3 {
    margin: 0;
    border: 0;
    color: #fff;
    font-size: 1rem;
}

.berlin-social-modal-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 9px;
    background: #111c2d;
    color: #cbd5e1;
    cursor: pointer;
}

.berlin-social-modal-body {
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
    scrollbar-width: thin;
}

.berlin-social-profile-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 12px;
    background: #101a28;
}

.berlin-social-profile-head img {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(167, 139, 250, .35);
    border-radius: 50%;
    object-fit: cover;
}

.berlin-social-profile-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.berlin-social-profile-head strong {
    overflow: hidden;
    color: #fff;
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-social-profile-head span {
    color: #64748b;
    font-size: .65rem;
    font-weight: 800;
}

.berlin-social-profile-head span.is-online {
    color: #4ade80;
}

.berlin-social-product-section {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.berlin-social-product-section h4 {
    margin: 0 0 2px;
    border: 0;
    color: #e2e8f0;
    font-size: .78rem;
}

.berlin-social-product-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 10px;
    background: #101a28;
}

.berlin-social-product-row img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #070d17;
}

.berlin-social-product-row strong {
    overflow: hidden;
    color: #e2e8f0;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-social-danger-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.berlin-social-modal-note {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.7;
}

.berlin-social-favorite-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.berlin-social-favorite-option {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    background: #101a28;
    color: #cbd5e1;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.berlin-social-favorite-option img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
}

.berlin-social-favorite-option span {
    overflow: hidden;
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-social-favorite-option i {
    color: #475569;
}

.berlin-social-favorite-option.is-selected {
    border-color: rgba(245, 158, 11, .45);
    background: rgba(120, 53, 15, .25);
}

.berlin-social-favorite-option.is-selected i {
    color: #fbbf24;
}

.berlin-social-report-select,
.berlin-social-report-details {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 10px;
    outline: 0;
    background: #101a28;
    color: #f8fafc;
    font: inherit;
    font-size: .76rem;
    box-sizing: border-box;
}

.berlin-social-report-details {
    margin-top: 9px;
    resize: vertical;
}

@media (hover: hover) {
    .berlin-social-secondary:hover,
    .berlin-social-wide-action:hover,
    #berlin-refresh-social-signals:hover,
    .berlin-social-favorite-option:hover {
        filter: brightness(1.1);
    }
}

@media (max-width: 980px) {
    .berlin-social-hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .berlin-social-hub > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .berlin-social-hub {
        grid-template-columns: 1fr;
        contain-intrinsic-size: 650px;
    }

    .berlin-social-hub > :last-child {
        grid-column: auto;
    }

    .berlin-social-panel {
        min-height: 0;
        padding: 12px;
    }

    #berlin-friends-list .berlin-friend-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    #berlin-friends-list .berlin-friend-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #berlin-friends-list .berlin-friend-action.is-public-profile {
        grid-column: 1 / -1;
    }

    .berlin-social-favorite-picker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .berlin-social-modal {
        padding: 8px;
    }

    .berlin-social-modal-card {
        max-height: 92vh;
        border-radius: 14px;
    }

    .berlin-social-product-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .berlin-social-product-row img {
        width: 36px;
        height: 36px;
    }

    .berlin-social-product-row .berlin-friend-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-social-modal *,
    .berlin-social-hub * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media screen and (max-width: 768px) {
    *,
    .glass-card,
    .bundle-tip-toast {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    .btn,
    .card,
    .product-box {
        border: 1px solid #333 !important;
    }

    html,
    body {
        scroll-behavior: auto !important;
    }

    .scroll-container,
    .products-grid {
        -webkit-overflow-scrolling: touch;
    }

    * {
box-shadow: none !important;
        text-shadow: none !important;
animation-duration: 0s !important;
        transition: none !important;
}

    .bundle-tip-toast,
    .mobile-menu-btn {
        transition: transform 0.3s ease !important;
    }

    .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;
}

@media (min-width: 769px) {
    body.performance-mode {
        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 {
        background: #1f0e2e !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        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;
}

body.performance-mode #dev-services-page .glass {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

body.performance-mode #dev-services-page .glowing-orb {
    display: block !important;
    opacity: 0.6 !important;
}

body.performance-mode #dev-services-page img,
body.performance-mode #dev-services-page i {
    opacity: 1 !important;
    filter: none !important;
    display: inline-block !important;
}

#earnMoneyTrigger {
    cursor: pointer;
    user-select: none;
}

.contact-footer-clean {
    position: absolute;
    right: 30px;
    bottom: 110px;
    text-align: right;
    direction: rtl;
    z-index: 50;
}

.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;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.contact-link,
.contact-item {
    user-select: text !important;
    -webkit-user-select: text !important;
}

.contact-text.whatsapp-num {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    direction: ltr;
    font-family: sans-serif;
}

.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: 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);
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(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 lineFlow {
    0% {
        background-position: 0% 0%;
    }

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

.order-success-glow {
    animation: successGlowPulse 3s infinite ease-in-out !important;
    border: 1px solid #10b981 !important;
}

.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;
}

.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-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 12px rgba(217, 70, 239, 0.35);
    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;
}

.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-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-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;
}

.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;
}

.header-status-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 380px) {
    .v-text {
        padding-left: 10px;
    }

    .v-label {
        font-size: 0.8rem;
    }

    .tracker-header h3 {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .page-header-info {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 15px !important;
        gap: 20px !important;
    }

    .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;
    }

    .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 {
transform: translateZ(0);
    will-change: auto;
    backface-visibility: hidden;
content-visibility: visible;
    contain-intrinsic-size: 400px;
}

.software-card-unique img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

.spinner-border {
width: 3rem;
    height: 3rem;
    border: 0.25em solid currentColor;
    color: var(--accent-yellow);
    display: inline-block;
animation: spinner-border .75s linear infinite;
    border-right-color: transparent;
    border-radius: 50%;
    border-style: solid;
}

.earn-money-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.earn-money-trigger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.referral-section {
position: relative;
display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.referral-section.active {
    display: block;
    animation: fadeIn 0.5s forwards;
}

#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;
display: none;
    padding-top: 20px;
    animation: fadeIn 0.3s ease-in-out;
}

.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;
}

.p-img {
    margin-bottom: 2px !important;
}

.p-details h3 {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.p-details div {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}

.price-wrapper {
    margin-top: -5px !important;
    position: relative;
    z-index: 2;
}

.discount-code-container {
justify-content: center;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 5px;
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) {
    .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;
    }
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

.tab-buttons {
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-button {
    background: transparent !important;
    color: #cbd5e1 !important;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px 24px;
    cursor: pointer;
    font-family: "Tajawal", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-button:hover:not(.active) {
    color: #ffffff !important;
    background: rgba(139, 92, 246, 0.08) !important;
    transform: translateY(-2px);
}

.tab-button.active {
    border: 2px solid #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3), inset 0 2px 10px rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.tab-content.active {
    display: block;
}

@keyframes text-shimmer-premium {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.shimmer-text {
    background-color: rgba(255, 255, 255, 0.75);
    background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.9) 50%, rgba(224, 176, 255, 0.8) 55%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 70% );
    background-size: 300% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer-premium 8s ease-in-out infinite;
}

.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector-inline input::-webkit-inner-spin-button,
.quantity-selector-inline input::-webkit-outer-spin-button,
.quantity-selector-card .quantity-input::-webkit-inner-spin-button,
.quantity-selector-card .quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.quantity-selector input,
.quantity-selector-inline input,
.quantity-selector-card .quantity-input {
    -moz-appearance: textfield !important;
}

.quantity-selector label {
    font-size: 1rem;
    font-weight: 700;
    padding-left: 10px;
    color: #fff;
    line-height: 36px;
}

.quantity-selector input {
    background: transparent !important;
    height: 100% !important;
    outline: none !important;
    border: none !important;
    color: #fff !important;
    text-align: center !important;
    width: 35px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.quantity-selector button i,
.quantity-selector button svg,
.quantity-selector button span {
    font-size: 1.2rem !important;
    line-height: 0 !important;
    display: block;
    margin-top: -2px;
}

.quantity-selector button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.quantity-selector-inline {
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 5px;
    margin: 10px auto !important;
}

.quantity-selector-inline button {
    width: 45px !important;
    height: 40px !important;
    cursor: pointer;
    background-color: #5865f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quantity-selector-inline button i,
.quantity-selector-inline button svg,
.quantity-selector-inline button span {
    font-size: 1.2rem !important;
    font-weight: 700;
    line-height: 0 !important;
    margin-top: -2px;
}

.quantity-selector-inline button:hover {
    background-color: #4752c4;
    transform: scale(1.05);
}

.quantity-selector-inline input {
    width: 70px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    font-weight: 700;
    border: 1px solid #7289da;
    background-color: #110e1a;
    color: #fff;
    border-radius: 8px;
    margin: 0 10px !important;
}

.quantity-selector-card {
    background-color: #1b2838;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 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: none;
    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: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quantity-selector-card .quantity-btn i,
.quantity-selector-card .quantity-btn svg,
.quantity-selector-card .quantity-btn span {
    font-size: 1.5rem !important;
    font-weight: 700;
    line-height: 0 !important;
    margin-top: -2px;
}

.quantity-selector-card .quantity-btn:hover {
    background-color: #007bb5;
    transform: translateY(-2px);
}

.quantity-selector-card .quantity-input {
    width: 60px;
    height: 40px;
    padding: 0 !important;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    border: 1px solid #00a8ff;
    background-color: #110e1a;
    color: #fff;
    border-radius: 8px;
    margin: 0;
}

.quantity-selector-card .quantity-total {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 0;
}

#decreaseProductPageQuantity,
#increaseProductPageQuantity {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 5px !important;
    line-height: 1 !important;
}

.quantity-selector button {
background: transparent !important;
    height: 100% !important;
    width: 32px !important;
    outline: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    margin: 0 !important;
    font-size: 0 !important;
display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    line-height: 0 !important;
    padding: 0 !important;
    padding-bottom: 4px !important;
    color: #fff !important;
}

.quantity-selector button i,
.quantity-selector button svg,
.quantity-selector button::before,
.quantity-selector button::after,
.quantity-selector button span {
    display: none !important;
}

.add-to-cart-product-page,
.add-to-cart-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .custom-lantern {
        display: none !important;
    }

    .modal,
    .modal-content,
    .modal-body,
    #authModal .modal-body,
    .contact-modal-content,
    .order-details-content-split,
    .service-modal .modal-content {
        background-color: #1e1132 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .overlay,
    .modal-backdrop,
    .install-modal-overlay {
        background-color: rgba(0, 0, 0, 0.95) !important;
    }

    .custom-offer-card,
    .service-offer-card,
    .service-card,
    .bundle-offer-card,
    #design-offer-card,
    #developing-offer-card {
        background-color: #1e1132 !important;
        background-image: linear-gradient(135deg, #2c1a40 0%, #1e1132 100%) !important;
        border: 1px solid rgba(142, 106, 191, 0.5) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }

    div.product-card,
    div.product-item,
    .products-container > div,
    .products-container .product-card {
        background: linear-gradient(145deg, #3c1870 0%, #1e1132 100%) !important;
        background-color: transparent !important;
        border: 1px solid rgba(142, 106, 191, 0.6) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        border-radius: 12px !important;
    }

}

@media (max-width: 360px) {
    #chat-bot-toggle {
        bottom: 85px !important;
    }
}

.mobile-nav-btn:active,
.mobile-nav-btn.active {
    color: var(--accent-yellow) !important;
    opacity: 1 !important;
}

.mobile-nav-btn.active svg,
.mobile-nav-btn.active i {
    fill: var(--accent-yellow) !important;
    color: var(--accent-yellow) !important;
}

#leagueoflegendsPageContainer {
    margin-top: 40px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

#leagueoflegendsPageContainer .product-item {
    width: 145px !important;
    min-height: 230px !important;
    padding: 10px !important;
}

#leagueoflegendsPageContainer .product-item .product-image-wrapper {
    height: 120px !important;
    margin-bottom: 8px !important;
}

#leagueoflegendsPageContainer .product-item h3 {
    font-size: 14px !important;
    min-height: 30px !important;
    margin: 5px 0 !important;
}

#leagueoflegendsPageContainer .product-item .product-description-text {
    font-size: 11px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

#leagueoflegendsPageContainer .product-item .product-price {
    font-size: 14px !important;
    font-weight: bold !important;
}

#leagueoflegendsPageContainer .product-item .currency-symbol {
    font-size: 11px !important;
}

#leagueoflegendsPageContainer .product-item .buy-btn {
    font-size: 12px !important;
    padding: 8px 10px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.why-offline-container {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(102, 192, 244, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 0;
    text-align: right;
    direction: rtl;
}

.why-offline-container h4 {
    color: #66c0f4;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.why-offline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-offline-list li {
    color: #e0e0e0;
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.why-offline-list li:last-child {
    margin-bottom: 0;
}

.why-offline-list li i {
    color: #2ecc71;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.steam-sticky-note {
position: sticky;
    top: 10px;
    z-index: 999;
    background: rgba(23, 26, 33, .85);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    width: fit-content;
    max-width: 95%;
    margin: 20px auto;
    padding: 12px 25px;
    font-size: 1.1rem;
display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #171a21;
    color: #c7d5e0;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 4px solid #66c0f4;
    flex-wrap: wrap;
    gap: 15px;
}

.note-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.how-it-works-btn {
    background-color: #2a475e;
    color: #66c0f4;
    border: 1px solid #66c0f4;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.how-it-works-btn:hover {
    background-color: #66c0f4;
    color: #171a21;
}

.modern-mute-btn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 10px;
    z-index: 9999;
    background: linear-gradient(135deg, #8E2DE2, #4A00E0);
    color: white;
    padding: 12px 22px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 8px 15px rgba(74, 0, 224, 0.3);
    transition: all 0.3s ease;
    font-family: "Cairo", "Tajawal", sans-serif;
}

.modern-mute-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(142, 45, 226, 0.5);
    background: linear-gradient(135deg, #9d46ff, #5a11f5);
}

.modern-mute-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 10px rgba(74, 0, 224, 0.4);
}

.modern-mute-btn.muted-state {
    background: linear-gradient(135deg, #616161, #212121);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 650px) {
    .modern-mute-btn {
        bottom: 20px;
        right: 10px;
        padding: 10px 18px;
        font-size: 15px;
        width: auto;
        max-width: none;
        text-align: center;
    }
}

.back-btn-modern {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-btn-modern:hover {
    background: var(--accent-yellow, #ffc107);
    color: black;
    transform: translateX(5px);
}

.back-btn-modern i {
    font-size: 1.1rem;
}

.section.hidden {
    display: none;
}

.suggestion-bubble {
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-yellow, #ffd700);
    pointer-events: none;
    animation: float-bounce 2s infinite ease-in-out;
    z-index: 50;
}

.suggestion-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--accent-yellow, #ffd700) transparent;
}

.suggestion-bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1a1a2e transparent;
}

@keyframes float-bounce {
    0%,
    100% {
        top: 150%;
    }

    50% {
        top: 165%;
    }
}

.login-suggestion-wrapper:hover .suggestion-bubble {
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.berlin-modal {
    position: fixed;
    z-index: var(--berlin-z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.berlin-modal.show {
    opacity: 1;
    visibility: visible;
}

.berlin-modal-content {
    background: #1a1a2e;
    border: 1px solid var(--accent-yellow, #ffd700);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    direction: rtl;
    font-family: "Cairo", sans-serif;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.berlin-modal.show .berlin-modal-content {
    transform: translateY(0) scale(1);
}

.berlin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.berlin-modal-header h3 {
    margin: 0;
    color: var(--accent-yellow, #ffd700);
    font-size: 1.2rem;
}

.close-modal-btn {
display: flex;
    transition: .2s;
position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .1);
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-modal-btn:hover {
background: rgba(255, 0, 0, .2);
    color: #ff4d4d;
color: #fff;
}

.berlin-modal-body {
    padding: 20px;
    max-height: 350px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.7;
}

.berlin-modal-body ul {
    padding-right: 20px;
}

.berlin-modal-body li {
    margin-bottom: 10px;
    color: #ddd;
}

.berlin-modal-body::-webkit-scrollbar {
    width: 6px;
}

.berlin-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.berlin-modal-body::-webkit-scrollbar-thumb {
    background: var(--accent-yellow, #ffd700);
    border-radius: 4px;
}

.berlin-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.accept-terms-btn {
    background: var(--accent-yellow, #ffd700);
    color: #000;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.accept-terms-btn:hover {
    opacity: 0.9;
    transform: scale(0.98);
}

.info-icon-wrapper {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-family: monospace;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.info-icon-wrapper:hover .info-icon {
    background: var(--accent-yellow, #ffd700);
    color: #000;
    border-color: var(--accent-yellow, #ffd700);
}

.info-tooltip {
    position: absolute;
    bottom: 150%;
    right: 50%;
    transform: translateX(50%);
    width: 220px;
    background: #1a1a2e;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-yellow, #ffd700);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    pointer-events: none;
}

.info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--accent-yellow, #ffd700) transparent transparent transparent;
}

.info-icon-wrapper:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 130%;
}

@media (max-width: 768px) {
    .info-icon-wrapper {
        display: none !important;
    }

    .payment-input {
        padding-left: 15px !important;
    }
}

@keyframes geminiGlow {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.ai-smart-text {
    text-align: left;
    padding-left: 15px;
    margin-top: 0px;
    margin-bottom: -20px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0.7;
    color: #fff;
    background: linear-gradient( 90deg, #ffffff 0%, #ffffff 35%, #c2e7ff 45%, #e9d5ff 55%, #ffffff 65%, #ffffff 100% );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: geminiGlow 5s linear infinite;
}

#payment_email_input:-webkit-autofill,
#payment_email_input:-webkit-autofill:hover,
#payment_email_input:-webkit-autofill:focus,
#payment_email_input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

#payment_email_input {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
}

#payment_email_input:focus {
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

#payment_email_input:required,
#payment_email_input:invalid {
    box-shadow: none !important;
}

.payment-info-list {
    list-style: none;
    padding: 0;
}

.payment-info-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.payment-info-list i {
    color: #00d2ff;
    font-size: 1.1rem;
    width: 25px;
    text-align: center;
}

.sh-payment-header-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

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

.shop-header-image {
    width: 600px;
    height: auto;
}

.settings-dropdown {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
}

#main-settings-btn {
    background-color: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 0px 10px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: none;
    transform: translateX(10px);
}

#main-settings-btn:active,
#main-settings-btn:focus {
    transform: translateX(10px) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}

#main-settings-btn::after {
    content: "";
    width: 3.5px;
    height: 3.5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(-45deg) translateY(-0.5px);
}

#main-settings-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.settings-content {
    display: none;
    position: absolute;
    background-color: rgba(25, 15, 35, 0.95);
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.6);
    padding: 12px;
    z-index: 1000;
    border-radius: 8px;
    margin-top: 8px;
    right: 0;
    border: 1px solid rgba(155, 89, 182, 0.4);
}

.settings-content label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    color: #d7bde2;
    font-weight: bold;
    text-align: right;
}

.select-group {
    margin-bottom: 10px;
}

.select-group:last-child {
    margin-bottom: 0;
}

#currency-selector,
#language-selector {
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
    height: 28px;
    border: 1px solid rgba(155, 89, 182, 0.5);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

#currency-selector option,
#language-selector option {
    background-color: #1a0f24;
    color: #ffffff;
}

#currency-selector:focus,
#language-selector:focus {
    outline: none;
    border-color: #b388ff;
    box-shadow: 0 0 8px rgba(179, 136, 255, 0.4);
}

select {
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
}

select option {
background: var(--dark-bg);
    color: var(--white-text);
    font-weight: 700;
font-size: 13px;
    padding: 10px;
}

.language-picker {
    font-size: 14px;
    font-family: Arial, sans-serif;
    padding: 4px 8px;
    width: 180px;
}

.language-picker option {
    font-size: 12px;
}

select,
option {
    font-family: "Noto Color Emoji", sans-serif;
    font-size: 18px;
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #333;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.icon-svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.nav-item-wrapper {
    position: relative;
    display: inline-block;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #1a1a1a;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 20px;
    z-index: 1000;
    flex-direction: row;
    gap: 30px;
    min-width: max-content;
}

.nav-item-wrapper:hover .mega-menu {
    display: flex;
}

.menu-column {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.column-title {
    color: #ffd700;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 5px;
}

.genshin-icon {
    filter: brightness(0) invert(1);
}

.menu-column .nav-link {
    padding: 8px 0;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease-in-out;
}

.menu-column .nav-link:hover {
    color: #ffd700;
}

.menu-icon {
width: 16px;
    height: 16px;
    margin-left: 8px;
width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.ml-icon {
    border-radius: 3px;
}

.rounded-icon {
    border-radius: 50%;
}

.section-title {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: bold;
}

.section-title span {
    color: #8b5cf6;
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, 0.8);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.25);
    background-color: rgba(30, 30, 45, 0.8);
}

.feature-card:hover .feature-icon {
    background-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    transform: scale(1.05);
}

.feature-card:hover .feature-icon i {
    color: #ffffff;
}

.feature-card::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -25px;
    left: -20px;
    font-size: 140px;
    color: rgba(139, 92, 246, 0.06);
    z-index: 0;
    transform: rotate(-15deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.feature-card:hover::before {
    color: rgba(139, 92, 246, 0.18);
    transform: rotate(0deg) scale(1.1) translateY(-10px);
}

.feature-card * {
    position: relative;
    z-index: 1;
}

.feature-card:nth-child(1)::before {
    content: "";
}

.feature-card:nth-child(2)::before {
    content: "";
}

.feature-card:nth-child(3)::before {
    content: "";
}

.feature-card:nth-child(4)::before {
    content: "";
}

.support-dropdown-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.main-support-btn {
    background-color: #ffd700;
    color: #240b36;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    transition: all 0.3s ease;
}

.main-support-btn:hover {
    background-color: #e6c200;
    transform: translateY(-2px);
}

.arrow-icon {
    transition: transform 0.3s ease;
    font-size: 11px;
    margin-right: 4px;
}

.main-support-btn.active .arrow-icon {
    transform: rotate(180deg);
}

.support-options {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: rgba(26, 8, 41, 0.95);
    border: 1px solid #4a2377;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
    width: max-content;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.support-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
}

.support-option.livechat {
    background-color: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.support-option.livechat:hover {
    background-color: #ffd700;
    color: #240b36;
}

.support-option.discord {
    background-color: rgba(88, 101, 242, 0.1);
    color: #5865F2;
}

.support-option.discord:hover {
    background-color: #5865F2;
    color: #fff;
}

#vodafone-confirm-yes.is-loading {
    background: #444444 !important;
    color: #888888 !important;
    border: 1px solid #555555 !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
    cursor: not-allowed !important;
}

#vodafone-confirm-yes.is-ready {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff !important;
    opacity: 1 !important;
    cursor: pointer !important;
    visibility: visible !important;
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important;
}

#vodafone-confirmation-view .vodafone-confirmation-actions {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-flow: row nowrap !important;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

#vodafone-confirmation-view #vodafone-confirm-no,
#vodafone-confirmation-view #vodafone-confirm-yes {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px;
    margin-top: 0 !important;
    padding-inline: 10px !important;
    white-space: nowrap;
}

#progress-wrapper.is-active {
    display: block !important;
}

#progress-fill {
    background: #ffffff !important;
    box-shadow: 0 0 8px #ffffff, 0 0 15px #ffffff !important;
    width: 0;
}

@media (max-width: 480px) {
    #vodafone-confirmation-view .vodafone-confirmation-actions {
        flex-flow: row nowrap !important;
        gap: 7px;
    }

    #vodafone-confirmation-view #vodafone-confirm-no,
    #vodafone-confirmation-view #vodafone-confirm-yes {
        width: auto !important;
        min-width: 0 !important;
        padding-inline: 7px !important;
        font-size: 0.82rem !important;
    }
}

#nav-user-img,
#currentProfilePic {
    transition: all 0.3s ease-in-out;
}

.rank-emerald {
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15), 0 0 25px rgba(16, 185, 129, 0.4), inset 0 0 10px rgba(16, 185, 129, 0.1) !important;
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
}

.rank-emerald:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2), 0 0 30px rgba(16, 185, 129, 0.6), inset 0 0 15px rgba(16, 185, 129, 0.2) !important;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    font-family: "Tajawal", sans-serif;
}

.vip-badge {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.2));
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.4);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.premium-badge {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.2));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.verified-badge {
    background: transparent;
    color: #10b981;
    font-size: 1rem;
    padding: 0;
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.4));
}

.streamer-badge {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.2));
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.4);
}

.partner-badge {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.legend-badge {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), rgba(255, 69, 0, 0.2));
    color: #ff4500;
    border: 1px solid rgba(255, 69, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.5);
}

.whale-badge {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(3, 105, 161, 0.2));
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.veteran-badge {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(71, 85, 105, 0.2));
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.champion-badge {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(202, 138, 4, 0.25));
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

.staff-badge {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(153, 27, 27, 0.2));
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.4);
    text-shadow: 0 0 5px rgba(220, 38, 38, 0.4);
}

.custom-eid-text {
    font-family: "Cairo", "Tajawal", "Arial", sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(45deg, #D4AF37, #FFDF73, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0px 4px 8px rgba(212, 175, 55, 0.4));
    animation: float-eid 3s ease-in-out infinite;
}

@keyframes float-eid {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .custom-eid-text {
        font-size: 1rem;
        white-space: nowrap;
    }

    .by-sohayl {
        display: none !important;
    }
}

.rgb-text {
    text-decoration: none;
    display: inline-block;
    background: linear-gradient(270deg, var(--primary), var(--secondary), #3B82F6, var(--primary));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: colorShift 6s ease infinite;
    transition: transform 0.3s ease;
}

.rgb-text:hover {
    transform: scale(1.05);
}

@keyframes colorShift {
    0% {
        background-position: 0% 50%;
    }

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

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

@media (max-width: 768px) {
    #profile-settings-page {
        width: 85% !important;
        margin-right: 10px !important;
        margin-left: auto !important;
        padding: 15px !important;
    }

    .profile-avatar-large {
        width: 100px !important;
        height: 100px !important;
        display: block !important;
        margin: 0 auto 15px !important;
    }

    #header-display-name {
        font-size: 1.5rem !important;
        width: 100% !important;
        margin: 0 auto 5px !important;
    }

    .profile-header-section {
        align-items: flex-end !important;
        text-align: right !important;
    }

    .profile-header-section > div[style*="flex-wrap: wrap"] {
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .points-pill {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

html,
body {
    background-color: #0a0710 !important;
}

#mobile-next-step-btn {
    display: none !important;
}

.step-2-wrapper {
    display: block !important;
}

@media (min-width: 769px) {
    .sh_side_panel.sh_order_details {
        transform: translateX(150px) !important;
    }
}

@media (max-width: 768px) {
    .sh_side_panel.sh_order_details {
        transform: translateX(0) !important;
    }
}

@media (max-width: 900px) {
    .sh_payment_full_page,
    .sh_split_layout,
    .sh_side_panel,
    .sh_panel_content {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 15px !important;
        transform: none !important;
        position: static !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .sh_payment_full_page {
        min-height: 101vh !important;
        padding-bottom: 80px !important;
    }

    #sh_payment_header_grid_wrapper {
        display: none !important;
    }

    #mobile-next-step-btn {
        display: block !important;
        margin-top: -25px !important;
        padding: 0 10px !important;
        width: 100% !important;
    }

    .step-2-wrapper {
        display: none;
    }

    .step-2-active {
        display: block !important;
        animation: fadeIn 0.5s ease-in;
    }

    .sh_payment_actions div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 15px !important;
        transform: none !important;
    }

    .sh_payment_actions h3 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .sh_payment_actions img {
        height: 35px !important;
        width: auto !important;
    }

    #payment-methods-container {
        height: auto !important;
        min-height: 120px !important;
        margin: 10px 0 !important;
    }

    .sh-pay-tab {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    #fullscreen_email_input {
        height: 48px !important;
        font-size: 16px !important;
        background: rgba(20, 10, 35, 0.7) !important;
        border: 1px solid rgba(138, 43, 226, 0.4) !important;
        color: #fff !important;
    }

    #sh_manual_confirm_btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        margin-top: 15px !important;
    }

    .payment-icons-corner {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        padding-bottom: 40px !important;
    }

    .sh_payment_actions span[style*="width: 2px"],
    .sh_legend_badge {
        display: none !important;
    }
}

.features-grid {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 10px;
gap: 15px !important;
}

.feature-card {
background-color: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    padding: 30px 20px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
padding: 15px !important;
}

.feature-icon {
width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-color: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
width: 45px !important;
    height: 45px !important;
    margin-bottom: 12px !important;
}

.feature-icon i {
font-size: 28px;
    color: #8b5cf6;
    transition: 0.3s;
font-size: 20px !important;
}

.feature-card h3 {
color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 700;
font-size: 16px !important;
    margin-bottom: 8px !important;
}

.feature-card p {
color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#user-dropdown-menu > div:first-child {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    border: 1px dashed rgba(255, 255, 255, 0.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 0.2s ease-out !important;
}

#user-dropdown-menu a.nav-link:not(.logout-btn):hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transform: translateX(-4px);
    box-shadow: 0 4px 15px rgba(0, 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: 0.8;
    text-shadow: none !important;
    filter: none !important;
    transition: transform 0.2s ease, opacity 0.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, 0.4) !important;
}

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

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

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

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

#user-dropdown-menu a.logout-btn:hover {
    background-color: rgba(255, 92, 92, 0.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;
}

.s-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.s-modal-content {
    background: #1a1429;
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
}

.s-close-btn {
    position: absolute;
    top: 10px;
    left: 15px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .pwa-install-button {
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-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);
white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: max-content !important;
        font-size: 11px !important;
        padding: 2px 10px !important;
        height: auto !important;
}

    .pwa-install-button i {
font-size: 12px !important;
font-size: 10px !important;
        margin-bottom: 0 !important;
}
}

.layout-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

.custom-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #1e103c;
    color: #e9d5ff;
    border: 1px solid rgba(139, 92, 246, 0.4);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.custom-btn .btn-icon {
    font-size: 0.95rem;
    color: #a855f7;
    transition: 0.3s;
}

.cart-btn .btn-icon {
    font-size: 1.15rem;
}

.vertical-divider {
    width: 2px;
    height: 25px;
    background: rgba(139, 92, 246, 0.4);
    border-radius: 2px;
}

.cart-badge {
    background: #7c3aed;
    color: #ffffff;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 50px;
    margin-left: 2px;
    font-weight: bold;
    min-width: 16px;
    text-align: center;
    display: inline-block;
}

.custom-btn:hover {
    background: linear-gradient(135deg, #3b0764, #2e1065);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.6);
    border-color: rgba(192, 132, 252, 0.9);
}

.custom-btn:hover .btn-icon {
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
}

.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;
position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    min-height: 60px;
}

.welcome-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-berlinians-btn {
    position: absolute;
    right: 20px;
    top: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.5);
    color: #e9d5ff;
    padding: 8px 18px;
    border-radius: 30px;
    font-family: "Tajawal", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.top-berlinians-btn .trophy-icon {
    color: #fbbf24;
    font-size: 1.1rem;
    transition: 0.3s;
}

.top-berlinians-btn:hover {
    background: rgba(139, 92, 246, 0.4);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(139, 92, 246, 0.4);
    border-color: #a855f7;
}

.top-berlinians-btn:hover .trophy-icon {
    transform: scale(1.15) rotate(-10deg);
}

@media (max-width: 768px) {

    .logo-inline {
        max-width: 70px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .glow-text-rtl {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .actions-row {
        padding: 0 2px;
        gap: 2px;
    }

    .discord-button,
    .my-orders-btn-simple {
        flex: 1;
        padding: 3px 2px;
        font-size: 0.6rem;
        border-radius: 3px;
    }

    .btn-icon {
        width: 10px;
    }

    .earn-money-trigger {
        width: 95% !important;
        max-width: 200px !important;
        transform: none !important;
        margin: 4px auto 2px auto !important;
    }

    .earn-money-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 8px !important;
        border-radius: 6px !important;
    }

    .earn-text {
        flex: 1;
        margin-right: 6px !important;
        text-align: right;
    }

    .earn-text h3 {
        font-size: 0.85rem !important;
        margin: 0 0 2px 0 !important;
        font-weight: bold !important;
    }

    .earn-text p {
        font-size: 0.7rem !important;
        margin: 0 !important;
        opacity: 0.9;
        line-height: 1.2 !important;
    }

    .earn-icon i,
    .earn-arrow i {
        font-size: 1.1rem !important;
    }
    #my-orders-auth-page {
        width: 90% !important;
        margin: 15vh auto 5vh auto !important;
        padding: 25px 15px !important;
        box-sizing: border-box;
    }

    #my-orders-auth-page img {
        width: 80px !important;
        margin-bottom: 15px !important;
    }

    #my-orders-auth-page h2 {
        font-size: 1.4rem !important;
    }

    #my-orders-auth-page p {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    #my-orders-auth-page .auth-buttons-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #my-orders-auth-page .auth-action-btn {
        width: 100%;
        padding: 12px !important;
        font-size: 1rem !important;
        justify-content: center;
    }

    #my-orders-page {
max-width: 100% !important;
        min-height: auto !important;
margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
        padding: 20px 15px !important;
margin-top: calc(10vh - 30px) !important;
        min-height: calc(90vh + 30px) !important;
}

    #my-orders-page .page-header-info {
padding-bottom: 10px !important;
flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 15px !important;
        text-align: center !important;
        gap: 15px !important;
}

    #my-orders-page .page-header-info > div:first-child {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    #my-orders-page .page-header-info > div:first-child > div:last-child {
        align-items: center !important;
    }

    #my-orders-page .page-header-info > div:last-child {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    #my-orders-page .page-header-info button {
        padding: 0 15px !important;
        height: 55px !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    #my-orders-page .page-header-info > div:last-child > div {
        flex: 1 !important;
        padding: 5px 15px !important;
    }

    #orders-list-container {
gap: 15px !important;
        width: 100% !important;
padding: 20px 10px !important;
}

    .subscription-subcategory-label,
div:has( > .subscription-subcategory-label) span{
        display: none !important;
    }div:has( > .subscription-subcategory-label) h2 {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        font-size: 1.4rem !important;
    }

    .section-header-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding: 0 5px;
        gap: 5px;
    }

    .section-header-wrapper h2 {
        font-size: 1.1rem !important;
    }

    .main-ad-banner {
aspect-ratio: 4/3;
border-radius: 10px;
        aspect-ratio: 16 / 9;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

    .ad-link-wrapper:hover {
        box-shadow: none;
    }

    .ad-link-wrapper:active::after {
        background: radial-gradient(circle at center, rgba(255, 255, 255, .2) 0, transparent 60%);
        opacity: 0.8;
    }

    .ad-link-wrapper:active .hero-ad-img {
        transform: scale(1.04);
        filter: brightness(1.1);
    }

    .animate-move {
        transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    }
}

@media (max-width: 380px) {
    .section-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-ad-banner {
        aspect-ratio: 4 / 3;
    }
}

@media screen and (max-width: 768px) {
    .layout-wrapper {
        display: none !important;
    }
}

.frame-toxic {
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 ease-in-out;
    transition: all .3s ease;
border: 3px solid #39ff14 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #39ff14, inset 0 0 10px #39ff14 !important;
    transition: all 0.4s ease-in-out !important;
}

.frame-toxic:hover {
    border-color: #ccff00 !important;
    box-shadow: 0 0 25px #39ff14, inset 0 0 20px #39ff14, 0 0 40px #cf0 !important;
    transform: scale(1.05) !important;
}

.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, galaxy-pulse 4s ease-in-out infinite alternate !important;
    will-change: transform, box-shadow, border-color;
border: 3px solid #c77dff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px #7b2cbf, inset 0 0 10px #3a0ca3 !important;
    transition: all 0.4s ease-in-out !important;
}

.frame-galaxy:hover {
    border-color: #00b4d8 !important;
    box-shadow: 0 0 20px #00b4d8, 0 0 40px #0077b6, inset 0 0 15px #0077b6 !important;
    transform: scale(1.05) !important;
}

.frame-inferno {
    border: 3px solid #ff4500 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #ff4500, 0 0 20px #ff8800 !important;
    transition: all 0.4s ease-in-out !important;
}

.frame-inferno:hover {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 15px red, 0 0 30px #ffcc00 !important;
    transform: scale(1.05) !important;
}

.frame-cyber {
border: 3px solid #00e5ff !important;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px #bf00ff !important;
    animation: cyber-glow 2s;
border: 3px solid #9d00ff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 5px #9d00ff, 0 0 10px #9d00ff !important;
    transition: all 0.4s ease-in-out !important;
}

.frame-cyber:hover {
    border-color: #df00ff !important;
    box-shadow: 0 0 15px #df00ff, 0 0 25px #df00ff !important;
    transform: scale(1.05) !important;
}

@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;
    }
}

.rank-elite {
    border: 3px solid #e0c3fc !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 8px rgba(216, 180, 254, 0.5)) !important;
    animation: legendary-unreal-auto 3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes legendary-unreal-auto {
    0% {
        border-color: #a855f7;
        box-shadow: 0 0 10px #ffffff, 0 0 20px #a855f7, 0 0 40px #7e22ce, inset 0 0 15px #a855f7;
        transform: scale(1) translateY(0);
    }

    50% {
        border-color: #f0abfc;
        box-shadow: 0 0 15px #ffffff, 0 0 35px #d946ef, 0 0 60px #a855f7, 0 0 90px #4c1d95, inset 0 0 25px #f0abfc;
        transform: scale(1.04) translateY(-4px);
    }

    100% {
        border-color: #ffffff;
        box-shadow: 0 0 25px #ffffff, 0 0 50px #e879f9, 0 0 80px #c084fc, 0 0 130px #2e1065, inset 0 0 40px #ffffff;
        transform: scale(1.08) translateY(0);
    }
}

#berlinbadges {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
}

#berlinbadges .trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, background 0.3s ease;
}

#berlinbadges .trust-badge:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
}

#berlinbadges .badge-icon {
    font-size: 24px;
    margin-bottom: 10px;
    color: #00ff88;
}

#berlinbadges .trust-badge:nth-child(2) .badge-icon {
    color: #ffd700;
}

#berlinbadges .trust-badge:nth-child(3) .badge-icon {
    color: #00e5ff;
}

#berlinbadges h4 {
    margin: 0;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

#berlinbadges p {
    margin: 5px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    #berlinbadges {
        flex-direction: column;
        gap: 10px;
    }

    #berlinbadges .trust-badge {
        flex-direction: row;
        text-align: right;
        padding: 12px 15px;
        justify-content: flex-start;
        gap: 15px;
    }

    #berlinbadges .badge-icon {
        margin-bottom: 0;
        font-size: 20px;
    }
}

.custom-dropdown {
    position: relative;
    width: 100%;
    margin-top: 8px;
    user-select: none;
    font-family: inherit;
}

.custom-dropdown .dropdown-header {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.custom-dropdown .dropdown-header:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.5);
}

.custom-dropdown .arrow-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #00e5ff;
    flex-shrink: 0;
    margin-right: 10px;
}

.custom-dropdown.open .arrow-icon {
    transform: rotate(180deg);
}

.custom-dropdown .dropdown-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.custom-dropdown.open .dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown .dropdown-options li {
    padding: 10px 16px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.custom-dropdown .dropdown-options li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.custom-dropdown .dropdown-options li.active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.05);
    font-weight: bold;
}

@media (min-width: 769px) {
    #mobileSettingsSheet {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: var(--berlin-z-modal, 2000);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .mobile-sheet-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-sheet-content {
        position: absolute;
        bottom: 80px;
        left: 15px;
        right: 15px;
        background: rgba(15, 20, 30, 0.98);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 20px 30px;
        transform: translateY(150%);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .mobile-sheet-overlay.active .mobile-sheet-content {
        transform: translateY(0);
    }

    .sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 15px;
    }

    .close-sheet-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .pills-container {
        display: flex;
        gap: 15px;
    }

    .pill-btn {
        flex: 1;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        transition: all 0.2s;
    }

    .pill-btn.active {
        background: rgba(0, 229, 255, 0.1);
        border-color: #00e5ff;
        color: #00e5ff;
    }
}

@media (min-width: 769px) {
    .mobile-only-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #main-settings-btn {
        display: none !important;
    }

    .settings-dropdown .mobile-only-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background-color: rgba(40, 10, 60, 0.6);
        border: 2px solid rgba(160, 32, 240, 0.4);
        border-radius: 50%;
        color: #e0b0ff;
        font-size: 22px;
        box-shadow: 0 0 15px rgba(160, 32, 240, 0.6), inset 0 0 10px rgba(160, 32, 240, 0.4);
        cursor: pointer;
        outline: none;
        transition: all 0.3s ease;
        -webkit-appearance: none;
        appearance: none;
        margin: 10px;
    }

    .settings-dropdown .mobile-only-btn:active {
        background-color: rgba(60, 15, 90, 0.8);
        border-color: rgba(160, 32, 240, 0.9);
        color: #fff;
        box-shadow: 0 0 25px rgba(160, 32, 240, 0.9), inset 0 0 15px rgba(160, 32, 240, 0.6);
        transform: scale(0.95);
    }
}

.reward-desc {
    color: red !important;
    display: block !important;
}

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

@keyframes shake-reward {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-2deg);
    }

    50% {
        transform: translateX(5px) rotate(2deg);
    }

    75% {
        transform: translateX(-5px) rotate(-1deg);
    }

    100% {
        transform: translateX(0);
    }
}

.shake-animation {
    animation: shake-reward 0.4s ease-in-out;
}

.custom-modal-card {
    background: #1a1a1a;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-icon {
    font-size: 3rem;
    color: #ffcc00;
    margin-bottom: 15px;
}

.custom-modal-card h3 {
    color: #fff;
    margin-bottom: 10px;
}

.custom-modal-card p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirm {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.btn-cancel {
    background: #c0392b;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.shop-now-btn:hover {
    background: #f0f0f0 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 768px) {
    .stat-card,
    .qa-btn,
    .ghost-card {
        word-break: break-word !important;
        white-space: normal !important;
    }

    .header-bar > div,
    .form-grid,
    .p-actions,
    td > div {
        flex-wrap: wrap !important;
    }

    h1,
    h3,
    h4 {
        font-size: 90% !important;
    }

    .btn-action,
    .icon-btn {
        margin-bottom: 5px !important;
    }

    .trust-badges-container {
gap: 15px !important;
        margin: 10px auto !important;
        padding-bottom: 15px !important;
display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 0 !important;
}

    .trust-badge {
gap: 6px !important;
flex: 1 !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        gap: 2px !important;
}

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

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

    .footer-social-inline,
    .contact-title,
    .contact-info-list > div:first-child,
    .contact-info-list > a:not([href*="wa.me"]),
    #footer > .contact-item,
    .footer-links span[style*="color: rgba(255, 255, 255, 0.2)"] {
        display: none !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100%;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer-links > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .footer-links > div > a,
    .footer-links > div > a.footer-link-new {
        font-size: 0.75rem !important;
        padding: 2px 5px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .contact-footer-clean {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2px !important;
    }

    .contact-info-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px !important;
    }

    .contact-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        gap: 3px !important;
    }

    .contact-item i {
        margin-right: 0 !important;
    }

    .payment-icons-corner {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        order: 98 !important;
    }

    #copyright {
        order: 99 !important;
        margin-top: 2px !important;
        font-size: 0.75rem !important;
        opacity: 0.8;
    }
}

@media (max-width: 400px) {
    .footer-links > div > a,
    .footer-links > div > a.footer-link-new {
        font-size: 0.7rem !important;
    }

    .contact-text {
        font-size: 0.75rem !important;
    }
}

.theme-toggle-btn:active {
    transform: scale(0.9) rotate(0deg);
}

.nav-actions {
    flex-direction: row-reverse !important;
}

.theme-toggle-btn {
width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 0;
order: -1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.theme-toggle-btn .moon-icon {
    display: none;
}

.theme-toggle-btn .sun-icon {
    display: flex;
}

@media (max-width: 768px) {
    .theme-toggle-btn,
    #theme-toggle-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
    }

    .theme-toggle-btn i,
    #theme-toggle-btn i {
        font-size: 16px !important;
    }

    #bundle-games-grid > div {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #bundle-floating-bar {
bottom: 80px;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        border-radius: 15px;
        width: 85%;
bottom: 0 !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
}
}

#home {
background-image: linear-gradient(
        rgba(0, 0, 0, .28),
        rgba(0, 0, 0, .28)
        ), url(https://www.image2url.com/r2/default/images/1781305715433-2f17a86a-d3d9-41a0-9811-7e0dc6c283de.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    margin: 0;
    padding: 0;
border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-image: none !important;
}

.input-wrapper {
gap: 12px;
    padding: 8px 15px;
    margin: 0 auto 15px;
display: flex;
    align-items: center;
    gap: 10px;
position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.confirm-fly-btn {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .input-wrapper:focus-within {
        position: fixed !important;
        top: 25vh !important;
        left: 50% !important;
        transform: translateX(-50%) scale(1.05) !important;
        width: 75% !important;
        max-width: 320px !important;
        height: 50px !important;
        margin: 0 !important;
        background: rgba(15, 10, 25, 0.98) !important;
        border: 2px solid var(--accent-yellow) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.25) !important;
        z-index: var(--berlin-z-modal) !important;
    }

    .input-wrapper:focus-within input,
    .input-wrapper:focus-within textarea {
        font-size: 15px !important;
    }

    .input-wrapper:focus-within i,
    .input-wrapper:focus-within svg {
        font-size: 20px !important;
        color: var(--accent-yellow) !important;
        transform: scale(1.1);
    }

    .input-wrapper:focus-within .confirm-fly-btn {
        display: flex !important;
        position: absolute !important;
        top: -55px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        align-items: center;
        justify-content: center;
        opacity: 1;
        background: var(--accent-yellow);
        color: #111;
        border: none;
        padding: 0 30px !important;
        height: 40px !important;
        border-radius: 20px !important;
        font-weight: 900;
        font-size: 15px !important;
        cursor: pointer;
        margin: 0 !important;
        box-shadow: 0 5px 20px rgba(255, 204, 0, 0.4);
        transition: all 0.3s ease;
    }

    .input-wrapper:focus-within .confirm-fly-btn:hover {
        background: #e6b800;
        transform: translateX(-50%) translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(255, 204, 0, 0.6);
    }

    .input-wrapper:focus-within .confirm-fly-btn:active {
        transform: translateX(-50%) translateY(0) !important;
    }

    .input-wrapper:focus-within::before {
        content: "";
        position: fixed;
        top: -100vh;
        left: -100vw;
        width: 300vw;
        height: 300vh;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: -1 !important;
        pointer-events: auto;
    }
}

@media (min-width: 769px) {
    .input-wrapper:focus-within .confirm-fly-btn {
        display: none !important;
    }
}

.verify-check {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.verify-check.show {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(40, 167, 69, 0.5));
}

.order-card {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #f9f9f9;
    text-align: right;
}

.order-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.order-status {
padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    background: #fff3cd;
    color: #856404;
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    padding: 5px;
}

.quantity-control button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--primary);
    padding: 0 5px;
}

.quantity-control span {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.order-status.status-pending {
    background-color: rgba(255, 165, 0, 0.1);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.order-status.status-completed {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.order-status.status-rejected {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.vodafone-number {
    font-weight: bold;
    color: #e60000;
}

.owner-name {
    font-size: 12px;
    font-weight: normal;
    margin-right: 5px;
    color: #555;
}

#open-game-btn {
    position: absolute;
    left: 15px;
    top: 500px;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

#open-game-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.4));
}

#open-game-btn:hover img {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 25px #2ecc71);
}

#bot-iframe-wrapper {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 380px;
    height: 600px;
    z-index: var(--berlin-z-priority-modal);
    pointer-events: none;
}

#bot-iframe-wrapper.active {
    display: block;
    pointer-events: auto;
}

#chat-bot-container,
#bot-iframe-wrapper {
    position: fixed;
    bottom: 90px;
    left: 20px;
    right: auto;
    width: 380px;
    height: 600px;
    max-height: 80vh;
    z-index: 9999;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(10, 15, 28, 0.9);
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    #open-game-btn {
        display: none !important;
    }

    .glass-card,
    [class*="glass"],
    .modal,
    .unique-page,
    [style*="backdrop-filter"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .btn,
    button,
    .card,
    .product-card,
    .modal {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    body.is-scrolling * {
        animation-play-state: paused !important;
        transition: none !important;
    }

    img {
        image-rendering: auto;
        content-visibility: visible;
    }

    .product-card,
    .card,
    .category-card {
        transform: translateZ(0);
        will-change: auto;
    }

    *[style*="animation"],
    .scan-effect,
    [class*="glow"],
    [class*="pulse"],
    [class*="float"],
    .auto-scroll-rtl,
    .spin-border,
    .rotate-smooth,
.scratch-badge,
.scratch-badge-icon i{
        animation: none !important;
    }}

@media (prefers-reduced-motion: no-preference) {
    *:not(:hover) {
        animation-play-state: running;
    }
}

@media (max-width: 768px) {
    .support-icon-pulse,
    .white-gaming-pulse,
    .diamond-pulse,
    .kingPulse,
    .steam-section-glow,
    .smooth-xbox-glow,
    .glow-move,
    .auto-scroll-rtl,
    .animated-rgb-border,
    [class*="particle"],
    [class*="sparkle"],
    [class*="confetti"] {
        animation: none !important;
    }

    .top-bar,
    .focused-card,
    .glass-card,
    [style*="backdrop-filter"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 15, 28, 0.88) !important;
    }

    .fullscreen-blur-bg .bg-clone {
        filter: blur(0px) brightness(0.7) !important;
    }

    .focused-card,
    .order-history-card,
    [class*="card"] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }
}

.order-history-card,
.focused-card,
.product-card,
.hero-ad-img,
.scroll-track,
[class*="animate-"] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (max-width: 768px) {
    [style*="backdrop-filter"],
    .top-bar,
    .focused-card,
    .glass-card,
    .navbar-search-input {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    [class*="pulse"],
    [class*="glow"],
    [class*="sparkle"],
    [class*="confetti"],
    [class*="shine"],
    [class*="scan"],
    .auto-scroll-rtl,
    .animated-rgb-border {
        animation: none !important;
    }

    .order-history-card,
    .focused-card,
    .product-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    .fullscreen-blur-bg .bg-clone,
    [style*="filter: blur"],
    [style*="filter:blur"] {
        filter: none !important;
    }
}

img {
image-rendering: auto;
max-width: 100%;
    height: auto;
    display: block;
content-visibility: visible;
}

#bundle-games-grid .product-item.selected-in-bundle {
    border: 2px solid #0f0 !important;
    outline: 3px solid rgba(0, 255, 0, 0.5) !important;
    outline-offset: 3px !important;
    background: rgba(0, 255, 0, 0.05) !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5), inset 0 0 15px rgba(0, 255, 0, 0.2) !important;
    transform: scale(1.02) !important;
}

#bundle-games-grid .product-item.selected-in-bundle::after {
    content: "✔" !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #0f0 !important;
    color: #000 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: block !important;
    line-height: 30px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
    z-index: 10 !important;
}

.is-scrolling * {
    animation-play-state: paused !important;
    transition: none !important;
}

.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;
    padding: 15px;
    box-sizing: border-box;
}

.order-details-content-split {
    background: linear-gradient(145deg, #1a1a24 0%, #0a0a10 100%);
    width: 88%;
    max-width: 820px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 40px 80px -20px rgba(0, 0, 0, 0.9), 0 0 50px rgba(168, 85, 247, 0.12);
    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;
}

.right-details-section {
width: 62%;
    padding: 45px;
    justify-content: space-between;
    direction: rtl;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent 60%);
display: flex;
    flex-direction: column;
    padding: 22px !important;
}

.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;
padding: 22px 18px !important;
}

.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;
font-size: 1.1rem !important;
}

.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));
font-size: 1.2rem !important;
}

.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;
font-size: 0.7rem !important;
}

.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;
width: 38px !important;
    height: 38px !important;
}

.v-circle i {
color: #52525b;
    font-size: 1.2rem;
    opacity: 0.5;
    transform: scale(0.8);
    transition: all 0.5s ease;
font-size: 0.9rem !important;
}

.v-label {
color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
font-size: 0.85rem !important;
}

.v-sub-label {
color: #a1a1aa;
    font-size: 0.75rem;
    font-weight: 500;
font-size: 0.7rem !important;
}

.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;
width: 55px !important;
    height: 55px !important;
}

.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);
font-size: 1.15rem !important;
}

.modal-footer {
display: flex;
    gap: 15px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
margin-top: auto;
    flex-shrink: 0;
    gap: 8px !important;
}

.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;
padding: 9px 16px !important;
    font-size: 0.9rem !important;
}

@media (min-width: 769px) and (max-width: 1366px) {
    .order-details-content-split {
        width: 85%;
        max-width: 760px;
        min-height: 400px;
    }

    .left-tracker-section {
        padding: 22px 16px !important;
        width: 38%;
    }

    .right-details-section {
        width: 62%;
        padding: 22px !important;
    }

    .tracker-header h3 {
        font-size: 1.15rem !important;
    }

    .v-circle {
        width: 38px !important;
        height: 38px !important;
    }

    .v-label {
        font-size: 0.85rem !important;
    }
}

@media screen and (max-width: 768px) {
    .order-details-modal * {
        box-sizing: border-box !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    .order-details-content-split {
        flex-direction: column-reverse !important;
        width: 95% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        min-height: auto !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        border-radius: 18px !important;
    }

    .right-details-section {
        width: 100% !important;
        padding: 20px 15px !important;
        flex: 0 0 auto;
    }

    .left-tracker-section {
        width: 100% !important;
        padding: 25px 20px !important;
        border-right: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: #101018 !important;
    }

    .order-header-right {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 30px !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px;
    }

    .order-header-right h2 {
        display: flex !important;
        flex-wrap: wrap !important;
        font-size: 1.1rem !important;
        gap: 5px !important;
        line-height: 1.5 !important;
    }

    #order-number,
    #header-order-status {
        font-size: 0.85rem !important;
        padding: 3px 6px !important;
    }

    .order-close-btn {
        position: absolute !important;
        top: -5px !important;
        left: 0 !important;
        width: 35px;
        height: 35px;
        font-size: 1.8rem !important;
        padding: 5px 10px !important;
        background: transparent !important;
        z-index: 10 !important;
    }

    .tracker-header {
        margin-bottom: 28px;
        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;
    }

    .vertical-tracker {
        height: auto;
        gap: 28px;
    }

    .v-circle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    }

    .v-circle i {
        font-size: 1rem;
    }

    .v-label {
        font-size: 0.85rem;
    }

    .v-sub-label {
        font-size: 0.65rem;
    }

    .v-text {
        opacity: 0.7;
    }

    .line-bg,
    .line-active {
        right: 18px;
        top: 20px;
        bottom: auto;
        height: calc(100% - 40px);
    }

    .line-active {
        height: 0%;
        max-height: calc(100% - 40px);
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .modal-btn,
    .support-dropdown-container,
    .main-support-btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px;
        justify-content: center !important;
    }

    .product-img-box img {
        width: 60px;
        height: 60px;
    }

    .price-text {
        font-size: 1.2rem !important;
    }

    .product-display:hover,
    .info-card:hover {
        transform: none;
    }
}

@keyframes shine-rtl {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.shiny-yellow-text {
    background: linear-gradient(to left, #ffea75 30%, #ffffff 50%, #ffea75 70%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine-rtl 2s linear infinite;
}

@media (max-width: 768px) {
    #reward-shop-section {
        padding: 15px 12px !important;
        border-radius: 15px !important;
        background-attachment: scroll !important;
    }

    .shop-balance {
        font-size: 1rem !important;
        padding: 8px 15px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .shop-header-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    .shop-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 5px !important;
    }

    .reward-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 12px !important;
    }

    .reward-image-box {
height: 110px;
height: 90px !important;
        padding: 8px !important;
}

    .reward-image-box img {
max-height: 75px;
max-height: 70px !important;
}

    .reward-info {
        padding: 8px 10px !important;
    }

    .reward-info h3 {
        font-size: 12px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
        min-height: 32px !important;
    }

    .reward-info p,
    .reward-info .reward-description {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .reward-price,
    .reward-info .reward-price {
        font-size: 13px !important;
    }

    .reward-card .buy-btn,
    .reward-card button {
        font-size: 11px !important;
        padding: 7px 8px !important;
        width: 95% !important;
    }

    #reward-success-modal {
        width: 92% !important;
        max-width: 92% !important;
        padding: 20px 15px !important;
    }

    #reward-success-modal h3 {
        font-size: 18px !important;
    }

    #reward-success-modal img {
        width: 60px !important;
    }

    #reward-success-modal .confirm-payment-btn {
        width: 80% !important;
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {
    .shop-balance {
        font-size: 0.9rem !important;
    }

    .reward-info h3 {
        font-size: 11px !important;
    }

    .reward-card .buy-btn {
        font-size: 10px !important;
    }
}

@media (max-width: 768px) {
    .top-berlinians-btn {
position: static !important;
        width: 100% !important;
        max-width: 200px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        margin: 0 auto !important;
display: none !important;
}

    #welcome-container-wrapper {
        margin-top: -250px !important;
    }

    .welcome-section {
display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        width: 100% !important;
margin-top: 10px !important;
}

    .header-inline-container {
display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 10px 5px !important;
padding-top: 0px !important;
        padding-bottom: 0px !important;
}
}

.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;
animation: none;
}

.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);
animation: gold-pulse 2s infinite;
}

.auth-modal-body {
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 22px 22px 20px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    width: 100%;
}

.auth-hero {
    text-align: center;
    margin-bottom: 16px;
}

.auth-hero-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.35);
    transition: all 0.4s ease;
}

.auth-hero-icon.signup-mode {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 6px 18px rgba(245, 87, 108, 0.35);
}

#authTitle {
    margin: 0 0 4px !important;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.auth-subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: #b8b8b8;
    line-height: 1.4;
}

.auth-input-group {
position: relative !important;
    width: 100% !important;
    margin: 0 !important;
position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.auth-input-group .input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
}

.auth-input-group .pass-toggle-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 3;
}

.auth-field {
width: 100% !important;
    height: 50px !important;
    padding: 0 45px 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: right !important;
    box-sizing: border-box !important;
    transition: all .3s ease !important;
    outline: none !important;
width: 100%;
    padding: 11px 42px 11px 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-family: "Cairo", sans-serif;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    outline: none;
}

.auth-field::placeholder {
    color: #888;
}

.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;
border-color: #667eea;
    background: rgba(102, 126, 234, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.auth-message {
    min-height: 18px;
    margin: 4px 0 2px;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.4;
}

.auth-message:empty {
    margin: 0;
    min-height: 0;
}

.forgot-password-row {
    text-align: right;
    width: 100%;
    margin: -14px 0 -2px;
}

.forgot-password-link {
    color: #ffc107;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.forgot-password-link:hover {
    color: #ffd54f;
    text-decoration: underline;
}

.forgot-password-link i {
    margin-left: 4px;
    font-size: 0.72rem;
}

.auth-submit-btn {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Cairo", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 5px 14px rgba(102, 126, 234, 0.3);
    transition: all 0.25s ease;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(102, 126, 234, 0.45);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn.signup-mode {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 5px 14px rgba(245, 87, 108, 0.3);
}

.auth-submit-btn.signup-mode:hover {
    box-shadow: 0 7px 18px rgba(245, 87, 108, 0.45);
}

.auth-separator {
width: 100% !important;
    color: rgba(255, 255, 255, .5) !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
text-align: center;
    color: #aaa;
display: flex;
    align-items: center;
    margin: 14px 0;
    color: #666;
    font-size: 0.8rem;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.auth-separator span {
padding: 0 10px !important;
padding: 0 12px;
}

.google-auth-btn {
width: 100% !important;
gap: 10px !important;
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;
width: 100%;
    padding: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 10px;
    font-family: "Cairo", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.google-auth-btn:hover {
box-shadow: 0 4px 15px rgba(255, 255, 255, .3) !important;
    background-color: #f1f1f1 !important;
background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.google-auth-btn img {
    width: 18px;
    height: 18px;
}

.auth-footer-text {
margin-top: 10px !important;
    color: #ccc !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
margin-top: 14px;
    text-align: center;
    font-size: 0.83rem;
    color: #aaa;
}

.auth-toggle-btn {
font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    display: inline-block !important;
    margin-right: 5px !important;
color: var(--accent-yellow) !important;
    font-size: 1.1rem;
    transition: color .2s ease;
color: #667eea;
    font-weight: 700;
    cursor: pointer;
    margin-right: 4px;
    transition: color 0.2s;
}

.auth-toggle-btn:hover {
color: #fff !important;
color: #f5576c;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-modal-body {
        padding: 20px 18px !important;
        max-width: 340px;
    }

    .auth-hero-icon {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    #authTitle {
        font-size: 1.15rem;
    }
}

#my-orders-page.orders-fullscreen-page {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    z-index: auto !important;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("https://i.postimg.cc/FsrhwHJC/PUT-YOUR-NEW-IMAGE-HERE-2.webp") center center / cover no-repeat fixed !important;
    display: flex;
    flex-direction: column;
    animation: ordersFadeIn 0.4s ease both;
}

@keyframes ordersFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.orders-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 220px;
}

.orders-profile-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.orders-rank-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.orders-label {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.orders-rank-badge {
    padding: 6px 24px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700;
}

.orders-header-title i {
    font-size: 1.4rem;
    color: #00d2ff;
    filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.5));
}

.orders-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: flex-end;
    min-width: 220px;
}

.orders-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 22px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-width: 85px;
    height: 60px;
    justify-content: center;
}

.orders-stat-num {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
}

.orders-stat-label {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 2px;
}

.orders-wishlist-btn {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.12), rgba(255, 71, 87, 0.05));
    border: 1px solid rgba(255, 71, 87, 0.3);
    color: #fff;
    padding: 0 22px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    transition: all 0.3s ease;
    font-family: "Cairo", sans-serif;
}

.orders-wishlist-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 71, 87, 0.7);
    box-shadow: 0 8px 22px rgba(255, 71, 87, 0.2);
}

.orders-wishlist-btn i {
    font-size: 1.3rem;
    color: #ff4757;
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.5));
}

.orders-wishlist-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.orders-wishlist-top {
    font-size: 0.72rem;
    opacity: 0.7;
}

.orders-wishlist-bottom {
    font-size: 1rem;
    font-weight: 700;
}

.orders-wishlist-count {
    background: #ff4757;
    color: #fff;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-right: 4px;
}

.orders-list-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.orders-list-grid > * {
    max-width: 100%;
    box-sizing: border-box;
}

.orders-empty-state {
    text-align: center;
    padding: 80px 20px;
    max-width: 500px;
    margin: 60px auto 0;
}

.orders-empty-icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.orders-empty-icon i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.5);
}

.orders-empty-state h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.orders-empty-state p {
    color: #aaa;
    font-size: 0.95rem;
    margin: 0 0 28px;
    line-height: 1.6;
}

.orders-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 35px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0, 210, 255, 0.25);
}

.orders-back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(106, 17, 203, 0.15));
    border: 1px solid rgba(0, 210, 255, 0.35);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: "Cairo", sans-serif;
    transition: all 0.3s ease;
    cursor: pointer;
}

.orders-back-home-btn i {
    font-size: 1.2rem;
    color: #00d2ff;
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.6));
}

.orders-back-home-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 210, 255, 0.7);
    box-shadow: 0 8px 22px rgba(0, 210, 255, 0.25);
}

@media (max-width: 480px) {
    .orders-back-home-btn span {
        display: none;
    }

    .orders-back-home-btn {
        padding: 0 12px;
    }
}

.orders-shop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 210, 255, 0.4);
}

.orders-header-title,
.orders-header-title h2,
.orders-header-title a {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
}

@media (max-width: 768px) {

    .orders-header-left,
    .orders-header-right {
        min-width: 0;
        flex: 1 1 auto;
    }

    .orders-header-title {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .orders-wishlist-bottom {
        font-size: 0.88rem;
    }

}

@media (max-width: 480px) {
    .orders-header-title h2 {
        font-size: 1.1rem;
    }

    .orders-wishlist-text {
        display: none;
    }

    .orders-wishlist-btn {
        padding: 0 12px;
    }
}

@media (max-width: 768px) {
    #profile-settings-page .current-avatar-wrapper {
        display: block !important;
        width: fit-content !important;
        margin: 0 auto 15px !important;
        float: none !important;
        text-align: center !important;
    }

    #profile-settings-page #currentProfilePic,
    #profile-settings-page .profile-avatar-large {
        display: block !important;
        margin: 0 auto !important;
        float: none !important;
    }

    #profile-settings-page #header-display-name {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 5px !important;
        padding-right: 1px !important;
        float: none !important;
    }

    #profile-settings-page #currentProfileEmail {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 15px !important;
        display: block !important;
        float: none !important;
        word-break: break-all;
    }

    #profile-settings-page .rank-and-badges-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
    }

    #profile-settings-page #user-rank-display {
        margin: 0 auto !important;
        float: none !important;
    }

    #profile-settings-page .profile-header-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

body:has(#paymentModal.is-visible) .overlay,
body:has(#paymentModal.is-visible) #overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.rank-unreal {
    border: 3px solid transparent !important;
    background-image: linear-gradient(#0a0f1c, #0a0f1c), linear-gradient(45deg, #a855f7, #ec4899, #f59e0b, #a855f7) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.7), 0 0 50px rgba(236, 72, 153, 0.4) !important;
    animation: unrealGlow 2.5s ease-in-out infinite alternate, unrealRotate 4s linear infinite !important;
}

@keyframes unrealGlow {
    0% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(236, 72, 153, 0.3);
    }

    100% {
        box-shadow: 0 0 35px rgba(245, 158, 11, 0.8), 0 0 60px rgba(168, 85, 247, 0.5);
    }
}

@keyframes unrealRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.unreal-title-badge,
.rank-unreal-badge {
    background: linear-gradient(45deg, #a855f7, #ec4899, #f59e0b) !important;
    background-size: 200% auto !important;
    color: #fff !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important;
    animation: unrealShimmer 3s linear infinite !important;
}

@keyframes unrealShimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

#submit-rating-btn,
#submit-rating-btn:hover,
#submit-rating-btn:focus,
#submit-rating-btn:active,
button[onclick="submitStoreRating()"],
button[onclick="submitStoreRating()"]:hover,
button[onclick="submitStoreRating()"]:focus,
button[onclick="submitStoreRating()"]:active {
    transform: translateX(91px) !important;
    transition: background-color 0.3s ease !important;
    animation: none !important;
}

#submit-rating-btn:hover,
button[onclick="submitStoreRating()"]:hover {
    background: #219150 !important;
}

@media (max-width: 1024px) {
    * {
        background-attachment: scroll !important;
    }
}

body.is-scrolling *,
body.is-scrolling *::before,
body.is-scrolling *::after {
    animation-play-state: paused !important;
    transition: none !important;
}

.product-item,
.product-card,
.section-container,
.review-card,
.rank-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

body.tab-hidden *,
body.tab-hidden *::before,
body.tab-hidden *::after {
    animation-play-state: paused !important;
}

#recentlyViewedSection.has-items {
    display: block;
}

.recently-viewed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.recently-viewed-header h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recently-viewed-header h3 i {
    color: #7c3aed;
}

.recently-viewed-clear {
    background: rgba(255, 100, 100, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff6464;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.recently-viewed-clear:hover {
    background: rgba(255, 100, 100, 0.25);
}

.recently-viewed-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #7c3aed transparent;
}

.recently-viewed-track::-webkit-scrollbar {
    height: 6px;
}

.recently-viewed-track::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 3px;
}

.recently-viewed-item {
    flex: 0 0 130px;
    background: rgba(20, 20, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.recently-viewed-item:hover {
    transform: translateY(-3px);
    border-color: #7c3aed;
}

.recently-viewed-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.recently-viewed-item .rv-title {
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #productPageTitle {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: -12px 0 0 0 !important;
        padding: 0 !important;
        color: #fff !important;
    }

    #productPageShortDescription {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.7 !important;
        color: #c5c5d8 !important;
        margin: 12px 0 !important;
        padding: 14px 16px !important;
        background: rgba(20, 20, 35, 0.55) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(124, 58, 237, 0.2) !important;
        border-right: 3px solid #22c55e !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        text-align: right !important;
        word-wrap: break-word !important;
    }

    #productPagePrice {
        color: #22c55e !important;
        font-weight: 800 !important;
    }

    .product-buttons-container .add-to-cart-btn,
    .product-item .add-to-cart-btn {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        outline: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        min-width: auto !important;
        min-height: auto !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 0 !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .product-buttons-container .add-to-cart-btn::before,
    .product-buttons-container .add-to-cart-btn::after,
    .product-item .add-to-cart-btn::before,
    .product-item .add-to-cart-btn::after {
        display: none !important;
        content: none !important;
    }

    .product-buttons-container .add-to-cart-btn img,
    .product-item .add-to-cart-btn img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    #footer {
padding-bottom: 2px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
padding-bottom: 0 !important;
        margin-bottom: 0 !important;
}

    body,
    html {
overflow-y: auto !important;
        height: auto !important;
margin-bottom: 0 !important;
        padding-bottom: 0 !important;
}

    .status-badge-left {
        background: rgba(37, 211, 102, 0.25) !important;
        border: 1px solid rgba(37, 211, 102, 0.6) !important;
        color: #25d366 !important;
        -webkit-text-fill-color: #25d366 !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        box-shadow: 0 0 12px rgba(37, 211, 102, 0.3) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-flex !important;
    }

    .steam-offline-badge {
        background: rgba(102, 192, 244, 0.25) !important;
        border: 1px solid rgba(102, 192, 244, 0.7) !important;
        color: #66c0f4 !important;
        -webkit-text-fill-color: #66c0f4 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        padding: 5px 12px !important;
        box-shadow: 0 0 12px rgba(102, 192, 244, 0.4) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-flex !important;
    }

    .new-badge,
    .product-new-badge,
    .badge-new,
    [class*="new-product-badge"] {
        background: linear-gradient(135deg, #ff4757, #ff6b81) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 3px 10px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(255, 71, 87, 0.5) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        z-index: 5 !important;
    }

    .pulsing-dot-green {
        width: 8px !important;
        height: 8px !important;
        box-shadow: 0 0 8px #25d366 !important;
    }

    #bot-iframe-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        max-width: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        z-index: var(--berlin-z-modal) !important;
    }

    #bot-iframe-wrapper iframe,
    #basha-bot-frame {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #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;
bottom: 90px !important;
z-index: var(--berlin-z-floating) !important;
}

    .daily-reward-trigger {
padding: 8px 12px !important;
        justify-content: center !important;
        text-align: center !important;
background: linear-gradient(135deg, #ffd700, #ff9800) !important;
        color: #1a1a1a !important;
        -webkit-text-fill-color: #1a1a1a !important;
        border: 2px solid #fff !important;
        text-shadow: none !important;
        font-weight: 900 !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

    .daily-reward-trigger i,
    .daily-reward-trigger span {
        color: #1a1a1a !important;
        -webkit-text-fill-color: #1a1a1a !important;
        text-shadow: none !important;
    }

    .daily-reward-trigger .badge-notification {
        background: #ff4757 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        border: 2px solid #fff !important;
    }

    #subscriptions-section .status-badge-left {
        display: none !important;
    }

    #recentlyViewedSection,
    #recentlyViewedSectionOrders,
    .recently-viewed-section,
    [id*="recentlyViewed"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20, 20, 35, 0.95) !important;
        filter: none !important;
    }

    #recentlyViewedSection *,
    #recentlyViewedSectionOrders *,
    .recently-viewed-section * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    div[id="profile-save-bar"] {
        all: unset !important;
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
        padding: 12px !important;
        background: #0a0f1c !important;
        background-color: #0a0f1c !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        border: 1.5px solid rgba(34, 197, 94, 0.5) !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8) !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: var(--berlin-z-profile-save) !important;
        isolation: isolate !important;
        opacity: 1 !important;
        visibility: visible !important;
        will-change: auto !important;
        contain: layout style !important;
    }

    div[id="profile-save-bar"][style*="display: none"],
    div[id="profile-save-bar"][style*="display:none"] {
        display: none !important;
    }

    div[id="profile-save-bar"] > button {
        all: unset !important;
        flex: 1 !important;
        height: 44px !important;
        padding: 0 12px !important;
        font-family: "Cairo", "Tajawal", sans-serif !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        border: none !important;
        outline: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: transform 0.15s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    div[id="profile-save-bar"] > button[onclick*="save"],
    div[id="profile-save-bar"] > button.confirm-payment-btn {
        background: #16a34a !important;
        background-color: #16a34a !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border: 1px solid #22c55e !important;
    }

    div[id="profile-save-bar"] > button[onclick*="false"],
    div[id="profile-save-bar"] > button.buy-btn {
        background: #374151 !important;
        background-color: #374151 !important;
        background-image: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border: 1px solid #4b5563 !important;
    }

    div[id="profile-save-bar"] > button > i,
    div[id="profile-save-bar"] > button > svg {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        filter: none !important;
        opacity: 1 !important;
    }

    div[id="profile-save-bar"] > button:active {
        transform: scale(0.96) !important;
    }

    body:has(div[id="profile-save-bar"][style*="display: flex"]),
    body:has(div[id="profile-save-bar"][style*="display:flex"]) {
        overflow-x: hidden !important;
    }

    .glass-card {
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
}

body.low-end-device *,
body.low-end-device *::before,
body.low-end-device *::after {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.low-end-device .product-item {
    background: rgba(20, 20, 35, 0.9) !important;
}

.crimson-leaf {
    position: fixed;
    top: -100px;
    z-index: var(--berlin-z-floating, 500);
    pointer-events: none;
    will-change: transform, opacity;
    animation-name: fall, swayRotate;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    cursor: pointer;
}

.custom-option[data-value="vodafone"] {
    justify-content: center;
}

@keyframes paymentCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.96);
    }

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

#payment-methods-container .payment-method-card {
    animation: paymentCardFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#payment-methods-container .payment-method-card:nth-child(1) {
    animation-delay: 0.05s;
}

#payment-methods-container .payment-method-card:nth-child(2) {
    animation-delay: 0.15s;
}

#payment-methods-container .payment-method-card:nth-child(3) {
    animation-delay: 0.25s;
}

#payment-methods-container .payment-method-card:nth-child(4) {
    animation-delay: 0.35s;
}

#payment-methods-container .payment-method-card h3 img {
    transition: transform 0.3s ease;
}

#payment-methods-container .payment-method-card:hover h3 img {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    #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;
gap: 18px 14px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-right: 0 !important;
}

    #offline-steam-section .product-card {
margin-right: 0 !important;
        margin-left: auto !important;
margin: 0 !important;
}

    .features-grid {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .features-grid * {
        background-color: transparent !important;
        background-image: none !important;
    }

    .features-grid .feature-card,
    .feature-card {
        background-color: rgba(20, 20, 30, 0.6) !important;
        border: 1px solid rgba(139, 92, 246, 0.25) !important;
    }

    .features-grid,
    .features-grid + *,
    *:has( > .features-grid) {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 20px 10px !important;
    }
}

.product-skeleton {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
    border-radius: 12px;
    height: 200px;
    contain: paint;
}

.product-skeleton::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
    transform: translate3d(-180%,0,0);
    will-change: transform;
    animation: berlin-image-shimmer-sweep-v2 1.35s ease-in-out infinite;
}

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

    100% {
        background-position: 200% 0;
    }
}

body:has(#my-orders-page[style*="display: block"]),
body:has(#my-orders-page[style*="display:block"]) {
    overflow-x: hidden !important;
}

#my-orders-page,
#my-orders-page * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.orders-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
padding: 15px 20px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.orders-header-left,
.orders-header-right {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
}

.orders-main-content {
flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 30px 40px 50px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.orders-list-grid,
.orders-list-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .orders-header {
padding: 15px 20px;
        gap: 12px;
padding: 12px 12px !important;
        gap: 8px !important;
}

    .orders-profile-img {
width: 50px;
        height: 50px;
width: 45px !important;
        height: 45px !important;
}

    .orders-back-home-btn {
height: 52px;
        padding: 0 14px;
        font-size: 0.85rem;
height: 48px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
}

    .orders-stat-card {
padding: 6px 14px;
        min-width: 70px;
        height: 52px;
min-width: 60px !important;
        padding: 5px 10px !important;
        height: 48px !important;
}

    .orders-stat-num {
font-size: 1.2rem;
font-size: 1rem !important;
}

    .orders-stat-label {
        font-size: 0.65rem !important;
    }

    .orders-wishlist-btn {
padding: 0 14px;
        height: 52px;
        gap: 8px;
height: 48px !important;
        padding: 0 10px !important;
        gap: 6px !important;
}

    .orders-rank-badge {
padding: 5px 16px !important;
        font-size: 0.8rem !important;
font-size: 0.7rem !important;
        padding: 4px 12px !important;
}

    .orders-main-content {
padding: 20px 15px 40px;
padding: 15px 10px 30px !important;
}
}

@media (max-width: 480px) {
    .orders-back-home-btn span,
    .orders-wishlist-text {
        display: none !important;
    }

    .orders-header-left {
        gap: 8px !important;
    }

    .orders-rank-block .orders-label {
        font-size: 0.6rem !important;
    }
}

.bundle-mode-switch {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 5px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.bundle-mode-option {
    flex: 1;
    background: transparent;
    border: none;
    color: #aaa;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.bundle-mode-option .mode-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.bundle-mode-option .mode-info {
    font-size: 0.75rem;
    opacity: 0.85;
}

.bundle-mode-option.active {
    color: #fff;
}

.bundle-mode-option[data-mode="pro"].active {
    color: #000;
}

.bundle-mode-slider {
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    width: calc(50% - 5px);
    background: linear-gradient(135deg, #00d2ff, #6a11cb);
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 210, 255, 0.3);
}

.bundle-mode-switch.pro-active .bundle-mode-slider {
    right: calc(50% + 0px);
    background: linear-gradient(135deg, #ffd700, #ffa500);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

@media (max-width: 480px) {
    .bundle-mode-option .mode-title {
        font-size: 0.85rem;
    }

    .bundle-mode-option .mode-info {
        font-size: 0.7rem;
    }
}

.bundle-mode-option,
.bundle-mode-option:hover,
.bundle-mode-option:focus,
.bundle-mode-option:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.bundle-mode-option:hover {
    color: #fff !important;
}

.bundle-mode-option[data-mode="pro"]:hover {
    color: #ffd700 !important;
}

.bundle-mode-option.active:hover {
    color: #fff !important;
}

.bundle-mode-option[data-mode="pro"].active,
.bundle-mode-option[data-mode="pro"].active:hover {
    color: #000 !important;
}

#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: scroll !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;
overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
background: transparent !important;
    padding: 20px !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    position: relative;
}

#my-orders-page .orders-header {
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: rgba(10, 15, 28, 0.92) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
}

#my-orders-page .orders-header + * {
    margin-top: 90px !important;
}

#my-orders-page .orders-list-grid {
    max-width: 720px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 20px 22px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 32px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

#my-orders-page .orders-list-grid::before {
    content: none !important;
    display: none !important;
}

#my-orders-page .orders-list-grid > * {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
}

@media (max-width: 768px) {

    #my-orders-page .orders-list-grid {
        max-width: 100% !important;
        padding: 10px 12px 15px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 480px) {

    #my-orders-page .orders-list-grid::before {
        font-size: 1.3rem;
    }
}

.tabs-container {
position: relative;
width: 100%;
    margin-bottom: 40px;
margin-top: -10px !important;
}

.tab-content {
padding-top: 20px;
display: none;
    animation: fadeIn 0.5s ease forwards;
    background-color: transparent;
    padding: 10px 5px;
margin-top: 0 !important;
}

#extra-info {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

.product-action-container {
gap: 8px !important;
    background-color: rgba(25, 10, 50, .7) !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;
flex-direction: row;
    margin-top: 25px;
align-items: flex-start !important;
}

.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;
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 greenPulse !important;
}

.quantity-selector {
display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    height: 36px !important;
    overflow: hidden !important;
    margin: 10px auto !important;
    flex-shrink: 0;
}

#muteBonusSoundBtn.muted-state {
    background: linear-gradient(135deg, #a855f7, #7e22ce) !important;
    color: #fff !important;
    border: 1px solid #c084fc !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
}

#muteBonusSoundBtn.muted-state:hover {
    background: linear-gradient(135deg, #c084fc, #9333ea) !important;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.8) !important;
    transform: translateY(-2px);
}

#muteBonusSoundBtn.muted-state i,
#muteBonusSoundBtn.muted-state span {
    color: #fff !important;
}

.gift-box-modal {
    background: linear-gradient(145deg, #1a1033, #2d1b4e);
    border: 2px solid rgba(168, 85, 247, 0.5);
    border-radius: 20px;
    padding: 30px 25px 25px;
    max-width: 550px;
    width: 100%;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.gift-ribbon-corner {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 120px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

.gift-ribbon-corner::before {
    content: "🎁 إهداء";
    position: absolute;
    width: 150%;
    height: 35px;
    background: linear-gradient(45deg, #7c3aed, #a855f7);
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4);
    transform: rotate(45deg) translateY(-20px);
    top: 25px;
    right: -25px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    line-height: 35px;
    letter-spacing: 1px;
}

.hanging-garland {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C%200%20Q10%2C%2015%2020%2C%200%20Q30%2C%2015%2040%2C%200%20Q50%2C%2015%2060%2C%200%20Q70%2C%2015%2080%2C%200%20Q90%2C%2015%20100%2C%200%22%20fill%3D%22none%22%20stroke%3D%22%23A855F7%22%20stroke-width%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%227.5%22%20r%3D%222.5%22%20fill%3D%22%23FFD700%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%227.5%22%20r%3D%222.5%22%20fill%3D%22%2300d4ff%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%227.5%22%20r%3D%222.5%22%20fill%3D%22%2310b981%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%227.5%22%20r%3D%222.5%22%20fill%3D%22%23ff0055%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%227.5%22%20r%3D%222.5%22%20fill%3D%22%23FFD700%22%2F%3E%3C%2Fsvg%3E");
    background-size: 100px 100%;
    background-repeat: repeat-x;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
}

.console-world-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 40%, #0a0f1c 100%);
    border-radius: 24px;
    margin: 20px auto;
    max-width: 1300px;
}

.console-world-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .console-world-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.console-mega-card {
    position: relative;
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: #0a0f1c;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .console-mega-card {
        height: 420px;
    }
}

.console-mega-card:hover {
    transform: translateY(-8px);
}

.console-mega-card .mega-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.console-mega-card:hover .mega-bg {
    transform: scale(1.08) translateZ(0);
}

.console-mega-card .mega-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.1) 0%, rgba(10, 15, 28, 0.4) 45%, rgba(10, 15, 28, 0.95) 100%);
    pointer-events: none;
}

.console-mega-card .mega-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 35px 30px;
    text-align: center;
    z-index: 2;
}

.console-mega-card .mega-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    text-shadow: 0 0 15px currentColor;
    animation: megaIconFloat 3s ease-in-out infinite;
    will-change: transform;
    display: inline-block;
    transform: translateZ(0);
}

@keyframes megaIconFloat {
    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-8px) translateZ(0);
    }
}

.console-mega-card .mega-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: 1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.console-mega-card .mega-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0 0 22px;
    line-height: 1.6;
}

.console-mega-card .mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all .3s ease;
}

.console-mega-card:hover .mega-cta {
    background: #fff;
    color: #0a0f1c;
    border-color: #fff;
    gap: 16px;
}

.console-mega-card .mega-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.console-mega-card.ps-card .mega-icon {
    color: #0070d1;
}

.console-mega-card.ps-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(0, 112, 209, 0.35), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.console-mega-card.ps-card .mega-badge {
    color: #4ab4ff;
    border-color: rgba(0, 112, 209, 0.4);
}

.console-mega-card.ps-card:hover {
    box-shadow: 0 20px 50px rgba(0, 112, 209, 0.35);
}

.console-mega-card.xbox-card .mega-icon {
    color: #10e510;
}

.console-mega-card.xbox-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(16, 229, 16, 0.3), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.console-mega-card.xbox-card .mega-badge {
    color: #6cff6c;
    border-color: rgba(16, 229, 16, 0.4);
}

.console-mega-card.xbox-card:hover {
    box-shadow: 0 20px 50px rgba(16, 229, 16, 0.35);
}

.add-to-cart-btn {
background-color: #28a745;
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    justify-content: center;
position: relative !important;
}

.add-to-cart-btn::after {
    content: "أضف إلى السلة";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: rgba(20, 10, 40, 0.85);
    color: rgba(220, 200, 255, 0.95);
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Tajawal", "Cairo", sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(150, 80, 255, 0.35);
    z-index: var(--berlin-z-tooltip);
    will-change: opacity, transform;
}

.add-to-cart-btn::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(20, 10, 40, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: var(--berlin-z-tooltip);
}

.add-to-cart-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.add-to-cart-btn:hover::before {
    opacity: 1;
}

html[lang="en"] .add-to-cart-btn::after,
body[dir="ltr"] .add-to-cart-btn::after {
    content: "Add to Cart";
}

@media (max-width: 768px) {
    #paymentModal:has(#vodafoneDetails.is-visible) {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    #paymentModal:has(#vodafoneDetails.is-visible) .modal-body {
        padding: 60px 15px 20px !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    #paymentModal:has(#vodafoneDetails.is-visible) .close-btn {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 10 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

#console-world-section {
    background: linear-gradient(135deg, #1a0b2e 0%, #16213e 50%, #0f0a1e 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15) !important;
}

#console-world-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%20viewBox%3D%270%200%20140%20140%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23a855f7%27%20stroke-width%3D%271.5%27%20opacity%3D%270.5%27%3E%3Cpath%20d%3D%27M30%2050%20Q22%2050%2022%2060%20L22%2075%20Q22%2085%2032%2085%20L42%2085%20L52%2075%20L88%2075%20L98%2085%20L108%2085%20Q118%2085%20118%2075%20L118%2060%20Q118%2050%20110%2050%20L90%2050%20L85%2045%20L55%2045%20L50%2050%20Z%27%2F%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2762%27%20r%3D%274%27%2F%3E%3Cline%20x1%3D%2738%27%20y1%3D%2758%27%20x2%3D%2738%27%20y2%3D%2766%27%2F%3E%3Cline%20x1%3D%2734%27%20y1%3D%2762%27%20x2%3D%2742%27%20y2%3D%2762%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2758%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%27106%27%20cy%3D%2762%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2766%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2794%27%20cy%3D%2762%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

#console-world-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.25) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.25) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

#console-world-section > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    #console-world-section {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    #console-world-section::before,
    #console-world-section::after {
        display: none !important;
    }
}

@media (min-width: 769px) {
    #console-world-section {
        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%) !important;
        position: relative !important;
        overflow: hidden !important;
        border: 1px solid rgba(99, 102, 241, 0.15) !important;
        border-radius: 20px !important;
    }

    #console-world-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle, rgba(96, 165, 250, .14) 0 1px, transparent 1.5px);
        background-repeat: repeat;
        background-size: 44px 44px;
        pointer-events: none;
        z-index: 0;
    }

    #console-world-section::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at top right, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    #console-world-section > * {
        position: relative;
        z-index: 1;
    }
}

.epic-banner {
    width: 90%;
    max-width: 650px;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px;
}

@media (min-width: 768px) {
    .epic-banner {
        margin-top: -105px;
    }
}

.auth-social-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 15px;
}

.google-auth-btn.main-social-btn {
    flex-grow: 1;
    margin-bottom: 0 !important;
}

.ms-auth-glass-container {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(6px, -1px);
}

.ms-auth-glass-container img {
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    object-fit: contain;
}

.google-auth-btn,
.google-auth-btn span,
.google-auth-btn.main-social-btn,
.google-auth-btn.main-social-btn span {
    color: #3c4043 !important;
}

@media (max-width: 768px) {
    #giftingCalculatorModal [data-mobile-fix="gift-badge"],
    #giftingCalculatorModal .status-badge-left {
        display: none !important;
        margin-top: 0 !important;
    }

    #giftingCalculatorModal {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        transform: none !important;
        background: rgba(15, 8, 28, 0.98) !important;
        z-index: var(--berlin-z-modal) !important;
        display: none;
        flex-direction: column !important;
    }

    #giftingCalculatorModal.is-visible {
        display: flex !important;
        animation: none !important;
        transform: none !important;
    }

    #giftingCalculatorModal .close-btn {
        position: sticky !important;
        top: 0 !important;
        align-self: flex-start !important;
        margin: 10px 14px 0 !important;
        background: rgba(239, 68, 68, 0.18) !important;
        border: 1px solid rgba(239, 68, 68, 0.5) !important;
        color: #ef4444 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.4rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    #giftingCalculatorModal .modal-body {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 12px 16px 24px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    #giftingCalculatorModal h2 {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
        margin: 0 0 12px !important;
        text-align: center;
    }

    #giftingCalculatorModal .modal-description {
        font-size: 0.85rem !important;
        margin-bottom: 14px !important;
        text-align: center;
    }

    #giftingCalculatorModal .input-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }

    #giftingCalculatorModal .input-wrapper input {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        font-size: 14px !important;
    }

    .gift-game-row {
        padding: 10px !important;
        margin-bottom: 0 !important;
    }

    .gift-game-row .input-wrapper {
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
    }

    .gift-game-row .input-wrapper input {
        font-size: 13px !important;
    }

    .gift-remove-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }

    #giftingGamesContainer + button {
        font-size: 0.9rem !important;
        padding: 11px !important;
        margin-top: 12px !important;
        width: 100%;
    }

    #giftingFinalPriceDisplay {
        font-size: 1rem !important;
        padding: 14px !important;
        margin-top: 14px !important;
        text-align: center;
    }

    #proceedToGiftingPaymentBtn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
        margin-top: 8px !important;
    }

    #giftingCalculatorModal .tooltip-content {
        max-width: 85vw !important;
        font-size: 12px !important;
    }
}

#giftingCalculatorModal {
    background-image: linear-gradient(rgba(15, 8, 28, 0.95), rgba(15, 8, 28, 0.98)), url("https://i.postimg.cc/qBhtmSXf/which-games-has-the-most-beautiful-and-soothing-natural-v0-t3oe3x3hz6xb1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.gift-name-tooltip .tooltip-content {
    width: 300px;
    max-width: 85vw;
    text-align: center;
    padding: 12px !important;
}

.gift-name-tooltip .tooltip-content img {
    width: 100%;
    height: auto !important;
    border: 1px solid rgba(0, 192, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    display: block;
}

.gift-name-tooltip .tooltip-content h4 {
    color: #00c0ff;
    margin-bottom: 6px;
    font-size: 16px;
}

#vodafone-back-btn i {
    font-size: 11px;
}

@media (max-width: 600px) {
    #vodafone-back-btn {
        top: 10px;
        left: 44px;
        font-size: 10.5px;
        padding: 4px 9px;
    }
}

.payment-method-chooser {
    margin: 24px auto;
    max-width: 600px;
}

.pmc-question {
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.pmc-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pmc-option {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pmc-option:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 192, 255, 0.45);
    background: rgba(0, 192, 255, 0.06);
}

.pmc-option.active {
    border-color: #00c0ff;
    background: rgba(0, 192, 255, 0.12);
    box-shadow: 0 0 18px rgba(0, 192, 255, 0.25);
}

.pmc-option img {
    width: 60px;
    height: 38px;
    object-fit: contain;
}

.pmc-option span {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

#vodafone-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(0, 192, 255, 0.5);
}

.instapay-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #d40060, #ff2885);
    color: #fff !important;
    text-decoration: none !important;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-family: inherit;
    margin: 8px 0;
    transition: 0.2s;
}

.instapay-quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 0, 96, 0.45);
}

@media (max-width: 600px) {
    .pmc-option img {
        width: 48px;
        height: 32px;
    }

    .pmc-option span {
        font-size: 11px;
    }

    .pmc-option {
        padding: 12px 6px;
    }
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .85rem;
    color: #94a3b8;
    margin-bottom: 12px;
    direction: rtl;
}

.product-breadcrumb a,
.product-breadcrumb span.crumb-link {
    color: #94a3b8;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
}

.product-breadcrumb a:hover,
.product-breadcrumb span.crumb-link:hover {
    color: #FFD700;
}

.product-breadcrumb .crumb-sep {
    opacity: .5;
    font-size: .75rem;
}

.product-breadcrumb .crumb-current {
    color: #fff;
    font-weight: 600;
}

.product-category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .25), rgba(0, 200, 255, .18));
    border: 1px solid rgba(124, 58, 237, .45);
    color: #c4b5fd;
    font-size: .75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.similar-products-section {
    margin-top: 32px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.similar-products-section h2 {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.similar-products-section h2::before {
    content: "";
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #FFD700, #7c3aed);
    border-radius: 2px;
}

.similar-products-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
}

.similar-product-card {
    background: rgba(15, 23, 42, .6);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
}

.similar-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, .5);
    box-shadow: 0 8px 22px rgba(124, 58, 237, .25);
}

.similar-product-card .sp-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #0a0f1c;
}

.similar-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.similar-product-card .sp-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.similar-product-card .sp-title {
    font-size: .75rem;
    color: #e2e8f0;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2em;
}

.similar-product-card .sp-price {
    font-size: .82rem;
    color: #FFD700;
    font-weight: bold;
}

.similar-product-card .sp-cart-btn {
    margin-top: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #00c8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.similar-product-card .sp-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .4);
    filter: brightness(1.1);
}

.similar-product-card .sp-cart-btn i {
    font-size: .8rem;
}

@media (max-width: 600px) {
    .similar-products-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .similar-product-card .sp-title {
        font-size: .72rem;
    }

    .similar-product-card .sp-cart-btn {
        font-size: .68rem;
        padding: 5px 6px;
    }
}

.product-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.product-title-row h1 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.product-title-row .product-category-badge {
    margin: 0;
    flex-shrink: 0;
}

.performance-mode * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
    * {
filter: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
}

    .product-item,
    .navbar,
    .modal,
    .scratch-badge {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
}

.performance-mode .product-item,
.performance-mode .service-offer-card {
    box-shadow: none !important;
}

.fab-main-button {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.fab-main-button.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: 0 0 35px rgba(213, 0, 249, 0.9), 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    transform: scale(1.1) !important;
}

.mobile-fab-container.is-dragging {
    transition: none !important;
}

#vodafone-back-btn {
position: absolute;
    top: 9px;
    left: 500px;
    z-index: 10;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    gap: 6px;
    line-height: 1;
display: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 14px;
    transition: 0.2s;
    align-items: center;
    gap: 8px;
display: none !important;
}

#vodafone-back-btn.is-visible {
    display: flex !important;
}

#offlineSteamContainer .platform-icon,
#offlineSteamContainer .product-description-text {
    display: none !important;
}

#offlineSteamContainer .product-buttons-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

#offlineSteamContainer .buy-btn {
    flex: 1 !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background-color: var(--green-buy-btn) !important;
    border: 2px solid var(--green-buy-btn) !important;
    color: #fff !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
}

#offlineSteamContainer .buy-btn::after {
    content: none !important;
}

#offlineSteamContainer .add-to-cart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

#offlineSteamContainer .add-to-cart-btn img {
    width: 28px !important;
    height: 28px !important;
}

.close-page-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: var(--berlin-z-modal);
    padding: 0;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.close-page-btn:hover {
    background: rgba(255, 71, 87, 0.2);
    border-color: #ff4757;
    color: #ff4757;
}

.close-page-btn i {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 480px) {
    .close-page-btn {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

.product-card {
    content-visibility: visible;
    contain-intrinsic-size: 320px 400px;
}

.card-frozen {
    backdrop-filter: none !important;
    animation: none !important;
    box-shadow: none !important;
}

.lite-mode .glass-card,
.lite-mode [class*="glass"] {
    background: rgba(20, 20, 30, 0.95) !important;
}

.lite-mode * {
backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
box-shadow: none !important;
}

@media (max-width: 768px) {
    .king-element,
    .diamond-element,
    .glowing-element,
    .poison-element,
    [class*="rgb-"],
    [class*="-glow"],
    [class*="-pulse"] {
        animation-duration: 4s !important;
    }
}

body.is-scrolling [class*="-glow"],
body.is-scrolling [class*="-pulse"],
body.is-scrolling [class*="rgb-"] {
    animation-play-state: paused !important;
}

#usd-suggestion-toast {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 360px;
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3548 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    z-index: var(--berlin-z-toast);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    direction: ltr;
    text-align: left;
    font-family: "Cairo", "Tajawal", sans-serif;
}

#usd-suggestion-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.usd-toast-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.usd-toast-body {
    flex: 1;
}

.usd-toast-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: #fff;
}

.usd-toast-text {
    font-size: 13px;
    color: #b8c2d4;
    line-height: 1.4;
    margin-bottom: 12px;
}

.usd-toast-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.usd-toast-btn-yes,
.usd-toast-btn-no {
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.usd-toast-btn-yes {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #052e16;
}

.usd-toast-btn-yes:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.usd-toast-btn-no {
    background: rgba(255, 255, 255, 0.08);
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.usd-toast-btn-no:hover {
    background: rgba(255, 255, 255, 0.12);
}

.usd-toast-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.usd-toast-close:hover {
    color: #fff;
}

@media (max-width: 480px) {
    #usd-suggestion-toast {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}

button#vodafone-back-btn,
button#vodafone-back-btn.is-visible,
#vodafoneDetails #vodafone-back-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.payment-header-box:has( > #paymentStepLabel),
#productBreadcrumb .crumb-current,
#productBreadcrumb .crumb-sep:last-of-type{
    display: none !important;
}@media (max-width: 768px) {
    #productBreadcrumb,
    .product-breadcrumb {
        display: none !important;
    }
}

body.is-scrolling .product-item,
body.is-scrolling .glowing-element,
body.is-scrolling .king-element,
body.is-scrolling .diamond-element,
body.is-scrolling .poison-element,
body.is-scrolling .platform-icon,
body.is-scrolling [class*="rgb-"],
body.is-scrolling .checkout-btn-centered,
body.is-scrolling [style*="animation:"] {
    animation-play-state: paused !important;
}

@media (max-width: 900px), (pointer: coarse) {
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .product-item,
    .glass-card,
    .modal,
    .modal-content,
    .popup-box {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }

    .product-item:hover {
        animation: none !important;
    }
}

.product-item,
.subscription-item,
.rental-card {
    contain: content;
}

.product-section,
.category-section,
.games-section,
.subscriptions-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

#live-chat-button,
#scratchBadge,
.scratch-badge,
#connection-status,
.connection-status,
#notification-bell,
.notification-bell,
.floating-button,
.mobile-header,
#instant-splash {
    contain: none !important;
    content-visibility: visible !important;
    transform: none !important;
    will-change: auto !important;
}

body::before,
body::after,
#sec-products::before,
#sec-products::after,
.main-wrapper::before,
.main-wrapper::after {
    animation: none !important;
    filter: none !important;
}

body::before {
    filter: blur(40px) !important;
    will-change: auto !important;
}

*,
*::before,
*::after {
    background-attachment: scroll !important;
}

.checkout-btn-centered,
.checkout-btn-centered:hover,
[class*="pulseButton"],
[style*="pulseButton"] {
    animation: none !important;
}

[class*="rgb-outline"],
.rgb-glow-pulse-intense {
    animation-duration: 10s !important;
}

@media (max-width: 900px), (pointer: coarse) {
    *::before,
    *::after,
.poison-element,
    .glowing-element,
    [class*="glow"]::before,
    [class*="glow"]::after{
        filter: none !important;
    }[class*="rgb-"],
    .king-element,
    .diamond-element {
        box-shadow: none !important;
    }

    body::before,
    body::after,
    .main-wrapper::before,
    .main-wrapper::after {
        display: none !important;
    }
}

@media (max-width: 900px) {
    h1,
    h2,
    h3,
    .title,
    .heading {
        text-shadow: none !important;
    }
}

@media (max-width: 600px) {
    .load-more-decor-wrap::before,
    .load-more-decor-wrap::after {
        display: none;
    }
}

.goe-shelf-layout {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.goe-shelf-product-area {
    display: flex;
    justify-content: flex-end;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.goe-shelf-product-img {
    margin-bottom: -30px;
    cursor: pointer;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

.goe-shelf-product-img:hover {
    transform: translateY(-12px) scale(1.05);
}

.goe-shelf-product-img img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
}

.goe-shelf-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -4px;
}

.goe-shelf-line {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 5%, rgba(255, 255, 255, 0.9) 15%, #ffffff 30%, #ffffff 70%, rgba(255, 255, 255, 0.9) 85%, rgba(255, 255, 255, 0.4) 95%, transparent 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.2);
}

.goe-shelf-surface {
    height: 10px;
    background: linear-gradient(180deg, rgba(200, 210, 230, 0.18) 0%, rgba(180, 195, 220, 0.12) 40%, rgba(150, 165, 190, 0.06) 70%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.goe-shelf-shadow {
    height: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 100%);
}

.goe-shelf-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 12px 50px 0;
    text-align: center;
}

.goe-shelf-info h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.4;
    max-width: 280px;
}

.goe-shelf-desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: #7a84a0;
    line-height: 1.5;
    max-width: 240px;
}

.goe-shelf-price {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 240px;
}

.goe-shelf-price-label {
    font-size: 12px;
    color: #999;
}

.goe-shelf-price-value {
    font-size: 22px;
    font-weight: 800;
    color: #6ee7b7;
}

.goe-shelf-discount {
    display: inline-flex;
    align-items: center;
    background: #d32f2f;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    gap: 4px;
}

.goe-shelf-discount s {
    opacity: 0.8;
    font-size: 9px;
}

.goe-shelf-buttons {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 240px;
}

.goe-shelf-buy-btn {
    padding: 10px 28px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    font-family: "Cairo", "Tajawal", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

.goe-shelf-buy-btn:hover {
    background: linear-gradient(135deg, #ffe14d 0%, #ffbb00 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.45);
    transform: translateY(-2px);
}

.goe-shelf-cart-btn {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.goe-shelf-cart-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .goe-shelf-product-area {
        justify-content: center;
        padding: 0 20px;
    }

    .goe-shelf-product-img img {
        width: 120px;
        height: 120px;
    }

    .goe-shelf-info {
        align-items: center;
        padding: 12px 20px 0;
    }

    .goe-shelf-info h3 {
        font-size: 18px;
    }
}

#goe-app-section {
    background-image: linear-gradient(rgba(10, 15, 28, 0.7), rgba(10, 15, 28, 0.85)), url("https://img.freepik.com/free-photo/black-wall-empty-room-with-concrete-floor_53876-138051.jpg?semt=ais_hybrid&w=740&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#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;
padding: 15px 10px !important;
}

.goe-shelf-features-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px 0;
    padding: 10px 18px;
    background: rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 12px;
    color: #c7d2fe;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    will-change: transform;
}

.goe-shelf-features-btn:hover {
    background: rgba(102, 126, 234, 0.25);
    border-color: rgba(102, 126, 234, 0.7);
    color: #ffffff;
    transform: translateY(-2px);
}

.goe-shelf-features-btn .fa-circle-info {
    color: #a78bfa;
    font-size: 14px;
}

.goe-shelf-features-btn .fa-arrow-left {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.goe-shelf-features-btn:hover .fa-arrow-left {
    transform: translateX(-4px);
}

@media (max-width: 600px) {
    .goe-shelf-features-btn {
        font-size: 12px;
        padding: 9px 14px;
    }
}

@media (max-width: 768px) {

    #app-layout,
    .main-content,
    .page-background,
    #home,
    #sec-products,
    section {
        background: transparent !important;
    }
}

.subscription-item .subscription-cart-btn {
    background-color: var(--accent-yellow) !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.subscription-item .subscription-cart-btn i {
    font-size: 1.1rem;
    line-height: 1;
    color: #1a1a1a;
}

.subscription-item .subscription-cart-btn:hover {
    background-color: #e6b800 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
}

.subscription-item .subscription-cart-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .subscription-item .subscription-cart-btn {
        display: none !important;
    }
}

.tutorial-side-card {
    position: fixed;
    bottom: 100px;
    left: -320px;
    width: 260px;
    background: linear-gradient(135deg, rgba(20, 10, 35, 0.95), rgba(138, 43, 226, 0.3));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(138, 43, 226, 0.5);
    border-radius: 0 20px 20px 0;
    padding: 20px 15px;
    box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.6);
    z-index: var(--berlin-z-floating, 500);
    direction: rtl;
    transition: left .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    transform: rotate(5deg);
}

.tutorial-side-card.show {
    left: 0;
    transform: rotate(-2deg);
}

.tutorial-side-card:hover {
    transform: rotate(0deg) scale(1.02);
    border-color: #00c0ff;
}

.close-tutorial-btn {
    position: absolute;
    top: 5px;
    left: 10px;
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.close-tutorial-btn:hover {
    color: #ff4757;
    transform: scale(1.2);
}

.tutorial-content {
    text-align: center;
    color: #fff;
}

.tutorial-content h4 {
    color: #00c0ff;
    margin: 10px 0 5px;
    font-size: 1.1rem;
    font-weight: 800;
}

.tutorial-content p {
    font-size: 0.85rem;
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.4;
}

.pulse-icon {
    font-size: 35px;
    color: #fc0;
    animation: pulse-anim 2s infinite;
}

@keyframes pulse-anim {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 204, 0, 0));
    }

    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.6));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 204, 0, 0));
    }
}

.video-placeholder {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed #a855f7;
    border-radius: 12px;
    padding: 15px 0;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.video-placeholder:hover {
    background: rgba(168, 85, 247, 0.2);
    border-style: solid;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.video-placeholder i {
    font-size: 28px;
    color: #a855f7;
}

.video-placeholder span {
    font-size: 0.8rem;
    font-weight: bold;
    color: #e0d4fc;
}

#autoDeliveryOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#autoDeliveryOverlay .auto-delivery-card {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

@media (max-width: 768px) {
    #autoDeliveryOverlay {
        padding: 10px !important;
        align-items: center !important;
    }

    #autoDeliveryOverlay .auto-delivery-card {
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 88vh !important;
        padding: 18px 14px !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }
}

#my-orders-page #orders-list-container.orders-list-grid {
    margin-top: -10px !important;
}

#game-topup-section .gaming-header-container h2::after {
    display: none !important;
    content: none !important;
}

#game-topup-section .gaming-header-container h2 {
    border-right: none !important;
    border-left: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 768px) {
    #first-time-tutorial-card,
    #first-time-tutorial-card.tutorial-side-card,
    #first-time-tutorial-card.tutorial-side-card.show,
    #tutorialVideoModal {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        left: -9999px !important;
    }
}

.ticket-card {
    border-color: rgba(16, 185, 129, 0.55) !important;
}

.ticket-card .icon-wrapper {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #10b981 !important;
}

.ticket-card .action-icon {
    color: #10b981 !important;
}

.support-card.ticket-card {
    border-color: rgba(16, 185, 129, 0.45) !important;
}

.support-card.ticket-card .icon-wrapper,
.support-card.ticket-card .action-icon {
    color: #10b981 !important;
}

.support-card.inbox-card {
    border-color: rgba(0, 212, 255, 0.45) !important;
}

.support-card.inbox-card .icon-wrapper,
.support-card.inbox-card .action-icon {
    color: #00d4ff !important;
}

.support-card.live-chat-card {
    border-color: rgba(124, 58, 237, 0.45) !important;
}

.support-card.live-chat-card .icon-wrapper,
.support-card.live-chat-card .action-icon {
    color: #8b5cf6 !important;
}

.support-card.discord-card .icon-wrapper,
.support-card.discord-card .action-icon {
    color: #5865f2 !important;
}

.support-card.email-card .icon-wrapper,
.support-card.email-card .action-icon {
    color: #facc15 !important;
}

@media (max-width: 650px) {
    .support-smart-grid {
        grid-template-columns: 1fr;
    }

    .support-need-card {
        min-height: auto;
    }
}

#user-notification-wrapper.dropdown-bell-wrapper,
.dropdown-bell-wrapper {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 10 !important;
}

#dropdown-notification-icon::before,
#dropdown-notification-icon::after,
#dropdown-notification-icon:hover::before,
#dropdown-notification-icon:hover::after,
.dropdown-bell-wrapper::before,
.dropdown-bell-wrapper::after,
.dropdown-bell-wrapper:hover::before,
.dropdown-bell-wrapper:hover::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#dropdown-notification-icon .user-notification-count,
#user-notification-count {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #fff !important;
    line-height: 18px !important;
}

.dropdown-notification-panel,
#user-notification-panel {
    position: absolute !important;
    top: 42px !important;
    right: -8px !important;
    width: 235px !important;
    max-height: 270px !important;
    overflow-y: auto !important;
    background: rgba(18, 10, 32, 0.98) !important;
    border: 1px solid rgba(255, 204, 0, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    display: none !important;
    padding: 10px !important;
    color: #fff !important;
    z-index: var(--berlin-z-dropdown) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(15px) !important;
}

.dropdown-notification-panel.show,
#user-notification-panel.show {
    display: block !important;
}

.user-notification-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-notification-header strong {
    color: var(--accent-yellow) !important;
    font-size: 13px !important;
}

.user-notification-clear {
    background: transparent !important;
    border: none !important;
    color: #a78bfa !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 0 !important;
}

.user-notification-item {
    display: flex !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}

.user-notification-item:hover {
    background: rgba(255, 204, 0, 0.1) !important;
    border-color: rgba(255, 204, 0, 0.3) !important;
}

.user-notification-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.user-notification-icon.order {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #10b981 !important;
}

.user-notification-icon.support {
    background: rgba(124, 58, 237, 0.16) !important;
    color: #a78bfa !important;
}

.user-notification-title {
    font-weight: 900 !important;
    font-size: 0.82rem !important;
    margin-bottom: 3px !important;
    color: #fff !important;
}

.user-notification-text {
    color: #cbd5e1 !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
}

.user-notification-empty {
    text-align: center !important;
    color: #aaa !important;
    padding: 18px 8px !important;
    font-size: 0.85rem !important;
}

#dropdown-notification-icon i {
    position: relative !important;
    left: -4px !important;
}

#dropdown-notification-icon {
width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 204, 0, 0.45) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 15px !important;
    padding: 0 !important;
    position: relative !important;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.15) !important;
background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 204, 0, 0.42) !important;
    color: var(--accent-yellow) !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.16) !important;
}

#dropdown-notification-icon:hover {
    background: rgba(255, 204, 0, 0.12) !important;
    border-color: rgba(255, 204, 0, 0.6) !important;
}

.customer-support-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
    border: none;
}

.customer-support-header p {
    margin: 6px 0 0;
    color: #cbd5e1;
    font-size: 0.9rem;
}

.customer-support-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.customer-support-thread-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.customer-support-thread-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.support-back-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 700;
}

.support-back-btn:hover {
    background: rgba(124, 58, 237, 0.35);
}

.customer-support-thread-title {
    flex: 1;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 10px 12px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-support-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.customer-support-reply-bar {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: flex-end;
}

.customer-support-reply-bar textarea {
    flex: 1;
    min-height: 48px;
    max-height: 120px;
    resize: vertical;
}

.customer-support-send-btn {
    width: auto !important;
    min-width: 110px;
    height: 48px;
    margin: 0 !important;
    white-space: nowrap;
}

.inbox-card .icon-wrapper {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

@media (max-width: 768px) {
    .customer-support-body {
        width: 96%;
        height: 88vh;
        padding: 14px;
        border-radius: 18px;
    }

    .customer-support-reply-bar {
        flex-direction: column;
    }

    .customer-support-send-btn {
        width: 100% !important;
    }

    .customer-support-thread-title {
        font-size: 0.82rem;
    }
}

.support-combined-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.support-combined-card .text-wrapper {
    flex: 1;
}

.support-combined-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.support-mini-btn {
    border: none;
    border-radius: 14px;
    padding: 9px 12px;
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.25s ease;
    white-space: nowrap;
}

.ticket-mini-btn {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.inbox-mini-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.support-mini-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

@media (max-width: 600px) {
    .support-combined-card {
        gap: 10px;
    }

    .support-combined-actions {
        gap: 6px;
    }

    .support-mini-btn {
        padding: 8px 9px;
        font-size: 0.72rem;
    }

    .support-mini-btn span {
        display: none;
    }

    .support-mini-btn i {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    #account-details-container .input-wrapper:focus-within .confirm-fly-btn {
        top: -55px !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    #account-details-container .input-wrapper:focus-within .confirm-fly-btn:hover {
        transform: translateX(-50%) translateY(-3px) !important;
    }

    #account-details-container .input-wrapper:focus-within .confirm-fly-btn:active {
        transform: translateX(-50%) translateY(0) !important;
    }

    .dropdown-notification-panel,
    #user-notification-panel {
right: -20px !important;
        width: 230px !important;
        max-height: 260px !important;
position: fixed !important;
        top: 82px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        min-width: 0 !important;
        max-height: min(70vh, 430px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        z-index: var(--berlin-z-dropdown) !important;
}

    .dropdown-notification-panel.show,
    #user-notification-panel.show {
        display: block !important;
    }

    .user-notification-header {
        gap: 8px !important;
        align-items: center !important;
    }

    .user-notification-header strong {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .user-notification-clear {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .user-notification-item {
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    .user-notification-title,
    .user-notification-text {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .user-notification-text {
        font-size: 0.78rem !important;
        line-height: 1.6 !important;
    }

    #user-notification-wrapper.dropdown-bell-wrapper,
    .dropdown-bell-wrapper {
        top: 12px !important;
        right: 14px !important;
    }

    #dropdown-notification-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }
}

.steam-region-section-subtitle {
    text-align: center;
    color: #b8c7d9;
    margin: 8px auto 22px;
    font-size: 0.95rem;
}

.steam-region-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

#steamGiftCardsHomeContainer .product-item.category-card img {
    max-height: 104px !important;
    object-fit: contain !important;
}

#steamGiftCardsHomeContainer .lazy-loader {
    width: 100%;
    text-align: center;
    grid-column: 1 / -1;
    justify-self: center;
}

.steam-gift-page-hero {
    max-width: 1200px;
    margin: 0 auto 25px;
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient( 135deg, rgba(0, 173, 238, 0.14), rgba(15, 15, 30, 0.92) );
    border: 1px solid rgba(0, 173, 238, 0.22);
    text-align: center;
}

.steam-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: 0.25s ease;
}

.steam-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.steam-gift-page-title-box h1 {
    margin: 0;
    color: #fff;
    font-size: 2rem;
}

.steam-gift-page-title-box h1 i {
    color: #00adee;
    margin-left: 8px;
}

.steam-gift-page-title-box p {
    color: #b8c7d9;
    margin: 10px 0 0;
}

.steam-page-region-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.steam-page-region-btn {
    border: 1px solid rgba(0, 173, 238, 0.35);
    background: rgba(0, 173, 238, 0.08);
    color: #dff7ff;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: 0.25s ease;
}

.steam-page-region-btn.active,
.steam-page-region-btn:hover {
    background: linear-gradient(135deg, #00adee, #0077ff);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(0, 173, 238, 0.45);
}

#steamGiftCardsPageContainer {
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .steam-gift-cards-page {
        padding: 90px 12px 30px;
    }

    .steam-gift-page-title-box h1 {
        font-size: 1.5rem;
    }

    .steam-page-region-btn {
        padding: 7px 12px;
        font-size: 0.85rem;
    }

    .steam-region-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
        gap: 10px;
        padding-inline: 4px;
        box-sizing: border-box;
    }

    #steamGiftCardsHomeContainer .product-item.category-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 176px !important;
        padding: 7px !important;
    }

    #steamGiftCardsHomeContainer .product-item.category-card .product-image-wrapper {
        height: clamp(86px, 27vw, 108px) !important;
        border-radius: 12px !important;
    }

    #steamGiftCardsHomeContainer .product-item.category-card img {
        max-height: clamp(76px, 24vw, 96px) !important;
    }

    #steamGiftCardsHomeContainer .product-item.category-card h3 {
        margin: 7px 0 2px !important;
        font-size: clamp(0.78rem, 3.8vw, 0.94rem) !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere;
    }

    #steamGiftCardsHomeContainer .product-item.category-card h3 small {
        font-size: clamp(0.66rem, 3.15vw, 0.78rem) !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 300px) {
    .steam-region-home-grid {
        grid-template-columns: 1fr;
        max-width: 190px;
    }
}

@media (max-width: 600px) {
    #steamGiftCardsPageContainer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 29px !important;
        padding: 12px !important;
    }

    #steamGiftCardsPageContainer .product-item {
        margin: 0 !important;
    }
}

#steam-gift-cards-section {
border-radius: 15px;
    border: 1px solid #00c0ff;
    animation: steam-section-glow 3s infinite linear;
background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(./images/steamwallpaper.png);
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
content-visibility: auto;
    contain-intrinsic-size: 500px;
}

.steam-gift-cards-page {
min-height: 100vh;
    padding: 15px 20px 40px;
content-visibility: auto;
    contain-intrinsic-size: 900px;
}

#steamGiftCardsHomeContainer,
#steamGiftCardsPageContainer {
    content-visibility: auto;
}

#steamGiftCardsHomeContainer .product-item.category-card {
width: 100% !important;
    max-width: 200px !important;
    min-width: 0 !important;
    min-height: 210px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
background: linear-gradient( 135deg, rgba(0, 70, 120, 0.65), rgba(8, 22, 42, 0.96) ) !important;
    border: 1px solid rgba(0, 173, 238, 0.45) !important;
    box-shadow: 0 0 18px rgba(0, 173, 238, 0.22), inset 0 0 25px rgba(0, 173, 238, 0.06) !important;
}

#steamGiftCardsHomeContainer .product-item.category-card .product-image-wrapper {
height: 118px !important;
background: linear-gradient( 180deg, rgba(0, 173, 238, 0.18), rgba(5, 20, 38, 0.92) ) !important;
    border-radius: 16px !important;
}

#steamGiftCardsHomeContainer .product-item.category-card h3 {
min-height: 0 !important;
    margin: 8px 0 3px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
color: #dff7ff !important;
    text-shadow: 0 0 10px rgba(0, 173, 238, 0.35) !important;
}

#steamGiftCardsHomeContainer .product-item.category-card h3 small {
display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.4;
color: #9feaff !important;
}

#steamGiftCardsPageContainer .product-item {
    background: linear-gradient( 135deg, rgba(0, 68, 115, 0.65), rgba(7, 18, 34, 0.96) ) !important;
    border: 1px solid rgba(0, 173, 238, 0.42) !important;
    box-shadow: 0 0 16px rgba(0, 173, 238, 0.2), inset 0 0 22px rgba(0, 173, 238, 0.06) !important;
}

@media (max-width: 600px) {
    #user-profile-nav-btn {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

.custom-select-container {
position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
position: relative !important;
    z-index: var(--berlin-z-modal) !important;
}

#custom-payment-selector {
    position: relative !important;
    z-index: 11 !important;
}

#custom-payment-options.payment-options-portal {
    display: none !important;
    position: fixed !important;
    z-index: var(--berlin-z-priority-modal) !important;
    left: auto;
    right: auto;
    top: auto;
    max-width: calc(100vw - 16px) !important;
    max-height: min(260px, calc(100vh - 16px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(145deg, #0b0714, #1d1033) !important;
    border: 1px solid #8e6abf !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 204, 0, 0.18), 0 0 25px rgba(142, 106, 191, 0.35) !important;
    padding: 6px 0 !important;
    direction: rtl !important;
    font-family: "Tajawal", "Cairo", sans-serif !important;
}

#custom-payment-options.payment-options-portal.is-open {
    display: block !important;
}

#custom-payment-options.payment-options-portal .custom-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 15px !important;
    cursor: pointer !important;
    color: #fff !important;
    background: transparent !important;
    transition: 0.2s ease !important;
}

#custom-payment-options.payment-options-portal .custom-option:hover {
    background: rgba(142, 106, 191, 0.18) !important;
    color: #ffcc00 !important;
    transform: scale(1.02) !important;
}

.modal,
.modal-body,
.modal-content,
.payment-details,
#checkoutModal,
#paymentModal,
#vodafoneDetails {
    overflow: visible !important;
}

.custom-option[data-value="binance"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.binance-pay-logo {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    background: #f3ba2f !important;
    padding: 7px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 14px rgba(243, 186, 47, 0.45) !important;
}

#home .hero-ads-layout {
    width: min(calc(100% - 48px), 910px) !important;
    margin: -28px auto 14px auto;
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(210px, 240px);
    justify-content: center;
    gap: 6px;
    align-items: start;
    direction: ltr;
    transform: none;
    content-visibility: auto;
    contain-intrinsic-size: 910px 282px;
}

#home .main-ad-banner.berlin-main-hero-banner .ad-link-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 11px !important;
    border: none !important;
    outline: none !important;
}

#home .main-ad-banner.berlin-main-hero-banner .hero-ad-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
    transition: opacity 0.2s ease !important;
    content-visibility: visible !important;
}

#home .hero-spotlight-zone {
    direction: rtl;
    height: 281px !important;
    max-height: 281px !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

#home .hero-spotlight-title-row {
    display: none !important;
}

#home .spotlight-stack {
    width: 100%;
    height: 100% !important;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
}

#home .spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transform: none;
    filter: none;
    transition: opacity 0.35s ease, transform 0.45s ease, filter 0.45s ease;
}

#home .spotlight-card.has-img .spotlight-img {
    opacity: 1;
}

#home .spotlight-card:hover .spotlight-img {
    transform: scale(1.025);
    filter: saturate(1.05) contrast(1.02);
}

#home .spotlight-badge {
    display: inline-flex !important;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.95);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    align-items: center;
    justify-content: center;
}

#home .spotlight-placeholder {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 800;
    font-size: 0.75rem;
    background: rgba(8, 20, 38, 0.88);
}

#home .spotlight-placeholder i {
    font-size: 1rem;
}

#home .spotlight-card.has-img .spotlight-placeholder {
    display: none;
}

#home .main-ad-banner.berlin-main-hero-banner .slide-item {
    width: 100%;
    height: 100%;
    transform: none !important;
    opacity: 0;
    transition: opacity 0.32s ease !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#home .main-ad-banner.berlin-main-hero-banner.hero-sliding .slide-item {
    will-change: opacity;
}

#home .main-ad-banner.berlin-main-hero-banner .slide-item.is-active {
    opacity: 1 !important;
    z-index: 3;
    pointer-events: auto;
}

#home .main-ad-banner.berlin-main-hero-banner .slide-item.is-buffer {
    opacity: 0 !important;
    z-index: 2;
    pointer-events: none;
}

#home .main-ad-banner.berlin-main-hero-banner .animate-move,
#home .main-ad-banner.berlin-main-hero-banner .move-left,
#home .main-ad-banner.berlin-main-hero-banner .move-center {
    transform: none !important;
    transition: opacity 0.32s ease !important;
}

#home .main-ad-banner.berlin-main-hero-banner .ad-link-wrapper::before,
#home .main-ad-banner.berlin-main-hero-banner .ad-link-wrapper::after {
    display: none !important;
}

#home .main-ad-banner.berlin-main-hero-banner .skeleton-loader {
    animation: none !important;
}

body.is-scrolling #home .hero-ads-layout *,
body.is-scrolling #home .main-ad-banner.berlin-main-hero-banner *,
body.is-scrolling #home .spotlight-card * {
    transition: none !important;
    animation-play-state: paused !important;
}

@media (max-width: 992px) {
    #home .hero-ads-layout {
        width: calc(100% - 36px) !important;
        margin: -24px auto 14px auto;
        grid-template-columns: 1fr;
        gap: 6px;
        contain-intrinsic-size: 100% 225px;
    }

    #home .main-ad-banner.berlin-main-hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 11px !important;
    }

    #home .main-ad-banner.berlin-main-hero-banner .ad-link-wrapper {
        border-radius: 11px !important;
    }

    #home .hero-spotlight-zone {
        height: auto !important;
        max-height: none !important;
    }

    #home .spotlight-stack {
        height: auto !important;
        grid-template-rows: repeat(3, 78px);
        gap: 6px;
    }

    #home .spotlight-card {
        border-radius: 10px;
    }
}

@media (max-width: 520px) {
    #home .hero-ads-layout {
        width: calc(100% - 30px) !important;
        margin: -20px auto 12px auto;
    }

    #home .main-ad-banner.berlin-main-hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 11px !important;
    }

    #home .main-ad-banner.berlin-main-hero-banner .ad-link-wrapper {
        border-radius: 11px !important;
    }

    #home .spotlight-stack {
        grid-template-rows: repeat(3, 68px);
        gap: 5px;
    }

    #home .spotlight-card {
        border-radius: 9px;
    }

    #home .spotlight-badge {
        font-size: 0.62rem;
        padding: 3px 6px;
    }
}

@media (hover: none), (pointer: coarse) {
    #home .spotlight-card:hover .spotlight-img {
        transform: none !important;
        filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #home .main-ad-banner.berlin-main-hero-banner .slide-item,
    #home .spotlight-img,
    #home .spotlight-card * {
        transition: none !important;
        animation: none !important;
    }
}

#pubg .game-header-ad,
#leagueoflegends .game-header-ad,
#rocketleague .game-header-ad,
#fortnite .game-header-ad,
#valorantPoints .game-header-ad,
#marvelRivals .game-header-ad {
    display: none;
    width: min(100%, 1280px) !important;
    height: clamp(155px, 22vw, 260px) !important;
    margin: -50px auto 18px auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
}

#pubg .game-header-ad img,
#leagueoflegends .game-header-ad img,
#rocketleague .game-header-ad img,
#fortnite .game-header-ad img,
#valorantPoints .game-header-ad img,
#marvelRivals .game-header-ad img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: transform 0.45s ease, filter 0.45s ease !important;
}

#pubg .game-header-ad::before,
#leagueoflegends .game-header-ad::before,
#rocketleague .game-header-ad::before,
#fortnite .game-header-ad::before,
#valorantPoints .game-header-ad::before,
#marvelRivals .game-header-ad::before,
#pubg .game-header-ad::after,
#leagueoflegends .game-header-ad::after,
#rocketleague .game-header-ad::after,
#fortnite .game-header-ad::after,
#valorantPoints .game-header-ad::after,
#marvelRivals .game-header-ad::after{
    display: none !important;
    content: none !important;
}#pubg .game-header-ad:hover img,
#leagueoflegends .game-header-ad:hover img,
#rocketleague .game-header-ad:hover img,
#fortnite .game-header-ad:hover img,
#valorantPoints .game-header-ad:hover img,
#marvelRivals .game-header-ad:hover img {
    transform: scale(1.025) !important;
    filter: saturate(1.08) contrast(1.03) !important;
}

#pubg .game-header-ad-badge,
#leagueoflegends .game-header-ad-badge,
#rocketleague .game-header-ad-badge,
#fortnite .game-header-ad-badge,
#valorantPoints .game-header-ad-badge,
#marvelRivals .game-header-ad-badge {
    position: absolute !important;
    right: 22px !important;
    bottom: 18px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.48) !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-family: "Tajawal", "Cairo", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

#pubg .game-header-ad-badge i,
#leagueoflegends .game-header-ad-badge i,
#rocketleague .game-header-ad-badge i,
#fortnite .game-header-ad-badge i,
#valorantPoints .game-header-ad-badge i,
#marvelRivals .game-header-ad-badge i {
    color: #ffd700 !important;
}

#pubg > h2,
#leagueoflegends > h2,
#rocketleague > h2,
#fortnite > h2,
#valorantPoints > h2,
#marvelRivals > h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

@media (max-width: 768px) {

    #pubg .game-header-ad-badge,
    #leagueoflegends .game-header-ad-badge,
    #rocketleague .game-header-ad-badge,
    #fortnite .game-header-ad-badge,
    #valorantPoints .game-header-ad-badge,
    #marvelRivals .game-header-ad-badge {
        right: 12px !important;
        bottom: 10px !important;
        padding: 7px 11px !important;
        font-size: 0.8rem !important;
    }

    #pubg .game-header-ad,
    #leagueoflegends .game-header-ad,
    #rocketleague .game-header-ad,
    #fortnite .game-header-ad,
    #valorantPoints .game-header-ad,
    #marvelRivals .game-header-ad {
height: 135px !important;
        border-radius: 16px !important;
        margin: -25px auto 18px auto !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 42px auto 18px auto !important;
}

    *,
    *::before,
    *::after {
background-attachment: scroll !important;
-webkit-tap-highlight-color: transparent;
}

    img,
    video,
    canvas,
    svg,
    .product-item,
    .gaming-key-card,
    .psn-gift-card-item,
    .rental-card,
    .service-offer-card,
    .subscription-item,
    .game-card,
    .modal-content,
    .popup-content,
    .toast-notification,
    .dropdown-menu,
    .user-dropdown,
    .payment-method,
    .game-header-ad,
    .main-ad-banner,
    .hero-ad-img {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translateZ(0);
    }

    .product-item,
    .gaming-key-card,
    .psn-gift-card-item,
    .rental-card,
    .service-offer-card,
    .subscription-item {
        will-change: transform;
    }

    .product-item:hover,
    .gaming-key-card:hover,
    .psn-gift-card-item:hover,
    .rental-card:hover,
    .service-offer-card:hover,
    .subscription-item:hover,
    .wishlist-grid .product-item:hover,
    .change-avatar-btn-styled:hover,
    .daily-reward-trigger:hover,
    .big-wishlist-btn:hover,
    .wishlist-remove-btn:hover {
        transition-duration: .12s !important;
    }

    .frame-galaxy,
    .frame-toxic,
    .frame-inferno,
    .frame-cyber,
    .diamond-element,
    .glowing-element,
    .king-element,
    .stock-low,
    .daily-reward-trigger,
    .daily-day-card.active i,
    .user-badge.king,
    .king-title-badge::after,
    .points-pill,
    .big-wishlist-btn.active i,
    .bundle-offer-card,
    #daily-reward-section,
    #reward-shop-section,
    .glowing-divider,
    .toast-notification,
    .sparkle,
    .confetti {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
    }

    .scratch-card::before,
    .scratch-prize::after,
    .scratch-close-btn::before,
    .payment-method::before,
    .product-item::before,
    .gaming-key-card::before,
    .service-offer-card::before,
    .subscription-item::before,
    .rental-card::before,
    .main-ad-banner::before,
    .game-header-ad::before {
        animation: none !important;
    }

    .glowing-element,
    .frame-galaxy,
    .frame-toxic,
    .frame-inferno,
    .frame-cyber,
    .diamond-element,
    .king-title-badge::after,
    .profile-frame,
    .rank-frame,
    .avatar-frame {
        filter: none !important;
    }

    .frame-galaxy,
    .frame-toxic,
    .frame-inferno,
    .frame-cyber,
    .diamond-element,
    .king-element,
    .bundle-offer-card,
    .daily-reward-trigger,
    .points-pill,
    .product-item,
    .gaming-key-card,
    .psn-gift-card-item,
    .rental-card,
    .service-offer-card,
    .subscription-item,
    .modal-content,
    .popup-content,
    .toast-notification {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important;
    }

    .modal-overlay,
    .popup-overlay,
    .scratch-overlay,
    .overlay,
    .backdrop,
    .payment-modal,
    .user-menu-backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    button,
    a,
    .buy-btn,
    .daily-reward-trigger,
    .points-pill,
    .payment-method,
    .change-avatar-btn-styled,
    .spin-btn,
    .big-wishlist-btn,
    .wishlist-remove-btn {
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    .product-item,
    .gaming-key-card,
    .psn-gift-card-item,
    .rental-card,
    .service-offer-card,
    .subscription-item,
    .modal-content,
    .popup-content,
    .preview-games-floating,
    .detailed-summary-tooltip {
        transition-duration: .12s !important;
    }
}

.modal.is-visible {
display: flex;
    animation: modal-fade-in .1s ease-out;
opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#supportModal.is-visible,
#paymentModal.is-visible,
#checkoutModal.is-visible {
    display: flex !important;
}

#overlay[style*="display: none"] {
    pointer-events: none !important;
}

.support-options.show {
opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.tilda-pay-logo,
.payment-option-logo.tilda-pay-logo,
.pmc-option .tilda-pay-logo,
.payment-method-card .tilda-pay-logo {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    border-radius: 9px !important;
    display: inline-block !important;
    background: transparent !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#custom-payment-options .custom-option[data-value="tilda"] .tilda-pay-logo,
#custom-payment-options.payment-options-portal .custom-option[data-value="tilda"] .tilda-pay-logo {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    border-radius: 8px !important;
    flex: 0 0 28px !important;
}

#custom-payment-options img.tilda-pay-logo,
#checkoutModal img.tilda-pay-logo,
.pmc-option img.tilda-pay-logo {
    object-fit: contain !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card:hover {
    transform: translateY(-2px) scale(1.015) !important;
    border-color: rgba(255, 204, 0, .55) !important;
    background: linear-gradient(145deg, rgba(255, 204, 0, .13), rgba(142, 106, 191, .12)) !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img,
#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .tilda-pay-logo {
    width: 34px !important;
    height: 34px !important;
    max-width: 68px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
}

@media (max-width: 420px) {

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img,
    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .tilda-pay-logo {
        width: 30px !important;
        height: 30px !important;
    }

    #custom-payment-options .custom-option[data-value="tilda"] .tilda-pay-logo,
    #custom-payment-options.payment-options-portal .custom-option[data-value="tilda"] .tilda-pay-logo {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        flex-basis: 26px !important;
    }
}

.tilda-pay-logo,
.payment-option-logo.tilda-pay-logo,
.pmc-option img.tilda-pay-logo,
.payment-method-card img.tilda-pay-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}

#custom-payment-options .custom-option[data-value="tilda"] img.tilda-pay-logo,
#custom-payment-options.payment-options-portal .custom-option[data-value="tilda"] img.tilda-pay-logo {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    border-radius: 6px !important;
}

.pmc-option[data-method="tilda"] img.tilda-pay-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img,
#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.tilda-pay-logo {
    width: 36px !important;
    height: 36px !important;
    max-width: 58px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

@media (max-width: 420px) {
    #checkoutModal #checkoutPaymentOptionsContainer {
grid-template-columns: repeat(2, 108px) !important;
        max-width: 226px !important;
        gap: 9px !important;
grid-template-columns: repeat(2, 112px) !important;
        max-width: 238px !important;
        gap: 10px !important;
}

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card {
width: 108px !important;
        height: 108px !important;
        max-width: 108px !important;
        border-radius: 14px !important;
        padding: 7px 6px !important;
width: 112px !important;
        height: 112px !important;
        max-width: 112px !important;
        padding: 8px 6px !important;
}

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 {
        font-size: 10px !important;
        gap: 5px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img,
    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.tilda-pay-logo {
        width: 32px !important;
        height: 32px !important;
    }
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .cart-payment-logo {
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-vodafone-logo {
    width: 78px !important;
    height: 34px !important;
    max-width: 86px !important;
    max-height: 38px !important;
    border-radius: 0 !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-credit-logo {
    width: 72px !important;
    height: 32px !important;
    max-width: 86px !important;
    max-height: 36px !important;
    border-radius: 0 !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-binance-logo {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 10px !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-tilda-logo,
#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.tilda-pay-logo.cart-tilda-logo {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 8px !important;
}

@media (max-width: 420px) {
    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-vodafone-logo {
        width: 70px !important;
        height: 30px !important;
        max-width: 78px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-credit-logo {
        width: 68px !important;
        height: 29px !important;
        max-width: 72px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img.cart-binance-logo {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

.mobile-home-hero-img {
    display: none;
}

@media (min-width: 769px) {
    .mobile-home-hero-img {
        display: none !important;
    }
}

@media (max-width: 768px) {

    html,
    body {
background: radial-gradient(at 20% 20%, rgba(56, 189, 248, 0.20), transparent 50%), radial-gradient(at 80% 80%, rgba(139, 92, 246, 0.25), transparent 50%), #06060f !important;
        background-attachment: fixed !important;
width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
}

    #home {
overflow-x: clip !important;
background-image: none !important;
        background-size: auto !important;
        background-repeat: initial !important;
        background-position: initial !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
}

    #home.section.glass-card {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    #home:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-direction: column !important;
    }

    #home > .mobile-home-hero-img {
order: 1;
        width: 100vw;
        aspect-ratio: 16 / 9;
        margin: 0 calc(50% - 50vw) 10px calc(50% - 50vw) !important;
        overflow: hidden;
        position: relative;
        background: #081426;
        isolation: isolate;
margin-bottom: 0 !important;
order: 1 !important;
        display: block !important;
        position: relative !important;
        width: calc(100vw + 2px) !important;
        max-width: none !important;
        aspect-ratio: 1672 / 941 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(calc(-50% + 1px)) !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #081426 !important;
        box-shadow: none !important;
        isolation: isolate !important;
        box-sizing: border-box !important;
}

    #home > .mobile-home-hero-img::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, .18) 100%), radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .16), transparent 38%);
    }

    #home > .mobile-home-hero-img .mobile-home-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 18px 14px 12px;
        text-align: center;
        pointer-events: none;
        box-sizing: border-box;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-content h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(1.35rem, 6vw, 2rem);
        font-weight: 900;
        line-height: 1.25;
        text-shadow: 0 3px 16px rgba(0, 0, 0, .75), 0 0 18px rgba(255, 255, 255, .28);
        letter-spacing: .2px;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        pointer-events: auto;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 38px;
        padding: 9px 13px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .22);
        color: #fff;
        font-family: inherit;
        font-size: .86rem;
        font-weight: 900;
        text-decoration: none;
        line-height: 1;
        background: rgba(0, 0, 0, .44);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        -webkit-tap-highlight-color: transparent;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-btn i {
        font-size: .98rem;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-btn-discord {
        background: linear-gradient(135deg, rgba(88, 101, 242, .92), rgba(78, 84, 200, .80));
    }

    #home > .mobile-home-hero-img .mobile-home-hero-btn-orders {
        background: linear-gradient(135deg, rgba(14, 165, 233, .92), rgba(37, 99, 235, .80));
    }

    #home > p.glow-text-rtl {
top: 142px !important;
position: absolute !important;
        top: clamp(128px, 39vw, 166px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 60 !important;
        width: calc(100% - 34px) !important;
        max-width: 520px !important;
        margin: 0 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: none !important;
        text-align: center !important;
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
        font-weight: 900 !important;
        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95) !important;
        pointer-events: none !important;
}

    #home > .hero-ads-layout {
order: 2;
order: 2 !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
}

    #home > .header-inline-container {
order: 3;
order: 3 !important;
        display: none !important;
}

    #home > *:not(.mobile-home-hero-img):not(.hero-ads-layout):not(.header-inline-container) {
order: 4;
order: 4 !important;
}
}

@media (max-width: 390px) {
    #home > .mobile-home-hero-img .mobile-home-hero-content {
        gap: 8px;
        padding-top: 14px;
    }

    #home > .mobile-home-hero-img .mobile-home-hero-btn {
        min-height: 34px;
        padding: 8px 11px;
        font-size: .78rem;
    }

    #home > p.glow-text-rtl {
        top: clamp(124px, 40vw, 156px) !important;
        font-size: .9rem !important;
        line-height: 1.55 !important;
    }
}

#daily-reward-section {
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(./images/mc.gif) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, .8) !important;
    border: 1px solid rgba(255, 255, 255, .1);
    animation: backgroundZoom 20s ease-in-out;
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("./images/mc.gif") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25) !important;
}

#daily-reward-section .daily-days-container .daily-day-card:nth-child(n+2) {
    background: rgba(0, 0, 0, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    opacity: 1 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}

#daily-reward-section .daily-day-card.big-reward {
    border-color: #00e5ff !important;
}

.by-sohayl {
font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 204, 0, .8);
    margin-bottom: 1px;
position: relative;
    left: 7px !important;
    font-size: 14px !important;
}

@media (max-width: 768px) {
    #discordDecorationsPage {
        overflow-x: hidden !important;
        padding: 18px 10px !important;
    }

    #discordDecorationsPageContainer {
        width: 100% !important;
        padding: 8px 0 18px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    #discord-calculator-card {
display: flex !important;
        width: 95% !important;
        max-width: 100% !important;
        margin: 50px auto 20px !important;
        padding: 40px 15px 20px !important;
        height: auto !important;
flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important;
        padding: 30px 15px !important;
width: min(94vw, 420px) !important;
        max-width: 420px !important;
        margin: 18px auto !important;
        padding: 18px 14px !important;
        border-radius: 24px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        transform: none !important;
}

    #discord-calculator-card .card-info-section,
    #discord-calculator-card .card-form-section {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #discord-calculator-card .card-info-section {
        gap: 8px !important;
    }

    #discord-calculator-card .card-icon {
margin-top: -90px !important;
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
        border-radius: 20px !important;
width: 120px !important;
        height: 120px !important;
        margin-top: -60px !important;
        margin-bottom: 5px !important;
width: 92px !important;
        height: 92px !important;
        margin: 0 auto 4px !important;
        border-radius: 22px !important;
        object-fit: cover !important;
}

    #discord-calculator-card h3 {
font-size: 1.3rem !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
font-size: 1.4rem !important;
font-size: 1.22rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
}

    #discord-calculator-card p {
font-size: .85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
max-width: 330px !important;
        margin: 0 auto 4px !important;
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
}

    #discord-calculator-card .volume-discount-badge {
        width: fit-content !important;
        max-width: 100% !important;
        margin: 2px auto !important;
        padding: 5px 10px !important;
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    #discord-calculator-card .card-form-section {
        gap: 10px !important;
    }

    #discord-calculator-card .input-wrapper {
        width: 100% !important;
        max-width: 360px !important;
        min-height: 46px !important;
        height: auto !important;
        margin: 0 auto 8px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        box-sizing: border-box !important;
    }

    #discord-calculator-card textarea#discord-deco-names {
        min-height: 82px !important;
        max-height: 130px !important;
        height: auto !important;
        resize: vertical !important;
        line-height: 1.55 !important;
        font-size: 0.9rem !important;
        padding: 2px 0 !important;
    }

    #discord-calculator-card #discord-deco-username {
        height: 30px !important;
        min-height: 30px !important;
        font-size: 0.9rem !important;
        padding: 0 4px !important;
    }

    #discord-calculator-card .calculator-controls {
display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: end !important;
}

    #discord-calculator-card .input-group {
flex-direction: column !important;
width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
}

    #discord-calculator-card .input-group label {
        font-size: 0.8rem !important;
        margin-bottom: 5px !important;
    }

    #discord-calculator-card select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        font-size: 0.92rem !important;
        padding: 0 8px !important;
    }

    #discord-calculator-card .quantity-selector-inline {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    #discord-calculator-card .quantity-selector-inline button {
        width: 38px !important;
        height: 44px !important;
        flex: 0 0 38px !important;
        border-radius: 10px !important;
    }

    #discord-calculator-card .quantity-selector-inline input {
        width: 58px !important;
        min-width: 48px !important;
        max-width: 68px !important;
        height: 44px !important;
        margin: 0 !important;
        flex: 0 1 58px !important;
    }

    #discord-price-display,
    #discord-calculator-card .buy-btn {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #discord-price-display {
padding: 15px !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
padding: 12px !important;
        border-radius: 16px !important;
        margin-top: 2px !important;
}

    #discord-price-display .price-value {
        font-size: 1.35rem !important;
    }

    #discord-calculator-card .buy-btn {
padding: 15px !important;
        font-size: 1.1rem !important;
        margin-top: 5px !important;
min-height: 48px !important;
        height: auto !important;
        padding: 12px !important;
        border-radius: 16px !important;
        font-size: 1rem !important;
}
}

@media (max-width: 360px) {
    #discord-calculator-card {
        width: 94vw !important;
        padding: 16px 10px !important;
    }

    #discord-calculator-card .calculator-controls {
        gap: 8px !important;
    }

    #discord-calculator-card .quantity-selector-inline button {
        width: 34px !important;
        flex-basis: 34px !important;
    }

    #discord-calculator-card .quantity-selector-inline input {
        width: 50px !important;
        flex-basis: 50px !important;
    }
}

@media (max-width: 768px) {
    body.mobile-fps-lite {
        background-image: none !important;
    }

    body.mobile-fps-lite *,
    body.mobile-fps-lite *::before,
    body.mobile-fps-lite *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.mobile-fps-lite .product-item,
    body.mobile-fps-lite .product-card,
    body.mobile-fps-lite .glass-card,
    body.mobile-fps-lite .section-container,
    body.mobile-fps-lite .review-card,
    body.mobile-fps-lite .modal,
    body.mobile-fps-lite .modal-content,
    body.mobile-fps-lite .popup-box {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .28) !important;
        filter: none !important;
        text-shadow: none !important;
        contain: layout paint style;
    }

    body.mobile-fps-lite .product-item,
    body.mobile-fps-lite .section-container,
    body.mobile-fps-lite .review-card,
    body.mobile-fps-lite .rank-card {
        content-visibility: auto;
        contain-intrinsic-size: 360px;
    }

    body.mobile-fps-lite .king-element,
    body.mobile-fps-lite .diamond-element,
    body.mobile-fps-lite .glowing-element,
    body.mobile-fps-lite .poison-element,
    body.mobile-fps-lite .crimson-leaf,
    body.mobile-fps-lite .floating-circle,
    body.mobile-fps-lite .glitch-effect,
    body.mobile-fps-lite .animated-border-box,
    body.mobile-fps-lite [class*="rgb-"],
    body.mobile-fps-lite [class*="-glow"],
    body.mobile-fps-lite [class*="-pulse"],
    body.mobile-fps-lite [style*="animation"] {
        animation: none !important;
        transition: none !important;
        filter: none !important;
        text-shadow: none !important;
    }

    body.mobile-fps-lite .product-item:hover,
    body.mobile-fps-lite .product-card:hover,
    body.mobile-fps-lite .glass-card:hover,
    body.mobile-fps-lite button:hover {
        transform: none !important;
    }

    body.is-scrolling *,
    body.is-scrolling *::before,
    body.is-scrolling *::after {
        animation-play-state: paused !important;
        transition: none !important;
    }
}

@media (max-width: 900px), (pointer: coarse) {
    html body *,
    html body *::before,
    html body *::after,
    html body::before,
    html body::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body [style*="filter: blur"],
    html body [style*="filter:blur"],
    html body .fullscreen-blur-bg .bg-clone,
    html body .glowing-orb,
    html body::before,
    html body::after,
    html body .main-wrapper::before,
    html body .main-wrapper::after {
        filter: none !important;
    }

    #bundle-pro-upgrade-modal,
    #bundle-pro-upgrade-modal > div,
    .modal-overlay,
    #overlay,
    .overlay,
    .glass-card,
    #navbar,
    .top-bar,
    .focused-card,
    .navbar-search-input,
    .game-header-ad-badge,
    .hero-slider-dots,
    .dropdown-notification-panel,
    #user-notification-panel,
    .tutorial-side-card,
    .close-page-btn,
    #productPageShortDescription,
    .mobile-home-hero-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#top-progress-loader,
.mega-overlay,
.sub-description-overlay,
.fire-particles-container,
.product-item::before,
.product-item::after,
.product-card::before,
.product-card::after,
.subscription-item::before,
.subscription-item::after,
.service-offer-card::before,
.service-offer-card::after,
.bundle-offer-card::before,
.bundle-offer-card::after,
.gaming-key-card::before,
.gaming-key-card::after,
.rental-card::before,
.rental-card::after,
.main-ad-banner::before,
.main-ad-banner::after,
.game-header-ad::before,
.game-header-ad::after {
    pointer-events: none !important;
}

.product-content-overlay,
.product-content-overlay .product-buttons-wrapper,
.product-content-overlay .product-buttons-container,
.product-content-overlay button,
.product-content-overlay a,
.add-to-cart-btn,
.add-to-cart-text-btn,
.buy-btn,
.subscription-cart-btn,
button.buy-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
}

.product-buttons-wrapper,
.product-buttons-container,
.product-content-overlay button,
.product-content-overlay a,
.add-to-cart-btn,
.add-to-cart-text-btn,
.buy-btn,
.subscription-cart-btn,
button.buy-btn {
    position: relative;
    z-index: 30;
}

#overlay,
.modal:not(.is-visible),
.mobile-sheet-overlay:not(.active),
.install-modal-overlay:not(.show),
.scratch-overlay:not(.show),
#loading-screen.hidden,
#instant-splash.gone,
#berlinPointsTopupModal:not(.is-open),
.berlin-order-review-modal:not(.show),
.berlin-order-review-toast:not(.show),
#bot-iframe-wrapper[style*="display: none"],
[hidden],
[aria-hidden="true"] {
    pointer-events: none !important;
}

html {
overscroll-behavior-y: none;
    scroll-behavior: smooth;
scrollbar-gutter: stable;
}

html.berlin-modal-scroll-locked {
    overflow-y: scroll !important;
    overscroll-behavior: none !important;
}

body.berlin-modal-scroll-locked {
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: none !important;
}

.load-more-decor-wrap::before,
.load-more-decor-wrap::after {
content: "";
    position: absolute;
    top: 50%;
    width: 100px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.9;
position: absolute !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    opacity: 0.96;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.30), 0 3px 8px rgba(0, 0, 0, 0.42) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transform: translateY(-50%);
}

.load-more-decor-wrap::before {
left: -115px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%2760%27%20viewBox%3D%270%200%20100%2060%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%2010%20Q40%205%2060%2025%20Q75%2035%2085%2032%27%20stroke-width%3D%271.8%27%20opacity%3D%271%27%2F%3E%3Cpath%20d%3D%27M10%2012%20Q42%207%2062%2027%20Q76%2036%2084%2033%27%20stroke-width%3D%271%27%20opacity%3D%270.5%27%2F%3E%3Cpath%20d%3D%27M78%2022%20L87%2032%20L74%2038%27%20stroke-width%3D%271.8%27%20opacity%3D%271%27%2F%3E%3Cpath%20d%3D%27M79%2024%20L85%2032%20L75%2036%27%20stroke-width%3D%271%27%20opacity%3D%270.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
content: "⟶" !important;
    left: -92px !important;
    animation: berlin-load-more-arrow-left 1.8s ease-in-out infinite !important;
}

.load-more-decor-wrap::after {
right: -115px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%2750%27%20viewBox%3D%270%200%20100%2050%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M92%2026%20Q75%2019%2055%2025%20T15%2024%27%20stroke-width%3D%271.8%27%20opacity%3D%271%27%2F%3E%3Cpath%20d%3D%27M90%2028%20Q72%2022%2053%2027%20T16%2026%27%20stroke-width%3D%271%27%20opacity%3D%270.5%27%2F%3E%3Cpath%20d%3D%27M25%2014%20L12%2025%20L26%2036%27%20stroke-width%3D%271.8%27%20opacity%3D%271%27%2F%3E%3Cpath%20d%3D%27M23%2016%20L14%2025%20L24%2034%27%20stroke-width%3D%271%27%20opacity%3D%270.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
content: "⟵" !important;
    right: -92px !important;
    animation: berlin-load-more-arrow-right 1.8s ease-in-out infinite !important;
}

.load-more-decor-wrap #loadMoreOfflineGamesBtn {
    position: relative;
    z-index: 1;
}

@keyframes berlin-load-more-arrow-left {
    0%,
    100% {
        transform: translate3d(-3px, -50%, 0);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(4px, -50%, 0);
        opacity: 1;
    }
}

@keyframes berlin-load-more-arrow-right {
    0%,
    100% {
        transform: translate3d(3px, -50%, 0);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(-4px, -50%, 0);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .load-more-decor-wrap {
        max-width: calc(100vw - 104px) !important;
    }

    .load-more-decor-wrap::before,
    .load-more-decor-wrap::after {
        display: block !important;
        font-size: 30px !important;
        animation: none !important;
        opacity: 0.9 !important;
    }

    .load-more-decor-wrap::before {
        left: -43px !important;
    }

    .load-more-decor-wrap::after {
        right: -43px !important;
    }

    body.mobile-fps-lite .product-item,
    body.mobile-fps-lite .product-card,
    body.mobile-fps-lite .gaming-key-card,
    body.mobile-fps-lite .psn-gift-card-item,
    body.mobile-fps-lite .rental-card,
    body.mobile-fps-lite .service-offer-card,
    body.mobile-fps-lite .subscription-item,
    body.mobile-fps-lite .game-card,
    body.mobile-fps-lite img {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
        will-change: auto !important;
    }

    body.mobile-fps-lite #home .main-products-section,
    body.mobile-fps-lite #home .console-world-section,
    body.mobile-fps-lite #home #recentlyViewedSection {
        content-visibility: auto;
        contain-intrinsic-size: auto 850px;
    }

    body.mobile-fps-lite.is-scrolling .product-item::before,
    body.mobile-fps-lite.is-scrolling .product-item::after,
    body.mobile-fps-lite.is-scrolling .product-card::before,
    body.mobile-fps-lite.is-scrolling .product-card::after,
    body.mobile-fps-lite.is-scrolling .gaming-key-card::before,
    body.mobile-fps-lite.is-scrolling .gaming-key-card::after,
    body.mobile-fps-lite.is-scrolling .service-offer-card::before,
    body.mobile-fps-lite.is-scrolling .service-offer-card::after,
    body.mobile-fps-lite.is-scrolling .subscription-item::before,
    body.mobile-fps-lite.is-scrolling .subscription-item::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .load-more-decor-wrap::before,
    .load-more-decor-wrap::after {
        animation: none !important;
    }
}

#offline-steam-section,
#game-rentals-section,
#goe-app-section {
    border-width: 1px !important;
    box-shadow: 0 0 10px rgba(44, 26, 64, 0.34) !important;
}

#services-section {
overflow: hidden;
    z-index: 1;
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: scroll !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;
border-width: 1px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

#services-section.services-section-glass {
    position: relative !important;
    isolation: isolate;
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 40px auto !important;
    padding: 28px clamp(18px, 3vw, 34px) 32px !important;
    overflow: hidden !important;

    background: linear-gradient(
        145deg,
        rgba(35, 22, 54, 0.76),
        rgba(12, 8, 22, 0.62)
        ) !important;
    border: 1px solid rgba(205, 161, 255, 0.20) !important;
    outline: 0 !important;
    border-radius: 26px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    filter: none !important;
}

#services-section.services-section-glass::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    transform: none !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 82% 0%, rgba(205, 161, 255, 0.14), transparent 34%),
        radial-gradient(circle at 8% 100%, rgba(74, 144, 226, 0.10), transparent 36%) !important;
    opacity: 1 !important;
}

#services-section.services-section-glass::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 8% !important;
    left: 8% !important;
    bottom: auto !important;
    height: 1px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.42),
        transparent
        ) !important;
    opacity: 0.75 !important;
}

#services-section.services-section-glass > .gaming-header-container,
#services-section.services-section-glass > #servicesContainer {
    position: relative;
    z-index: 2;
}

#services-section.services-section-glass:hover {
    border-color: rgba(205, 161, 255, 0.25) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;
}

@media (max-width: 768px) {
    #services-section.services-section-glass {
        width: calc(100% - 24px) !important;
        margin: 24px auto !important;
        padding: 20px 12px 24px !important;
        border-radius: 20px !important;
        background: linear-gradient(
            145deg,
            rgba(35, 22, 54, 0.82),
            rgba(12, 8, 22, 0.70)
            ) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#berlin-goe-merchant-section,
#berlin-goe-merchant-section * {
    box-sizing: border-box;
}

.berlin-merchant-ad,
.berlin-merchant-default-board,
.berlin-merchant-ad img {
    max-width: 100%;
}

#my-orders-page,
#my-orders-page.orders-fullscreen-page,
#my-orders-page::before,
#my-orders-page::after{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}#tab-quick-pay {
    max-width: 420px;
    margin-inline: auto;
}

#content-quick-pay {
    width: 100%;
}

.berlin-quick-pay-shell {
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 18px;
    border: 1px solid rgba(0, 255, 163, 0.28);
    border-radius: 18px;
    background: rgba(10, 7, 16, 0.72);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.berlin-quick-pay-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 7px;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
}

.berlin-quick-pay-heading i {
    color: #00ffa3;
}

.berlin-quick-pay-note {
    margin: 0 auto 14px;
    color: #cbd5e1;
    font-size: 0.84rem;
    line-height: 1.7;
}

.berlin-gumroad-product {
    width: 100%;
    min-height: 360px;
    max-height: min(62vh, 650px);
    overflow: auto;
    border-radius: 14px;
    background: #fff;
    color: #111;
    -webkit-overflow-scrolling: touch;
}

.berlin-gumroad-product iframe {
    display: block;
    width: 100% !important;
    min-height: 520px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.berlin-quick-pay-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.berlin-quick-pay-fallback:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 255, 163, 0.55);
    background: rgba(0, 255, 163, 0.08);
}

@media (max-width: 768px) {
    .berlin-quick-pay-shell {
        padding: 12px;
        border-radius: 14px;
    }

    .berlin-gumroad-product {
        min-height: 330px;
        max-height: 58vh;
        border-radius: 12px;
    }

    .berlin-gumroad-product iframe {
        min-height: 480px !important;
    }

    #goe-app-section {
        display: none !important;
    }

    html body #productPage.section,
    html body #productPage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 12px 14px 28px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        overflow-x: clip !important;
    }

    html body #productPageContent,
    html body #productPage .product-main-view,
    html body #productPage .product-image-section,
    html body #productPage .product-details-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body #productPage .product-main-view {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 18px !important;
        margin: 0 !important;
    }

    html body #productPage .product-image-section {
        margin-top: 75px !important;
    }

    html body #productPageFullDescription,
    html body #productPage .product-description-box,
    html body #productPageShortDescription {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body #productPageFullDescription {
        margin: 12px 0 0 !important;
        padding: 20px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        overflow: hidden !important;
    }

    html body #productPageShortDescription {
        margin: 12px 0 18px !important;
        padding: 0 !important;
        border-right: 0 !important;
    }

    html body #productPageFullDescription,
    html body #productPageFullDescription p,
    html body #productPageFullDescription li,
    html body #productPageFullDescription span,
    html body #productPageFullDescription a,
    html body #productPageShortDescription,
    html body #productPage .product-description-box,
    html body #productPage .product-description-box p,
    html body #productPage .product-description-box li {
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto;
        line-height: 1.8 !important;
        box-sizing: border-box !important;
    }

    html body #productPageFullDescription ul,
    html body #productPageFullDescription ol,
    html body #productPage .product-description-box ul,
    html body #productPage .product-description-box ol {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline-start: 22px !important;
        padding-inline-end: 4px !important;
        box-sizing: border-box !important;
    }

    html body #productPageFullDescription img,
    html body #productPageFullDescription video,
    html body #productPageFullDescription iframe,
    html body #productPage .product-description-box img,
    html body #productPage .product-description-box video,
    html body #productPage .product-description-box iframe {
        display: block;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    html body #productPageFullDescription pre,
    html body #productPageFullDescription code,
    html body #productPage .product-description-box pre,
    html body #productPage .product-description-box code {
        max-width: 100% !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    html body #productPageFullDescription table,
    html body #productPage .product-description-box table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

#reward-shop-section.reward-background-ready {
    background-image: linear-gradient(to bottom, rgba(15, 10, 30, .9), rgba(44, 26, 64, .85)),
        url(./images/P97JL4qb6z2ofr_OgOOH30QggmrvQWMhEYPrUJZaHw4.gif) !important;
}

.berlin-reward-lazy-status {
    width: min(100%, 420px);
    min-height: 92px;
    margin: 12px auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(12, 8, 24, .72);
    color: #d8d8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.berlin-reward-lazy-card {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 260px 290px;
}

#reward-shop-section .shop-header-image,
#reward-shop-section img[loading="lazy"] {
    content-visibility: auto;
}

@media (max-width: 768px) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
    }

    body {
        background-attachment: scroll !important;
    }

    .fire-particles-container,
    .particles-container,
    .sparkles-container,
    .confetti-container,
    .floating-particles,
    .animated-background,
    .glow-orb,
    .shine-overlay,
    .scan-line,
    .scan-effect {
        display: none !important;
    }

    .product-item::before,
    .product-item::after,
    .product-card::before,
    .product-card::after,
    .subscription-item::before,
    .subscription-item::after,
    .rental-card::before,
    .rental-card::after,
    .service-offer-card::before,
    .service-offer-card::after,
    .reward-card::before,
    .reward-card::after,
    .bundle-offer-card::before,
    .bundle-offer-card::after,
    .gaming-key-card::before,
    .gaming-key-card::after {
        animation: none !important;
        transition: none !important;
        filter: none !important;
        box-shadow: none !important;
    }

    .section,
    .product-item,
    .product-card,
    .subscription-item,
    .rental-card,
    .service-offer-card,
    .bundle-offer-card,
    .gaming-key-card,
    .reward-card,
    .berlin-reward-plus-card {
        content-visibility: auto;
        contain: layout paint style;
    }

    .product-item,
    .product-card,
    .subscription-item,
    .rental-card,
    .service-offer-card,
    .bundle-offer-card,
    .gaming-key-card {
        contain-intrinsic-size: 260px 330px;
    }

    .glass-card,
    .section,
    .product-item,
    .product-card,
    .subscription-item,
    .rental-card,
    .service-offer-card,
    .bundle-offer-card,
    .gaming-key-card,
    .modal-content,
    .reward-card,
    .berlin-reward-plus-card,
    .points-pill,
    .daily-reward-trigger,
    .shop-balance {
        box-shadow: 0 3px 12px rgba(0, 0, 0, .18) !important;
        text-shadow: none !important;
    }

    .glowing-element,
    .king-element,
    .diamond-element,
    [class*="glow"],
    [class*="pulse"] {
        animation: none !important;
        filter: none !important;
        text-shadow: none !important;
    }

    #mobile-nav {
        background: #140b24 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .3) !important;
    }

    .mobile-nav-btn,
    .mobile-nav-btn svg,
    .mobile-nav-btn i {
        transition: none !important;
        filter: none !important;
        text-shadow: none !important;
    }

    #reward-shop-section,
    #reward-shop-section.reward-background-ready {
        background-image: linear-gradient(to bottom, #100a1d, #241534) !important;
        background-attachment: scroll !important;
        box-shadow: none !important;
        border-color: rgba(255, 215, 0, .45) !important;
        padding: 18px 10px !important;
    }

    #reward-shop-section h2,
    #reward-shop-section .price-tag,
    #reward-shop-section .berlin-mini-title {
        text-shadow: none !important;
    }

    #reward-shop-section .shop-grid {
        gap: 12px !important;
        padding: 4px !important;
    }

    #reward-shop-section .reward-card {
        min-width: 145px !important;
        max-width: calc(50% - 7px) !important;
        border-radius: 13px !important;
        box-shadow: none !important;
        background: #171127 !important;
        contain-intrinsic-size: 165px 265px;
    }

    #reward-shop-section .reward-image-box {
        height: 105px !important;
        padding: 10px !important;
        background: #100c1c !important;
    }

    #reward-shop-section .reward-image-box img {
        filter: none !important;
        transform: none !important;
        max-height: 78px !important;
    }

    #reward-shop-section .reward-info {
        padding: 11px 9px !important;
    }

    #reward-shop-section .reward-info h3 {
        font-size: .9rem !important;
        line-height: 1.45 !important;
    }

    #reward-shop-section .berlin-reward-plus-panel {
        gap: 10px !important;
        margin: 12px auto 16px !important;
    }

    #reward-shop-section .berlin-reward-plus-card {
        padding: 12px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        background: #171127 !important;
        contain-intrinsic-size: 320px 240px;
    }

    #reward-shop-section .berlin-purchased-thumb,
    #reward-shop-section .berlin-shop-avatar-cosmetic-card,
    #reward-shop-section .berlin-shop-bg-cosmetic-card {
        box-shadow: none !important;
        transition: none !important;
        filter: none !important;
        content-visibility: auto;
    }

    #reward-shop-section img {
        decoding: async;
    }
    .referral-card {
        padding: 22px 16px;
        border-radius: 20px;
    }

    .referral-card h2 {
        font-size: 24px;
    }
}

html[lang="en"] body h1,
html[lang="en"] body h2,
html[lang="en"] body h3,
html[dir="ltr"] body h1,
html[dir="ltr"] body h2,
html[dir="ltr"] body h3 {
    border-left: 0 !important;
    border-right: 0 !important;
    border-inline-start: 0 !important;
    border-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#gamesContainer > .product-item:not(.bundle-card) {
    padding: 8px;
}

#gamesContainer > .product-item:not(.bundle-card) .product-image-wrapper {
    height: 163px;
}

#gamesContainer > .product-item:not(.bundle-card) h3 {
    min-height: 44px;
    margin: 7px 0 3px;
}

#gamesContainer > .product-item:not(.bundle-card) .product-description-text {
    margin-top: -3px;
    margin-bottom: 3px;
    padding-inline: 3px;
    line-height: 1.4;
}

#gamesContainer > .product-item:not(.bundle-card) .product-content-overlay > p:not(.product-description-text) {
    min-height: 22px;
    margin-top: 1px;
    margin-bottom: 3px;
}

#gamesContainer > .product-item:not(.bundle-card) .product-buttons-wrapper {
    margin-top: auto !important;
}

@media (max-width: 768px) {
    #gamesContainer > .product-item:not(.bundle-card) h3 {
        min-height: 30px;
        margin: 6px 0 3px;
    }

    #gamesContainer > .product-item:not(.bundle-card) .product-content-overlay > p:not(.product-description-text) {
        min-height: 20px;
        margin-bottom: 2px;
    }
}

.fawry-payment-mark,
.custom-option .fawry-payment-mark,
.pmc-option .fawry-payment-mark,
#checkoutModal #checkoutPaymentOptionsContainer .fawry-payment-mark {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.fawry-payment-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#checkoutModal #checkoutPaymentOptionsContainer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: min(100%, 660px) !important;
    max-width: 660px !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
    color: #fff !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: right !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 {
flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    text-align: center !important;
width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: right !important;
    overflow: visible !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 span:last-child {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 img,
#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .tilda-pay-logo,
#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .cart-payment-logo {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .cart-fawry-logo,
#checkoutModal #checkoutPaymentOptionsContainer [data-berlin-payment-code="fawry"] .fawry-payment-mark {
    width: 72px !important;
    height: 34px !important;
    max-width: 72px !important;
    flex: 0 0 76px !important;
}

#checkoutModal #checkoutPaymentOptionsContainer .payment-method-card p {
    display: none !important;
}

@media (max-width: 620px) {
    #checkoutModal #checkoutPaymentOptionsContainer {
        grid-template-columns: 1fr !important;
        width: min(100%, 390px) !important;
        max-width: 390px !important;
        gap: 9px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card {
        height: 74px !important;
        min-height: 74px !important;
        padding: 9px 12px !important;
        border-radius: 14px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 {
        flex-direction: row !important;
        gap: 10px !important;
        font-size: 11px !important;
    }

    #checkoutModal #checkoutPaymentOptionsContainer .payment-method-card h3 .cart-fawry-logo,
    #checkoutModal #checkoutPaymentOptionsContainer [data-berlin-payment-code="fawry"] .fawry-payment-mark {
        width: 70px !important;
        height: 31px !important;
        max-width: 70px !important;
        flex-basis: 70px !important;
    }
}

.valorant-region-switcher {
    width: min(760px, calc(100% - 28px));
    margin: 8px auto 20px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 70, 85, .28);
    border-radius: 17px;
    background: rgba(12, 14, 24, .72);
    text-align: center;
}

.valorant-region-switcher p {
    margin: 0 0 10px;
    color: #d8dee9;
    font-size: .9rem;
    line-height: 1.7;
}

.valorant-region-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.valorant-region-btn {
    min-width: 145px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.valorant-region-btn:hover,
.valorant-region-btn.active {
    border-color: rgba(255, 70, 85, .72);
    background: linear-gradient(135deg, rgba(255, 70, 85, .92), rgba(183, 34, 49, .92));
    transform: translateY(-1px);
}

.valorant-code-guide {
    width: min(980px, calc(100% - 28px));
    margin: 28px auto 10px;
    padding: 18px;
    border: 1px solid rgba(255, 70, 85, .3);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(27, 31, 46, .92), rgba(11, 13, 22, .96));
}

.valorant-code-guide-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 900;
}

.valorant-code-guide-title i,
.valorant-code-guide > p i {
    color: #ff4655;
}

.valorant-code-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.valorant-code-guide-grid article {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    color: #dce3ee;
    line-height: 1.65;
}

.valorant-code-guide-grid strong {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ff4655;
    color: #fff;
}

.valorant-code-guide > p {
    margin: 14px 0 0;
    color: #f1c7ca;
    text-align: center;
    font-size: .88rem;
}

@media (max-width: 768px) {
    .valorant-region-switcher {
        width: min(94%, 430px);
        margin-bottom: 14px;
        padding: 10px;
    }

    .valorant-region-tabs {
        flex-wrap: nowrap;
        gap: 7px;
    }

    .valorant-region-btn {
        min-width: 0;
        flex: 1;
        min-height: 39px;
        padding: 8px 9px;
        font-size: .78rem;
    }

    .valorant-code-guide {
        width: min(94%, 500px);
        padding: 13px;
    }

    .valorant-code-guide-grid {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 769px) {
    #steam-gift-cards-section #steamGiftCardsHomeContainer.steam-region-home-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 200px)) !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 854px !important;
        margin-inline: auto !important;
    }

    #steam-gift-cards-section #steamGiftCardsHomeContainer .product-item.category-card {
        width: 100% !important;
        max-width: 200px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #valorantPoints #valorant-ad-container.game-header-ad {
        margin-top: 10px !important;
    }
}

@media (max-width: 768px) {
    #steam-gift-cards-section #steamGiftCardsHomeContainer.steam-region-home-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }

    #valorantPoints {
        padding-top: 48px !important;
    }

    #valorantPoints #valorant-ad-container.game-header-ad {
        margin-top: 8px !important;
    }
    #my-orders-page #orders-list-container.orders-list-grid {
margin-top: 15px !important;
gap: 12px !important;
}

    #my-orders-page .order-card-img {
        display: block !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        margin: 0 !important;
        align-self: center !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    #my-orders-page .order-card-info {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: right !important;
        overflow: hidden !important;
    }

    #my-orders-page .order-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 4px !important;
    }

    #my-orders-page .order-product-name {
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow-wrap: anywhere !important;
    }

    #my-orders-page .order-id {
        max-width: 92px !important;
        direction: ltr !important;
        unicode-bidi: plaintext !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.68rem !important;
        line-height: 1.5 !important;
    }

    #my-orders-page .order-date {
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.68rem !important;
        line-height: 1.5 !important;
    }

    #my-orders-page .order-card-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 7px 0 0 !important;
    }

    #my-orders-page .order-price {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }

    #my-orders-page .order-status {
        flex: 0 0 auto !important;
        max-width: 58% !important;
        padding: 4px 8px !important;
        font-size: 0.66rem !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #my-orders-page .berlin-reorder-row {
        width: 100% !important;
        margin-top: 8px !important;
        justify-content: flex-end !important;
    }

    #my-orders-page .berlin-reorder-btn {
        width: auto !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 9px !important;
    }
}

@media (max-width: 420px) {
    #my-orders-page .order-history-card {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 88px !important;
        padding: 10px !important;
    }

    #my-orders-page .order-card-img {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
    }

    #my-orders-page .order-product-name {
        font-size: 0.82rem !important;
    }

    #my-orders-page .order-id,
    #my-orders-page .order-date {
        font-size: 0.62rem !important;
    }

    #my-orders-page .order-price {
        font-size: 0.76rem !important;
    }

    #my-orders-page .order-status {
        max-width: 60% !important;
        padding-inline: 7px !important;
        font-size: 0.61rem !important;
    }
}

@media (max-width: 768px) {
    #my-orders-page .order-history-card {
display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 98px !important;
        margin: 0 !important;
        padding: 12px !important;
        flex-direction: row !important;
        text-align: right !important;
        overflow: hidden !important;
        border-radius: 16px !important;
transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
}

    #my-orders-page .order-card-info,
    #my-orders-page .order-card-header,
    #my-orders-page .order-product-name,
    #my-orders-page .order-id,
    #my-orders-page .order-date,
    #my-orders-page .order-card-footer,
    #my-orders-page .order-price,
    #my-orders-page .order-status,
    #my-orders-page .berlin-reorder-row,
    #my-orders-page .berlin-reorder-btn {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        mix-blend-mode: normal !important;
    }

    #my-orders-page .order-card-info::before,
    #my-orders-page .order-card-info::after,
    #my-orders-page .order-card-header::before,
    #my-orders-page .order-card-header::after,
    #my-orders-page .order-product-name::before,
    #my-orders-page .order-product-name::after,
    #my-orders-page .order-id::before,
    #my-orders-page .order-id::after,
    #my-orders-page .order-date::before,
    #my-orders-page .order-date::after,
    #my-orders-page .order-card-footer::before,
    #my-orders-page .order-card-footer::after,
    #my-orders-page .order-price::before,
    #my-orders-page .order-price::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    #my-orders-page .order-status.status-pending {
        background-color: rgba(255, 165, 0, 0.16) !important;
    }

    #my-orders-page .order-status.status-completed {
        background-color: rgba(16, 185, 129, 0.16) !important;
    }

    #my-orders-page .order-status.status-problem-contact {
        background-color: rgba(245, 158, 11, 0.16) !important;
    }

    #my-orders-page .order-status.status-rejected {
        background-color: rgba(239, 68, 68, 0.16) !important;
    }
    .service-offer-card:hover,
    .service-offer-card:active {
        transform: none !important;
    }

    .service-offer-card h3,
    .service-offer-card .service-card-description {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    .service-offer-card h3::before,
    .service-offer-card h3::after,
    .service-offer-card .service-card-description::before,
    .service-offer-card .service-card-description::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .service-offer-card > button,
    .service-offer-card > a[class*="btn"],
    .service-offer-card .offer-order-btn {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        min-height: 40px !important;
        padding: 8px 20px !important;
        font-size: 0.88rem !important;
        line-height: 1.2 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
    }

    .product-item,
    .subscription-item,
    .rental-card,
    .gaming-key-card,
    .psn-gift-card-item {
        display: flex !important;
        flex-direction: column !important;
    }

    .product-item .product-content-overlay,
    .subscription-item .sub-content,
    .rental-card .product-content-overlay,
    .gaming-key-card .product-content-overlay,
    .psn-gift-card-item .product-content-overlay {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .product-item .product-buttons-wrapper,
    .product-item .product-buttons-container,
    .subscription-item .sub-footer,
    .subscription-item .product-buttons-container,
    .rental-card .product-buttons-wrapper,
    .rental-card .product-buttons-container,
    .gaming-key-card .product-buttons-wrapper,
    .gaming-key-card .product-buttons-container,
    .psn-gift-card-item .product-buttons-wrapper,
    .psn-gift-card-item .product-buttons-container {
        margin-top: auto !important;
        flex: 0 0 auto !important;
    }

    #chat-bot-toggle.bot-open .pulse-ring,
    #chat-bot-toggle.bot-open #chat-icon-msg {
        display: none !important;
    }
    #profile-settings-page.section.glass-card > .profile-header-section > .current-avatar-wrapper {
        margin: calc(52px + env(safe-area-inset-top, 0px)) auto 15px !important;
    }
}

#homeOffersContainer.home-offers-container {
    align-items: stretch !important;
}

#homeOffersContainer .home-offer-card:hover {
    transform: translateY(-3px) !important;
    border-color: #38d0ff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

#homeOffersContainer .home-offer-card::before,
#homeOffersContainer .home-offer-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

#homeOffersContainer .home-offer-card h3 {
    min-height: 44px !important;
    margin: 7px 0 3px !important;
}

#homeOffersContainer .home-offer-card .product-description-text {
    margin-top: -3px !important;
    margin-bottom: 3px !important;
    padding-inline: 3px !important;
    line-height: 1.4 !important;
}

#homeOffersContainer .home-offer-card .product-content-overlay > p:not(.product-description-text) {
    min-height: 22px !important;
    margin-top: 1px !important;
    margin-bottom: 3px !important;
}

#homeOffersContainer .home-offer-card .product-buttons-wrapper {
    margin-top: auto !important;
}

@media (max-width: 768px) {

    #profile-settings-page .edit-profile-trigger-corner,
    .section.glass-card .edit-profile-trigger-corner {
        top: 68px !important;
        right: 14px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 120 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #homeOffersContainer .home-offer-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 220px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 6px 6px 5px !important;
        border-radius: 12px !important;
        box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3) !important;
    }

    #homeOffersContainer .home-offer-card:hover,
    #homeOffersContainer .home-offer-card:active {
        transform: none !important;
        border-color: #00c0ff !important;
        box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3) !important;
    }

    #homeOffersContainer .home-offer-card .product-image-wrapper {
        height: 108px !important;
        margin-bottom: 4px !important;
        border-radius: 8px !important;
    }

    #homeOffersContainer .home-offer-card h3 {
        min-height: 30px !important;
        margin: 4px 0 2px !important;
        padding: 0 1px !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    #homeOffersContainer .home-offer-card .product-description-text {
        display: none !important;
    }

    #homeOffersContainer .home-offer-card .product-content-overlay > p:not(.product-description-text) {
        min-height: 18px !important;
        margin: 0 0 3px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    #homeOffersContainer .home-offer-card .product-buttons-wrapper {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #homeOffersContainer .home-offer-card .product-buttons-container {
        gap: 5px !important;
        margin: 0 !important;
    }

    #homeOffersContainer .home-offer-card .buy-btn,
    #homeOffersContainer .home-offer-card .add-to-cart-text-btn {
        min-height: 31px !important;
        padding: 5px 7px !important;
        border-radius: 8px !important;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    #homeOffersContainer .home-offer-card .add-to-cart-btn img {
        width: 27px !important;
        height: 27px !important;
    }
}

@media (max-width: 360px) {

    #homeOffersContainer .home-offer-card {
        padding-inline: 5px !important;
    }

    #homeOffersContainer .home-offer-card .product-image-wrapper {
        height: 98px !important;
    }
}

.berlin-smart-support-modal {
    width: min(760px, 94vw);
    max-height: min(84vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.berlin-smart-support-head {
    text-align: center;
    margin-bottom: 20px;
}

.berlin-smart-support-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    color: #d8b4fe;
    background: rgba(168,85,247,.12);
    border: 1px solid rgba(168,85,247,.28);
    font-size: .8rem;
    font-weight: 900;
}

.berlin-smart-support-modal .support-title {
    margin: 0 0 7px !important;
    border: 0 !important;
}

.berlin-smart-support-modal .support-subtitle {
    max-width: 650px;
    margin: 0 auto 18px;
    line-height: 1.75;
}

.berlin-support-step[hidden] {
    display: none !important;
}

.berlin-support-needs-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.berlin-support-need,
.berlin-support-method,
.berlin-support-ai-btn,
.berlin-support-back {
    font: inherit;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.berlin-support-need {
    min-height: 98px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    text-align: right;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transition: transform .18s ease,border-color .18s ease,background .18s ease;
}

.berlin-support-need:hover {
    transform: translateY(-2px);
    border-color: rgba(192,132,252,.55);
    background: rgba(124,58,237,.14);
}

.berlin-support-need > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(168,85,247,.16);
    color: #d8b4fe;
    font-size: 1.1rem;
}

.berlin-support-need span,
.berlin-support-ai-btn span,
.berlin-support-method span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.berlin-support-need b,
.berlin-support-ai-btn b,
.berlin-support-method b {
    font-weight: 900;
}

.berlin-support-need small,
.berlin-support-ai-btn small,
.berlin-support-method small {
    color: #aeb8c8;
    line-height: 1.55;
    font-size: .76rem;
}

.berlin-support-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 8px 11px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
}

.berlin-support-selected-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: rgba(124,58,237,.1);
    border: 1px solid rgba(168,85,247,.22);
}

.berlin-support-selected-head h3 {
    margin: 0 0 4px;
    border: 0;
    color: #fff;
}

.berlin-support-selected-head p {
    margin: 0;
    color: #b9c2d0;
    line-height: 1.65;
    font-size: .84rem;
}

.berlin-support-selected-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #e9d5ff;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
}

.berlin-support-question-label {
    display: block;
    margin: 0 0 7px;
    color: #fff;
    font-weight: 900;
}

.berlin-support-question {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(5,8,16,.55);
    color: #fff;
    font: inherit;
    line-height: 1.7;
    outline: none;
}

.berlin-support-question:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168,85,247,.13);
}

.berlin-support-ai-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 15px;
    border: 0;
    border-radius: 15px;
    text-align: right;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    box-shadow: 0 12px 28px rgba(79,70,229,.28);
}

.berlin-support-ai-btn > i {
    font-size: 1.25rem;
}

.berlin-support-ai-btn small {
    color: rgba(255,255,255,.78);
}

.berlin-support-human-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 11px;
    color: #8f9bad;
    font-size: .76rem;
    font-weight: 800;
}

.berlin-support-human-divider::before,
.berlin-support-human-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.09);
}

.berlin-support-recommended-methods {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.berlin-support-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.045);
    text-align: right;
}

.berlin-support-method > i:first-child {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #c4b5fd;
}

.berlin-support-method > i:last-child {
    margin-inline-start: auto;
    color: #7f8a9b;
    font-size: .72rem;
}

.basha-product-question-prompt {
    position: fixed;
    left: 20px;
    bottom: 82px;
    z-index: 9999;
    width: min(310px,calc(100vw - 34px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid rgba(192,132,252,.38);
    background: rgba(17,12,29,.96);
    box-shadow: 0 16px 38px rgba(0,0,0,.38);
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity .24s ease,transform .24s ease;
    contain: layout paint;
    content-visibility: auto;
}

.basha-product-question-prompt.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.basha-product-prompt-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg,#9333ea,#4f46e5);
}

.basha-product-prompt-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: right;
    cursor: pointer;
    font: inherit;
}

.basha-product-prompt-main b {
    font-size: .86rem;
}

.basha-product-prompt-main small {
    overflow: hidden;
    color: #aeb8c8;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basha-product-prompt-close {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: #251638;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

@media (max-width: 680px) {
    .berlin-smart-support-modal {
        width: 94vw;
        max-height: 88vh;
        padding: 17px 13px !important;
    }

    .berlin-support-needs-grid,
    .berlin-support-recommended-methods {
        grid-template-columns: 1fr;
    }

    .berlin-support-need {
        min-height: 84px;
        padding: 12px;
    }

    .basha-product-question-prompt {
        left: 12px;
        bottom: 76px;
        width: min(290px,calc(100vw - 24px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-support-need,
    .basha-product-question-prompt {
        transition: none !important;
    }
}

#supportModal:not(.is-visible) .berlin-smart-support-modal {
    content-visibility: hidden;
    contain: layout style paint;
}

#supportModal.is-visible .berlin-smart-support-modal {
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 680px;
}

.berlin-support-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.berlin-support-quick-actions button {
    border: 1px solid rgba(168, 85, 247, .28);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(124, 58, 237, .09);
    color: #ddd6fe;
    font: 800 .76rem/1.4 Cairo, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}

.berlin-support-quick-actions button:hover {
    border-color: rgba(192, 132, 252, .62);
    background: rgba(124, 58, 237, .18);
}

.berlin-support-auto-btn,
.berlin-support-human-toggle,
.berlin-support-result-action {
    font: inherit;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.berlin-support-auto-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 15px;
    border: 0;
    border-radius: 15px;
    text-align: right;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .24);
}

.berlin-support-auto-btn > i {
    font-size: 1.25rem;
}

.berlin-support-auto-btn span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.berlin-support-auto-btn b {
    font-weight: 900;
}

.berlin-support-auto-btn small {
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
}

.berlin-support-auto-result {
    margin-top: 14px;
}

.berlin-support-auto-result[hidden],
.berlin-support-human-gate[hidden],
.berlin-support-human-area[hidden] {
    display: none !important;
}

.berlin-support-result-card {
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.berlin-support-result-card.success {
    border-color: rgba(34, 197, 94, .28);
    background: rgba(34, 197, 94, .07);
}

.berlin-support-result-card.warning {
    border-color: rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .07);
}

.berlin-support-result-card.info {
    border-color: rgba(96, 165, 250, .25);
    background: rgba(59, 130, 246, .06);
}

.berlin-support-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    margin-bottom: 9px;
}

.berlin-support-result-title i {
    color: #86efac;
}

.berlin-support-result-body {
    color: #d7deea;
    font-size: .86rem;
    line-height: 1.8;
}

.berlin-support-result-body p {
    margin: 0 0 9px;
}

.berlin-support-result-body p:last-child {
    margin-bottom: 0;
}

.berlin-support-result-body ol {
    margin: 0;
    padding-inline-start: 22px;
}

.berlin-support-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.berlin-support-result-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    font-weight: 900;
    font-size: .78rem;
}

.berlin-support-result-action.is-basha {
    border-color: rgba(168, 85, 247, .35);
    background: rgba(124, 58, 237, .15);
    color: #e9d5ff;
}

.berlin-support-human-gate {
    margin-top: 13px;
}

.berlin-support-human-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
    text-align: right;
}

.berlin-support-human-toggle > i:first-child {
    color: #c4b5fd;
}

.berlin-support-human-toggle > i:last-child {
    margin-inline-start: auto;
    color: #8792a4;
}

.berlin-support-human-toggle span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.berlin-support-human-toggle b {
    font-weight: 900;
}

.berlin-support-human-toggle small {
    color: #9ca8ba;
    font-size: .73rem;
}

.berlin-support-human-area {
    margin-top: 8px;
}

@media (max-width: 680px) {
    .berlin-support-result-actions {
        flex-direction: column;
    }

    .berlin-support-result-action {
        width: 100%;
    }

    .berlin-support-quick-actions {
        gap: 6px;
    }

    .berlin-support-quick-actions button {
        padding: 7px 9px;
        font-size: .72rem;
    }
}

.berlin-support-choice-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 12px;
    background: rgba(59, 130, 246, .07);
    color: #cbd5e1;
    font-size: .8rem;
    line-height: 1.65;
}

.berlin-support-choice-hint i {
    color: #93c5fd;
}

#supportModal .berlin-support-need:hover,
#supportModal .berlin-support-back:hover,
#supportModal .berlin-support-quick-actions button:hover,
#supportModal .berlin-support-result-action:hover,
#supportModal .berlin-support-human-toggle:hover,
#supportModal .berlin-support-method:hover {
    color: #fff !important;
    border-color: rgba(192, 132, 252, .58) !important;
    background-color: rgba(124, 58, 237, .18) !important;
    background-image: none !important;
    box-shadow: 0 9px 22px rgba(76, 29, 149, .18) !important;
}

#supportModal .berlin-support-result-action.is-basha:hover {
    color: #f3e8ff !important;
    border-color: rgba(192, 132, 252, .65) !important;
    background-color: rgba(126, 34, 206, .25) !important;
}

#supportModal .berlin-support-method:hover > i:first-child,
#supportModal .berlin-support-need:hover > i {
    color: #ede9fe !important;
    background: rgba(139, 92, 246, .22) !important;
}

#supportModal.is-visible {
    z-index: 2000 !important;
}

#bot-iframe-wrapper[style*="display: block"],
#bot-iframe-wrapper[style*="display:block"] {
    z-index: 10020 !important;
}

#supportModal #berlin-support-question,
#supportModal .berlin-support-question-label,
#supportModal #berlin-support-auto-btn {
    display: none !important;
}

#supportModal .berlin-support-quick-actions button.is-selected {
    color: #fff !important;
    border-color: rgba(196, 181, 253, .78) !important;
    background: rgba(109, 40, 217, .3) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, .12) !important;
}

@media (max-width: 768px) {

    #servicesContainer,
    #gamingServicesContainer {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 2px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-items: center !important;
        align-items: stretch !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #servicesContainer > .service-offer-card,
    #gamingServicesContainer > .service-offer-card {
        width: 100% !important;
        max-width: 168px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 258px !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        gap: 4px !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    #servicesContainer > .service-offer-card:last-child:nth-child(odd),
    #gamingServicesContainer > .service-offer-card:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        width: min(100%, 168px) !important;
    }

    #servicesContainer .service-card-image,
    #gamingServicesContainer .service-card-image {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        min-height: 88px !important;
        flex-basis: 88px !important;
        margin-bottom: 2px !important;
    }

    #servicesContainer .service-offer-card h3,
    #gamingServicesContainer .service-offer-card h3 {
        min-height: 38px !important;
        margin: 3px 0 1px !important;
        padding: 0 2px !important;
        font-size: .82rem !important;
        line-height: 1.35 !important;
    }

    #servicesContainer .service-card-description,
    #gamingServicesContainer .service-card-description {
        min-height: 62px !important;
        margin: 0 0 6px !important;
        padding: 0 2px !important;
        font-size: .69rem !important;
        line-height: 1.5 !important;
    }

    #servicesContainer .service-offer-card > button,
    #gamingServicesContainer .service-offer-card > button,
    #servicesContainer .service-offer-card .offer-order-btn,
    #gamingServicesContainer .service-offer-card .offer-order-btn {
        width: auto !important;
        min-width: 92px !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: .72rem !important;
        border-radius: 9px !important;
    }
}

#supportModal .berlin-support-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

#supportModal .berlin-support-quick-actions button {
    width: 100% !important;
    min-height: 54px !important;
    padding: 12px 15px !important;
    border-radius: 14px !important;
    font-size: .84rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
    white-space: normal !important;
}

#supportModal .berlin-support-result-actions {
    gap: 10px !important;
}

#supportModal .berlin-support-result-action {
    min-height: 48px !important;
    padding: 11px 16px !important;
    border-radius: 13px !important;
    font-size: .84rem !important;
}

#supportModal .berlin-support-human-toggle {
    min-height: 66px !important;
    padding: 14px 16px !important;
    border-radius: 15px !important;
    gap: 12px !important;
}

#supportModal .berlin-support-human-toggle > i:first-child {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(139, 92, 246, .14);
    font-size: 1rem;
}

#supportModal .berlin-support-human-toggle b {
    font-size: .9rem !important;
}

#supportModal .berlin-support-human-toggle small {
    font-size: .77rem !important;
    line-height: 1.5 !important;
}

#supportModal .berlin-support-human-chevron {
    transition: transform .18s ease;
}

#supportModal .berlin-support-human-gate.is-open .berlin-support-human-chevron {
    transform: rotate(180deg);
}

#supportModal .berlin-support-human-area.is-open {
    animation: berlinSupportHumanReveal .18s ease-out both;
}

#supportModal .berlin-support-recommended-methods {
    gap: 11px !important;
}

#supportModal .berlin-support-method {
    min-height: 68px !important;
    padding: 14px !important;
    border-radius: 15px !important;
    gap: 12px !important;
}

#supportModal .berlin-support-method > i:first-child {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
}

#supportModal .berlin-support-method b {
    font-size: .88rem !important;
}

#supportModal .berlin-support-method small {
    font-size: .76rem !important;
}

@keyframes berlinSupportHumanReveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

@media (max-width: 680px) {
    #supportModal .berlin-support-quick-actions {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    #supportModal .berlin-support-quick-actions button {
        min-height: 52px !important;
        padding: 12px 14px !important;
        font-size: .82rem !important;
    }

    #supportModal .berlin-support-result-action {
        min-height: 50px !important;
        font-size: .82rem !important;
    }

    #supportModal .berlin-support-human-toggle {
        min-height: 68px !important;
    }
}

.berlin-smart-support-modal .berlin-support-need,
.berlin-smart-support-modal .berlin-support-quick-actions > button,
.berlin-smart-support-modal .berlin-support-result-action,
.berlin-smart-support-modal .berlin-support-human-toggle,
.berlin-smart-support-modal .berlin-support-method {
    min-height: 54px;
}

.berlin-smart-support-modal .berlin-support-result-action {
    padding: 12px 18px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 900;
}

@media (max-width: 768px) {
    .berlin-smart-support-modal .berlin-support-result-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .berlin-smart-support-modal .berlin-support-result-action {
        width: 100%;
        min-height: 50px;
    }
    body.basha-bot-open #bot-iframe-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        isolation: isolate !important;
        transform: translateZ(0) !important;
        z-index: var(--berlin-z-modal) !important;
        pointer-events: auto !important;
    }

    body.basha-bot-open #chat-bot-toggle {
top: 15px !important;
        bottom: auto !important;
        left: 15px !important;
        background: #dc2626 !important;
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.6) !important;
z-index: calc(var(--berlin-z-priority-modal) + 1) !important;
        pointer-events: auto !important;
}

    body.basha-bot-open .mobile-fab-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    body.basha-bot-open .mobile-fab-container * {
        pointer-events: none !important;
    }
}

#toast-container,
#toast-container .toast-notification {
    pointer-events: none !important;
}

#discordDecorationsPage #discord-calculator-card select.discord-deco-price {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 10px !important;
    font-size: 0.94rem !important;
    background: #111827 !important;
    background-image: none !important;
    appearance: auto !important;
}

@media (max-width: 768px) {
    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    ) {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        isolation: auto !important;
        contain: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    ):is(:hover, :active) {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
    }

    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    )::before,
    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    )::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }

    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    ) :is(.product-image-wrapper, .sub-image-wrapper) {
        margin-inline: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 10px !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    html body :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    ) :is(.product-content-overlay, .sub-content) {
        width: 100% !important;
        margin: 0 !important;
        padding: 7px 2px 0 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html body #addToCartBtn {
        font-size: 13px !important;
        line-height: normal !important;
    }

    html body #addToCartBtn::before,
    html body #addToCartBtn::after {
        content: none !important;
        display: none !important;
    }

    html body #home .products-container > :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card
    ) {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: translateX(-14px) !important;
    }
}

@media (min-width: 769px) {

    html body :is(
    #subscriptions-section,
    #game-topup-section,
    #personal-gifting-section,
    #game-rentals-section
    ) :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card,
    .software-card-unique,
    .calculator-card
    ),
    html body :is(
    #subscriptions-section,
    #game-topup-section,
    #personal-gifting-section,
    #game-rentals-section
    ) :is(
    .product-item,
    .product-card,
    .gaming-key-card,
    .psn-gift-card-item,
    .subscription-item,
    .rental-card,
    .software-card-unique,
    .calculator-card
    ):is(:hover, :focus, :focus-visible, :active) {
        border: 0 !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        border-image: none !important;
        outline: 0 !important;
        outline-width: 0 !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        filter: none !important;
        animation: none !important;
    }
}

@media (min-width: 0px) {
    .berlin-how-faq-title,
    .berlin-how-step h3 {
        color: #fff !important;
    }

    .berlin-faq-item summary {
        color: #f8fafc !important;
    }

    .berlin-how-faq-kicker,
    .berlin-faq-item summary::after {
        color: #d8c6ff !important;
    }

    .berlin-how-step-num {
        background: #d8c6ff !important;
        color: #111827 !important;
        box-shadow: 0 4px 10px rgba(216, 198, 255, 0.18) !important;
    }

    .berlin-how-faq-title {
        border-inline-start: 0 !important;
        border-inline-end: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    .berlin-how-faq-title::before,
    .berlin-how-faq-title::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

#offlineSteamContainer .product-separator::before,
#offlineSteamContainer .product-separator::after {
    content: none !important;
    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;
padding-left: 20px;
        transform: translateX(16px);
transform: translateX(21px) !important;

        padding-left: 20px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
}

    #home-offers-section {
        overflow-x: hidden !important;
    }

    #homeOffersContainer.home-offers-container {
display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 10px 5px !important;
        align-items: stretch !important;
        justify-content: center !important;
transform: translateX(5px) !important;
        width: calc(100% - 5px) !important;
        max-width: calc(100vw - 5px) !important;
        box-sizing: border-box !important;
}

    #servicesContainer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        margin: 0 auto !important;
        transform: none !important;
        justify-items: center !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #servicesContainer .service-offer-card {
        width: min(100%, 320px) !important;
        max-width: 320px !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    #offline-bundle-promo-custom,
    #home-bundle-promo.ultimate-bundle-card,
    #offlineSteamContainer .berlin-dashboard-offline-bundle {
        width: min(100% - 18px, 950px) !important;
        max-width: calc(100vw - 18px) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #offline-bundle-promo-custom {
        grid-column: 1 / -1 !important;
    }

    #offline-bundle-promo-custom .bundle-content-wrapper,
    #home-bundle-promo .bundle-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    #offline-bundle-promo-custom .bundle-left,
    #offline-bundle-promo-custom .bundle-right,
    #home-bundle-promo .bundle-left,
    #home-bundle-promo .bundle-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        text-align: center !important;
        margin: 0 !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    #offline-bundle-promo-custom .bundle-main-image,
    #home-bundle-promo .bundle-main-image {
        width: clamp(115px, 42vw, 150px) !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 6px !important;
        display: block !important;
    }

    #offline-bundle-promo-custom .bundle-title,
    #home-bundle-promo .bundle-title,
    #home-bundle-promo h2 {
        font-size: clamp(1.18rem, 5vw, 1.55rem) !important;
        line-height: 1.32 !important;
        margin: 8px 0 8px !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    #offline-bundle-promo-custom .bundle-desc,
    #home-bundle-promo .bundle-desc,
    #home-bundle-promo p {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        margin: 0 0 12px !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    #offline-bundle-promo-custom .bundle-cta-btn,
    #home-bundle-promo .bundle-cta-btn {
        width: min(100%, 280px) !important;
        min-height: 42px !important;
        padding: 10px 14px !important;
        justify-content: center !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 360px) {
    #homeSoftwareSubscriptionsContainer,
    #homeTvSubscriptionsContainer {
        transform: translateX(18px) !important;
        padding-left: 16px !important;
    }

    #homeOffersContainer.home-offers-container {
gap: 8px !important;
        padding-inline: 6px !important;
transform: translateX(5px) !important;
        width: calc(100% - 5px) !important;
        padding-inline: 5px !important;
}
}

.game-header-ad {
    display: none;
    width: min(100%, 1280px);
    height: clamp(155px, 22vw, 260px);
    margin: 8px auto 28px auto;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    cursor: pointer;
    isolation: isolate;
    transform: translateZ(0);
}

.game-header-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease,
        filter 0.45s ease;
}

.game-header-ad::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.13), transparent 32%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55));
}

.game-header-ad::after {
    content: "";
    position: absolute;
    inset: auto 4% 0 4%;
    height: 3px;
    z-index: 2;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    opacity: 0.8;
}

.game-header-ad:hover img {
    transform: scale(1.035);
    filter: saturate(1.15) contrast(1.05);
}

.game-header-ad-badge {
    position: absolute;
    right: 22px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: Tajawal, Cairo, sans-serif;
    font-weight: 900;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.game-header-ad-badge i {
    color: gold;
}

@media (max-width: 768px) {
    .game-header-ad {
        height: 135px;
        border-radius: 16px;
        margin: 6px auto 18px auto;
    }

    .game-header-ad-badge {
        right: 12px;
        bottom: 10px;
        padding: 7px 11px;
        font-size: 0.8rem;
    }
}

#berlin-reward-plus-panel {
    content-visibility: auto;
    contain-intrinsic-size: 390px;
}

#berlin-reward-plus-panel.berlin-reward-plus-pending #berlinDailyQuests:empty::before,
#berlinDailyQuests:empty::before {
    content: "المهام هتتحمل تلقائيًا عند الوصول للسكشن...";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed rgba(251, 191, 36, 0.24);
    background: rgba(0, 0, 0, 0.14);
    color: #94a3b8;
    font-size: 0.82rem;
    text-align: center;
}

.berlin-reward-plus-panel {
    width: min(1100px, 96%);
    margin: 18px auto 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.berlin-reward-plus-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.berlin-mini-title {
    font-weight: 900;
    color: #ffd34d;
    font-size: 1.05rem;
    margin-bottom: 7px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.berlin-reward-plus-card p {
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0 0 12px;
    text-align: center;
}

.berlin-daily-quests {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding-inline-end: 3px;
}

.berlin-quest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.berlin-quest-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    min-width: 0;
}

.berlin-quest-title {
    font-weight: 800;
    color: #fff;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.berlin-quest-reward {
    font-size: 0.75rem;
    color: #fbbf24;
    font-weight: 900;
}

.berlin-quest-btn {
    border: none;
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.berlin-quest-btn.claimed {
    background: rgba(16, 185, 129, 0.25);
    color: #9ff1ce;
    cursor: default;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.avatar-cosmetic-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.avatar-cosmetic-wrap.avatar-locked > img,
.card-bg-option.bg-locked > img {
    filter: grayscale(0.85) brightness(0.48);
}

.bg-lock-badge,
.cosmetic-lock-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(251, 191, 36, 0.6);
    color: #fbbf24;
    font-weight: 900;
    pointer-events: none;
    z-index: 3;
    white-space: nowrap;
    line-height: 1;
}

.cosmetic-lock-badge {
    left: 50%;
    right: auto;
    bottom: -19px;
    transform: translateX(-50%);
    padding: 2px 5px;
    font-size: 0.5rem;
    min-width: 36px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.bg-lock-badge {
    inset: auto 6px 6px 6px;
    padding: 3px 6px;
    font-size: 0.62rem;
}

.card-bg-option {
background: #1a1a1a;
width: 60px;
    height: 60px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .1);
    transition: .3s;
    z-index: 999;
position: relative;
    overflow: hidden;
}

.card-bg-option.bg-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.cosmetic-owned-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.88);
    color: #fff;
    font-size: 0.7rem;
    z-index: 4;
    pointer-events: none;
}

.berlin-purchased-cosmetics {
    margin: 0 0 16px 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(251, 191, 36, 0.18);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.berlin-purchased-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-weight: 900;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.berlin-purchased-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 58px));
    justify-content: start;
    align-items: center;
    gap: 10px;
    max-height: none;
    overflow: visible;
    overscroll-behavior: contain;
    padding: 4px 2px 10px;
}

.berlin-purchased-row .berlin-purchased-thumb {
    display: block;
}

.berlin-purchased-empty {
    color: #94a3b8;
    font-size: 0.82rem;
    padding: 6px 2px;
}

.berlin-purchased-thumb {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    object-fit: cover;
    cursor: pointer;
    position: relative;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.berlin-purchased-thumb:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #fbbf24;
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.18);
}

.berlin-purchased-bg {
    background-size: cover !important;
    background-position: center !important;
}

@media (max-width: 768px) {
    .cosmetic-lock-badge {
        bottom: -18px;
        font-size: 0.48rem;
        padding: 2px 4px;
    }

    .berlin-purchased-row {
        grid-template-columns: repeat(auto-fill, minmax(48px, 48px));
        gap: 8px;
    }

    .berlin-purchased-thumb {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 14px;
    }
}

@media (max-width: 900px) {
    .berlin-reward-plus-panel {
        grid-template-columns: 1fr;
    }

    .berlin-daily-quests {
        max-height: none;
    }
}

.berlin-main-hero-banner,
.main-ad-banner {
    position: relative;
}

.hero-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
}

.hero-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    opacity: 0.78;
    transition: width 0.22s ease,
        opacity 0.22s ease,
        background 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.hero-slider-dot:focus-visible,
.hero-slider-dot:hover {
    opacity: 1;
    transform: scale(1.12);
    outline: 0;
}

.hero-slider-dot.active {
    width: 24px;
    opacity: 1;
    background: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
    .hero-slider-dots {
        bottom: 9px;
        gap: 6px;
        padding: 5px 8px;
    }

    .hero-slider-dot {
        width: 8px;
        height: 8px;
    }

    .hero-slider-dot.active {
        width: 20px;
    }
}

#top-progress-loader,
.berlin-main-hero-banner::after,
.berlin-main-hero-banner::before,
.game-header-ad::after,
.game-header-ad::before,
.main-ad-banner::after,
.main-ad-banner::before,
.mega-overlay,
.sub-description-overlay,
#overlay[style*="display: none"],
.modal-overlay[style*="display: none"],
.modal[style*="display: none"],
.bundle-offer-card::after,
.bundle-offer-card::before,
.fire-particles-container,
.gaming-key-card::after,
.gaming-key-card::before,
.product-card::after,
.product-card::before,
.product-item::after,
.product-item::before,
.rental-card::after,
.rental-card::before,
.service-offer-card::after,
.service-offer-card::before,
.subscription-item::after,
.subscription-item::before{
    pointer-events: none !important;
}.add-to-cart-btn,
.add-to-cart-text-btn,
.buy-btn,
.product-content-overlay,
.product-content-overlay .product-buttons-container,
.product-content-overlay .product-buttons-wrapper,
.product-content-overlay a,
.product-content-overlay button,
.subscription-cart-btn,
button.buy-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
}

.add-to-cart-btn,
.add-to-cart-text-btn,
.buy-btn,
.product-buttons-container,
.product-buttons-wrapper,
.product-content-overlay a,
.product-content-overlay button,
.subscription-cart-btn,
button.buy-btn {
    position: relative;
    z-index: 30;
}

#berlinPointsTopupModal:not(.is-open),
#bot-iframe-wrapper:not(.is-open),
#bot-iframe-wrapper[hidden],
#bot-iframe-wrapper[aria-hidden="true"],
#instant-splash.gone,
#loading-screen.hidden,
#overlay,
.berlin-order-review-modal:not(.show),
.berlin-order-review-toast:not(.show),
.install-modal-overlay:not(.show),
.mobile-sheet-overlay:not(.active),
.modal:not(.is-visible),
.scratch-overlay:not(.show),
[aria-hidden="true"],
[hidden] {
    pointer-events: none !important;
}

#overlay.berlin-click-shield-active,
.berlin-click-shield-active,
.mobile-fab-container .fab-main-button,
.mobile-fab-container .fab-search-button,
.mobile-fab-container .mobile-fab-actions,
.mobile-fab-container .mobile-fab-menu,
.mobile-fab-container .mobile-fab-menu *{
    pointer-events: auto !important;
}[onclick],
[role="button"],
a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 900px), (pointer: coarse) {
    .fab-main-button,
    .fab-search-button {
        touch-action: manipulation !important;
    }
}

.vodafone-fast-code-mobile {
    display: none;
    margin: 14px 0 4px;
    padding: 14px;
    border-radius: 14px;
    background: #f2f2f2;
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    text-align: right;
}

.vodafone-fast-code-mobile .vf-fast-title {
    font-size: 0.92rem;
    line-height: 1.8;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}

.vodafone-fast-code-mobile .vf-fast-code {
    display: block;
    direction: ltr;
    unicode-bidi: embed;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
    font-weight: 900;
    color: #111827;
    word-break: break-all;
    margin: 4px 0 12px;
}

.vodafone-fast-code-mobile .vf-fast-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 110px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

.order-rating-prompt-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #fff;
    text-align: center;
}

.order-rating-prompt-card h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #fff;
    font-weight: 900;
}

.order-rating-prompt-card p {
    margin: 0 0 12px;
    color: #cbd5e1;
    font-size: 0.86rem;
    line-height: 1.7;
}

.order-rating-prompt-card button {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 768px) {
    .vodafone-fast-code-mobile {
        display: block;
    }
}

#scratchCanvas {
cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fbbf24%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E") 16 16, pointer;
    transition: opacity .8s ease;
cursor: url(https://i.postimg.cc/N0sDZFPw/egypt-1-pound-2019.webp) 16 16,
        crosshair !important;
}

#scratchCanvas:active {
    cursor: url(https://i.postimg.cc/N0sDZFPw/egypt-1-pound-2019.webp) 16 16,
        crosshair !important;
}

@media (pointer: coarse) {
    #scratchCanvas,
    #scratchCanvas:active {
        cursor: auto !important;
    }
}

body.berlin-payment-auth-layer-active #overlay {
    z-index: var(--berlin-z-overlay) !important;
}

body.berlin-payment-auth-layer-active #paymentModal.berlin-payment-under-auth {
    position: fixed !important;
    z-index: var(--berlin-z-modal) !important;
}

body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment,
body.berlin-payment-auth-layer-active #verificationModal.berlin-auth-over-payment {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(12px, 2.5vw, 24px) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    z-index: var(--berlin-z-priority-modal) !important;
    background: rgba(0, 0, 0, 0.58) !important;
}

body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment.is-visible {
    display: flex !important;
}

body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment .auth-modal-body,
body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment > .modal-body,
body.berlin-payment-auth-layer-active #verificationModal.berlin-auth-over-payment > div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    margin: auto !important;
    width: min(92vw, 440px) !important;
    max-width: 440px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment > .close-btn {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    inset-inline-end: max(14px, env(safe-area-inset-right)) !important;
    z-index: 2 !important;
    transform: none !important;
    margin: 0 !important;
}

@media (max-width: 520px) {
    body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment,
    body.berlin-payment-auth-layer-active #verificationModal.berlin-auth-over-payment {
        padding: 10px !important;
        align-items: center !important;
    }

    body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment .auth-modal-body,
    body.berlin-payment-auth-layer-active #authModal.berlin-auth-over-payment > .modal-body,
    body.berlin-payment-auth-layer-active #verificationModal.berlin-auth-over-payment > div {
        width: min(94vw, 420px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}

#paymentModal .modal-content-section:not(.is-visible) {
    display: none !important;
}

#paymentModal .modal-content-section.is-visible {
    display: block !important;
}

#paymentModal #paypalDetails {
    display: none !important;
}

.product-reviews-iframe-section {
    width: min(1120px, 100%);
    margin: 28px auto 8px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(205, 161, 255, 0.22);
    background: linear-gradient(145deg, rgba(30, 17, 50, 0.62), rgba(10, 10, 20, 0.78));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.product-reviews-iframe-head {
    text-align: center;
    margin-bottom: 16px;
}

.product-reviews-iframe-head h2 {
    margin: 0 0 6px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 0 18px rgba(205, 161, 255, 0.35);
}

.product-reviews-iframe-head h2 i {
    color: #fbbf24;
}

.product-reviews-iframe-head p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.7;
}

.product-reviews-iframe-wrap {
margin-top: 30px;
width: 100%;
    height: 360px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.28);
    position: relative;
}

.product-reviews-iframe-wrap::before {
    content: "جاري تجهيز آراء العملاء...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-weight: 800;
    z-index: 0;
    pointer-events: none;
}

.product-reviews-lazy-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: 0 0;
}

@media (max-width: 768px) {
    .product-reviews-iframe-section {
        margin: 22px auto 6px;
        padding: 14px;
        border-radius: 18px;
    }

    .product-reviews-iframe-wrap {
        height: 340px;
        border-radius: 15px;
    }

    .product-reviews-iframe-head p {
        font-size: 0.84rem;
    }
}

.product-reviews-lazy-mount {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
    contain: layout paint style;
}

.product-reviews-lazy-placeholder {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #cbd5e1;
    text-align: center;
    font-weight: 800;
}

.product-reviews-lazy-placeholder i {
    color: #fbbf24;
    font-size: 1.65rem;
    filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.35));
}

#personal-gifting-section .personal-gifting-card-lines {
    width: min(92%, 520px);
    margin: 14px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

#personal-gifting-section .personal-gifting-card-lines span {
    display: block;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.26);
}

#personal-gifting-section .personal-gifting-card-lines span:nth-child(1) {
    width: 74%;
    opacity: 0.95;
}

#personal-gifting-section .personal-gifting-card-lines span:nth-child(2) {
    width: 48%;
    opacity: 0.65;
}

@media (max-width: 768px) {
    #personal-gifting-section .personal-gifting-card-lines {
        display: none !important;
    }
}

#goe-our-games-section {
    min-height: 260px;
    content-visibility: auto;
    contain-intrinsic-size: 340px;
    contain: layout style paint;
    overflow: hidden;
}

#goeOurGamesContainer {
    width: 100%;
    min-height: 170px;
}

.goe-super-lazy-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    width: min(920px, 96%);
    min-height: 150px;
    margin: 0 auto;
    padding: 28px 18px;
    border-radius: 22px;
    border: 1px dashed rgba(251, 191, 36, 0.26);
    background: rgba(0, 0, 0, 0.16);
    color: #9ca3af;
    text-align: center;
}

.goe-super-lazy-placeholder i {
    color: #fbbf24;
    font-size: 1.65rem;
}

.goe-our-games-grid {
    width: min(920px, 96%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.goe-game-soon-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 24px;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(251, 191, 36, 0.22);
    background: radial-gradient(circle at 12% 20%, rgba(251, 191, 36, 0.16), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(124, 58, 237, 0.16), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.goe-game-soon-card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.65), transparent);
    pointer-events: none;
}

.goe-game-soon-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.goe-game-soon-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.13);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.goe-game-soon-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.25rem);
    font-weight: 900;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.18);
}

.goe-game-soon-desc {
    margin: 0;
    max-width: 560px;
    color: #cbd5e1;
    font-size: 0.94rem;
    line-height: 1.75;
}

.goe-game-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.goe-game-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    font-size: 0.78rem;
    font-weight: 800;
}

.goe-game-meta-pill b {
    color: #fbbf24;
}

.goe-game-coming-soon-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(124, 58, 237, 0.16));
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    text-align: center;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.goe-game-coming-soon-badge i {
    display: block;
    color: #fbbf24;
    font-size: 2rem;
    margin-bottom: 7px;
}

.goe-world-card {
    min-height: 210px;
}

.goe-game-world-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.goe-game-world-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 13px;
    border: 1px solid rgba(251, 191, 36, 0.42);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.9));
    color: #111827;
    text-decoration: none;
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.goe-game-world-play:hover {
    color: #111827;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.2);
}

.goe-game-world-mark {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: 136px;
    height: 136px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.18), rgba(124, 58, 237, 0.14));
    border: 1px solid rgba(251, 191, 36, 0.28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    color: #fff;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.goe-game-world-mark i {
    color: #fbbf24;
    font-size: 2.25rem;
}

@media (max-width: 768px) {
    #goe-our-games-section {
        contain-intrinsic-size: 430px;
    }

    .goe-game-soon-card {
        padding: 18px;
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .goe-game-meta-row,
    .goe-game-soon-kicker {
        justify-content: center;
    }

    .goe-game-coming-soon-badge,
    .goe-game-world-mark {
        width: 100%;
        height: auto;
        min-height: 86px;
        border-radius: 20px;
    }

    .goe-game-world-actions,
    .goe-game-world-play {
        width: 100%;
    }
}

#steamGiftCardsPage.steam-gift-cards-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background-color: #091321;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

#steamGiftCardsPage.steam-gift-cards-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 12, 22, 0.68), rgba(5, 12, 22, 0.9));
}

#steamGiftCardsPage.steam-gift-cards-page > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px), (pointer: coarse) {
    #steamGiftCardsPage.steam-gift-cards-page {
        background-attachment: scroll !important;
    }
}

#berlin-goe-merchant-section {
    position: relative;
    width: 100%;
    min-height: 360px;
    margin: clamp(28px, 5vw, 58px) auto;
    padding: 0 !important;
    overflow: visible;
    isolation: auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: 0 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#berlin-goe-merchant-section::after,
#berlin-goe-merchant-section::before {
    content: none !important;
    display: none !important;
}

.berlin-merchant-lazy-loader {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #cbd5e1;
    text-align: center;
    padding: 45px 20px;
}

.berlin-merchant-lazy-loader i {
    font-size: 2.45rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.45));
}

.berlin-merchant-content {
    display: none;
    width: min(1180px, 100%);
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(18px, 3vw, 32px);
    box-sizing: border-box;
    overflow-x: clip;
}

.berlin-merchant-head {
    text-align: center;
    margin-bottom: 22px;
}

.berlin-merchant-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: clamp(1.45rem, 3.5vw, 2.35rem);
    font-weight: 900;
    letter-spacing: 0.7px;
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.24);
}

.berlin-merchant-head h2 i {
    color: #fbbf24;
}

.berlin-merchant-head p {
    margin: 9px 0 0;
    color: #aeb8ca;
    font-size: 0.95rem;
    line-height: 1.75;
}

.berlin-merchant-ad,
.berlin-merchant-default-board {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    border-radius: 23px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(251, 191, 36, 0.28);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transform: translateZ(0);
}

.berlin-merchant-ad {
    display: block;
    aspect-ratio: 5/2;
    min-height: 0;
    background: rgba(0, 0, 0, 0.4);
}

.berlin-merchant-ad img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
    transition: transform 0.45s ease,
        filter 0.45s ease;
}

.berlin-merchant-ad::after,
.berlin-merchant-default-board::after {
    content: "فتح BERLIN GOE MERCHANT  ↗";
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 3;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 900;
    font-size: 0.82rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.berlin-merchant-ad::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 52%);
}

.berlin-merchant-ad:hover img {
    transform: none;
    filter: none;
}

.berlin-merchant-default-board {
    display: none;
    min-height: clamp(170px, 24vw, 285px);
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: radial-gradient(circle at 25% 35%, rgba(251, 191, 36, 0.2), transparent 34%),
        radial-gradient(circle at 78% 68%, rgba(124, 58, 237, 0.3), transparent 38%),
        linear-gradient(135deg, #14101f, #080b16 65%, #171020);
}

.berlin-merchant-default-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 46px);
    width: min(850px, 100%);
    text-align: right;
}

.berlin-merchant-default-icon {
    width: clamp(82px, 12vw, 130px);
    height: clamp(82px, 12vw, 130px);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(124, 58, 237, 0.2));
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.04),
        0 15px 35px rgba(0, 0, 0, 0.28);
}

.berlin-merchant-default-icon i {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    color: #fbbf24;
    filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.45));
}

.berlin-merchant-default-copy strong {
    display: block;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.25rem);
    font-weight: 950;
    letter-spacing: 0.8px;
}

.berlin-merchant-default-copy span {
    display: block;
    margin-top: 9px;
    color: #cbd5e1;
    line-height: 1.8;
    font-size: clamp(0.82rem, 1.7vw, 1rem);
}

.berlin-merchant-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.berlin-merchant-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    color: #15100a;
    background: linear-gradient(135deg, #fde68a, #fbbf24 55%, #f59e0b);
    font-family: inherit;
    font-weight: 950;
    box-shadow: 0 13px 30px rgba(245, 158, 11, 0.23);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}

.berlin-merchant-open-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(245, 158, 11, 0.32);
}

@media (max-width: 680px) {
    #berlin-goe-merchant-section {
width: 100%;
        max-width: 100%;
        overflow-x: clip;
min-height: 315px;
}

    .berlin-merchant-content {
padding-inline: 12px;
width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding: 17px 12px 22px;
        box-sizing: border-box;
        overflow-x: clip;
}

    .berlin-merchant-ad,
    .berlin-merchant-default-board {
width: 100%;
        max-width: 100%;
        margin-inline: auto;
border-radius: 17px;
}

    .berlin-merchant-ad {
        min-height: 0;
        aspect-ratio: 5/2;
    }

    .berlin-merchant-default-board {
        min-height: 185px;
    }

    .berlin-merchant-default-inner {
        flex-direction: column;
        gap: 13px;
        text-align: center;
    }

    .berlin-merchant-default-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .berlin-merchant-default-copy span {
        margin-top: 5px;
    }

    .berlin-merchant-ad::after,
    .berlin-merchant-default-board::after {
        left: 10px;
        bottom: 9px;
        padding: 7px 10px;
        font-size: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-merchant-ad img,
    .berlin-merchant-open-btn {
        transition: none !important;
    }
}

.load-more-decor-wrap::after,
.load-more-decor-wrap::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: 0 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.load-more-decor-wrap {
isolation: isolate;
position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.offline-more-arrow {
    position: absolute;
    top: 50%;
    width: 78px;
    height: 26px;
    transform: translateY(-50%);
    opacity: 0.96;
    pointer-events: none;
    user-select: none;
    animation: none !important;
    transition: transform 0.18s ease,
        opacity 0.18s ease;
    filter: drop-shadow(0 0 12px rgba(248, 211, 106, 0.16));
    text-shadow: none !important;
}

.offline-more-arrow--left {
    left: -96px;
}

.offline-more-arrow--right {
    right: -96px;
}

.offline-more-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.offline-more-arrow .offline-arrow-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.offline-more-arrow .offline-arrow-core {
    fill: none;
    stroke: #f8d36a;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.offline-more-arrow .offline-arrow-dot {
    fill: rgba(248, 211, 106, 0.95);
}

.load-more-decor-wrap:hover .offline-more-arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1.03);
}

@media (max-width: 900px) {
    .offline-more-arrow {
        width: 56px;
        height: 22px;
        opacity: 0.92;
    }

    .offline-more-arrow--left {
        left: -64px;
    }

    .offline-more-arrow--right {
        right: -64px;
    }
}

@media (max-width: 430px) {
    .offline-more-arrow {
        width: 42px;
        height: 18px;
    }

    .offline-more-arrow--left {
        left: -44px;
    }

    .offline-more-arrow--right {
        right: -44px;
    }
}

.product-reviews-container,
.product-reviews-iframe-section,
.product-reviews-iframe-wrap {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

.product-reviews-container::after,
.product-reviews-container::before,
.product-reviews-iframe-section::after,
.product-reviews-iframe-section::before,
.product-reviews-iframe-wrap::after,
.product-reviews-iframe-wrap::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
}

#productReviewsLazyIframe,
#productReviewsLazyIframe:focus,
#productReviewsLazyIframe:focus-visible,
#productReviewsLazyIframe:hover,
iframe.product-reviews-lazy-frame,
iframe.product-reviews-lazy-frame:focus,
iframe.product-reviews-lazy-frame:focus-visible,
iframe.product-reviews-lazy-frame:hover {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: 0 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
}

.goe-workspace-title-line {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px !important;
    text-align: center;
}

.goe-workspace-title-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.goe-workspace-title-link:hover {
    color: #fff;
}

.goe-workspace-offer-row {
    width: 100%;
    max-width: 100%;
    margin: 4px 0 7px;
    padding-left: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    box-sizing: border-box;
}

.goe-workspace-lifetime-badge,
.goe-workspace-plus-note {
    min-width: 0;
    min-height: 24px;
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.goe-workspace-plus-note {
    border: 1px solid rgba(165, 180, 252, 0.3);
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
}

.goe-workspace-plus-note i {
    color: #a5b4fc;
    font-size: 0.62rem;
}

.goe-workspace-lifetime-badge {
    border: 1px solid rgba(52, 211, 153, 0.32);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(45, 212, 191, 0.08));
    color: #6ee7b7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.goe-workspace-lifetime-badge strong {
    color: #d1fae5;
    font-weight: 950;
}

.goe-workspace-lifetime-badge i {
    font-size: 0.66rem;
}

.goe-workspace-description-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 2px;
}

.goe-workspace-description-pill {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #e2e8f0;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}

.goe-workspace-description-pill--lifetime {
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

.goe-workspace-description-pill--plus {
    border-color: rgba(165, 180, 252, 0.3);
    color: #c7d2fe;
}

.product-description-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid rgba(165, 180, 252, 0.34);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(124, 58, 237, 0.2));
    color: #eef2ff;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 900;
    box-shadow: 0 9px 24px rgba(49, 46, 129, 0.16);
    transition: transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.product-description-page-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(199, 210, 254, 0.58);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.34), rgba(124, 58, 237, 0.3));
}

@media (max-width: 680px) {
    .goe-workspace-offer-row {
        width: 100%;
        max-width: 100%;
        gap: 4px;
        margin: 3px 0 6px;
        padding-left: 4px;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    .goe-workspace-lifetime-badge,
    .goe-workspace-plus-note {
        min-height: 22px;
        padding: 3px 5px;
        font-size: 0.55rem;
        gap: 3px;
        white-space: nowrap;
    }

    .goe-workspace-description-meta {
        gap: 6px;
    }

    .goe-workspace-description-pill {
        padding: 6px 7px;
        font-size: 0.65rem;
    }

    .product-description-page-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 370px) {
    .goe-workspace-lifetime-badge,
    .goe-workspace-plus-note {
        padding-inline: 4px;
        font-size: 0.5rem;
        gap: 2px;
    }

    .goe-workspace-description-pill {
        font-size: 0.6rem;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-description-page-btn {
        transition: none !important;
    }
}

.berlin-steam-redeem-guide {
    width: min(1120px, calc(100% - 28px));
    margin: 34px auto 48px;
    padding: clamp(18px, 3vw, 28px);
    box-sizing: border-box;
    border: 1px solid rgba(102, 192, 244, 0.25);
    border-radius: 24px;
    background: radial-gradient(circle at 10% 0, rgba(102, 192, 244, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(23, 40, 55, 0.92), rgba(8, 18, 28, 0.94));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    color: #fff;
    overflow: hidden;
}

.berlin-steam-redeem-head {
    margin-bottom: 20px;
    text-align: center;
}

.berlin-steam-redeem-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 900;
}

.berlin-steam-redeem-head h2 i {
    color: #66c0f4;
}

.berlin-steam-redeem-head p {
    margin: 8px 0 0;
    color: #b8c7d6;
    font-size: 0.9rem;
    line-height: 1.75;
}

.berlin-steam-redeem-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.berlin-steam-redeem-step {
    position: relative;
    min-width: 0;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.berlin-steam-redeem-number {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(102, 192, 244, 0.42);
    background: rgba(102, 192, 244, 0.12);
    color: #8fd3ff;
    font-size: 1rem;
    font-weight: 950;
    box-shadow: 0 0 20px rgba(102, 192, 244, 0.08);
}

.berlin-steam-redeem-step h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 900;
}

.berlin-steam-redeem-step p {
    margin: 0;
    color: #b8c7d6;
    font-size: 0.82rem;
    line-height: 1.75;
}

.berlin-steam-redeem-step strong {
    color: #dff3ff;
}

.berlin-steam-redeem-note {
    margin-top: 15px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(251, 191, 36, 0.24);
    border-radius: 13px;
    background: rgba(251, 191, 36, 0.07);
    color: #fde68a;
    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1.65;
    text-align: center;
}

.berlin-steam-redeem-note i {
    flex: 0 0 auto;
    color: #fbbf24;
}

@media (max-width: 760px) {
    .berlin-steam-redeem-guide {
        width: calc(100% - 20px);
        margin: 26px auto 34px;
        padding: 16px 12px;
        border-radius: 18px;
    }

    .berlin-steam-redeem-steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .berlin-steam-redeem-step {
        padding: 15px 13px;
        border-radius: 14px;
    }

    .berlin-steam-redeem-note {
        align-items: flex-start;
        text-align: right;
    }
}

.product-page-illustration {
    width: min(100%, 760px);
    margin: 22px auto 4px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
}

.product-page-illustration img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
}

.product-page-illustration figcaption {
    margin-top: 9px;
    padding: 0 6px 2px;
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: center;
}

@media (max-width: 768px) {
    .product-page-illustration {
        margin-top: 18px;
        padding: 7px;
        border-radius: 14px;
    }

    .product-page-illustration img {
        max-height: 380px;
        border-radius: 10px;
    }

    .product-page-illustration figcaption {
        font-size: 0.76rem;
    }
}

html[dir="ltr"] body h1,
html[dir="ltr"] body h2,
html[dir="ltr"] body h3,
html[lang="en"] #productPageFullDescription .product-description-heading,
html[lang="en"] #productPageFullDescription strong[style*="border-left"],
html[lang="en"] #productPageFullDescription strong[style*="border-right"],
html[lang="en"] body h1,
html[lang="en"] body h2,
html[lang="en"] body h3 {
    border-inline-start: 0 !important;
    border-inline-end: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.berlin-preference-suggestion {
    position: fixed;
    inset-inline: 16px;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: var(--berlin-z-toast);
    width: min(430px, calc(100vw - 32px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(251, 191, 36, 0.32);
    border-radius: 18px;
    background: #171124;
    color: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.18s ease,
        transform 0.18s ease;
    contain: layout paint style;
}

.berlin-preference-suggestion.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.berlin-preference-suggestion__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.12);
    font-size: 1.25rem;
}

.berlin-preference-suggestion__title {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 900;
}

.berlin-preference-suggestion__text {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.6;
}

.berlin-preference-suggestion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.berlin-preference-suggestion__actions button,
.berlin-preference-suggestion__close {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.berlin-preference-suggestion__no,
.berlin-preference-suggestion__yes {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 900;
}

.berlin-preference-suggestion__yes {
    background: #fbbf24;
    color: #171124;
}

.berlin-preference-suggestion__no {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.berlin-preference-suggestion__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: 0 0;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .berlin-preference-suggestion {
        transition: none !important;
    }
}

.berlin-reorder-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.berlin-reorder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.1));
    color: #fcd34d;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.berlin-reorder-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.7);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.26), rgba(245, 158, 11, 0.16));
}

.berlin-reorder-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.berlin-reorder-btn--details {
    width: 100%;
    min-height: 43px;
    margin-top: 12px;
    font-size: 0.88rem;
}

.berlin-reorder-prefill-note {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(59, 130, 246, 0.09);
    color: #bfdbfe;
    font-size: 0.78rem;
    line-height: 1.65;
    text-align: right;
}

@media (max-width: 680px) {
    .berlin-reorder-row {
        justify-content: stretch;
    }

    .berlin-reorder-btn {
        width: 100%;
    }
}

.berlin-payment-proof {
    width: calc(100% - 12px);
    min-height: 46px;
    margin: 2px 0 8px 12px;
    padding: 5px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(168, 85, 247, 0.23);
    border-radius: 10px;
    background: rgba(24, 10, 42, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.berlin-payment-proof[hidden] {
    display: none !important;
}

.berlin-payment-proof.is-confirmed {
    min-height: 46px;
    justify-content: center;
    border-color: rgba(34, 197, 94, 0.34);
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.24), rgba(24, 10, 42, 0.82));
}

.berlin-payment-proof.is-confirmed .berlin-payment-proof__compact-title,
.berlin-payment-proof.is-confirmed .berlin-payment-proof__error,
.berlin-payment-proof.is-confirmed .berlin-payment-proof__methods {
    display: none !important;
}

.berlin-payment-proof__confirmed {
    display: none;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.berlin-payment-proof.is-confirmed .berlin-payment-proof__confirmed {
    display: flex;
}

.berlin-payment-proof__confirmed-check {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    border-radius: 50%;
    color: #052e16;
    background: #86efac;
    border: 1px solid rgba(187, 247, 208, 0.72);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.2);
    font-size: 0.76rem;
}

.berlin-payment-proof__confirmed-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
    text-align: right;
}

.berlin-payment-proof__confirmed-copy strong {
    color: #dcfce7;
    font-size: 0.72rem;
    font-weight: 900;
}

.berlin-payment-proof__confirmed-copy small {
    color: #9ee7b5;
    font-size: 0.58rem;
    font-weight: 700;
}

.berlin-payment-proof__phone-label-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 7px;
}

.berlin-payment-proof__phone-label-row > label {
    margin: 0 !important;
}

.berlin-payment-proof__help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.berlin-payment-proof__help-trigger {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(192, 132, 252, 0.42);
    border-radius: 50%;
    color: #d8b4fe;
    background: rgba(126, 34, 206, 0.15);
    font-family: inherit;
    font-size: 0.66rem;
    cursor: help;
    transition: border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.berlin-payment-proof__help-trigger:focus-visible,
.berlin-payment-proof__help-trigger:hover,
.berlin-payment-proof__help.is-open .berlin-payment-proof__help-trigger {
    border-color: rgba(216, 180, 254, 0.78);
    background: rgba(126, 34, 206, 0.3);
    transform: translateY(-1px);
    outline: 0;
}

.berlin-payment-proof__help-tooltip {
    position: absolute;
    top: calc(100% + 9px);
    right: -8px;
    width: min(290px, calc(100vw - 54px));
    padding: 11px 12px;
    border: 1px solid rgba(192, 132, 252, 0.34);
    border-radius: 10px;
    color: #f5f3ff;
    background: #1a0b2e;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.75;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.berlin-payment-proof__help-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-top: 1px solid rgba(192, 132, 252, 0.34);
    border-right: 1px solid rgba(192, 132, 252, 0.34);
    background: #1a0b2e;
    transform: rotate(-45deg);
}

.berlin-payment-proof__help.is-open .berlin-payment-proof__help-tooltip,
.berlin-payment-proof__help:focus-within .berlin-payment-proof__help-tooltip,
.berlin-payment-proof__help:hover .berlin-payment-proof__help-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.berlin-payment-proof__help-tooltip strong {
    display: block;
    margin-bottom: 4px;
    color: #facc15;
    font-size: 0.72rem;
    font-weight: 900;
}

.berlin-payment-proof__help-tooltip span {
    display: block;
    color: #ddd6fe;
}

.berlin-payment-proof__change-btn {
    min-height: 29px;
    padding: 5px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(192, 132, 252, 0.32);
    border-radius: 8px;
    color: #f3e8ff;
    background: rgba(126, 34, 206, 0.16);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.berlin-payment-proof__change-btn:focus-visible,
.berlin-payment-proof__change-btn:hover {
    border-color: rgba(216, 180, 254, 0.66);
    background: rgba(126, 34, 206, 0.28);
    transform: translateY(-1px);
    outline: 0;
}

.berlin-payment-proof__compact-title {
    min-width: 104px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #eee9f4;
    white-space: nowrap;
}

.berlin-payment-proof__compact-title > i {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    border-radius: 7px;
    color: #d8b4fe;
    background: rgba(168, 85, 247, 0.11);
    font-size: 0.68rem;
}

.berlin-payment-proof__title-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.05;
}

.berlin-payment-proof__title-text strong {
    color: #eee9f4;
    font-size: 0.7rem;
    font-weight: 900;
}

.berlin-payment-proof__title-text small {
    color: #a99fb4;
    font-size: 0.52rem;
    font-weight: 700;
}

.berlin-payment-proof__methods {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.berlin-payment-proof__method {
    min-width: 0;
    height: 32px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.022);
    color: #aaa2b5;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.64rem;
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
    transition: border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        filter 0.18s ease,
        transform 0.18s ease;
}

.berlin-payment-proof__method.is-dimmed {
    opacity: 0.38;
    filter: grayscale(0.75) brightness(0.62);
    transform: scale(0.985);
    color: #746c7d;
    border-color: rgba(255, 255, 255, 0.045);
    background: rgba(5, 2, 10, 0.28);
}

.berlin-payment-proof__method.is-dimmed:focus-visible,
.berlin-payment-proof__method.is-dimmed:hover {
    opacity: 0.68;
    filter: grayscale(0.35) brightness(0.82);
    color: #cfc7d8;
    border-color: rgba(192, 132, 252, 0.28);
    outline: 0;
}

.berlin-payment-proof__method::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 1.5px solid rgba(203, 190, 216, 0.55);
    border-radius: 50%;
    background: 0 0;
    box-shadow: inset 0 0 0 2px rgba(24, 10, 42, 0.95);
    transition: border-color 0.18s ease,
        background 0.18s ease;
}

.berlin-payment-proof__method.active,
.berlin-payment-proof__method:hover {
    color: #fff;
    border-color: rgba(192, 132, 252, 0.54);
    background: rgba(126, 34, 206, 0.19);
}

.berlin-payment-proof__method.active::before {
    border-color: #c084fc;
    background: #c084fc;
}

.berlin-payment-proof__method.is-complete::after {
    content: "✓";
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 13px;
    border-radius: 50%;
    color: #052e16;
    background: #86efac;
    font-size: 0.52rem;
    font-weight: 900;
}

.berlin-payment-proof__error {
    width: 100%;
    display: none;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.07);
    font-size: 0.67rem;
    font-weight: 700;
}

.berlin-payment-proof.has-error {
    flex-wrap: wrap;
    border-color: rgba(239, 68, 68, 0.48);
}

.berlin-payment-proof.has-error .berlin-payment-proof__error {
    display: block;
}

.berlin-payment-proof-modal {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-modal);
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(5, 2, 10, 0.76);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.berlin-payment-proof-modal[hidden] {
    display: none !important;
}

.berlin-payment-proof-modal__dialog {
    position: relative;
    width: min(430px, 100%);
    overflow: visible;
    border: 1px solid rgba(192, 132, 252, 0.32);
    border-radius: 16px;
    background: linear-gradient(145deg, #1d0e31, #100719);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.berlin-payment-proof-modal__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.berlin-payment-proof-modal__head strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.95rem;
}

.berlin-payment-proof-modal__close {
    position: absolute;
    top: -13px;
    left: -13px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    color: #e9e2ef;
    background: 0 0;
    box-shadow: none;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: color 0.18s ease,
        transform 0.18s ease;
}

.berlin-payment-proof-modal__close:focus-visible,
.berlin-payment-proof-modal__close:hover {
    color: #fff;
    transform: scale(1.12);
}

@media (max-width: 480px) {
    .berlin-payment-proof-modal__close {
        top: -11px;
        left: 2px;
    }
}

.berlin-payment-proof-modal__body {
    padding: 14px;
}

.berlin-payment-proof-modal__choice-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 11px;
    padding: 7px 9px;
    border: 1px solid rgba(192, 132, 252, 0.2);
    border-radius: 9px;
    color: #cfc3da;
    background: rgba(126, 34, 206, 0.07);
    font-size: 0.67rem;
    line-height: 1.5;
    font-weight: 700;
}

.berlin-payment-proof-modal__choice-note i {
    color: #c084fc;
}

.berlin-payment-proof__panel[hidden] {
    display: none !important;
}

.berlin-payment-proof__panel > label {
    display: block;
    margin-bottom: 7px;
    color: #e9e2ef;
    font-size: 0.79rem;
    font-weight: 900;
}

.berlin-payment-proof__panel > small {
    display: block;
    margin-top: 7px;
    color: #958ca1;
    font-size: 0.68rem;
    line-height: 1.6;
}

.berlin-payment-proof__phone-input {
    position: relative;
    display: flex;
    align-items: center;
}

.berlin-payment-proof__phone-input > i {
    position: absolute;
    right: 12px;
    color: #a78bfa;
    pointer-events: none;
}

.berlin-payment-proof__phone-input input {
    width: 100%;
    height: 46px;
    padding: 9px 43px 9px 12px !important;
    direction: ltr;
    text-align: center;
    letter-spacing: 1.2px;
    font: 900 1rem/1 monospace;
    color: #fff;
    background: rgba(9, 4, 18, 0.78);
    border: 1px solid rgba(148, 122, 180, 0.28);
    border-radius: 10px;
    outline: 0;
}

.berlin-payment-proof__phone-input input:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.11);
}

.berlin-payment-proof__upload-btn {
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed rgba(192, 132, 252, 0.5);
    border-radius: 11px;
    color: #eadbfa;
    background: rgba(126, 34, 206, 0.08);
    cursor: pointer;
    font-family: inherit;
}

.berlin-payment-proof__upload-btn small,
.berlin-payment-proof__upload-btn strong {
    display: block;
}

.berlin-payment-proof__upload-btn strong {
    font-size: 0.81rem;
}

.berlin-payment-proof__upload-btn small {
    margin-top: 3px;
    color: #958aa3;
    font-size: 0.63rem;
}

.berlin-payment-proof__progress {
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.berlin-payment-proof__progress span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #d946ef);
    animation: berlinProofProgress 1s ease-in-out infinite alternate;
}

@keyframes berlinProofProgress {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-175%);
    }
}

.berlin-payment-proof__preview {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.07);
}

.berlin-payment-proof__preview[hidden] {
    display: none !important;
}

.berlin-payment-proof__preview img {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    object-fit: cover;
    border-radius: 8px;
}

.berlin-payment-proof__preview > div {
    min-width: 0;
    flex: 1;
}

.berlin-payment-proof__preview strong {
    display: block;
    color: #86efac;
    font-size: 0.73rem;
}

.berlin-payment-proof__preview span {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #9a91a7;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-payment-proof__preview button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 9px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    cursor: pointer;
}

.berlin-payment-proof__status {
    min-height: 18px;
    margin: 7px 0 0;
    color: #aaa1b6;
    font-size: 0.68rem;
    text-align: center;
}

.berlin-payment-proof-modal__error {
    display: none;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 9px;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.08);
    font-size: 0.7rem;
    font-weight: 700;
}

.berlin-payment-proof-modal__error.show {
    display: block;
}

.berlin-payment-proof-modal__actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
}

.berlin-payment-proof-modal__actions button {
    flex: 1;
    min-height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
}

#payment-proof-modal-cancel {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #bbb3c4;
    background: rgba(255, 255, 255, 0.035);
}

#payment-proof-modal-save {
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

@media (max-width: 480px) {
    .berlin-payment-proof {
        min-height: 43px;
        gap: 4px;
        padding: 4px 5px;
    }

    .berlin-payment-proof__compact-title {
        min-width: 92px;
        gap: 4px;
    }

    .berlin-payment-proof__compact-title > i {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
        font-size: 0.62rem;
    }

    .berlin-payment-proof__title-text strong {
        font-size: 0.64rem;
    }

    .berlin-payment-proof__title-text small {
        font-size: 0.46rem;
    }

    .berlin-payment-proof__methods {
        gap: 4px;
    }

    .berlin-payment-proof__method {
        height: 30px;
        padding: 3px 4px;
        font-size: 0.57rem;
        gap: 3px;
    }

    .berlin-payment-proof__method::before {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
}

#productPagePlatform.berlin-platform-type-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
}

#productPagePlatform .berlin-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#productPagePlatform .berlin-meta-label {
    opacity: 0.72;
    font-weight: 700;
}

#productPagePlatform .berlin-meta-separator {
    opacity: 0.42;
    font-weight: 900;
}

#productPagePlatform .berlin-product-type-group {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
    cursor: help;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
    touch-action: manipulation;
}

#productPagePlatform .berlin-product-type-group.is-help-open,
#productPagePlatform .berlin-product-type-group:focus-visible,
#productPagePlatform .berlin-product-type-group:hover {
    border-color: rgba(251, 191, 36, 0.68);
    background: rgba(251, 191, 36, 0.11);
    outline: 0;
    transform: translateY(-1px);
}

#productPagePlatform .berlin-product-type-group .berlin-meta-label,
#productPagePlatform .berlin-product-type-group i,
#productPagePlatform .berlin-product-type-group strong {
    color: #fff;
    opacity: 1;
}

#productPagePlatform .berlin-product-type-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.05;
}

#productPagePlatform .berlin-product-type-copy small {
    display: block;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

#productPagePlatform img {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    #productPagePlatform.berlin-platform-type-line {
        gap: 6px;
        font-size: 0.84rem;
    }

    #productPagePlatform .berlin-product-type-group {
        padding: 3px 8px;
    }
}

#profile-settings-page.section.glass-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding: clamp(18px, 3vw, 34px) clamp(14px, 4vw, 42px) 48px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    isolation: isolate;
    background-color: #10091c;
}

#profile-settings-page.section.glass-card::after,
#profile-settings-page.section.glass-card::before {
    border-radius: 0 !important;
}

#profile-settings-page > #profile-edit-mode,
#profile-settings-page > #profile-save-bar,
#profile-settings-page > #profile-view-mode,
#profile-settings-page > #profileAchievementsPane,
#profile-settings-page > .berlin-purchased-cosmetics,
#profile-settings-page > .dashboard-container,
#profile-settings-page > .profile-account-tabs,
#profile-settings-page > .profile-header-section {
    width: min(1180px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

#profile-settings-page > #profileAchievementsPane,
#profile-settings-page > .dashboard-container {
    max-width: 1180px;
}

.profile-account-tabs {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 18px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(5, 12, 22, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.profile-account-tab {
    min-height: 46px;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: 0 0;
    color: #94a3b8;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.35px;
    cursor: pointer;
    transition: background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.profile-account-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
}

.profile-account-tab.is-active {
    color: #111827;
    border-color: rgba(251, 191, 36, 0.72);
    background: linear-gradient(135deg, #fde68a, #fbbf24 58%, #f59e0b);
    box-shadow: 0 9px 24px rgba(245, 158, 11, 0.2);
}

.profile-account-tab i {
    font-size: 0.95rem;
}

.profile-account-tab-panel[hidden] {
    display: none !important;
}

#profileAchievementsPane {
    min-height: 300px;
}

#profileAchievementsPane #berlinAchievementsSection {
    margin-top: 0;
}

@media (max-width: 768px) {
    #profile-settings-page.section.glass-card {
        padding: 12px 10px 34px !important;
    }

    .profile-account-tabs {
        margin: 12px auto 14px;
        padding: 5px;
        border-radius: 14px;
    }

    .profile-account-tab {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 0.78rem;
        gap: 7px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-account-tab {
        transition: none !important;
    }
}

@media (max-width: 768px) {
    .service-offer-card {
        width: min(92%, 320px) !important;
        max-width: 320px !important;
        height: 330px !important;
        min-height: 330px !important;
        padding: 14px 12px !important;
        gap: 6px !important;
        margin-inline: auto !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        contain: none !important;
        isolation: auto !important;
    }

    .service-offer-card:active,
    .service-offer-card:hover {
        transform: none !important;
    }

    .service-offer-card .service-card-image {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        margin: 0 auto 4px !important;
        border-width: 2px !important;
        flex: 0 0 120px !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    .service-offer-card .service-card-description,
    .service-offer-card h3 {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        background: 0 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    .service-offer-card h3 {
        min-height: 24px !important;
        margin: 5px 0 2px !important;
        padding: 0 4px !important;
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    .service-offer-card .service-card-description {
        min-height: 64px !important;
        margin: 0 0 8px !important;
        padding: 0 5px !important;
        font-size: 0.82rem !important;
        line-height: 1.65 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        overflow-wrap: anywhere !important;
    }

    .service-offer-card .service-card-description::after,
    .service-offer-card .service-card-description::before,
    .service-offer-card h3::after,
    .service-offer-card h3::before {
        content: none !important;
        display: none !important;
        background: 0 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .service-offer-card .offer-order-btn,
    .service-offer-card > a[class*="btn"],
    .service-offer-card > button {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        min-height: 40px !important;
        padding: 8px 20px !important;
        font-size: 0.88rem !important;
        line-height: 1.2 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
    }

    .gaming-key-card,
    .product-item,
    .psn-gift-card-item,
    .rental-card,
    .subscription-item {
        display: flex !important;
        flex-direction: column !important;
    }

    .gaming-key-card .product-content-overlay,
    .product-item .product-content-overlay,
    .psn-gift-card-item .product-content-overlay,
    .rental-card .product-content-overlay,
    .subscription-item .sub-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .gaming-key-card .product-buttons-container,
    .gaming-key-card .product-buttons-wrapper,
    .product-item .product-buttons-container,
    .product-item .product-buttons-wrapper,
    .psn-gift-card-item .product-buttons-container,
    .psn-gift-card-item .product-buttons-wrapper,
    .rental-card .product-buttons-container,
    .rental-card .product-buttons-wrapper,
    .subscription-item .product-buttons-container,
    .subscription-item .sub-footer {
        margin-top: auto !important;
        flex: 0 0 auto !important;
    }

    #chat-bot-toggle.bot-open {
color: #ffffff !important;
background: #dc2626 !important;
        color: #fff !important;
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.55) !important;
}

    #chat-bot-toggle.bot-open #chat-icon-msg,
    #chat-bot-toggle.bot-open .pulse-ring {
        display: none !important;
    }

    #chat-bot-toggle.bot-open #chat-icon-close {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2.7 !important;
    }
}

#berlin-goe-merchant-section,
#console-world-section,
#game-rentals-section,
#gaming-services-section,
#goe-our-games-section,
#offline-steam-section,
#personal-gifting-section,
#reward-shop-section,
#services-section,
#similarProductsSection,
#software-keys-section,
#spotlight-ads-section,
#steam-gift-cards-section,
#steam-points-section,
#subscriptions-section,
.product-reviews-container {
    content-visibility: auto;
    contain-intrinsic-size: 1px 620px;
}

#similarProductsSection,
#spotlight-ads-section,
.product-reviews-container {
    contain-intrinsic-size: 1px 380px;
}

#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: scroll !important;
    border: 1px solid gold;
    box-shadow: 0 0 30px rgba(255, 215, 0, .1);
    border-radius: 20px;
    padding: 30px;
    position: relative;
background-image: linear-gradient(to bottom, rgba(15, 10, 30, .96), rgba(44, 26, 64, .94)) !important;
contain-intrinsic-size: 1px 760px;
}

@media (max-width: 768px) {
    #berlin-goe-merchant-section,
    #console-world-section,
    #game-rentals-section,
    #gaming-services-section,
    #goe-our-games-section,
    #offline-steam-section,
    #personal-gifting-section,
    #services-section,
    #software-keys-section,
    #steam-gift-cards-section,
    #steam-points-section,
    #subscriptions-section {
        contain-intrinsic-size: 1px 820px;
    }
}

#build-bundle-section {
position: relative;
    background-image: url(https://i.postimg.cc/nhbtKM7v/ac-shadows-background.webp);
    background-attachment: fixed;
    background-size: auto;
    background-repeat: repeat;
    background-position: center top;
    overflow: hidden;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, .1);
content-visibility: visible !important;
    contain: none !important;
}

@media (max-width: 768px) {
    html body #bundle-floating-bar {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    #bundle-games-grid {
display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 10px !important;
        justify-content: stretch !important;
        overflow-x: hidden !important;
padding-bottom: 180px !important;
padding-bottom: 210px !important;
}
}

html body #bundle-floating-bar {
position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    width: min(820px, calc(100vw - 28px)) !important;
    max-width: 820px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: translate3d(-50%, 0, 0) !important;
    z-index: var(--berlin-z-modal) !important;
transition: opacity 0.18s ease,
        transform 0.18s ease !important;
}

html body #bundle-floating-bar.berlin-bundle-bar-closing {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 24px, 0) !important;
}

html body #bundle-floating-bar[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    #build-bundle-section.bundle-bar-hidden #bundle-games-grid {
        padding-bottom: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #bundle-floating-bar {
        transition: none !important;
    }
}

body.berlin-basha-support-linked #supportModal.is-visible {
    display: flex !important;
}

body.berlin-basha-support-linked #bot-iframe-wrapper.is-open {
    z-index: var(--berlin-z-priority-modal) !important;
    pointer-events: auto !important;
}

#productPage #faq.tab-content {
    width: 100%;
    box-sizing: border-box;
}

#productPage #faq-content {
    width: 100%;
    box-sizing: border-box;
    color: #e5e7eb;
}

#productPage .berlin-product-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#productPage .berlin-product-faq-item {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.24);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.11), rgba(15, 23, 42, 0.24));
    text-align: right;
}

#productPage .berlin-product-faq-question {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    color: #fff;
    font-weight: 900;
    line-height: 1.7;
}

#productPage .berlin-product-faq-question::before {
    content: "س";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.22);
    color: #d8b4fe;
    font-size: 0.75rem;
    font-weight: 950;
}

#productPage .berlin-product-faq-answer {
    margin: 0;
    padding-right: 32px;
    color: #cbd5e1;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

#productPage .berlin-product-faq-raw {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.18);
    background: rgba(124, 58, 237, 0.07);
    color: #e5e7eb;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

#productPage .berlin-product-faq-empty {
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: rgba(124, 58, 237, 0.05);
    color: #cbd5e1;
    line-height: 1.8;
    text-align: center;
}

@media (max-width: 768px) {
    #productPage .berlin-product-faq-item,
    #productPage .berlin-product-faq-raw {
        padding: 12px;
        border-radius: 12px;
    }

    #productPage .berlin-product-faq-answer {
        padding-right: 0;
    }
}

.berlin-orders-delivery-guide {
    position: relative;
    overflow: hidden;
    margin: 4px 0 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: radial-gradient(circle at 10% 0, rgba(251, 191, 36, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(30, 17, 50, 0.88), rgba(10, 15, 28, 0.9));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: #fff;
}

.berlin-orders-delivery-guide::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(70%);
}

.berlin-orders-delivery-guide-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 900;
    color: #fbbf24;
    font-size: 1rem;
}

.berlin-orders-delivery-guide-head i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #fbbf24;
    flex-shrink: 0;
}

.berlin-orders-delivery-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: berlinOrdersGuide;
}

.berlin-orders-delivery-steps li {
    position: relative;
    min-height: 78px;
    padding: 12px 12px 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e5e7eb;
    font-size: 0.84rem;
    line-height: 1.65;
}

.berlin-orders-delivery-steps li::before {
    counter-increment: berlinOrdersGuide;
    content: counter(berlinOrdersGuide);
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-left: 7px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111827;
    font-weight: 900;
    font-size: 0.78rem;
    box-shadow: 0 6px 14px rgba(251, 191, 36, 0.18);
}

.berlin-orders-delivery-note {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.86rem;
    line-height: 1.8;
}

.berlin-orders-delivery-note strong {
    color: #fff;
}

@media (max-width: 900px) {
    .berlin-orders-delivery-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .berlin-orders-delivery-guide {
        padding: 13px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .berlin-orders-delivery-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .berlin-orders-delivery-steps li {
        min-height: 0;
        font-size: 0.82rem;
    }

    .berlin-orders-delivery-note {
        font-size: 0.81rem;
    }
}

.berlin-order-option-badge {
    display: none !important;
}

.berlin-order-option-detail {
    margin: 7px 0 4px !important;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(167, 139, 250, 0.32);
    background: rgba(167, 139, 250, 0.1);
    color: #ddd6fe !important;
    font-size: 0.82rem;
}

#first-time-tutorial-card:not(.show) {
    display: none !important;
}

#goeWorldEntrySection {
    position: relative;
    z-index: 2;
}

.goe-world-entry-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    padding: clamp(22px, 4vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.68fr);
    align-items: center;
    gap: clamp(20px, 4vw, 50px);
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(129, 140, 248, 0.42);
    color: #fff !important;
    text-decoration: none !important;
    background: radial-gradient(circle at 12% 15%, rgba(56, 189, 248, 0.22), transparent 31%),
        radial-gradient(circle at 88% 85%, rgba(168, 85, 247, 0.26), transparent 35%),
        linear-gradient(135deg, rgba(10, 15, 35, 0.98), rgba(28, 15, 54, 0.96) 56%, rgba(8, 33, 53, 0.98));
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateZ(0);
    contain: layout paint style;
    transition: transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.goe-world-entry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(to left, #000, transparent 82%);
    mask-image: linear-gradient(to left, #000, transparent 82%);
}

.goe-world-entry-card::after {
    content: "";
    position: absolute;
    inset: auto 6% 0;
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #38bdf8, #a855f7, transparent);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
}

.goe-world-entry-content,
.goe-world-entry-visual {
    position: relative;
    z-index: 2;
}

.goe-world-entry-kicker {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    margin-bottom: 13px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    background: rgba(56, 189, 248, 0.1);
    color: #bae6fd;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.45px;
}

.goe-world-live-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12),
        0 0 15px rgba(34, 197, 94, 0.75);
}

.goe-world-entry-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 4vw, 3rem);
    line-height: 1.25;
    font-weight: 950;
    text-shadow: 0 0 26px rgba(125, 211, 252, 0.17);
}

.goe-world-entry-title span {
    background: linear-gradient(90deg, #7dd3fc, #c084fc 55%, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.goe-world-entry-description {
    max-width: 680px;
    margin: 12px 0 0;
    color: #cbd5e1;
    font-size: clamp(0.88rem, 1.8vw, 1rem);
    line-height: 1.85;
    font-weight: 600;
}

.goe-world-entry-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.goe-world-entry-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 0, 0, 0.22);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 800;
}

.goe-world-entry-features i {
    color: #7dd3fc;
}

.goe-world-entry-button {
    width: max-content;
    max-width: 100%;
    min-height: 50px;
    margin-top: 19px;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7dd3fc, #818cf8 46%, #c084fc);
    color: #090b18;
    font-weight: 950;
    box-shadow: 0 13px 30px rgba(99, 102, 241, 0.32);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}

.goe-world-entry-visual {
    min-height: 180px;
    display: grid;
    place-items: center;
}

.goe-world-portal {
    position: relative;
    width: clamp(150px, 20vw, 215px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92) 0 4%, rgba(125,211,252,.73) 5% 12%, rgba(129,140,248,.36) 29%, rgba(168,85,247,.12) 52%, transparent 68%);
    filter: drop-shadow(0 0 26px rgba(129, 140, 248, 0.5));
}

.goe-world-portal::before,
.goe-world-portal::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(125, 211, 252, 0.6);
    inset: 10%;
}

.goe-world-portal::after {
    inset: 24%;
    border-style: dashed;
    border-color: rgba(216, 180, 254, 0.68);
}

.goe-world-portal > i {
    position: relative;
    z-index: 2;
    font-size: clamp(2.7rem, 7vw, 5rem);
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.8),
        0 0 36px rgba(125, 211, 252, 0.65);
}

.goe-world-mini-avatar {
    position: absolute;
    z-index: 3;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.74);
    background: linear-gradient(145deg, #2563eb, #7c3aed);
    color: #fff;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.34);
    font-size: 1.2rem;
}

.goe-world-mini-avatar--one {
    top: 15px;
    right: 2px;
    transform: rotate(7deg);
}

.goe-world-mini-avatar--two {
    bottom: 8px;
    left: 1px;
    transform: rotate(-8deg);
    background: linear-gradient(145deg, #0891b2, #2563eb);
}

.goe-world-entry-card.goe-world-effects-active .goe-world-live-dot {
    animation: goeWorldLivePulse 1.8s ease-in-out infinite;
}

.goe-world-entry-card.goe-world-effects-active .goe-world-portal {
    animation: goeWorldPortalFloat 4s ease-in-out infinite;
}

.goe-world-entry-card.goe-world-effects-active .goe-world-portal::before {
    animation: goeWorldPortalSpin 9s linear infinite;
}

.goe-world-entry-card.goe-world-effects-active .goe-world-portal::after {
    animation: goeWorldPortalSpin 6s linear infinite reverse;
}

@media (hover: hover) {
    .goe-world-entry-card:hover {
        transform: translateY(-5px);
        border-color: rgba(125, 211, 252, 0.75);
        box-shadow: 0 29px 80px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(124, 58, 237, 0.17),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .goe-world-entry-card:hover .goe-world-entry-button {
        transform: translateX(-4px);
        box-shadow: 0 17px 36px rgba(99, 102, 241, 0.44);
    }
}

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

@keyframes goeWorldPortalFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes goeWorldLivePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.78);
        opacity: 0.68;
    }
}

@media (max-width: 760px) {
    .goe-world-entry-card {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 21px 16px 23px;
        border-radius: 23px;
        text-align: center;
    }

    .goe-world-entry-content {
        order: 2;
    }

    .goe-world-entry-visual {
        order: 1;
        min-height: 130px;
    }

    .goe-world-portal {
        width: 140px;
    }

    .goe-world-entry-kicker,
    .goe-world-entry-button {
        margin-inline: auto;
    }

    .goe-world-entry-features {
        justify-content: center;
    }

    .goe-world-entry-description {
        margin-inline: auto;
    }

    .goe-world-mini-avatar {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .goe-world-entry-card,
    .goe-world-entry-button,
    .goe-world-portal,
    .goe-world-portal::before,
    .goe-world-portal::after,
    .goe-world-live-dot {
        animation: none !important;
        transition: none !important;
    }
}

#orders-list-container .order-history-card {
    position: relative !important;
    padding-bottom: 24px !important;
}

#orders-list-container .order-history-card .order-card-details-hint {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-block;
    padding: 1px 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.74);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
    outline: 0;
}

@media (max-width: 520px) {
    #orders-list-container .order-history-card {
        padding-bottom: 22px !important;
    }

    #orders-list-container .order-history-card .order-card-details-hint {
        bottom: 4px;
        padding: 1px 6px;
        font-size: 0.62rem;
    }
}

#discordDecorationsPage {
background-image: linear-gradient(rgba(30, 17, 50, .85), rgba(30, 17, 50, .85)), url(https://i.postimg.cc/13bytnRZ/discord-background1.webp);
padding: 34px clamp(12px, 2.5vw, 28px) 42px !important;
    overflow-x: hidden;
}

#discordDecorationsPage #discordDecorationsPageContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage #discord-calculator-card {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr) !important;
    align-items: center !important;
    gap: clamp(22px, 3vw, 34px) !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 32px) !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage #discord-calculator-card .card-info-section,
#discordDecorationsPage #discord-calculator-card .card-form-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage #discord-calculator-card .card-info-section {
    gap: 11px !important;
    align-self: center !important;
}

#discordDecorationsPage #discord-calculator-card .card-form-section {
width: 100% !important;
align-items: stretch !important;
    gap: 10px !important;
}

#discordDecorationsPage #discord-calculator-card .card-icon {
    width: clamp(135px, 16vw, 190px) !important;
    height: clamp(135px, 16vw, 190px) !important;
    margin: 0 auto 2px !important;
    border-radius: 30px !important;
    object-fit: cover !important;
}

#discordDecorationsPage #discord-calculator-card h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
    line-height: 1.35 !important;
}

#discordDecorationsPage #discord-calculator-card .card-info-section > p {
    margin: 0 auto !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
}

#discordDecorationsPage .discord-decoration-fields {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

#discordDecorationsPage .discord-decoration-row {
display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px 40px !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    background: rgba(7, 10, 22, 0.3) !important;
    box-sizing: border-box !important;
display: grid;
    grid-template-areas: "name price remove";
    grid-template-columns: minmax(0, 1fr) 132px 40px;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(7, 10, 22, 0.3);
    box-sizing: border-box;
}

#discordDecorationsPage .discord-decoration-row .input-wrapper {
    grid-area: name;
    width: 100% !important;
    min-width: 0;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage .discord-deco-name {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 3px;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-family: Cairo, Tajawal, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

#discordDecorationsPage .discord-deco-name::placeholder {
    color: rgba(226, 232, 240, 0.7);
    font-weight: 600;
}

#discordDecorationsPage .discord-decoration-price-wrap {
    grid-area: price;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

#discordDecorationsPage .discord-deco-price,
#discordDecorationsPage #discord-calculator-card select.discord-deco-price {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(124, 131, 255, 0.42) !important;
    border-radius: 11px !important;
    outline: 0;
    background: #111827 !important;
    background-image: none !important;
    color: #fff !important;
    color-scheme: dark;
    font-family: Arial, Cairo, Tajawal, sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    cursor: pointer;
    appearance: auto !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage .discord-deco-price:focus {
    border-color: #7c83ff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18) !important;
}

#discordDecorationsPage .discord-deco-price option {
    background: #111827;
    color: #fff;
    font-family: Arial, Cairo, Tajawal, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

#discordDecorationsPage .discord-remove-decoration {
width: 40px !important;
    min-width: 40px !important;
    min-height: 44px !important;
grid-area: remove;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.32);
    border-radius: 11px;
    background: rgba(127, 29, 29, 0.24);
    color: #fecaca;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

#discordDecorationsPage .discord-remove-decoration:hover {
    background: rgba(185, 28, 28, 0.4);
    border-color: rgba(248, 113, 113, 0.62);
}

#discordDecorationsPage .discord-add-decoration-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 1px 0 0;
    padding: 10px 14px;
    border: 1px dashed rgba(88, 101, 242, 0.68);
    border-radius: 12px;
    background: rgba(88, 101, 242, 0.13);
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
}

#discordDecorationsPage .discord-add-decoration-btn:hover {
    background: rgba(88, 101, 242, 0.23);
    border-color: #7c83ff;
}

#discordDecorationsPage #discord-calculator-card .card-form-section > .input-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 2px 0 0 !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage #discord-price-display,
#discordDecorationsPage #discord-calculator-card .buy-btn {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#discordDecorationsPage .discord-price-summary-note {
    max-width: none !important;
    margin: -2px 0 0 !important;
    color: #aeb8ca !important;
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
    text-align: center;
}

#discordDecorationsPage .discord-offer-banner {
width: min(900px, 100%) !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 4.6 !important;
display: none;
    order: 2;
    width: min(900px, 100%);
    aspect-ratio: 16 / 4.6;
    min-height: 132px;
    margin: 0 auto;
    border-radius: 19px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(124, 131, 255, 0.28);
    background: rgba(0, 0, 0, 0.46);
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.27);
    isolation: isolate;
    box-sizing: border-box;
}

#discordDecorationsPage .discord-offer-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

#discordDecorationsPage .discord-offer-banner::after {
    content: "عرض خاص لديسكورد";
    position: absolute;
    inset-inline-end: 14px;
    bottom: 12px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
    pointer-events: none;
}

#discordDecorationsPage .discord-offer-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 58%);
    pointer-events: none;
}

@media (max-width: 820px) {
    #discordDecorationsPage #discord-calculator-card {
        grid-template-columns: 1fr !important;
        width: min(94vw, 520px) !important;
        max-width: 520px !important;
        gap: 16px !important;
        padding: 20px 15px !important;
    }

    #discordDecorationsPage #discord-calculator-card .card-icon {
        width: 105px !important;
        height: 105px !important;
        border-radius: 24px !important;
    }

    #discordDecorationsPage #discord-calculator-card .card-info-section {
        gap: 7px !important;
    }

    #discordDecorationsPage #discord-calculator-card .card-info-section > p {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
    }

    #discordDecorationsPage .discord-offer-banner {
width: min(94vw, 520px) !important;
        aspect-ratio: 16 / 6 !important;
width: min(94vw, 520px);
        aspect-ratio: 16 / 6;
        min-height: 118px;
        border-radius: 16px;
}
}

@media (max-width: 560px) {
    #discordDecorationsPage {
        padding-inline: 8px !important;
    }

    #discordDecorationsPage .discord-decoration-row {
grid-template-areas: "name remove" "price price" !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
grid-template-areas: "name remove"
            "price price";
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 7px;
        padding: 7px;
}

    #discordDecorationsPage .discord-deco-price,
    #discordDecorationsPage #discord-calculator-card select.discord-deco-price {
        text-align: right !important;
        padding-inline: 12px !important;
    }

    #discordDecorationsPage .discord-offer-banner::after {
        inset-inline-end: 9px;
        bottom: 8px;
        padding: 5px 9px;
        font-size: 0.67rem;
    }
}

#discordDecorationsPage[data-discord-lazy]:not([data-discord-lazy="ready"]) {
    background-image: none !important;
    background-color: #130b22 !important;
    min-height: 280px;
    contain: layout style paint;
}

#discordDecorationsPage[data-discord-lazy="ready"] {
    background-image: linear-gradient(rgba(30, 17, 50, 0.85), rgba(30, 17, 50, 0.85)),
        url(https://i.postimg.cc/13bytnRZ/discord-background1.webp) !important;
    background-size: cover !important;
    background-position: center !important;
}

#discordDecorationsPage .berlin-discord-page-mount {
    width: 100%;
    min-height: 220px;
}

#discordDecorationsPage .berlin-discord-page-placeholder {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #c7d2fe;
    text-align: center;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 800;
}

#discordDecorationsPage .berlin-discord-page-placeholder i {
    font-size: 2.2rem;
    color: #5865f2;
}

#discordDecorationsPage[data-discord-lazy="ready"] .berlin-discord-page-mount {
    min-height: 0;
}

#berlinHowFaqLazyMount {
    width: min(1060px, calc(100% - 24px));
    min-height: 145px;
    margin: 14px auto 24px;
    content-visibility: auto;
    contain-intrinsic-size: 470px;
    contain: layout paint style;
}

#berlinHowFaqLazyMount .berlin-how-faq-placeholder {
    min-height: 145px;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(205, 161, 255, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
    color: #94a3b8;
    text-align: center;
    font-family: Tajawal, Cairo, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.berlin-how-faq-section {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
    direction: rtl;
    font-family: Tajawal, Cairo, sans-serif;
}

.berlin-how-faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    color: #d8c6ff;
    font-size: 0.7rem;
    font-weight: 900;
}

.berlin-how-faq-title {
    margin: 0 0 11px;
    color: #fff;
    font-size: clamp(1.08rem, 1.8vw, 1.45rem);
    font-weight: 900;
    line-height: 1.3;
    border-inline-start: 0 !important;
    border-inline-end: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

.berlin-how-faq-title::before,
.berlin-how-faq-title::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.berlin-how-steps {
    display: grid;
    gap: 6px;
}

.berlin-how-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.berlin-how-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.berlin-how-step-num {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d8c6ff;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(216, 198, 255, 0.18);
}

.berlin-how-step h3 {
    margin: 0 0 2px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 900;
}

.berlin-how-step p {
    margin: 0;
    color: #aeb8ca;
    font-size: 0.74rem;
    line-height: 1.5;
}

.berlin-faq-list {
    display: grid;
    gap: 7px;
}

.berlin-faq-item {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.032);
    overflow: clip;
}

.berlin-faq-item summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    color: #f8fafc;
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 900;
    user-select: none;
    touch-action: manipulation;
}

.berlin-faq-item summary::-webkit-details-marker {
    display: none;
}

.berlin-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: #d8c6ff;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.berlin-faq-item[open] summary::after {
    content: "−";
}

.berlin-faq-answer {
    padding: 0 12px 10px;
    color: #aeb8ca;
    font-size: 0.76rem;
    line-height: 1.62;
}

.berlin-faq-answer p {
    margin: 0;
}

.berlin-how-panel,
.berlin-faq-panel {
min-width: 0;
    padding: clamp(13px, 1.7vw, 18px);
    border-radius: 18px;
    border: 1px solid rgba(205, 161, 255, 0.16);
    background: linear-gradient(145deg, rgba(30, 17, 50, 0.46), rgba(10, 10, 20, 0.68));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    contain: layout paint style;
color: #d8c6ff;
}

.berlin-how-faq-section *,
.berlin-how-faq-section *::before,
.berlin-how-faq-section *::after {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 860px) {
    #berlinHowFaqLazyMount {
        width: min(100% - 16px, 680px);
        min-height: 120px;
        margin-top: 10px;
        margin-bottom: 18px;
        contain-intrinsic-size: 690px;
    }

    #berlinHowFaqLazyMount .berlin-how-faq-placeholder {
        min-height: 120px;
        padding: 13px;
        border-radius: 14px;
    }

    .berlin-how-faq-section {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .berlin-how-panel,
    .berlin-faq-panel {
        border-radius: 15px;
        padding: 13px 12px;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.17);
    }

    .berlin-how-faq-title {
        margin-bottom: 9px;
        font-size: 1.08rem;
    }

    .berlin-how-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0;
    }

    .berlin-how-step-num {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .berlin-how-step h3 {
        font-size: 0.82rem;
    }

    .berlin-how-step p {
        font-size: 0.7rem;
    }

    .berlin-faq-item summary {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 0.79rem;
    }

    .berlin-faq-answer {
        padding: 0 10px 9px;
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-how-faq-section *,
    .berlin-how-faq-section *::before,
    .berlin-how-faq-section *::after {
        scroll-behavior: auto !important;
    }
}

.youtube-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.youtube-facade {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.youtube-facade:hover img {
    opacity: 1;
}

.play-button {
    position: absolute;
    width: 68px;
    height: 48px;
    background-color: rgba(33, 33, 33, 0.8);
    border-radius: 12px;
    z-index: 5;
    transition: background-color 0.2s;
}

.play-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
}

.youtube-facade:hover .play-button {
    background-color: red;
}

.leader-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.1);
    padding: 12px;
    border-radius: 15px;
    transition: 0.3s;
}

.leader-item:hover {
    background: rgba(124, 58, 237, 0.1);
    transform: scale(1.02);
}

.rank-medal {
    font-size: 1.5rem;
    min-width: 35px;
    text-align: center;
}

.leader-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #7c3aed;
    object-fit: cover;
}

.leader-info {
    flex: 1;
}

.leader-name {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.leader-stats {
    font-size: 0.75rem;
    color: #a855f7;
}

.leader-amount {
    font-weight: 900;
    color: #10b981;
    font-size: 1rem;
}

#leaderboard-list::-webkit-scrollbar {
    width: 5px;
}

#leaderboard-list::-webkit-scrollbar-thumb {
    background: #4c1d95;
    border-radius: 10px;
}

.rating-textarea-custom {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    resize: vertical;
    margin: 0;
    transform: translateX(100px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

@media (max-width: 768px) {
    .rating-textarea-custom {
        transform: translateX(0) !important;
        width: 100% !important;
        margin: 10px 0 !important;
        display: block;
    }
}

.read-more-btn {
    background-color: #3a0066;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.read-more-btn:hover {
    background-color: indigo;
}

.read-more-links a {
    display: block;
    margin: 8px 0;
    color: #3a0066;
    text-decoration: none;
    font-weight: 700;
}

.read-more-links a:hover {
    text-decoration: underline;
}

.sh-pay-tab {
    flex: 1;
    padding: 10px 15px;
    background: rgba(20, 10, 35, 0.5);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    color: #b197fc;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-pay-tab:hover:not(.active) {
    background: rgba(138, 43, 226, 0.1);
    transform: translateY(-2px);
}

.sh-pay-tab.active {
    background: rgba(0, 255, 163, 0.1);
    border-color: #00ffa3;
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 255, 163, 0.2);
}

.sh-pay-tab.active svg {
    fill: #00ffa3;
}

#paymentLoadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0a0710;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

.sh_payment_full_page {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: opacity 0.6s ease;
    overflow: hidden;
}

.sh_split_layout {
    display: flex;
    width: 100%;
    height: 100vh;
    direction: rtl;
    overflow: hidden;
}

.sh_side_panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 100vh;
    overflow: hidden;
}

.sh_header_box {
    padding: 8px 5px;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.highlight_box {
    background: linear-gradient(145deg, rgba(138, 43, 226, 0.1) 0, rgba(0, 0, 0, 0.2) 100%);
    border-color: rgba(138, 43, 226, 0.4);
}

#sh_title_timer,
.sh-title-amount,
.sh-title-product {
    margin: 0 0 2px 0;
    color: #b197fc;
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.8;
}

.payment-summary-value {
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;
font-size: 0.75rem;
    margin: 0;
}

.payment-timer-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff4d4d;
}

.payment-total-amount-value {
    color: #00ffa3;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.sh_order_details {
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(138, 43, 226, 0.2);
}

.sh_payment_actions {
    background: 0 0;
}

.sh_panel_content {
    width: 100%;
    max-width: 380px;
    padding: 5px 0;
}

.sh_legend_badge {
    display: inline-block;
    margin-right: 8px;
    font-size: 0.6rem;
    background: #00ffa3;
    color: #0a0710;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    vertical-align: middle;
}

#sh_fullscreen_input_box {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(10, 5, 20, 0.5);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    transition: all 0.3s;
}

#sh_fullscreen_input_box:focus-within {
    border-color: #00ffa3;
    box-shadow: 0 0 15px rgba(0, 255, 163, 0.15);
}

#fullscreen_email_input {
    width: 100%;
    background: 0 0;
    color: #fff;
    border: none;
    outline: 0;
    font-size: 0.95rem;
    padding: 2px 5px;
}

.paypal_wrapper {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    min-height: 45px;
}

#sh_manual_confirm_btn {
    width: 100%;
    padding: 12px;
    background: rgba(138, 43, 226, 0.1);
    color: #b197fc;
    border: 1px dashed rgba(138, 43, 226, 0.5);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 700;
    font-size: 0.9rem;
}

#sh_manual_confirm_btn:hover {
    background: #8a2be2;
    color: #fff;
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(138, 43, 226, 0.2);
}

.sh_security_dot {
    width: 4px;
    height: 4px;
    background: #00ffa3;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    box-shadow: 0 0 8px #00ffa3;
}

.sh_info_compact {
    background: rgba(20, 10, 35, 0.3);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 16px;
    padding: 15px;
}

.sh_info_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sh_total_row {
    border-bottom: none;
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid rgba(138, 43, 226, 0.2);
}

.sh_label {
    color: #b197fc;
    font-weight: 600;
    font-size: 0.9rem;
}

.sh_value {
    color: #fff;
    font-size: 0.95rem;
    margin: 0;
}

.sh_timer {
    color: #ff4d4d;
    font-weight: 700;
    font-family: monospace;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
}

.sh_amount {
    color: #00ffa3;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 255, 163, 0.2);
}

.sh_modern_back_btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(20, 10, 35, 0.3);
    color: #fff;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
    z-index: 200;
}

.sh_modern_back_btn:hover {
    background: #ff4d4d;
    border-color: #ff4d4d;
    transform: scale(1.02);
}

.sh-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(138, 43, 226, 0.1);
    border-top-color: #00ffa3;
    border-radius: 50%;
    animation: sh-spin 0.8s linear infinite;
}

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

@media (max-width: 900px) {
    .sh_split_layout {
        flex-direction: column-reverse;
    }

    .sh_side_panel {
        padding: 15px;
        height: 50vh;
    }

    .sh_order_details {
        border-right: none;
        border-bottom: 1px solid rgba(138, 43, 226, 0.15);
        height: 45vh;
    }

    .sh_payment_actions {
        height: 55vh;
    }

    .sh_panel_content {
        max-width: 100%;
    }

    .sh_modern_back_btn {
margin-bottom: 15px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
}
}

.referral-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.82);
    z-index: var(--berlin-z-modal);
    direction: rtl;
    font-family: Cairo, Tajawal, sans-serif;
}

.referral-card {
    width: min(96vw, 1080px);
    max-height: calc(100dvh - 36px);
    position: relative;
    overflow: auto;
    border-radius: 26px;
    padding: 24px;
    color: #fff;
    text-align: center;
    background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.2), transparent 32%),
        radial-gradient(circle at left bottom, rgba(124, 58, 237, 0.2), transparent 34%),
        linear-gradient(145deg, #120820, #101827 58%, #08130c);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.referral-modal-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(380px, 1.08fr);
    gap: 16px;
    align-items: stretch;
}

.referral-create-panel,
.referral-earnings-panel {
    min-width: 0;
    border-radius: 22px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.referral-create-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.referral-earnings-panel {
    text-align: right;
    background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 36%),
        rgba(0, 0, 0, 0.18);
    content-visibility: auto;
    contain-intrinsic-size: 420px;
    contain: layout paint style;
}

.referral-close {
    position: absolute;
    top: 12px;
    left: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    cursor: pointer;
    z-index: 3;
}

.referral-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 12px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #16a34a, #84cc16);
    box-shadow: 0 14px 35px rgba(34, 197, 94, 0.35);
    font-size: 32px;
}

.referral-card h2 {
    margin: 8px 0 8px;
    font-size: clamp(23px, 3vw, 31px);
    color: #fff;
}

.referral-card p {
    margin: 0 auto 18px;
    color: #d7d7df;
    line-height: 1.75;
    font-size: 14px;
    max-width: 460px;
}

.referral-rules-box {
    margin: 0 auto 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.referral-rule-pill {
    padding: 10px 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d1fae5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.6;
}

.referral-rule-pill b {
    color: #facc15;
    font-size: 18px;
}

.referral-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: 0;
    font-size: 15px;
    text-align: left;
    direction: ltr;
    margin-bottom: 12px;
}

.referral-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.referral-export-btn,
.referral-main-action,
.referral-refresh-btn {
    border: none;
    cursor: pointer;
    border-radius: 15px;
    padding: 13px 16px;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 900;
    font-size: 15px;
}

.referral-main-action {
border: none;
    cursor: pointer;
    border-radius: 15px;
    padding: 14px 16px;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 900;
    font-size: 16px;
width: 100%;
    color: #06120a;
    background: linear-gradient(135deg, #facc15, #84cc16, #22c55e);
    box-shadow: 0 12px 30px rgba(132, 204, 22, 0.22);
}

.referral-export-btn:disabled,
.referral-main-action:disabled,
.referral-refresh-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.referral-result {
    display: none;
    margin-top: 18px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: right;
}

.referral-link-box {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.referral-link-box input {
    flex: 1;
    min-width: 0;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    direction: ltr;
    text-align: left;
    font-size: 12px;
}

.referral-small-btn {
    border: none;
    cursor: pointer;
    border-radius: 12px;
    padding: 0 13px;
    font-weight: 900;
    color: #fff;
    background: #7c3aed;
    white-space: nowrap;
}

.referral-share-btn {
    width: 100%;
    margin-top: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    border-radius: 13px;
    padding: 11px 14px;
    font-weight: 800;
    font-family: Cairo, Tajawal, sans-serif;
}

.referral-note {
    display: block;
    margin-top: 10px;
    color: #a7f3d0;
    font-size: 12px;
    line-height: 1.6;
}

.referral-earnings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.referral-earnings-head h3 {
    margin: 0;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    display: flex;
    align-items: center;
    gap: 8px;
}

.referral-earnings-head p {
    margin: 5px 0 0;
    max-width: none;
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: right;
}

.referral-lazy-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.13);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #bbf7d0;
    font-size: 0.72rem;
    font-weight: 900;
}

.referral-earnings-status {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(250, 204, 21, 0.26);
    background: rgba(0, 0, 0, 0.18);
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 12px;
}

.referral-earnings-status.success {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.28);
    color: #bbf7d0;
}

.referral-earnings-status.error {
    border-style: solid;
    border-color: rgba(248, 113, 113, 0.3);
    color: #fecaca;
}

.referral-earnings-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.referral-stat-card {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.referral-stat-label {
    display: block;
    color: #aeb8ca;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.referral-stat-value {
    display: block;
    color: #facc15;
    font-size: 1.05rem;
    font-weight: 950;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.referral-earnings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 12px;
}

.referral-export-btn {
    color: #111827;
    background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
    box-shadow: 0 12px 26px rgba(245, 158, 11, 0.2);
}

.referral-refresh-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.referral-earnings-list {
    max-height: 132px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-inline-end: 3px;
}

.referral-earning-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.referral-earning-row strong {
    color: #fff;
    font-size: 0.82rem;
    direction: ltr;
    text-align: right;
}

.referral-earning-row small {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    margin-top: 3px;
}

.referral-earning-amount {
    color: #86efac;
    font-weight: 950;
    white-space: nowrap;
    direction: rtl;
}

.referral-empty-row {
    padding: 12px;
    border-radius: 13px;
    color: #94a3b8;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.82rem;
}

.referral-invoice-output {
    display: none;
    margin-top: 12px;
}

.referral-invoice-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.32);
    background: #f8fafc;
    color: #111827;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
}

.referral-invoice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #111827, #064e3b);
    color: #fff;
}

.referral-invoice-top strong {
    font-size: 1.05rem;
}

.referral-invoice-body {
    padding: 14px 16px;
}

.referral-invoice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.referral-invoice-field {
    border-radius: 12px;
    padding: 9px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.referral-invoice-field span {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.referral-invoice-field b {
    display: block;
    color: #111827;
    font-size: 0.9rem;
    word-break: break-word;
}

.referral-invoice-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 14px;
    padding: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #065f46;
    font-weight: 950;
}

.referral-screenshot-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.65;
}

.referral-invoice-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 14px;
}

.referral-invoice-actions button {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    color: #fff;
    background: #111827;
}

.referral-invoice-actions button:first-child {
    color: #111827;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

@media (max-width: 900px) {
    .referral-card {
        width: min(96vw, 620px);
        padding: 18px;
    }

    .referral-modal-grid {
        grid-template-columns: 1fr;
    }

    .referral-earnings-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .referral-overlay {
        padding: 10px;
        align-items: center;
    }

    .referral-card {
        border-radius: 20px;
        padding: 14px;
        max-height: calc(100dvh - 20px);
    }

    .referral-create-panel,
    .referral-earnings-panel {
        padding: 15px;
        border-radius: 18px;
    }

    .referral-earnings-actions,
    .referral-invoice-actions,
    .referral-invoice-grid,
    .referral-rules-box {
        grid-template-columns: 1fr;
    }

    .referral-card h2 {
        font-size: 23px;
    }
}

#berlinCompletedOrderAlertLayer {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-toast);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) 14px 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.88), rgba(3, 7, 18, 0.48) 42%, rgba(3, 7, 18, 0.18));
    pointer-events: none;
}

#berlinCompletedOrderAlertLayer.show {
    display: flex;
    pointer-events: auto;
}

.berlin-completed-order-alert {
    width: min(620px, 96vw);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(74, 222, 128, 0.52);
    background: radial-gradient(circle at 88% 0%, rgba(34, 197, 94, 0.2), transparent 36%),
        linear-gradient(145deg, #111827, #18112c 62%, #0b1220);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), 0 0 38px rgba(34, 197, 94, 0.2);
    color: #fff;
    padding: 22px;
    direction: rtl;
    animation: berlinCompletedOrderAlertIn 0.34s ease both;
    pointer-events: auto;
}

.berlin-completed-order-alert::before {
    content: "";
    position: absolute;
    inset: 0 18px auto;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #4ade80, #fbbf24, transparent);
}

.berlin-completed-order-close-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(2, 6, 23, 0.72);
    color: #fff;
    font-family: inherit;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
    touch-action: manipulation;
}

.berlin-completed-order-close-btn:hover,
.berlin-completed-order-close-btn:focus-visible {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(254, 202, 202, 0.8);
    transform: scale(1.06);
    outline: 0;
}

.berlin-completed-order-alert-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.berlin-completed-order-alert-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(74, 222, 128, 0.42);
    color: #86efac;
    font-size: 1.55rem;
    box-shadow: inset 0 0 20px rgba(74, 222, 128, 0.08);
}

.berlin-completed-order-alert-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 950;
}

.berlin-completed-order-alert-subtitle {
    margin: 5px 0 0;
    color: #bbf7d0;
    font-size: 0.82rem;
    font-weight: 850;
}

.berlin-completed-order-alert-text {
    margin: 0;
    color: #e2e8f0;
    line-height: 1.85;
    font-size: 0.94rem;
}

.berlin-completed-order-alert-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.berlin-completed-order-alert-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.76rem;
    font-weight: 800;
}

.berlin-completed-order-alert-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 17px;
}

.berlin-completed-order-open-btn,
.berlin-completed-order-permission-btn {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    padding: 11px 15px;
    font-family: inherit;
    font-weight: 950;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    touch-action: manipulation;
}

.berlin-completed-order-open-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #04120a;
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25);
}

.berlin-completed-order-permission-btn {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.berlin-completed-order-permission-note {
    margin-top: 8px;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.6;
    text-align: center;
}

@keyframes berlinCompletedOrderAlertIn {
    from {
        opacity: 0;
        transform: translateY(-22px) scale(0.97);
    }

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

@media (max-width: 600px) {
    #berlinCompletedOrderAlertLayer {
        padding-inline: 9px;
    }

    .berlin-completed-order-alert {
        width: 100%;
        border-radius: 20px;
        padding: 18px 15px;
    }

    .berlin-completed-order-close-btn {
        top: 9px;
        left: 9px;
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    .berlin-completed-order-alert-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-completed-order-alert {
        animation: none !important;
    }
}

#profile-edit-mode .berlin-avatar-actions-holder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 0 clamp(24px, 8vw, 160px) !important;
    flex-shrink: 0 !important;
}

#berlin-avatar-preview-row img:hover {
    transform: translateY(-1px);
    border-color: var(--accent-yellow, #facc15);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.22);
}

#berlin-avatar-preview-row img.selected-avatar,
#profile-edit-mode #avatar-selection-area .avatars-grid img.selected-avatar {
    border-color: var(--accent-yellow, #facc15) !important;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22),
        0 0 12px rgba(250, 204, 21, 0.35) !important;
}

#profile-edit-mode .berlin-show-more-avatars-btn {
    padding: 9px 15px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    min-width: 122px;
}

#profile-edit-mode #avatar-selection-area {
    display: none !important;
    max-height: none !important;
    overflow: visible !important;
}

#profile-edit-mode #avatar-selection-area.open-dropdown {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    content-visibility: auto;
    contain: layout paint style;
}

#profile-edit-mode #avatar-selection-area .avatars-grid img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    cursor: pointer !important;
    contain: paint;
    content-visibility: auto;
}

#profile-edit-mode #avatar-selection-area h3 {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

@media (max-width: 768px) {
    #profile-edit-mode .name-input-group-centered {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    #profile-edit-mode .name-input-group-centered h3 {
        margin-right: 0 !important;
        width: 100%;
        text-align: center !important;
    }

    #profile-edit-mode #name-input-wrapper-center {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    #profile-edit-mode .berlin-avatar-actions-holder {
        margin: 0 !important;
        width: 100%;
    }

    #profile-edit-mode #avatar-selection-area .avatars-grid img {
        width: 46px !important;
        height: 46px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #berlin-avatar-preview-row img,
    #profile-edit-mode .berlin-show-more-avatars-btn {
        transition: none !important;
    }
}

#berlin-avatar-preview-row {
display: grid;
    grid-template-columns: repeat(6, 42px);
    gap: 7px;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    content-visibility: auto;
    contain: layout paint style;
grid-template-columns: repeat(6, 44px) !important;
    gap: 7px !important;
    max-width: 315px !important;
}

#berlin-avatar-preview-row img {
width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    transition: transform 0.14s ease,
        border-color 0.14s ease,
        box-shadow 0.14s ease;
    contain: paint;
width: 44px !important;
    height: 44px !important;
}

#profile-edit-mode #avatar-selection-area .avatars-grid {
display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(52px, 52px)) !important;
    justify-content: center !important;
    align-items: center !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 6px;
grid-template-columns: repeat(auto-fill, minmax(54px, 54px)) !important;
    gap: 9px !important;
}

#profile-edit-mode #avatar-selection-area .avatar-cosmetic-wrap,
#profile-edit-mode #avatar-selection-area .avatars-grid img {
    width: 54px !important;
    height: 54px !important;
}

#profile-edit-mode .card-bg-selection {
    width: min(820px, 100%) !important;
    margin: 22px auto 0 !important;
}

#profile-edit-mode .bg-options-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 12px !important;
    justify-content: center !important;
}

#profile-edit-mode .card-bg-option {
    width: 100% !important;
    min-width: 132px !important;
    height: 78px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    contain: layout paint style !important;
}

#profile-edit-mode .card-bg-option img,
.berlin-shop-bg-cosmetic-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#berlin-shop-avatar-cosmetics,
#berlin-shop-bg-cosmetics {
    width: min(1120px, 96%) !important;
    margin: 16px auto 20px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
    content-visibility: auto;
    contain-intrinsic-size: 1px 420px;
}

.berlin-shop-cosmetics-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    color: #facc15;
    font-weight: 900;
    font-size: 1rem;
}

.berlin-shop-cosmetics-title small {
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
}

.berlin-shop-avatar-cosmetics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 48px));
    justify-content: center;
    gap: 9px;
}

.berlin-shop-bg-cosmetics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.berlin-shop-avatar-cosmetic-card,
.berlin-shop-bg-cosmetic-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: transform 0.13s ease,
        border-color 0.13s ease;
    contain: layout paint style;
}

.berlin-shop-avatar-cosmetic-card:hover,
.berlin-shop-bg-cosmetic-card:hover {
    transform: translateY(-1px);
    border-color: rgba(250, 204, 21, 0.75);
}

.berlin-shop-avatar-cosmetic-card {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.berlin-shop-avatar-cosmetic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.berlin-shop-bg-cosmetic-card {
    min-height: 62px;
    height: 68px;
    border-radius: 13px;
}

.berlin-shop-cosmetic-mini-price {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 900;
    line-height: 1;
    color: #facc15;
    background: rgba(0, 0, 0, 0.74);
    border: 1px solid rgba(250, 204, 21, 0.44);
    pointer-events: none;
}

.berlin-shop-avatar-cosmetic-card .berlin-shop-cosmetic-mini-price {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: -1px;
    font-size: 0.48rem;
    padding: 2px 4px;
    white-space: nowrap;
}

#reward-shop-section #shop-items-grid,
#reward-shop-section #berlin-reward-plus-panel{
    margin-top: 18px !important;
    margin-bottom: 20px !important;
}#reward-shop-section .berlin-reward-plus-card {
    content-visibility: auto;
    contain: layout paint style;
}

@media (max-width: 768px) {
    #berlin-avatar-preview-row {
grid-template-columns: repeat(6, 38px);
        gap: 7px;
        max-width: 280px;
grid-template-columns: repeat(6, 40px) !important;
        max-width: 290px !important;
}

    #berlin-avatar-preview-row img {
width: 38px;
        height: 38px;
width: 40px !important;
        height: 40px !important;
}

    #profile-edit-mode #avatar-selection-area .avatars-grid {
grid-template-columns: repeat(auto-fill, minmax(46px, 46px)) !important;
grid-template-columns: repeat(auto-fill, minmax(48px, 48px)) !important;
        gap: 8px !important;
}

    #profile-edit-mode #avatar-selection-area .avatar-cosmetic-wrap,
    #profile-edit-mode #avatar-selection-area .avatars-grid img {
        width: 48px !important;
        height: 48px !important;
    }

    #profile-edit-mode .bg-options-grid {
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
        gap: 9px !important;
    }

    #profile-edit-mode .card-bg-option {
        min-width: 108px !important;
        height: 66px !important;
    }

    .berlin-shop-avatar-cosmetics-grid {
        grid-template-columns: repeat(auto-fill, minmax(44px, 44px));
        gap: 8px;
    }

    .berlin-shop-avatar-cosmetic-card {
        width: 44px;
        height: 44px;
    }

    .berlin-shop-bg-cosmetics-grid {
        grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    }

    .berlin-shop-bg-cosmetic-card {
        height: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-shop-avatar-cosmetic-card,
    .berlin-shop-bg-cosmetic-card {
        transition: none !important;
    }
}

.status-problem-contact {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.32) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.18);
}

.berlin-problem-contact-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(15, 23, 42, 0.72));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.12);
}

.berlin-problem-contact-card .berlin-problem-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
    font-size: 1.25rem;
}

.berlin-problem-contact-card .berlin-problem-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    line-height: 1.6;
}

.berlin-problem-contact-card .berlin-problem-text span {
    color: #cbd5e1;
    font-size: 0.88rem;
}

.berlin-problem-contact-card .berlin-problem-chat-btn {
    text-decoration: none;
    border: 0;
    border-radius: 12px;
    padding: 10px 13px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
    font-family: inherit;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.berlin-problem-contact-card .berlin-problem-chat-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 650px) {
    .berlin-problem-contact-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .berlin-problem-contact-card .berlin-problem-icon {
        margin: auto;
    }

    .berlin-problem-contact-card .berlin-problem-chat-btn {
        justify-content: center;
    }
}

#berlin-flash-sale-box {
    width: min(1180px, 96%);
    margin: 8px auto 22px;
    direction: rtl;
    display: none;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: radial-gradient(circle at 12% 10%, rgba(251, 191, 36, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(15, 23, 42, 0.92));
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#berlin-flash-sale-box .berlin-flash-inner {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
}

#berlin-flash-sale-box img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.24);
}

#berlin-flash-sale-box .berlin-flash-kicker {
    color: #fbbf24;
    font-weight: 900;
    font-size: 0.9rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#berlin-flash-sale-box .berlin-flash-title {
    color: #fff;
    font-weight: 900;
    font-size: 1.45rem;
    margin-bottom: 6px;
}

#berlin-flash-sale-box .berlin-flash-sub {
    color: #cbd5e1;
    line-height: 1.7;
    font-size: 0.95rem;
}

#berlin-flash-sale-box .berlin-flash-prices {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 9px;
}

#berlin-flash-sale-box .berlin-flash-price {
    color: #fff;
    font-weight: 900;
    font-size: 1.25rem;
}

#berlin-flash-sale-box .berlin-flash-old {
    color: #fca5a5;
    text-decoration: line-through;
    font-size: 0.95rem;
}

#berlin-flash-sale-box .berlin-flash-discount {
    color: #111827;
    background: #fbbf24;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 900;
    font-size: 0.85rem;
}

#berlin-flash-sale-box .berlin-flash-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    min-width: 165px;
}

#berlin-flash-sale-box .berlin-flash-countdown-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(251, 191, 36, 0.22);
}

#berlin-flash-sale-box .berlin-flash-countdown-label {
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 900;
}

#berlin-flash-sale-box .berlin-flash-countdown {
    font-family: monospace;
    direction: ltr;
    color: #fef3c7;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-weight: 900;
}

#berlin-flash-sale-box .berlin-flash-btn {
    border: 0;
    border-radius: 14px;
    padding: 11px 18px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111827;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(251, 191, 36, 0.24);
}

#berlin-site-alert-bar {
    position: relative;
    z-index: 9990;
    display: none;
    width: 100%;
    background: linear-gradient(90deg, #7c3aed, #111827);
    color: #fff;
    text-align: center;
    padding: 10px 14px;
    font-weight: 900;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#berlin-maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-system);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(10px);
    padding: 20px;
    text-align: center;
    color: #fff;
}

#berlin-maintenance-overlay .box {
    max-width: 470px;
    border-radius: 24px;
    padding: 28px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    border: 1px solid rgba(251, 191, 36, 0.25);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
    #berlin-flash-sale-box .berlin-flash-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #berlin-flash-sale-box img {
        margin: auto;
        width: 100%;
        max-width: 220px;
        height: 150px;
    }

    #berlin-flash-sale-box .berlin-flash-kicker,
    #berlin-flash-sale-box .berlin-flash-prices {
        justify-content: center;
    }

    #berlin-flash-sale-box .berlin-flash-side {
        min-width: 0;
    }
}

#paymentModal #confirmationMessage:not(.is-visible),
#paymentModal #creditcardDetails:not(.is-visible),
#paymentModal #loading:not(.is-visible),
#paymentModal #paypalDetails,
#paymentModal #vodafoneDetails:not(.is-visible),
#paymentModal[data-payment-stage="chooser"] #confirmationMessage,
#paymentModal[data-payment-stage="chooser"] #creditcardDetails,
#paymentModal[data-payment-stage="chooser"] #loading,
#paymentModal[data-payment-stage="chooser"] #paypalDetails,
#paymentModal[data-payment-stage="chooser"] #vodafoneDetails,
body > #confirmationMessage:not(.is-visible),
body > #loading:not(.is-visible),
body > #paypalDetails {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
}

#paymentModal #modalCommonContent.is-visible,
#paymentModal[data-payment-stage="chooser"] #modalCommonContent,
#paymentModal[data-payment-stage="creditcard"] #creditcardDetails.is-visible,
#paymentModal[data-payment-stage="vodafone"] #vodafoneDetails.is-visible{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}#paymentModal #creditcardDetails[hidden],
#paymentModal #vodafoneDetails[hidden],
#paymentModal:not([data-payment-stage="creditcard"]) #creditcardDetails,
#paymentModal:not([data-payment-stage="vodafone"]) #vodafoneDetails {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
}

#paymentModal .payment-info-box .vodafone-fast-code-mobile,
#paymentModal .qr-text-content .vodafone-fast-code-mobile,
#paymentModal .vodafone-fast-code-mobile {
    display: none !important;
    max-width: 430px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 14px auto 8px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    text-align: center !important;
    color: #111827 !important;
    opacity: 1 !important;
    direction: rtl !important;
}

#paymentModal .payment-info-box .vodafone-fast-code-mobile *,
#paymentModal .qr-text-content .vodafone-fast-code-mobile *,
#paymentModal .vodafone-fast-code-mobile * {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #111827 !important;
}

#paymentModal .vodafone-fast-code-mobile .vf-fast-title {
    margin: 0 0 10px !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    font-weight: 900 !important;
}

#paymentModal .vodafone-fast-code-mobile .vf-fast-code {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    word-break: break-all !important;
}

#paymentModal .vodafone-fast-code-mobile .vf-fast-copy-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 126px !important;
    padding: 10px 15px !important;
    border: 1px solid #9ca3af !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #111827 !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    #paymentModal .payment-info-box .vodafone-fast-code-mobile,
    #paymentModal .qr-text-content .vodafone-fast-code-mobile,
    #paymentModal .vodafone-fast-code-mobile {
        display: block !important;
    }
}

#sh_fullscreen_overlay #sh_payment_header_grid_wrapper {
    transform: none !important;
    margin-top: 0 !important;
}

#sh_fullscreen_overlay #content-paypal {
    margin-top: 0 !important;
}

#sh_fullscreen_overlay .sh_payment_full_page,
#sh_fullscreen_overlay .sh_side_panel,
#sh_fullscreen_overlay .sh_split_layout {
    overflow: visible !important;
}

@media (max-width: 900px) {

    #sh_fullscreen_overlay .sh_payment_full_page,
    #sh_fullscreen_overlay .sh_split_layout {
        min-height: 100vh !important;
        height: auto !important;
    }

    #sh_fullscreen_overlay .sh_side_panel {
        height: auto !important;
        min-height: auto !important;
    }

    #sh_fullscreen_overlay .sh_order_details,
    #sh_fullscreen_overlay .sh_payment_actions {
        height: auto !important;
    }
}

#reward-shop-section .shop-balance.berlin-points-balance-ready {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    user-select: none;
    flex-wrap: wrap;
}

#reward-shop-section .berlin-points-topup-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-right: 9px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgba(255, 231, 128, 0.82);
    border-radius: 999px;
    background: radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.75), transparent 18%),
        linear-gradient(135deg, #ffe873 0, #fc0 34%, #f59e0b 72%, #d97706 100%);
    color: #170b22;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.75px;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 9px 22px rgba(255, 204, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -2px 0 rgba(120, 60, 0, 0.22);
    transition: transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
    vertical-align: middle;
}

#reward-shop-section .berlin-points-topup-inline-btn::before {
    content: "";
    position: absolute;
    inset: -40% -28%;
    z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.48) 48%, transparent 62%);
    transform: translateX(-80%) rotate(8deg);
    opacity: 0.75;
    transition: transform 0.45s ease;
}

#reward-shop-section .berlin-points-topup-inline-btn:hover {
    transform: translateY(-2px) scale(1.045);
    box-shadow: 0 13px 30px rgba(255, 204, 0, 0.38),
        0 0 22px rgba(255, 204, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 0 rgba(120, 60, 0, 0.22);
    filter: saturate(1.12) contrast(1.04);
}

#reward-shop-section .berlin-points-topup-inline-btn:hover::before {
    transform: translateX(80%) rotate(8deg);
}

#reward-shop-section .berlin-points-topup-inline-btn:active {
    transform: translateY(0) scale(0.98);
}

#reward-shop-section .berlin-points-topup-inline-btn .berlin-topup-plus-badge {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fff 0 10%, #ffe58a 24%, #ffb800 60%, #d97706 100%);
    color: #241000;
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 4px 10px rgba(120, 60, 0, 0.28),
        0 0 0 2px rgba(255, 255, 255, 0.13) inset,
        0 0 12px rgba(255, 236, 120, 0.34);
}

#reward-shop-section .berlin-points-topup-inline-btn .berlin-topup-plus-badge i {
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 0.7px currentColor;
    transform: translateY(0.2px);
}

.berlin-points-iframe-modal {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.berlin-points-iframe-modal.is-open {
    display: flex !important;
}

.berlin-points-iframe-box {
    width: min(1180px, 96vw);
    height: min(820px, 92vh);
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #0b0614;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.berlin-points-frame-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fc0;
    font-family: Tajawal, Cairo, sans-serif;
    font-weight: 900;
    background: radial-gradient(circle at center, rgba(255, 204, 0, 0.09), transparent 34%), #0b0614;
    z-index: 1;
    pointer-events: none;
}

.berlin-points-iframe-box.is-loaded .berlin-points-frame-loader {
    display: none;
}

.berlin-points-iframe-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#berlinPointsTopupFrame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #0b0614;
}

@media (max-width: 768px) {

    #reward-shop-section .shop-balance.berlin-points-balance-ready {
        width: 100%;
    }

    #reward-shop-section .berlin-points-topup-inline-btn {
        padding: 7px 12px 7px 8px;
        font-size: 0.72rem;
        margin-right: 6px;
        gap: 6px;
    }

    #reward-shop-section .berlin-points-topup-inline-btn .berlin-topup-plus-badge {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .berlin-points-iframe-modal {
        padding: 8px;
    }

    .berlin-points-iframe-box {
        width: 100%;
        height: 94vh;
        height: 94dvh;
        border-radius: 18px;
    }
}

.berlin-order-review-toast {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: var(--berlin-z-modal);
    width: min(420px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(30, 17, 50, 0.96), rgba(12, 12, 24, 0.96));
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 11px;
    align-items: center;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.22s ease,
        transform 0.22s ease;
    font-family: Cairo, Tajawal, sans-serif;
    direction: rtl;
    pointer-events: auto;
}

.berlin-order-review-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.berlin-order-review-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #111827;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.22);
    font-size: 1.05rem;
}

.berlin-order-review-toast-title {
    margin: 0 0 3px;
    color: #fff;
    font-weight: 900;
    font-size: 0.96rem;
    line-height: 1.35;
}

.berlin-order-review-toast-text {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.55;
}

.berlin-order-review-toast-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.berlin-order-review-toast-btn,
.berlin-order-review-toast-close {
    border: 0;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.berlin-order-review-toast-btn {
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111827;
}

.berlin-order-review-toast-close {
    width: auto;
    height: auto;
    padding: 0 4px;
    border-radius: 0;
    background: 0 0 !important;
    box-shadow: none !important;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    line-height: 1;
}

.berlin-order-review-modal {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    direction: rtl;
}

.berlin-order-review-modal.show {
    display: flex;
}

.berlin-order-review-content {
    position: relative;
    width: min(510px, 96vw);
    max-height: min(92vh, 720px);
    overflow: auto;
    padding: 22px;
    border-radius: 24px;
    background: radial-gradient(circle at 15% 0, rgba(251, 191, 36, 0.15), transparent 32%),
        linear-gradient(145deg, rgba(30, 17, 50, 0.98), rgba(9, 9, 18, 0.98));
    border: 1px solid rgba(205, 161, 255, 0.26);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
}

.berlin-order-review-close {
    position: absolute;
    top: 10px;
    left: 14px;
    width: auto;
    height: auto;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: 0 0 !important;
    box-shadow: none !important;
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    z-index: 2;
}

.berlin-order-review-head {
    text-align: center;
    padding: 8px 28px 12px;
}

.berlin-order-review-head h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.28rem, 4vw, 1.65rem);
    font-weight: 900;
    border: 0 !important;
}

.berlin-order-review-head h3 i {
    color: #fbbf24;
    margin-inline-start: 8px;
}

.berlin-order-review-head p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.7;
}

.berlin-order-review-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.berlin-order-review-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.berlin-order-review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #fbbf24;
    object-fit: cover;
    display: none;
    flex: 0 0 auto;
}

.berlin-order-review-input,
.berlin-order-review-textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font-family: inherit;
    outline: 0;
    transition: border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.berlin-order-review-input {
    padding: 11px 12px;
    min-height: 44px;
}

.berlin-order-review-textarea {
    padding: 12px;
    min-height: 116px;
    resize: vertical;
    line-height: 1.7;
}

.berlin-order-review-input:focus,
.berlin-order-review-textarea:focus {
    border-color: rgba(251, 191, 36, 0.7);
    background: rgba(0, 0, 0, 0.34);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

.berlin-order-review-submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--accent-yellow, #fc0), #e6b800);
    color: #111;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(251, 191, 36, 0.2);
}

.berlin-order-review-submit:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.berlin-order-review-feedback {
    min-height: 0;
}

@media (max-width: 768px) {
    .berlin-order-review-toast {
        right: 10px;
        bottom: 10px;
        grid-template-columns: 36px 1fr;
        gap: 9px;
        padding: 12px;
        contain-intrinsic-size: 1px 190px;
    }

    .berlin-order-review-toast-icon {
        width: 36px;
        height: 36px;
        border-radius: 13px;
    }

    .berlin-order-review-toast-actions {
        grid-column: 1/-1;
        justify-content: stretch;
    }

    .berlin-order-review-toast-btn {
        flex: 1;
    }

    .berlin-order-review-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .berlin-order-review-content {
        width: 100%;
        max-height: 88vh;
        border-radius: 22px 22px 16px 16px;
        padding: 18px 14px 16px;
    }

    .berlin-order-review-head {
        padding-inline: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-order-review-input,
    .berlin-order-review-textarea,
    .berlin-order-review-toast {
        transition: none !important;
    }
}

@media (max-width: 900px), (pointer: coarse) {
    html body *,
    html body ::after,
    html body ::before,
    html body::after,
    html body::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body .fullscreen-blur-bg .bg-clone,
    html body .glowing-orb,
    html body .main-wrapper::after,
    html body .main-wrapper::before,
    html body [style*="filter: blur"],
    html body [style*="filter:blur"],
    html body::after,
    html body::before {
        filter: none !important;
    }

    #bundle-pro-upgrade-modal,
    #bundle-pro-upgrade-modal > div,
    #navbar,
    #overlay,
    #productPageShortDescription,
    #user-notification-panel,
    .close-page-btn,
    .dropdown-notification-panel,
    .focused-card,
    .game-header-ad-badge,
    .glass-card,
    .hero-slider-dots,
    .mobile-home-hero-btn,
    .modal-overlay,
    .navbar-search-input,
    .overlay,
    .top-bar,
    .tutorial-side-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#game-rentals-section,
#goe-app-section,
#offline-steam-section {
    border: 1px solid rgba(142, 106, 191, 0.3) !important;
    outline: 0 !important;
    box-shadow: 0 0 2px rgba(44, 26, 64, 0.08) !important;
    filter: none !important;
    animation: none !important;
}

#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;
border-width: 1px !important;
    box-shadow: 0 0 10px rgba(44, 26, 64, 0.34) !important;
border: 1px solid rgba(114, 137, 218, 0.3) !important;
    outline: 0 !important;
    box-shadow: 0 0 2px rgba(114, 137, 218, 0.08) !important;
    filter: none !important;
    animation: none !important;
}

#feedback-section {
background: linear-gradient(145deg, #0b0714, #1d1033, #0b0714);
    border: 1px solid #4a2f6c;
    box-shadow: 0 0 25px rgba(44, 26, 64, .5);
padding-bottom: 20px !important;
padding: 30px;
    text-align: center;
border-width: 1px !important;
    box-shadow: 0 0 11px rgba(44, 26, 64, 0.30) !important;
border: 1px solid rgba(74, 47, 108, 0.3) !important;
    outline: 0 !important;
    box-shadow: 0 0 2px rgba(44, 26, 64, 0.08) !important;
    filter: none !important;
    animation: none !important;
}

#discord-decorations-section:hover,
#feedback-section:hover,
#game-rentals-section:hover,
#goe-app-section:hover,
#offline-steam-section:hover {
    box-shadow: 0 0 2px rgba(44, 26, 64, 0.08) !important;
}

#live-chat-frame {
position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 400px;
    height: 600px;
    border: 0;
    z-index: var(--berlin-z-floating, 500);
    display: none;
    background: 0 0;
    pointer-events: none;
transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    #live-chat-frame {
        transition: none !important;
    }
}

.berlin-review-bp-offer {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: min(520px, calc(100% - 20px));
    box-sizing: border-box;
    margin: 7px auto 12px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.34);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(168, 85, 247, 0.1));
    color: #fff4bf;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.berlin-review-bp-offer.is-visible {
    display: flex;
}

.berlin-review-bp-offer i {
    color: #fbbf24;
    font-size: 1rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
}

.berlin-review-bp-offer b {
    color: #fbbf24;
    font-weight: 950;
}

#berlinReviewBpMainOffer {
    margin-top: 9px;
    margin-bottom: 13px;
    transform: translateX(91px);
}

#orderRatingPromptCard .berlin-review-bp-offer,
.berlin-order-review-toast .berlin-review-bp-offer {
    max-width: 100%;
    margin: 7px auto 0;
    padding: 6px 10px;
    border-radius: 11px;
    font-size: 0.72rem;
}

.berlin-order-review-toast .berlin-review-bp-offer {
    grid-column: 1/-1;
}

#berlinReviewRewardQuest {
    border-color: rgba(251, 191, 36, 0.32);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.11), rgba(124, 58, 237, 0.08));
}

#berlinReviewRewardQuest .berlin-quest-title::before {
    content: "⭐ ";
}

#berlinReviewRewardQuest .berlin-quest-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #17120a;
}

#berlinReviewRewardQuest .berlin-quest-btn.claimed {
    color: #9ff1ce;
    background: rgba(16, 185, 129, 0.25);
}

.berlin-shop-avatar-cosmetic-card .berlin-shop-owned-check {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 6;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    border: 2px solid rgba(8, 15, 24, 0.92);
    font-size: 0.58rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.berlin-shop-avatar-cosmetic-card.is-owned {
    border-color: rgba(16, 185, 129, 0.82);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}

.berlin-shop-avatar-cosmetic-card.is-owned .berlin-shop-cosmetic-mini-price {
    color: #d1fae5;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(4, 78, 56, 0.84);
}

@media (max-width: 768px) {
    #berlinReviewBpMainOffer {
        transform: translateX(0);
    }

    .berlin-review-bp-offer {
        max-width: calc(100% - 16px);
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    .berlin-shop-avatar-cosmetic-card .berlin-shop-owned-check {
        width: 17px;
        height: 17px;
        font-size: 0.54rem;
    }
}

#paymentModal[data-payment-stage="processing"] .close-btn,
#paymentModal[data-payment-stage="processing"] .close-modal,
#paymentModal[data-payment-stage="processing"] [data-close-modal] {
    display: none !important;
    pointer-events: none !important;
}

#paymentModal[data-payment-stage="processing"] {
    pointer-events: auto !important;
}

#berlinAchievementsSection {
    margin-top: 24px;
    padding: clamp(16px, 2.4vw, 24px);
    border-radius: 22px;
    border: 1px solid rgba(251, 191, 36, 0.18);
    background: radial-gradient(circle at 88% 8%, rgba(124, 58, 237, 0.14), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(14, 165, 233, 0.1), transparent 30%), rgba(9, 11, 22, 0.58);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    content-visibility: auto;
    contain-intrinsic-size: 660px;
}

.berlin-achievements-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.berlin-achievements-title-wrap {
    min-width: 0;
}

.berlin-achievements-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 950;
    border: 0;
}

.berlin-achievements-title i {
    color: #fbbf24;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.35));
}

.berlin-achievements-subtitle {
    margin: 7px 0 0;
    color: #aeb8ca;
    font-size: 0.86rem;
    line-height: 1.7;
}

.berlin-achievements-counter {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 10px 13px;
    border-radius: 15px;
    text-align: center;
    background: rgba(251, 191, 36, 0.09);
    border: 1px solid rgba(251, 191, 36, 0.24);
    color: #fbbf24;
    font-weight: 950;
}

.berlin-achievements-counter strong {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    direction: ltr;
}

.berlin-achievements-counter span {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: #fcd34d;
}

.berlin-achievements-overall-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    margin-bottom: 18px;
}

.berlin-achievements-overall-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #0ea5e9, #fbbf24);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.2);
    transition: width 0.45s ease;
}

.berlin-achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.berlin-achievement-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 17px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    overflow: hidden;
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 1px 175px;
    transition: transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.berlin-achievement-card::after {
    content: "";
    position: absolute;
    inset: auto 12px 0 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
}

.berlin-achievement-card.is-unlocked {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.11), rgba(255, 255, 255, 0.025));
}

.berlin-achievement-card.is-unlocked::after {
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.55), transparent);
}

.berlin-achievement-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 1.25rem;
}

.berlin-achievement-card.is-unlocked .berlin-achievement-icon {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.32);
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.16), rgba(124, 58, 237, 0.13));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.berlin-achievement-content {
    min-width: 0;
}

.berlin-achievement-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.berlin-achievement-name {
    margin: 0;
    color: #fff;
    font-size: 0.93rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.berlin-achievement-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 900;
    color: #94a3b8;
}

.berlin-achievement-card.is-unlocked .berlin-achievement-state {
    color: #6ee7b7;
}

.berlin-achievement-desc {
    margin: 5px 0 9px;
    color: #aeb8ca;
    font-size: 0.76rem;
    line-height: 1.55;
    min-height: 2.35em;
}

.berlin-achievement-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.berlin-achievement-progress-track {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
}

.berlin-achievement-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #0ea5e9);
    transition: width 0.35s ease;
}

.berlin-achievement-card.is-unlocked .berlin-achievement-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.berlin-achievement-progress-text {
    flex: 0 0 auto;
    direction: ltr;
    min-width: 42px;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: left;
}

.berlin-achievement-reward {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.berlin-achievement-reward-label {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 800;
}

.berlin-achievement-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--achievement-badge-color, rgba(251, 191, 36, 0.35));
    color: var(--achievement-badge-color, #fbbf24);
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.berlin-achievement-card:not(.is-unlocked) .berlin-achievement-reward-badge {
    filter: grayscale(0.8);
    opacity: 0.62;
}

.berlin-achievements-loading {
    grid-column: 1/-1;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #aeb8ca;
    font-weight: 800;
}

.berlin-achievements-loading i {
    color: #fbbf24;
}

.berlin-achievements-lazy-sentinel {
    grid-column: 1/-1;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 800;
    content-visibility: auto;
    contain-intrinsic-size: 58px;
}

.berlin-achievements-lazy-sentinel i {
    color: #e0ad16;
}

@media (hover: hover) {
    .berlin-achievement-card:hover {
        transform: translateY(-2px);
        border-color: rgba(251, 191, 36, 0.24);
    }
}

@media (max-width: 760px) {
    #berlinAchievementsSection {
        margin-top: 18px;
        padding: 14px;
        border-radius: 18px;
        contain-intrinsic-size: 1120px;
    }

    .berlin-achievements-head {
        align-items: center;
        gap: 10px;
    }

    .berlin-achievements-subtitle {
        font-size: 0.76rem;
    }

    .berlin-achievements-counter {
        min-width: 76px;
        padding: 8px 10px;
    }

    .berlin-achievements-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .berlin-achievement-card {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 12px;
    }

    .berlin-achievement-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .berlin-achievement-desc {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-achievement-card,
    .berlin-achievement-progress-fill,
    .berlin-achievements-overall-fill {
        transition: none !important;
    }
}

#profile-settings-page .profile-account-tab.is-active {
    color: #f8fafc !important;
    border-color: rgba(224, 173, 22, 0.34) !important;
    background: linear-gradient(135deg, rgba(224, 173, 22, 0.14), rgba(185, 133, 0, 0.07)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 7px 18px rgba(0, 0, 0, 0.14) !important;
}

#profile-settings-page #current-rank-text,
#profile-settings-page .berlin-achievements-loading i,
#profile-settings-page .berlin-achievements-title i,
#profile-settings-page .profile-account-tab.is-active i,
#profile-settings-page .stat-value.gold {
    color: #e0ad16 !important;
    filter: none !important;
    text-shadow: none !important;
}

#profile-settings-page .points-pill span[style*="#fc0"],
#profile-settings-page .points-pill span[style*="rgb(255, 204, 0)"] {
    color: #e0ad16 !important;
}

#profile-settings-page .berlin-achievements-counter {
    color: #e0ad16 !important;
    border-color: rgba(224, 173, 22, 0.2) !important;
    background: rgba(224, 173, 22, 0.055) !important;
}

#profile-settings-page .berlin-achievements-counter span {
    color: #d39f0d !important;
}

#profile-settings-page .berlin-achievements-overall-fill {
    background: linear-gradient(90deg, #7c3aed, #0ea5e9, #d6a30f) !important;
    box-shadow: none !important;
}

#profile-settings-page .berlin-achievement-card.is-unlocked .berlin-achievement-icon {
    color: #e0ad16 !important;
    border-color: rgba(224, 173, 22, 0.22) !important;
    background: linear-gradient(145deg, rgba(224, 173, 22, 0.09), rgba(124, 58, 237, 0.08)) !important;
}

#profile-settings-page #berlinAchievementsSection {
    border-color: rgba(224, 173, 22, 0.1) !important;
}

#profile-edit-mode,
#profile-edit-mode > *,
#profile-settings-page > .profile-account-tabs,
#profile-settings-page > .profile-header-section,
#profile-view-mode,
#profileAchievementsPane,
#profileOverviewPane,
#profileOverviewPane > * {
    content-visibility: visible !important;
    contain: none !important;
}

#profileAchievementsPane[hidden],
#profileOverviewPane[hidden] {
    display: none !important;
}

#reward-shop-section,
#reward-shop-section.section.glass-card,
#reward-shop-section.section.glass-card.darker {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(18px, 3vw, 36px) clamp(12px, 4vw, 42px) 52px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background-color: #0f0a18 !important;
    isolation: isolate;
}

#reward-shop-section::after,
#reward-shop-section::before {
    border-radius: 0 !important;
}

#reward-shop-section > * {
    width: min(1180px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

#reward-shop-section .berlin-reward-plus-card,
#reward-shop-section .shop-item {
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
}

#reward-shop-section .berlin-mini-title,
#reward-shop-section .icon-gold,
#reward-shop-section .shop-balance,
#reward-shop-section > h2 {
    color: #e0ad16 !important;
    text-shadow: none !important;
    filter: none !important;
}

#profile-settings-page #user-rank-display.user-rank-badge::before {
    content: "";
    position: absolute;
    inset: -45% auto -45% -28%;
    z-index: 0;
    width: 28%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    filter: blur(1px);
    animation: berlinRankShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

#profile-settings-page #user-rank-display .berlin-rank-crown,
#profile-settings-page #user-rank-display .berlin-rank-main,
#profile-settings-page #user-rank-display .berlin-rank-stars {
    position: relative;
    z-index: 1;
}

#profile-settings-page #user-rank-display .berlin-rank-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
}

@keyframes berlinRankShine {
    0%,
    58% {
        left: -28%;
        opacity: 0;
    }

    67% {
        opacity: 0.8;
    }

    100%,
    82% {
        left: 112%;
        opacity: 0;
    }
}

@media (hover: hover) and (pointer: fine) {
    #profile-settings-page #user-rank-display.user-rank-badge {
        transition: transform 0.22s ease,
            filter 0.22s ease;
    }

    #profile-settings-page #user-rank-display.user-rank-badge:hover {
        transform: translateY(-3px) scale(1.018);
        filter: saturate(1.08) brightness(1.04);
    }
}

@media (max-width: 520px) {

    #profile-settings-page #user-rank-display.user-rank-badge::after {
        border-radius: 15px;
    }

    #profile-settings-page #user-rank-display .berlin-rank-main {
        gap: 9px;
    }

    #profile-settings-page #user-rank-display .berlin-rank-copy small {
        font-size: 0.5rem;
        letter-spacing: 1.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #profile-settings-page #user-rank-display.user-rank-badge,
    #profile-settings-page #user-rank-display.user-rank-badge::before {
        animation: none !important;
        transition: none !important;
    }
}

#profile-settings-page .rank-and-badges-wrapper {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 3px;
}

#profile-settings-page #user-rank-display.user-rank-badge {
--berlin-rank-glow: rgba(251, 191, 36, 0.75);
    position: relative;
    isolation: isolate;
    width: min(100%, 330px);
    min-height: 76px;
    margin: 0 auto !important;
    padding: 11px 25px 10px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.58);
    border-radius: 24px;
    font-family: Tajawal, Cairo, sans-serif;
    font-weight: 950;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    transform: translateZ(0);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -10px 22px rgba(0, 0, 0, 0.13) !important;
width: auto !important;
    min-width: 112px !important;
    max-width: 190px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    gap: 5px !important;
    border-width: 1px !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25),
        0 0 13px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

#profile-settings-page #user-rank-display.user-rank-badge::after {
content: "";
    position: absolute;
    inset: 4px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 19px;
    pointer-events: none;
inset: 3px !important;
    border-radius: 10px !important;
}

#profile-settings-page #user-rank-display .berlin-rank-crown {
position: absolute;
    top: 7px;
    right: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
    transform: rotate(9deg);
top: 3px !important;
    right: 5px !important;
    font-size: 0.48rem !important;
    opacity: 0.65;
}

#profile-settings-page #user-rank-display .berlin-rank-main {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
gap: 7px !important;
}

#profile-settings-page #user-rank-display .berlin-rank-icon {
flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.17);
    color: currentColor;
    font-size: 1.22rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 7px 18px rgba(0, 0, 0, 0.17);
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
width: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
    font-size: 0.86rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

#profile-settings-page #user-rank-display .berlin-rank-copy small {
margin-bottom: 4px;
    color: currentColor;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0.78;
margin-bottom: 2px !important;
    font-size: 0.39rem !important;
    letter-spacing: 1.1px !important;
}

#profile-settings-page #user-rank-display .berlin-rank-copy strong {
max-width: 210px;
    overflow: hidden;
    color: currentColor;
    font-size: clamp(1.25rem, 3.2vw, 1.7rem);
    font-weight: 1000;
    letter-spacing: 1.8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 3px 11px rgba(0, 0, 0, 0.34);
max-width: 112px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.3) !important;
}

#profile-settings-page #user-rank-display .berlin-rank-stars {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: currentColor;
    font-size: 0.48rem;
    opacity: 0.68;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
display: none !important;
}

#profile-settings-page #badges-area.badges-container {
width: 100%;
    max-width: 760px;
    justify-content: center;
    margin-inline: auto;
width: auto !important;
    max-width: min(100%, 650px) !important;
    flex: 0 1 auto;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}

#dropdown-rank-badge {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 25px;
    padding-bottom: 7px !important;
}

@media (max-width: 520px) {
    #profile-settings-page .rank-and-badges-wrapper {
        gap: 6px !important;
    }

    #profile-settings-page #user-rank-display.user-rank-badge {
width: min(100%, 285px);
        min-height: 68px;
        padding: 9px 18px 8px;
        border-radius: 20px;
width: auto !important;
        min-width: 104px !important;
        max-width: 160px !important;
        min-height: 40px !important;
        padding: 5px 9px !important;
        border-radius: 12px !important;
}

    #profile-settings-page #user-rank-display .berlin-rank-icon {
width: 37px;
        height: 37px;
        border-radius: 12px;
        font-size: 1.05rem;
width: 26px !important;
        height: 26px !important;
        font-size: 0.78rem !important;
}

    #profile-settings-page #user-rank-display .berlin-rank-copy strong {
max-width: 170px;
        font-size: 1.22rem;
max-width: 94px !important;
        font-size: 0.78rem !important;
}
}

#home-offers-section {
    width: 100%;
    margin: 30px 0 34px;
    content-visibility: auto;
    contain-intrinsic-size: 1px 620px;
}

#home-offers-section[hidden] {
    display: none !important;
}

.home-offers-divider {
    display: grid;
    grid-template-columns: minmax(35px, 1fr) auto minmax(35px, 1fr);
    align-items: center;
    gap: 16px;
    margin: 4px 8px 22px;
}

.home-offers-divider::after,
.home-offers-divider::before {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.7), rgba(249, 115, 22, 0.4));
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.16);
}

.home-offers-divider::after {
    transform: scaleX(-1);
}

.home-offers-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: #fff7d6;
    font-family: Tajawal, Cairo, sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 900;
    letter-spacing: 0.4px;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
    white-space: nowrap;
}

.home-offers-title i {
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.45));
}

#homeOffersContainer {
    min-height: 0;
}

.home-offers-empty,
.home-offers-loading {
    width: 100%;
    padding: 28px 18px;
    border: 1px dashed rgba(251, 191, 36, 0.22);
    border-radius: 16px;
    color: #cbd5e1;
    text-align: center;
    background: rgba(251, 191, 36, 0.025);
    font-weight: 800;
}

@media (max-width: 700px) {
    #home-offers-section {
        margin: 22px 0 26px;
    }

    .home-offers-divider {
        gap: 10px;
        margin-inline: 2px;
        margin-bottom: 16px;
    }

    .home-offers-title {
        font-size: 1.2rem;
    }
}

#offlineSteamContainer .berlin-dashboard-offline-bundle {
    order: initial;
}

#offlineSteamContainer .berlin-dashboard-offline-bundle[style*="display: none"] {
    pointer-events: none !important;
}

#offlineSteamContainer .product-separator {
grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(10px, 2vw, 18px) !important;
    position: relative !important;
    z-index: 20 !important;
    margin: 27px 0 23px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    direction: ltr !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
grid-column: 1/-1;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 18px);
    margin: 26px 0 22px;
    padding: 0 8px;
    box-sizing: border-box;
    direction: ltr;
}

#offlineSteamContainer .product-separator .product-separator-line {
display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 28px !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, .38) 14%, #ffd84d 50%, rgba(255, 215, 0, .38) 86%, transparent 100%) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, .32) !important;
display: block;
    flex: 1 1 0;
    width: auto;
    min-width: 24px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.3) 12%,
        rgba(255, 215, 0, 0.95) 50%,
        rgba(255, 215, 0, 0.3) 88%,
        transparent
        );
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.22);
    transform: none !important;
}

#offlineSteamContainer .product-separator .product-separator-label {
position: relative !important;
    inset: auto !important;
    z-index: 21 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 128px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 20px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 216, 77, .92) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #321756 0%, #1b0c30 100%) !important;
    background-color: #24113d !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 24px rgba(255, 215, 0, .34) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: Cairo, Tajawal, Arial, sans-serif !important;
    font-size: clamp(.9rem, 1.8vw, 1.05rem) !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-shadow: 0 0 12px rgba(255, 216, 77, .75) !important;
position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    padding: 9px 18px 8px;
    border: 1px solid rgba(255, 215, 0, 0.7);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(122, 79, 0, 0.22));
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: #ffd84d;
    font-family: Cairo, Tajawal, sans-serif;
    font-size: clamp(0.82rem, 1.7vw, 0.98rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.8px;
    text-align: center;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    rotate: none !important;
    font-style: normal;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.42);
}

@media (max-width: 520px) {
    #offlineSteamContainer .product-separator {
min-height: 52px !important;
        gap: 8px !important;
        margin: 22px 0 19px !important;
        padding-inline: 2px !important;
gap: 8px;
        padding-inline: 2px;
}

    #offlineSteamContainer .product-separator .product-separator-label {
min-width: 104px !important;
        min-height: 34px !important;
        padding: 8px 13px 7px !important;
        font-size: .82rem !important;
        letter-spacing: 1.35px !important;
min-width: 96px;
        padding: 8px 12px 7px;
        font-size: 0.78rem;
        letter-spacing: 1.2px;
}
}

#offlineSteamContainer .product-separator[style*="display: none"] {
    display: none !important;
}

#offlineSteamContainer .berlin-dynamic-bundle-separator {
    grid-column: 1/-1;
    width: 100%;
}

.orders-header-title {
display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    flex: 0 0 auto;
display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap;
    direction: rtl;
}

.orders-header-title h2 {
margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
margin-inline: 0 !important;
}

.orders-refresh-btn.orders-refresh-title-btn {
    min-height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1;
    color: #101827;
    background: linear-gradient(135deg, #e0f2fe, #38bdf8 55%, #0ea5e9);
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.22);
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    transition: transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.orders-refresh-btn.orders-refresh-title-btn.berlin-has-pending-orders {
    display: inline-flex;
}

.orders-refresh-btn.orders-refresh-title-btn[hidden] {
    display: none !important;
}

.orders-refresh-btn.orders-refresh-title-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px rgba(14, 165, 233, 0.3);
}

.orders-refresh-btn.orders-refresh-title-btn:disabled {
    opacity: 0.72;
    cursor: wait;
    transform: none;
}

.orders-refresh-btn.orders-refresh-title-btn.is-loading i {
    animation: berlinOrdersRefreshSpin 0.85s linear infinite;
}

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

@media (max-width: 640px) {
    .orders-header-title {
        gap: 7px !important;
    }

    .orders-refresh-btn.orders-refresh-title-btn {
        min-height: 34px;
        padding: 8px 11px;
        font-size: 0.78rem;
    }
}

@media (max-width: 768px) {
    #my-orders-page .orders-header {
top: 61px !important;
top: 46px !important;
}

    #my-orders-page .orders-header + * {
margin-top: 125px !important;
margin-top: 108px !important;
}
}

@media (max-width: 480px) {
    #my-orders-page .orders-header {
top: 56px !important;
top: 44px !important;
}

    #my-orders-page .orders-header + * {
margin-top: 140px !important;
margin-top: 122px !important;
}
}

#sh_fullscreen_overlay {
background-color: #0a0710 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    -webkit-overflow-scrolling: touch;
position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    background: radial-gradient(circle at top left, #2a1b3d, #0a0710) !important;
    z-index: var(--berlin-z-modal) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

#sh_fullscreen_overlay .sh_payment_full_page,
#sh_fullscreen_overlay .sh_split_layout {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#sh_fullscreen_overlay .sh_side_panel,
#sh_fullscreen_overlay .sh_payment_actions,
#sh_fullscreen_overlay .sh_order_details {
    min-width: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

#sh_fullscreen_overlay .sh_payment_actions,
#sh_fullscreen_overlay .sh_payment_actions > .sh_panel_content,
#sh_fullscreen_overlay #payment-methods-container,
#sh_fullscreen_overlay #content-quick-pay,
#sh_fullscreen_overlay .berlin-quick-pay-shell,
#sh_fullscreen_overlay .gumroad-product-embed,
#sh_fullscreen_overlay .berlin-gumroad-product {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#sh_fullscreen_overlay .sh_payment_actions > .sh_panel_content {
margin-top: 0 !important;
    transform: none !important;
width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin-inline: auto !important;
}

#sh_fullscreen_overlay #payment-methods-container {
    display: block !important;
    width: min(100%, 400px) !important;
    max-width: 400px !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

#sh_fullscreen_overlay #content-quick-pay,
#sh_fullscreen_overlay .berlin-quick-pay-shell,
#sh_fullscreen_overlay .gumroad-product-embed,
#sh_fullscreen_overlay .berlin-gumroad-product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
}

#sh_fullscreen_overlay #tab-quick-pay,
#sh_fullscreen_overlay .sh-pay-tab#tab-quick-pay {
    display: none !important;
}

#sh_fullscreen_overlay .gumroad-product-embed,
#sh_fullscreen_overlay .berlin-gumroad-product {
    --berlin-gumroad-scale: 0.38;
    --berlin-gumroad-frame-height: 400px;
    --berlin-gumroad-crop-top: 150px;
    position: relative !important;
    height: var(--berlin-gumroad-frame-height) !important;
    min-height: var(--berlin-gumroad-frame-height) !important;
    max-height: var(--berlin-gumroad-frame-height) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #fff !important;
}

#sh_fullscreen_overlay .gumroad-product-embed iframe,
#sh_fullscreen_overlay .berlin-gumroad-product iframe {
    position: relative !important;
    top: calc(-1 * var(--berlin-gumroad-crop-top, 0px)) !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    bottom: auto !important;
    display: block !important;
    width: calc(100% / var(--berlin-gumroad-scale, 0.38)) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc((var(--berlin-gumroad-frame-height, 700px) + var(--berlin-gumroad-crop-top, 0px)) / var(--berlin-gumroad-scale, 0.38)) !important;
    min-height: calc((var(--berlin-gumroad-frame-height, 700px) + var(--berlin-gumroad-crop-top, 0px)) / var(--berlin-gumroad-scale, 0.38)) !important;
    max-height: none !important;
    margin: 0 !important;
    margin-inline-start: calc((100% - (100% / var(--berlin-gumroad-scale, 0.38))) / 2) !important;
    border: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
    transform: scale(var(--berlin-gumroad-scale, 0.38)) !important;
    transform-origin: top center !important;
}

#sh_fullscreen_overlay,
#sh_fullscreen_overlay .sh_payment_full_page,
#sh_fullscreen_overlay .sh_split_layout,
#sh_fullscreen_overlay .sh_payment_actions,
#sh_fullscreen_overlay .sh_order_details,
#sh_fullscreen_overlay .sh_panel_content,
#sh_fullscreen_overlay #payment-methods-container,
#sh_fullscreen_overlay #content-quick-pay,
#sh_fullscreen_overlay .berlin-quick-pay-shell,
#sh_fullscreen_overlay .gumroad-product-embed,
#sh_fullscreen_overlay .berlin-gumroad-product,
#sh_fullscreen_overlay .gumroad-product-embed iframe,
#sh_fullscreen_overlay .berlin-gumroad-product iframe {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#sh_fullscreen_overlay::-webkit-scrollbar,
#sh_fullscreen_overlay .sh_payment_full_page::-webkit-scrollbar,
#sh_fullscreen_overlay .sh_split_layout::-webkit-scrollbar,
#sh_fullscreen_overlay .sh_payment_actions::-webkit-scrollbar,
#sh_fullscreen_overlay .sh_order_details::-webkit-scrollbar,
#sh_fullscreen_overlay .sh_panel_content::-webkit-scrollbar,
#sh_fullscreen_overlay #payment-methods-container::-webkit-scrollbar,
#sh_fullscreen_overlay #content-quick-pay::-webkit-scrollbar,
#sh_fullscreen_overlay .berlin-quick-pay-shell::-webkit-scrollbar,
#sh_fullscreen_overlay .gumroad-product-embed::-webkit-scrollbar,
#sh_fullscreen_overlay .berlin-gumroad-product::-webkit-scrollbar,
#sh_fullscreen_overlay .gumroad-product-embed iframe::-webkit-scrollbar,
#sh_fullscreen_overlay .berlin-gumroad-product iframe::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#sh_fullscreen_overlay .berlin-quick-pay-fallback {
    position: sticky !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 50 !important;
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    margin: 10px auto !important;
}

@media (min-width: 901px) {
    #sh_fullscreen_overlay .sh_split_layout {
        display: grid !important;
        grid-template-columns: minmax(0, 0.92fr) clamp(300px, 28vw, 390px) !important;
        align-items: stretch !important;
    }

    #sh_fullscreen_overlay .sh_payment_actions {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        padding: 38px 14px 22px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        align-items: flex-start !important;
    }

    #sh_fullscreen_overlay .sh_order_details {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 900px) {
    #sh_fullscreen_overlay {
overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}

    #sh_fullscreen_overlay .sh_split_layout {
        display: block !important;
    }

    #sh_fullscreen_overlay .sh_side_panel,
    #sh_fullscreen_overlay .sh_payment_actions,
    #sh_fullscreen_overlay .sh_order_details {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #sh_fullscreen_overlay .sh_payment_actions {
        padding: max(48px, calc(env(safe-area-inset-top) + 40px)) 10px 18px !important;
    }

    #sh_fullscreen_overlay .sh_payment_actions > .sh_panel_content {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }

    #sh_fullscreen_overlay #payment-methods-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    #sh_fullscreen_overlay .gumroad-product-embed,
    #sh_fullscreen_overlay .berlin-gumroad-product {
        --berlin-gumroad-scale: 0.70;
        border-radius: 10px !important;
    }

    #sh_fullscreen_overlay .sh_order_details {
        padding: 14px 10px max(28px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    #sh_fullscreen_overlay .sh_payment_actions {
        padding-inline: 6px !important;
    }

    #sh_fullscreen_overlay .gumroad-product-embed,
    #sh_fullscreen_overlay .berlin-gumroad-product {
        --berlin-gumroad-scale: 0.68;
    }
}

#toast-container {
position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
pointer-events: none !important;
}

#toast-container .toast-notification,
.bundle-tip-toast:not(.show),
#user-notification-panel:not(.show),
.dropdown-notification-panel:not(.show),
#custom-payment-options.payment-options-portal:not(.is-open){
    pointer-events: none !important;
}.bundle-tip-toast.show,
#user-notification-panel.show,
.dropdown-notification-panel.show,
#custom-payment-options.payment-options-portal.is-open {
    pointer-events: auto !important;
}

#bot-iframe-wrapper:not(.is-open),
#bot-iframe-wrapper[hidden],
#bot-iframe-wrapper[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#bot-iframe-wrapper.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#bot-iframe-wrapper:not(.is-open) iframe {
    pointer-events: none !important;
}

#bot-iframe-wrapper.is-open iframe {
    pointer-events: auto !important;
}

berlin-basha-product-button[data-basha-native-trigger="product"],
[data-basha-native-trigger="product"],
[data-basha-native-slot="product"],
[data-basha-native-slot="product"] * {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

berlin-basha-product-button[data-basha-native-trigger="product"] {
    position: relative !important;
    z-index: 45 !important;
    cursor: pointer !important;
}

body.basha-bot-open #bot-iframe-wrapper,
#bot-iframe-wrapper.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#berlin-premium-avatar-offer {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,211,77,.34);
    background: radial-gradient(circle at 10% 0%,rgba(255,211,77,.20),transparent 40%),
                    linear-gradient(135deg,rgba(72,35,105,.82),rgba(17,24,39,.94));
    box-shadow: 0 16px 38px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04);
    color: #fff;
}

#berlin-premium-avatar-offer::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    inset: auto -70px -90px auto;
    background: radial-gradient(circle,rgba(168,85,247,.35),transparent 70%);
    pointer-events: none;
}

.berlin-premium-avatar-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.berlin-premium-avatar-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,211,77,.13);
    border: 1px solid rgba(255,211,77,.28);
    color: #ffe98d;
    font: 900 .76rem "Cairo","Tajawal",sans-serif;
}

#berlin-premium-avatar-offer h4 {
    margin: 9px 0 5px;
    color: #fff;
    font-size: 1rem;
    border: 0;
    padding: 0;
}

#berlin-premium-avatar-offer p {
    margin: 0;
    color: #d7deec;
    font-size: .84rem;
    line-height: 1.75;
}

#berlin-premium-avatar-offer strong {
    color: #ffd34d;
}

.berlin-premium-avatar-cta {
    position: relative;
    z-index: 1;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font: 900 .84rem "Cairo","Tajawal",sans-serif;
    color: #17110a;
    background: linear-gradient(135deg,#ffd34d,#ffb020);
    box-shadow: 0 10px 25px rgba(255,176,32,.22);
}

#berlin-premium-avatar-offer.is-premium {
    border-color: rgba(34,197,94,.42);
    background: radial-gradient(circle at 10% 0%,rgba(34,197,94,.18),transparent 40%),
                    linear-gradient(135deg,rgba(22,101,52,.55),rgba(17,24,39,.94));
}

#berlin-premium-avatar-offer.is-premium .berlin-premium-avatar-cta {
    background: rgba(34,197,94,.14);
    border: 1px solid rgba(34,197,94,.38);
    color: #d8ffe4;
    cursor: default;
    box-shadow: none;
}

.avatar-cosmetic-wrap.avatar-premium-unlocked {
    box-shadow: 0 0 0 2px rgba(255,211,77,.42),0 0 22px rgba(255,211,77,.18);
    border-radius: 18px;
}

.avatar-cosmetic-wrap.avatar-premium-exclusive {
    box-shadow: 0 0 0 2px rgba(168,85,247,.55),0 0 26px rgba(168,85,247,.30);
    border-radius: 18px;
}

.cosmetic-premium-badge.is-exclusive {
    background: linear-gradient(135deg,#c4b5fd,#f0abfc);
}

.berlin-premium-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: 7px;
    color: #ffe98d;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 620px) {
    #berlin-premium-avatar-offer {
        grid-template-columns: 1fr;
    }

    .berlin-premium-avatar-cta {
        width: 100%;
    }
}

.berlin-section-divider {
    width: min(920px, 92%);
    margin: 46px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    direction: ltr;
}

.berlin-section-divider::before,
.berlin-section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205, 161, 255, 0.82));
    box-shadow: 0 0 14px rgba(160, 84, 255, 0.28);
}

.berlin-section-divider::after {
    background: linear-gradient(90deg, rgba(205, 161, 255, 0.82), transparent);
}

.berlin-section-divider i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #d8b4fe;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(205, 161, 255, 0.36);
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.2);
}

.berlin-community-lazy-mount {
    width: 100%;
    min-height: 1px;
    margin: 2px 0 0;
    padding: 0;
    contain: layout style;
}

.berlin-community-showcase {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto 22px;
    padding: clamp(14px, 2.4vw, 34px) clamp(18px, 4vw, 62px) clamp(26px, 3vw, 46px);
    overflow: visible;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.berlin-community-showcase::before,
.berlin-community-showcase::after {
    display: none;
}

.berlin-community-head {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: clamp(28px, 3.2vw, 46px);
}

.berlin-community-title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    font-size: clamp(38px, 5vw, 66px) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}

.berlin-community-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 700;
}

.berlin-community-subtitle strong {
    color: rgba(255, 255, 255, 0.8);
    direction: ltr;
    unicode-bidi: isolate;
}

.berlin-community-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    grid-template-areas: "content visual";
    align-items: center;
    gap: clamp(30px, 5vw, 76px);
    direction: ltr;
}

.berlin-community-content {
    grid-area: content;
    min-width: 0;
    direction: rtl;
}

.berlin-community-visual {
    grid-area: visual;
    position: relative;
    min-width: 0;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.berlin-community-visual::after {
    content: none;
    display: none;
}

.berlin-community-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.berlin-community-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 34px;
    direction: ltr;
}

.berlin-community-stat {
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 16px 10px;
    border-radius: 19px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    text-align: center;
}

.berlin-community-stat strong {
    display: block;
    font-size: clamp(25px, 2.4vw, 34px);
    line-height: 1;
    font-weight: 900;
    direction: ltr;
}

.berlin-community-stat span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 14px;
    font-weight: 800;
    direction: rtl;
}

.berlin-community-stat.is-views strong {
    color: #ffe000;
}

.berlin-community-stat.is-discord strong {
    color: #6d78ff;
}

.berlin-community-stat.is-followers strong {
    color: #13e887;
}

.berlin-community-description {
    max-width: 760px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.67);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.9;
    font-weight: 700;
}

.berlin-community-socials {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    direction: ltr;
}

.berlin-community-social {
    grid-column: span 2;
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 18px;
    border-radius: 16px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 900;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.berlin-community-social:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.berlin-community-social i {
    font-size: 22px;
}

.berlin-community-social.discord {
    background: #5865f2;
    box-shadow: 0 12px 28px rgba(88, 101, 242, 0.2);
}

.berlin-community-social.tiktok {
    background: #050505;
    border-color: rgba(255, 255, 255, 0.22);
}

.berlin-community-social.facebook {
    background: #1877f2;
    box-shadow: 0 12px 28px rgba(24, 119, 242, 0.18);
}

.berlin-community-social.instagram {
    grid-column: span 3;
    background: linear-gradient(100deg, #f58529 0%, #dd2a7b 48%, #8134af 100%);
    box-shadow: 0 12px 28px rgba(221, 42, 123, 0.2);
}

.berlin-community-social.linktree {
    grid-column: span 3;
    color: #07120b !important;
    background: #43e660;
    box-shadow: 0 12px 28px rgba(67, 230, 96, 0.16);
}

@media (max-width: 980px) {
    .berlin-community-showcase {
        padding-inline: clamp(18px, 4vw, 38px);
    }

    .berlin-community-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "visual" "content";
        gap: 34px;
    }

    .berlin-community-visual {
        width: min(760px, 100%);
        margin-inline: auto;
    }

    .berlin-community-content {
        width: min(820px, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 650px) {
    .berlin-section-divider {
        margin-top: 34px;
    }

    .berlin-community-showcase {
        margin-top: 0;
        padding: 14px 14px 30px;
        border-radius: 22px;
    }

    .berlin-community-title {
        font-size: clamp(34px, 11vw, 48px) !important;
        letter-spacing: -0.8px;
    }

    .berlin-community-description {
        text-align: center;
        line-height: 1.75;
    }

}

@media (max-width: 420px) {
    .berlin-community-stats,
.berlin-community-socials{
        grid-template-columns: 1fr;
    }.berlin-community-visual {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-community-social {
        transition: none;
    }
}

.berlin-premium-suite-holder {
    width: min(1120px, 96%);
    margin: 16px auto 22px;
    content-visibility: auto;
    contain-intrinsic-size: 620px;
}

.berlin-premium-suite-panel {
    contain: layout paint style;
    border: 1px solid rgba(255, 211, 77, .24);
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(18, 15, 34, .96), rgba(9, 12, 24, .96));
    color: #f8fafc;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.berlin-premium-suite-panel.is-active {
    border-color: rgba(255, 211, 77, .52);
}

.berlin-premium-suite-head,
.berlin-premium-suite-game,
.berlin-premium-suite-actions,
.berlin-premium-customizer,
.berlin-premium-suite-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.berlin-premium-suite-head {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.berlin-premium-suite-kicker,
.berlin-premium-suite-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.berlin-premium-suite-kicker {
    color: #17110a;
    background: #ffd34d;
}

.berlin-premium-suite-status {
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
}

.berlin-premium-suite-status.active {
    color: #d7ffe5;
    border-color: rgba(34, 197, 94, .38);
    background: rgba(34, 197, 94, .1);
}

.berlin-premium-suite-head h3 {
    margin: 8px 0 0;
    border: 0;
    padding: 0;
    color: #fff;
    font-size: 1.22rem;
}

.berlin-premium-suite-game {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 12px 0 14px;
    padding: 14px;
    border: 1px solid rgba(255, 211, 77, .22);
    border-radius: 18px;
    background: rgba(255, 211, 77, .07);
}

.berlin-premium-suite-game-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 16px;
    background: #171a21;
    color: #fff;
    font-size: 1.65rem;
}

.berlin-premium-suite-game > div:nth-child(2) {
    min-width: 180px;
    flex: 1;
}

.berlin-premium-suite-game small,
.berlin-premium-suite-game strong,
.berlin-premium-suite-game span {
    display: block;
}

.berlin-premium-suite-game small,
.berlin-premium-suite-game span {
    color: #aab4c5;
    line-height: 1.55;
}

.berlin-premium-suite-game strong {
    margin: 3px 0;
    color: #ffd34d;
    font-size: 1.1rem;
}

.berlin-premium-suite-game button,
.berlin-premium-suite-actions button,
.berlin-premium-subscribe-cta {
    min-height: 42px;
    border: 1px solid rgba(255, 211, 77, .36);
    border-radius: 13px;
    padding: 9px 13px;
    background: rgba(255, 211, 77, .1);
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.berlin-premium-suite-game button:hover,
.berlin-premium-suite-actions button:hover,
.berlin-premium-subscribe-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 211, 77, .7);
    background: rgba(255, 211, 77, .16);
}

.berlin-premium-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.berlin-premium-suite-grid article {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
}

.berlin-premium-suite-grid article > i {
    color: #ffd34d;
}

.berlin-premium-suite-grid b,
.berlin-premium-suite-grid span {
    display: block;
}

.berlin-premium-suite-grid b {
    margin: 7px 0 3px;
    color: #fff;
    font-size: .86rem;
}

.berlin-premium-suite-grid span {
    color: #aab4c5;
    font-size: .74rem;
    line-height: 1.6;
}

.berlin-premium-suite-actions {
    flex-wrap: wrap;
    margin-top: 12px;
}

.berlin-premium-customizer {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 12px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
}

.berlin-premium-customizer > div:first-child,
.berlin-premium-customizer > div:nth-child(3) {
    min-width: 130px;
}

.berlin-premium-customizer b,
.berlin-premium-customizer span {
    display: block;
}

.berlin-premium-customizer span {
    color: #94a3b8;
    font-size: .68rem;
}

.berlin-premium-frame-row,
.berlin-premium-color-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.berlin-premium-frame-choice,
.berlin-premium-color-choice {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    background: #242033;
}

.berlin-premium-frame-choice {
    border: 4px solid #ffd34d;
}

.berlin-premium-frame-choice.frame-cyber {
    border-color: #22d3ee;
}

.berlin-premium-frame-choice.frame-toxic {
    border-color: #4ade80;
}

.berlin-premium-frame-choice.frame-galaxy {
    border-color: #a78bfa;
}

.berlin-premium-suite-value {
    justify-content: space-between;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    color: #cbd5e1;
    background: rgba(0, 0, 0, .18);
}

.berlin-premium-suite-value b {
    color: #ffd34d;
    direction: ltr;
}

.berlin-premium-subscribe-cta {
    width: 100%;
    margin-top: 12px;
    color: #17110a;
    background: linear-gradient(135deg, #ffd34d, #ffb020);
}

body.berlin-premium-name-color-active #nav-user-name,
body.berlin-premium-name-color-active #dropdown-user-name,
body.berlin-premium-name-color-active #profile-display-name,
body.berlin-premium-name-color-active .profile-user-name,
body.berlin-premium-name-color-active .user-name {
    color: var(--berlin-premium-name-color, #ffd34d) !important;
    -webkit-text-fill-color: var(--berlin-premium-name-color, #ffd34d) !important;
}

html.berlin-page-hidden *,
body.is-scrolling [data-premium-suite-panel] * {
    animation-play-state: paused !important;
}

@media (max-width: 760px) {
    .berlin-premium-suite-grid {
        grid-template-columns: 1fr 1fr;
    }

    .berlin-premium-suite-panel {
        padding: 13px;
        border-radius: 18px;
        box-shadow: none;
    }

    .berlin-premium-suite-game {
        align-items: flex-start;
    }

    .berlin-premium-suite-game button {
        width: 100%;
    }
}

@media (max-width: 470px) {
    .berlin-premium-suite-grid {
        grid-template-columns: 1fr;
    }

    .berlin-premium-suite-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
    .berlin-premium-suite-panel *,
    .berlin-premium-suite-panel *::before,
    .berlin-premium-suite-panel *::after {
        animation: none !important;
        transition: none !important;
    }
}

body.low-end-device .berlin-premium-suite-panel,
body.performance-mode .berlin-premium-suite-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

.product-section,
.category-section,
.games-section,
.subscriptions-section,
#reward-shop-section,
#profile-settings-page {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

@media (max-width: 900px), (pointer: coarse) {
    .berlin-premium-suite-panel,
    .berlin-premium-suite-game,
    .berlin-premium-suite-grid article {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#profile-settings-page #berlin-premium-suite-profile,
#profile-settings-page .berlin-premium-suite-holder {
    display: none !important;
}

#reward-shop-section .berlin-premium-suite-holder.berlin-premium-suite-reward-page {
    width: min(1180px, 98%);
    margin: 22px auto 30px;
    content-visibility: auto;
    contain-intrinsic-size: 760px;
}

#reward-shop-section .berlin-premium-suite-gold-page {
    position: relative;
    overflow: hidden;
    padding: 24px 22px;
    border-radius: 30px;
    border: 1px solid rgba(255, 211, 77, .64);
    background: radial-gradient(circle at 10% 0%, rgba(255, 211, 77, .20), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(255, 176, 32, .16), transparent 30%),
        linear-gradient(145deg, rgba(35, 28, 13, .98), rgba(9, 8, 14, .98) 58%, rgba(24, 16, 6, .98));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

#reward-shop-section .berlin-premium-suite-gold-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 211, 77, .08), transparent);
    opacity: .72;
}

#reward-shop-section .berlin-premium-suite-gold-page > * {
    position: relative;
    z-index: 1;
}

#reward-shop-section .berlin-premium-suite-page-badge {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #17110a;
    background: linear-gradient(135deg, #ffe58a, #ffb020);
    font-size: .78rem;
    font-weight: 900;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-head {
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 211, 77, .18);
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-kicker {
    color: #17110a;
    background: linear-gradient(135deg, #fff2aa, #ffd34d 48%, #ffb020);
    box-shadow: 0 8px 22px rgba(255, 176, 32, .18);
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-head h3 {
    margin-top: 9px;
    color: #fff8d6;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

#reward-shop-section .berlin-premium-suite-lead {
    max-width: 720px;
    margin: 6px 0 0;
    color: #d9cda3;
    line-height: 1.7;
    font-size: .92rem;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-status {
    border-color: rgba(255, 211, 77, .22);
    background: rgba(255, 211, 77, .08);
    color: #ffeaa0;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-status.active {
    border-color: rgba(34, 197, 94, .45);
    background: rgba(34, 197, 94, .12);
    color: #d8ffe8;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game {
    margin-top: 16px;
    border-color: rgba(255, 211, 77, .34);
    background: linear-gradient(135deg, rgba(255, 211, 77, .16), rgba(255, 255, 255, .035)),
        rgba(0, 0, 0, .20);
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game-icon {
    background: #111318;
    color: #ffd34d;
    border: 1px solid rgba(255, 211, 77, .22);
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game strong,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid article > i,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-value b {
    color: #ffd34d;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid article,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-customizer,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-value {
    border: 1px solid rgba(255, 211, 77, .16);
    background: rgba(255, 255, 255, .045);
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid b,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-customizer b {
    color: #fff8dd;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid span,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-customizer span,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game small,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game span {
    color: #cfc4a3;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game button,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-actions button,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-subscribe-cta {
    color: #17110a;
    border-color: rgba(255, 211, 77, .58);
    background: linear-gradient(135deg, #fff0a8, #ffd34d 50%, #ffb020);
    box-shadow: none;
}

#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game button:hover,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-actions button:hover,
#reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-subscribe-cta:hover {
    background: linear-gradient(135deg, #fff6c7, #ffd34d 55%, #ffb020);
}

@media (max-width: 760px) {
    #reward-shop-section .berlin-premium-suite-gold-page {
        padding: 16px 13px;
        border-radius: 22px;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce), (update: slow), (max-width: 900px), (pointer: coarse) {
    #reward-shop-section .berlin-premium-suite-gold-page,
    #reward-shop-section .berlin-premium-suite-gold-page * {
        animation: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        will-change: auto !important;
    }
}

.fortnite-gifts-fullscreen-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(124, 58, 237, 0.24));
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.fortnite-gifts-fullscreen-btn i {
    pointer-events: none;
}

.fortnite-gifts-fs-exit {
    display: none;
}

@media (max-width: 920px), (hover: none) and (pointer: coarse) {
    .fortnite-gifts-fullscreen-btn {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    #fortniteGiftsFrame {
        min-height: 760px;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }
}

.fortnite-gifts-embed:fullscreen,
.fortnite-gifts-embed.fortnite-gifts-pseudo-fullscreen {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--berlin-z-priority-modal) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #020617 !important;
}

.fortnite-gifts-embed:fullscreen > div:first-of-type,
.fortnite-gifts-embed.fortnite-gifts-pseudo-fullscreen > div:first-of-type {
    flex: 0 0 auto !important;
    border-radius: 0 !important;
}

.fortnite-gifts-embed:fullscreen #fortniteGiftsFrame,
.fortnite-gifts-embed.fortnite-gifts-pseudo-fullscreen #fortniteGiftsFrame {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body.fortnite-gifts-fullscreen-open {
    overflow: hidden !important;
}

body.fortnite-gifts-fullscreen-open .fortnite-gifts-fs-enter {
    display: none;
}

body.fortnite-gifts-fullscreen-open .fortnite-gifts-fs-exit {
    display: inline;
}

body.fortnite-gifts-fullscreen-open .fortnite-gifts-fullscreen-btn {
    display: inline-flex !important;
}

#top-progress-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(230, 230, 250, 0.2);
    z-index: 10001;
    display: none;
    overflow: hidden;
}

#top-progress-loader .bar {
    width: 0%;
    height: 100%;
    background: #a29bfe;

    box-shadow: 0 0 12px #a29bfe;
    transition: width 0.4s ease;
}

@keyframes loading-animation {
    0% {
        width: 0%;
    }

    50% {
        width: 65%;
    }

    100% {
        width: 100%;
    }
}

.animate-loader .bar {
    animation: loading-animation 1.8s infinite ease-in-out;
}

#top-progress-loader,
#loading-screen.hidden,
#instant-splash.gone,
.suggestion-bubble {
    pointer-events: none !important;
}

#loading-screen.hidden,
#instant-splash.gone {
    visibility: hidden !important;
}

#navbar {
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--berlin-z-nav, 100);
    transition: background .3s ease, backdrop-filter .3s ease;
    background: rgba(20, 5, 40, 0.65) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15) !important;
    box-shadow: 0 4px 30px rgba(10, 0, 20, 0.6) !important;
    padding: 0 10px !important;
    min-height: 42px !important;
    isolation: isolate;
}

#navbar .logo-area,
#navbar .settings-dropdown,
#navbar .navbar-search-container,
#navbar-badges-container,
#navbar .user-menu-wrapper,
#navbar a,
#navbar button {
    position: relative;
    pointer-events: auto;
}

#user-dropdown-menu {
background: linear-gradient(145deg, rgba(20, 15, 35, 0.95), rgba(10, 5, 20, 0.98)) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    padding: 10px !important;
    min-width: 250px !important;
    overflow: hidden;
    transform-origin: top center;
overflow: visible !important;
pointer-events: none;
}

#user-dropdown-menu.berlin-dropdown-open {
    pointer-events: auto;
}

#navbar-search-results:not(.visible) {
    pointer-events: none !important;
    visibility: hidden !important;
}

#navbar-search-results.visible {
opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
pointer-events: auto !important;
}

#profile-premium-upgrade-wrap[hidden],
#berlin-premium-avatar-offer[hidden] {
    display: none !important;
}

#profile-premium-upgrade-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding: 0 12px;
    box-sizing: border-box;
}

#profile-premium-upgrade-btn {
    min-width: min(340px, 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.72);
    background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 28%),
                    linear-gradient(135deg, #ffd700 0%, #f59e0b 42%, #a855f7 100%);
    color: #140d1f;
    text-decoration: none;
    font-family: "Cairo", "Tajawal", sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.65px;
    box-shadow: 0 10px 28px rgba(168, 85, 247, 0.28), 0 0 22px rgba(255, 215, 0, 0.18);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

#profile-premium-upgrade-btn:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.08);
    box-shadow: 0 15px 36px rgba(168, 85, 247, 0.38), 0 0 28px rgba(255, 215, 0, 0.26);
}

#profile-premium-upgrade-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

#profile-premium-upgrade-btn i {
    font-size: 1.15rem;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.2));
}

#profile-premium-upgrade-btn.is-active {
    background: linear-gradient(135deg, #16a34a, #10b981);
    border-color: rgba(110, 231, 183, 0.85);
    color: #fff;
    cursor: default;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.28);
}

#profile-edit-mode #berlin-premium-avatar-offer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: calc(100% - 24px);
    margin: 4px auto 24px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    direction: rtl;
    text-align: right;
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.68);
    background: radial-gradient(circle at 8% 0%, rgba(255,255,255,.22), transparent 25%),
                    radial-gradient(circle at 100% 100%, rgba(168,85,247,.30), transparent 35%),
                    linear-gradient(135deg, rgba(39,20,58,.98), rgba(17,13,31,.98) 55%, rgba(54,28,73,.98));
    box-shadow: 0 22px 55px rgba(0,0,0,.38),
                    0 0 34px rgba(255,215,0,.13),
                    inset 0 0 0 1px rgba(255,255,255,.05);
}

#profile-edit-mode #berlin-premium-avatar-offer::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.18) 42%, transparent 62%);
    transform: translateX(105%);
    animation: berlinPremiumProfileShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

#profile-edit-mode #berlin-premium-avatar-offer::after {
    content: "PREMIUM";
    position: absolute;
    left: -10px;
    bottom: -30px;
    z-index: -1;
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 4px;
    color: rgba(255,255,255,.035);
    transform: rotate(-7deg);
    pointer-events: none;
}

#profile-edit-mode .berlin-premium-avatar-copy {
    min-width: 0;
}

#profile-edit-mode .berlin-premium-avatar-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd700, #f59e0b 55%, #c084fc);
    color: #1a1023;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .55px;
    box-shadow: 0 8px 22px rgba(245,158,11,.22);
}

#profile-edit-mode #berlin-premium-avatar-offer h4 {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2.3vw, 1.85rem);
    line-height: 1.45;
    text-shadow: 0 5px 22px rgba(0,0,0,.36);
}

#profile-edit-mode #berlin-premium-avatar-offer p {
    margin: 0;
    color: #ddd6e8;
    font-size: .95rem;
    line-height: 1.85;
}

#profile-edit-mode #berlin-premium-avatar-offer p strong {
    color: #ffd95a;
}

#profile-edit-mode .berlin-premium-profile-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

#profile-edit-mode .berlin-premium-profile-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

#profile-edit-mode .berlin-premium-profile-features i {
    color: #ffd54a;
}

#profile-edit-mode .berlin-premium-profile-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 700;
}

#profile-edit-mode .berlin-premium-profile-note i {
    color: #fbbf24;
}

#profile-edit-mode .berlin-premium-profile-actions {
    min-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#profile-edit-mode .berlin-premium-profile-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fef3c7;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .55px;
}

#profile-edit-mode .berlin-premium-avatar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.55);
    background: linear-gradient(135deg, #ffe45e, #f59e0b 48%, #c084fc);
    color: #180f20;
    text-decoration: none;
    font-family: "Cairo", "Tajawal", sans-serif;
    font-size: .94rem;
    font-weight: 900;
    box-shadow: 0 13px 30px rgba(245,158,11,.25), 0 0 24px rgba(192,132,252,.17);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

#profile-edit-mode .berlin-premium-avatar-cta:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.08);
    box-shadow: 0 18px 38px rgba(245,158,11,.32), 0 0 30px rgba(192,132,252,.22);
}

#profile-edit-mode #berlin-premium-avatar-offer.is-premium {
    border-color: rgba(52,211,153,.68);
    background: radial-gradient(circle at 10% 0%, rgba(255,255,255,.18), transparent 25%),
                    linear-gradient(135deg, rgba(6,78,59,.96), rgba(6,45,38,.98) 58%, rgba(17,94,89,.94));
    box-shadow: 0 22px 55px rgba(0,0,0,.35), 0 0 34px rgba(16,185,129,.16);
}

#profile-edit-mode #berlin-premium-avatar-offer.is-premium .berlin-premium-avatar-kicker,
#profile-edit-mode #berlin-premium-avatar-offer.is-premium .berlin-premium-avatar-cta {
    background: linear-gradient(135deg, #6ee7b7, #10b981);
    color: #052e26;
}

#profile-edit-mode #berlin-premium-avatar-offer.is-premium .berlin-premium-avatar-cta {
    pointer-events: none;
    cursor: default;
}

@keyframes berlinPremiumProfileShine {
    0%,
    55% {
        transform: translateX(105%);
    }

    78%,
    100% {
        transform: translateX(-105%);
    }
}

@media (max-width: 760px) {
    #profile-edit-mode #berlin-premium-avatar-offer {
        width: calc(100% - 12px);
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 19px 16px;
        border-radius: 20px;
    }

    #profile-edit-mode .berlin-premium-profile-actions {
        min-width: 0;
    }

    #profile-edit-mode .berlin-premium-profile-features span {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #profile-edit-mode #berlin-premium-avatar-offer::before {
        animation: none;
        display: none;
    }
}

#profile-premium-upgrade-wrap.is-corner-position {
    position: absolute;
    top: 18px;
    right: 72px;
    width: auto;
    max-width: calc(100% - 92px);
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    z-index: 35;
}

#profile-premium-upgrade-wrap.is-corner-position #profile-premium-upgrade-btn {
    min-width: 0;
    max-width: 100%;
    padding: 10px 17px;
    border-radius: 999px;
    font-size: .84rem;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(168, 85, 247, 0.32), 0 0 18px rgba(255, 215, 0, 0.2);
}

@media (max-width: 520px) {
    #profile-premium-upgrade-wrap {
        margin-top: 13px;
        padding: 0 4px;
    }

    #profile-premium-upgrade-btn {
        width: 100%;
        min-width: 0;
        padding: 13px 18px;
        font-size: .92rem;
    }

    #profile-premium-upgrade-wrap.is-corner-position {
        top: 58px;
        right: 10px;
        width: auto;
        max-width: calc(100% - 20px);
        margin: 0;
        padding: 0;
    }

    #profile-premium-upgrade-wrap.is-corner-position #profile-premium-upgrade-btn {
        width: auto;
        max-width: 100%;
        padding: 9px 13px;
        font-size: .74rem;
    }
}

@media (max-width: 768px) {

    .mobile-fab-menu > *,
    .mobile-fab-menu .fab-item,
    .mobile-fab-menu .fab-dropdown,
    .mobile-fab-menu .fab-sub-menu,
    .mobile-fab-menu .fab-sub-menu a {
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-fab-menu .fab-steam-label,
    .mobile-fab-menu .fab-steam-label *,
    .mobile-fab-menu .fab-steam-primary-link,
    .mobile-fab-menu .fab-steam-primary-link * {
        color: #dff4ff !important;
        -webkit-text-fill-color: #dff4ff !important;
        background: none !important;
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-indent: 0 !important;
        font-size: inherit !important;
    }

    .mobile-fab-menu .fab-steam-label i,
    .mobile-fab-menu .fab-steam-primary-link i {
        color: #69c4f5 !important;
        -webkit-text-fill-color: #69c4f5 !important;
    }

    .mobile-fab-menu .fab-mobile-detail-copy strong,
    .mobile-fab-menu .fab-mobile-detail-copy small {
        display: block !important;
        max-width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: none !important;
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        text-indent: 0 !important;
        white-space: normal !important;
    }

    .mobile-fab-menu .fab-playstation-link i {
        color: #2492ff !important;
        -webkit-text-fill-color: #2492ff !important;
        filter: drop-shadow(0 0 6px rgba(36, 146, 255, .38)) !important;
    }

    .mobile-fab-menu .fab-xbox-link i {
        color: #22d35a !important;
        -webkit-text-fill-color: #22d35a !important;
        filter: drop-shadow(0 0 6px rgba(34, 211, 90, .34)) !important;
    }

    .mobile-fab-menu .fab-discord-decorations-link i {
        color: #8b95ff !important;
        -webkit-text-fill-color: #8b95ff !important;
        filter: drop-shadow(0 0 6px rgba(88, 101, 242, .42)) !important;
    }

    .mobile-fab-menu .fab-keys-link i,
.mobile-fab-menu .fab-subscriptions-link i{
        color: #ffd34d !important;
        -webkit-text-fill-color: #ffd34d !important;
    }body > .navbar-search-container.inside-fab {
        position: fixed !important;
        top: max(74px, calc(env(safe-area-inset-top, 0px) + 58px)) !important;
        right: auto !important;
        left: 50% !important;
        bottom: auto !important;
        width: min(360px, calc(100vw - 28px)) !important;
        max-width: 360px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        display: none !important;
        align-items: center !important;
        gap: 8px !important;
        transform: translateX(-50%) !important;
        border: 1px solid rgba(251, 191, 36, .38) !important;
        border-radius: 15px !important;
        background: rgba(18, 10, 30, .98) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .54) !important;
        overflow: visible !important;
        z-index: var(--berlin-z-floating) !important;
        box-sizing: border-box !important;
    }

    body > .navbar-search-container.inside-fab.mobile-search-open {
        display: flex !important;
    }

    body > .navbar-search-container.inside-fab::before,
    body > .navbar-search-container.inside-fab::after {
        content: none !important;
        display: none !important;
    }

    body > .navbar-search-container.inside-fab .navbar-search-input {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 7px 6px !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
        font-family: "Cairo", "Tajawal", sans-serif !important;
        font-size: 14px !important;
    }

    body > .navbar-search-container.inside-fab .navbar-search-input:focus {
        width: 100% !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body > .navbar-search-container.inside-fab .navbar-search-input::placeholder {
        color: rgba(255, 255, 255, .58) !important;
        opacity: 1 !important;
    }

    body > .navbar-search-container.inside-fab > svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        color: #fbbf24 !important;
    }

    body > .navbar-search-container.inside-fab #navbar-search-results {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(62dvh, 520px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 7px !important;
        border: 1px solid rgba(251, 191, 36, .32) !important;
        border-radius: 14px !important;
        background: rgba(15, 8, 25, .99) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .52) !important;
        transform-origin: top center !important;
        z-index: calc(var(--berlin-z-floating) + 1) !important;
        box-sizing: border-box !important;
    }

    #home > .mobile-home-hero-img img {
position: relative;
        z-index: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top center;
width: calc(100% + 34px) !important;
        object-position: top center !important;
        transform: translateX(-24px) scale(1.09) !important;
        transform-origin: center center !important;
position: relative !important;
        z-index: 0 !important;
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center top !important;
        margin: 0 !important;
        padding: 0 !important;
height: calc(100% + 6px) !important;
        transform: translateY(-6px) !important;
}
    .mobile-fab-menu {
position: fixed;
        bottom: 142px;
        right: 14px;
        width: min(300px, calc(100vw - 28px));
        max-height: calc(100vh - 166px);
        max-height: calc(100dvh - 166px - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scroll-padding-top: 12px;
        scrollbar-gutter: stable;
        background: rgba(18, 10, 30, .9);
        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;
top: max(68px, calc(env(safe-area-inset-top, 0px) + 54px)) !important;
        bottom: max(142px, calc(env(safe-area-inset-bottom, 0px) + 126px)) !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scroll-padding-block: 12px 24px !important;
        padding: 12px 12px 18px !important;
        box-sizing: border-box !important;
right: 8px !important;
        width: min(326px, calc(100vw - 16px)) !important;
        padding: 10px 9px 14px !important;
        gap: 0 !important;
        border: 1px solid rgba(190, 126, 255, .22) !important;
        border-top-color: rgba(220, 170, 255, .38) !important;
        border-bottom-color: rgba(131, 74, 214, .42) !important;
        border-radius: 22px !important;
        background: radial-gradient(circle at 88% 2%, rgba(126, 34, 206, .20), transparent 38%),
            linear-gradient(180deg, rgba(18, 10, 31, .965), rgba(10, 6, 20, .975)) !important;
        -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
        backdrop-filter: blur(20px) saturate(125%) !important;
        box-shadow: 0 22px 60px rgba(0, 0, 0, .72),
            0 0 0 1px rgba(255, 255, 255, .025) inset,
            0 18px 46px rgba(82, 26, 140, .18) inset !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(168, 85, 247, .58) transparent;
}

    .mobile-fab-menu::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-fab-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .mobile-fab-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(168, 85, 247, .56);
    }

    .mobile-fab-menu .fab-item {
        --fab-accent: #b388ff;
        --fab-tint: rgba(139, 92, 246, .11);
        --fab-border: rgba(167, 139, 250, .19);
        position: relative !important;
        min-height: 58px !important;
        margin: 0 0 6px !important;
        padding: 8px 10px !important;
        border: 1px solid var(--fab-border) !important;
        border-radius: 16px !important;
        background: linear-gradient(102deg, var(--fab-tint), rgba(255, 255, 255, .022) 55%, rgba(255, 255, 255, .012)) !important;
        box-shadow: inset -3px 0 0 var(--fab-accent),
            0 7px 18px rgba(0, 0, 0, .18),
            0 1px 0 rgba(255, 255, 255, .035) inset !important;
        overflow: hidden !important;
        isolation: isolate;
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
    }

    .mobile-fab-menu .fab-item::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -75%;
        right: -15%;
        width: 115px;
        height: 115px;
        border-radius: 50%;
        background: var(--fab-accent);
        opacity: .055;
        filter: blur(10px);
        pointer-events: none;
    }

    .mobile-fab-menu .fab-item:hover,
    .mobile-fab-menu .fab-item:focus-visible,
    .mobile-fab-menu .dropdown-trigger.active {
        transform: translateY(-1px) !important;
        border-color: color-mix(in srgb, var(--fab-accent) 42%, transparent) !important;
        background: linear-gradient(102deg, color-mix(in srgb, var(--fab-accent) 16%, transparent), rgba(255, 255, 255, .035)) !important;
        box-shadow: inset -3px 0 0 var(--fab-accent),
            0 10px 23px rgba(0, 0, 0, .25),
            0 0 18px color-mix(in srgb, var(--fab-accent) 11%, transparent) !important;
    }

    .mobile-fab-menu .fab-mobile-detail-link {
padding: 10px 13px !important;
        justify-content: flex-start !important;
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        overflow: visible !important;
min-height: 58px !important;
        padding: 8px 10px !important;
}

    .mobile-fab-menu .fab-mobile-detail-label {
width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        flex: 1 1 auto !important;
gap: 10px !important;
}

    .mobile-fab-menu .fab-mobile-detail-label > i {
width: 24px !important;
        min-width: 24px !important;
        margin: 0 !important;
        font-size: 20px !important;
        text-align: center !important;
display: grid !important;
        place-items: center !important;
        width: 35px !important;
        min-width: 35px !important;
        height: 35px !important;
        border: 1px solid color-mix(in srgb, var(--fab-accent) 32%, transparent) !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--fab-accent) 11%, rgba(255, 255, 255, .018)) !important;
        color: var(--fab-accent) !important;
        -webkit-text-fill-color: var(--fab-accent) !important;
        font-size: 18px !important;
        filter: drop-shadow(0 0 7px color-mix(in srgb, var(--fab-accent) 40%, transparent)) !important;
}

    .mobile-fab-menu .fab-mobile-detail-copy {
min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        line-height: 1.25 !important;
        text-align: right !important;
gap: 3px !important;
        justify-content: center !important;
}

    .mobile-fab-menu .fab-mobile-detail-copy strong {
color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 13.5px !important;
        line-height: 1.28 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
}

    .mobile-fab-menu .fab-mobile-detail-copy small {
color: #aeb8ca !important;
        -webkit-text-fill-color: #aeb8ca !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
color: #aeb7c9 !important;
        -webkit-text-fill-color: #aeb7c9 !important;
        font-size: 9.8px !important;
        line-height: 1.45 !important;
}

    .mobile-fab-menu .dropdown-trigger .arrow {
        display: grid !important;
        place-items: center !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        margin: 0 4px 0 0 !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, .035) !important;
        color: #a8b0c2 !important;
        font-size: 9px !important;
    }

    .mobile-fab-menu .dropdown-trigger.active .arrow {
        color: var(--fab-accent) !important;
        border-color: color-mix(in srgb, var(--fab-accent) 34%, transparent) !important;
        background: color-mix(in srgb, var(--fab-accent) 10%, transparent) !important;
    }

    .mobile-fab-menu .fab-dropdown {
        margin: 0 !important;
    }

    .mobile-fab-menu .fab-sub-menu {
        margin: -2px 5px 10px !important;
        padding: 6px !important;
        gap: 3px !important;
        border: 1px solid rgba(255, 255, 255, .065) !important;
        border-right: 2px solid var(--fab-accent, #a855f7) !important;
        border-radius: 12px !important;
        background: rgba(7, 4, 14, .72) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .20) inset !important;
    }

    .mobile-fab-menu .fab-sub-menu a {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        color: #cbd2df !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        background: transparent !important;
    }

    .mobile-fab-menu .fab-sub-menu a:hover,
    .mobile-fab-menu .fab-sub-menu a:focus-visible {
        padding-right: 10px !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, .07) !important;
        background: rgba(255, 255, 255, .055) !important;
    }

    .mobile-fab-menu .fab-sub-menu i,
    .mobile-fab-menu .fab-sub-menu img,
    .mobile-fab-menu .fab-sub-menu svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        margin-left: 9px !important;
        object-fit: contain;
    }

    .mobile-fab-menu .fab-subscriptions-link {
        --fab-accent: #f8cc4b;
        --fab-tint: rgba(248, 204, 75, .095);
        --fab-border: rgba(248, 204, 75, .18);
    }

    .mobile-fab-menu .fab-topup-link {
        --fab-accent: #d971ff;
        --fab-tint: rgba(174, 52, 220, .15);
        --fab-border: rgba(213, 113, 255, .30);
    }

    .mobile-fab-menu .fab-playstation-link {
border-color: rgba(36, 146, 255, .28) !important;
        background: linear-gradient(90deg, rgba(13, 125, 255, .14), rgba(63, 176, 255, .04)) !important;
--fab-accent: #3198ff;
        --fab-tint: rgba(24, 121, 255, .13);
        --fab-border: rgba(49, 152, 255, .28);
}

    .mobile-fab-menu .fab-xbox-link {
border-color: rgba(34, 211, 90, .26) !important;
        background: linear-gradient(90deg, rgba(17, 200, 75, .13), rgba(73, 226, 123, .04)) !important;
--fab-accent: #35dc6e;
        --fab-tint: rgba(34, 197, 94, .115);
        --fab-border: rgba(53, 220, 110, .24);
}

    .mobile-fab-menu .fab-steam-link {
        --fab-accent: #67c7f5;
        --fab-tint: rgba(83, 174, 221, .105);
        --fab-border: rgba(103, 199, 245, .22);
    }

    .mobile-fab-menu .fab-discord-decorations-link {
border-color: rgba(88, 101, 242, .30) !important;
        background: linear-gradient(90deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .04)) !important;
--fab-accent: #8d96ff;
        --fab-tint: rgba(88, 101, 242, .135);
        --fab-border: rgba(141, 150, 255, .26);
}

    .mobile-fab-menu .fab-keys-link {
        --fab-accent: #ffd24b;
        --fab-tint: rgba(255, 210, 75, .085);
        --fab-border: rgba(255, 210, 75, .18);
    }

    .mobile-fab-menu .fab-services-link {
        --fab-accent: #dc78ff;
        --fab-tint: rgba(190, 74, 229, .11);
        --fab-border: rgba(220, 120, 255, .20);
    }

    .mobile-fab-menu #topupList {
        --fab-accent: #d971ff;
    }

    .mobile-fab-menu #steamList {
        --fab-accent: #67c7f5;
    }

    .mobile-fab-menu #servicesList {
        --fab-accent: #dc78ff;
    }
}

@media (min-width: 993px) {
    #navbar .navbar-search-container {
        cursor: text !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 30 !important;
        padding: 4px 8px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    #navbar .navbar-search-container * {
        pointer-events: auto;
    }

    #navbar .navbar-search-container > svg {
        pointer-events: none !important;
        flex: 0 0 auto !important;
    }

    #navbar .navbar-search-input {
        cursor: text !important;
        pointer-events: auto !important;
        padding: 2px 5px !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    #navbar-search-results,
    #navbar-search-results * {
        pointer-events: auto !important;
    }
}

#home .main-ad-banner.berlin-main-hero-banner {
width: 100% !important;
    max-width: 500px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    background: #081426 !important;
    border: none !important;
    outline: none !important;
    contain: layout paint style !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38) !important;
background: transparent !important;
    box-shadow: none !important;
}

#home .hero-spotlight-zone,
#home .spotlight-stack {
    background: transparent !important;
    box-shadow: none !important;
}

#home .spotlight-card {
position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15), transparent 35%), linear-gradient(135deg, #081426, #111827);
    border: none !important;
    outline: none !important;
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
    transform: translateZ(0);
    isolation: isolate;
    contain: layout paint style !important;
background: transparent !important;
    box-shadow: none !important;
}

#home .spotlight-card::after {
content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.38)), linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 55%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.16)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 55%) !important;
}

#home .main-ad-banner.berlin-main-hero-banner #slide-1-container.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

#home .main-ad-banner.berlin-main-hero-banner #current-img {
    content-visibility: visible !important;
}

#profile-settings-page .rank-section {
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

#profile-settings-page .rank-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

#profile-settings-page .next-rank-info {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
}

#profile-settings-page .progress-track {
    height: 10px;
    background: rgba(255,255,255,.08);
}

.berlin-goe-world-pill {
    color: #fff;
    border-color: rgba(34,211,238,.42) !important;
    background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(139,92,246,.10)) !important;
}

.berlin-goe-world-pill:hover {
    border-color: rgba(34,211,238,.68) !important;
    box-shadow: 0 10px 22px rgba(34,211,238,.12);
}

.avatar-cosmetic-wrap {
position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: visible;
    line-height: 0;
    margin-bottom: 26px;
padding-bottom: 20px;
}

.cosmetic-premium-badge {
position: absolute;
    inset: auto 4px 4px 4px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 6px;
    border-radius: 8px;
    background: linear-gradient(135deg,#ffd34d,#a855f7);
    color: #120c1b;
    font: 900 .58rem "Cairo","Tajawal",sans-serif;
    box-shadow: 0 6px 15px rgba(0,0,0,.38);
    pointer-events: none;
inset: auto auto -2px 50%;
    transform: translateX(-50%);
    min-height: 18px;
    max-width: calc(100% - 8px);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .50rem;
    line-height: 1;
}

.berlin-name-color-edit {
    margin: 10px auto 18px;
    max-width: 640px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.berlin-name-color-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.berlin-name-color-edit h3 {
    margin: 0;
    color: var(--light-text, #fff);
    font-size: 14px;
}

.berlin-name-color-edit-head span,
.berlin-name-color-edit p {
    color: #aab4c5;
    font-size: 11px;
    margin: 0;
}

.berlin-profile-name-color-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.berlin-premium-color-choice {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.62);
    background: var(--premium-choice, #ffd34d);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.berlin-name-color-reset {
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

body.berlin-premium-name-color-active #header-display-name,
body.berlin-premium-name-color-active #settings-user-name,
body.berlin-premium-name-color-active #static-display-name,
body.berlin-premium-name-color-active #dropdown-user-name,
body.berlin-premium-name-color-active #nav-user-name,
body.berlin-premium-name-color-active #profile-display-name,
body.berlin-premium-name-color-active .profile-user-name,
body.berlin-premium-name-color-active .user-name,
body.berlin-premium-name-color-active [data-profile-name],
body.berlin-premium-name-color-active [data-user-name] {
    color: var(--berlin-premium-name-color, #ffd34d) !important;
    -webkit-text-fill-color: var(--berlin-premium-name-color, #ffd34d) !important;
}

#berlin-premium-suite-rewards {
    margin-top: 26px;
}

[data-premium-locked="true"] {
    opacity: .76;
    cursor: not-allowed !important;
}

@media (max-width: 680px) {
    #profile-settings-page .rank-header,
    .berlin-name-color-edit-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

#profile-edit-mode .berlin-name-color-edit {
    margin: 10px 0 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#profile-edit-mode .berlin-profile-avatar-more-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 116px !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
}

#reward-shop-section .berlin-reward-frame-preview {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, .055) !important;
    z-index: 2 !important;
    transform: translateZ(0) !important;
}

#reward-shop-section .berlin-reward-frame-preview span {
    width: 54px !important;
    height: 54px !important;
    display: block !important;
    border-radius: 50% !important;
    background: url("https://www.berlingoestore.com/images/BerlinStore.png") center/cover no-repeat, rgba(255,255,255,.08) !important;
    position: relative !important;
    z-index: 2 !important;
}

#reward-shop-section .berlin-reward-frame-preview::before,
#reward-shop-section .berlin-reward-frame-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-inferno::before {
    border: 4px solid #ff4500 !important;
    box-shadow: 0 0 12px #ff4500, 0 0 24px rgba(255, 136, 0, .72), inset 0 0 12px rgba(255, 69, 0, .75) !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-cyber::before {
    border: 4px solid #22d3ee !important;
    box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(157, 0, 255, .62), inset 0 0 12px rgba(34, 211, 238, .65) !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-toxic::before {
    border: 4px solid #39ff14 !important;
    box-shadow: 0 0 12px #39ff14, 0 0 24px rgba(57, 255, 20, .55), inset 0 0 12px rgba(57, 255, 20, .62) !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-galaxy::before {
    border: 4px solid #a78bfa !important;
    box-shadow: 0 0 13px #7b2cbf, 0 0 26px rgba(34, 211, 238, .45), inset 0 0 12px rgba(167, 139, 250, .72) !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-royal::before,
#reward-shop-section .berlin-reward-frame-preview.rank-gold::before {
    border: 4px solid #ffd34d !important;
    box-shadow: 0 0 13px rgba(255, 211, 77, .88), 0 0 26px rgba(255, 176, 32, .48), inset 0 0 12px rgba(255, 211, 77, .62) !important;
}

#reward-shop-section .berlin-reward-frame-preview.frame-ice::before,
#reward-shop-section .berlin-reward-frame-preview.rank-diamond::before {
    border: 4px solid #7dd3fc !important;
    box-shadow: 0 0 13px rgba(125, 211, 252, .88), 0 0 26px rgba(34, 211, 238, .5), inset 0 0 12px rgba(255, 255, 255, .55) !important;
}

@media (prefers-reduced-motion: no-preference) {
    #reward-shop-section .berlin-reward-frame-preview.frame-inferno::after,
    #reward-shop-section .berlin-reward-frame-preview.frame-cyber::after,
    #reward-shop-section .berlin-reward-frame-preview.frame-toxic::after,
    #reward-shop-section .berlin-reward-frame-preview.frame-galaxy::after,
    #reward-shop-section .berlin-reward-frame-preview.frame-royal::after,
    #reward-shop-section .berlin-reward-frame-preview.frame-ice::after,
    #reward-shop-section .berlin-reward-frame-preview[class*="rank-"]::after {
        inset: -5px !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        opacity: .72 !important;
        animation: berlinRewardFramePreviewPulse 2.4s ease-in-out infinite !important;
    }
}

@keyframes berlinRewardFramePreviewPulse {
    0%, 100% { transform: scale(.96); opacity: .46; }
    50% { transform: scale(1.06); opacity: .82; }
}

@media (max-width: 760px) {
    #profile-edit-mode .berlin-profile-edit-row {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "fields"
            "avatars" !important;
    }

    #profile-edit-mode .berlin-profile-avatar-side {
        justify-content: flex-start !important;
    }

    #profile-edit-mode #berlin-avatar-preview-row {
        max-width: calc(100vw - 160px) !important;
    }
}
#profile-edit-mode .berlin-profile-edit-row {
width: 100% !important;

    grid-template-columns: minmax(260px, 400px) minmax(0, 1fr) !important;

    gap: 16px !important;
    align-items: start !important;

    padding: 0 15px !important;
    margin-top: -5px !important;

width: min(1080px, calc(100vw - 32px)) !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(390px, 1fr) minmax(380px, 540px) !important;
    grid-template-areas: "avatars fields" !important;
    gap: 28px !important;
    align-items: center !important;
    direction: ltr !important;
}

#profile-edit-mode .berlin-profile-main-fields {
    grid-area: fields !important;
    direction: rtl !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: max-content minmax(260px, 1fr) !important;
    grid-template-areas:
        "nameLabel nameInput"
        "colorLabel colors" !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#profile-edit-mode .berlin-profile-field-label {
    grid-area: nameLabel !important;
    margin: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

#profile-edit-mode #name-input-wrapper-center {
    grid-area: nameInput !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

#profile-edit-mode #profileDisplayName {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    text-align: right !important;
    color: #fff !important;
}

#profile-edit-mode .berlin-name-color-edit,
#profile-edit-mode #profile-name-color-edit {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#profile-edit-mode .berlin-name-color-label {
    grid-area: colorLabel !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#profile-edit-mode .berlin-profile-name-color-row {
    grid-area: colors !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
#profile-edit-mode .berlin-profile-name-color-row::-webkit-scrollbar { display: none !important; }

#profile-edit-mode .berlin-premium-color-choice {
width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;

    border: 2px solid rgba(255, 255, 255, .22) !important;

    box-shadow: 0 0 0 2px rgba(0, 0, 0, .24) !important;
    transition: border-color .12s ease, outline-color .12s ease !important;
width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.30) !important;
    background: var(--premium-choice, #ffd34d) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25) !important;
    padding: 0 !important;
    cursor: pointer !important;
}
#profile-edit-mode .berlin-premium-color-choice.is-selected {
    border-color: #fff !important;
    outline: 2px solid var(--accent-yellow, #facc15) !important;
    outline-offset: 2px !important;
}

#profile-edit-mode #berlin-avatar-preview-row img.selected-avatar {
    border-color: var(--accent-yellow, #facc15) !important;
    box-shadow: 0 0 0 2px rgba(250,204,21,.25), 0 0 18px rgba(250,204,21,.28) !important;
}
#profile-edit-mode .berlin-profile-avatar-more-btn,
#profile-edit-mode .berlin-show-more-avatars-btn {
    min-width: 154px !important;
    min-height: 46px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
body.berlin-profile-avatar-dropdown-open #profile-edit-mode #berlin-avatar-preview-row,
#profile-edit-mode #berlin-avatar-preview-row[hidden] { display: none !important; }
.frame-option-btn.frame-royal,
img.frame-royal,
#currentProfilePic.frame-royal,
#nav-user-img.frame-royal,
#dropdown-user-img.frame-royal {
    border: 3px solid #ffd34d !important;
    box-shadow: 0 0 11px rgba(255,211,77,.94), 0 0 24px rgba(255,176,32,.44), inset 0 0 10px rgba(255,211,77,.62) !important;
    border-radius: 50% !important;
}
.frame-option-btn.frame-ice,
img.frame-ice,
#currentProfilePic.frame-ice,
#nav-user-img.frame-ice,
#dropdown-user-img.frame-ice {
    border: 3px solid #7dd3fc !important;
    box-shadow: 0 0 11px rgba(125,211,252,.94), 0 0 24px rgba(34,211,238,.50), inset 0 0 10px rgba(255,255,255,.55) !important;
    border-radius: 50% !important;
}
#frames-selection-container .frame-option-btn.frame-royal,
#frames-selection-container .frame-option-btn.frame-ice {
    display: block !important;
    visibility: visible !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    opacity: 1 !important;
}
#frames-selection-container .frame-option-btn.frame-royal.locked,
#frames-selection-container .frame-option-btn.frame-ice.locked { opacity: .55 !important; }
#reward-shop-section .reward-image-box.berlin-reward-frame-preview-box {

    min-height: 120px !important;
    height: 130px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
min-height: 132px !important;
    height: 132px !important;
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
}
#reward-shop-section .berlin-reward-frame-preview,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview] {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    overflow: visible !important;
    isolation: isolate !important;
    background: rgba(255,255,255,.055) !important;
    transform: none !important;
    filter: none !important;
}
#reward-shop-section .berlin-reward-frame-preview > span,
#reward-shop-section .berlin-reward-frame-preview > img,
#reward-shop-section .berlin-reward-frame-preview .berlin-reward-frame-preview-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: url("https://www.berlingoestore.com/images/BerlinStorefff.png") center/cover no-repeat rgba(255,255,255,.08) !important;
}
#reward-shop-section .berlin-reward-frame-preview::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}
#reward-shop-section .berlin-reward-frame-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    opacity: .75 !important;
    z-index: 1 !important;
    animation: pulse 1.8s ease-in-out infinite !important;
}
#reward-shop-section .berlin-reward-frame-preview.frame-inferno::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-inferno"]::before { border: 5px solid #ff4500 !important; box-shadow: 0 0 13px #ff4500, 0 0 26px rgba(255,136,0,.72), inset 0 0 12px rgba(255,69,0,.72) !important; }
#reward-shop-section .berlin-reward-frame-preview.frame-cyber::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-cyber"]::before { border: 5px solid #22d3ee !important; box-shadow: 0 0 13px #22d3ee, 0 0 26px rgba(157,0,255,.62), inset 0 0 12px rgba(34,211,238,.64) !important; }
#reward-shop-section .berlin-reward-frame-preview.frame-toxic::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-toxic"]::before { border: 5px solid #39ff14 !important; box-shadow: 0 0 13px #39ff14, 0 0 26px rgba(57,255,20,.54), inset 0 0 12px rgba(57,255,20,.60) !important; }
#reward-shop-section .berlin-reward-frame-preview.frame-galaxy::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-galaxy"]::before { border: 5px solid #a78bfa !important; box-shadow: 0 0 13px #7b2cbf, 0 0 26px rgba(34,211,238,.45), inset 0 0 12px rgba(167,139,250,.70) !important; }
#reward-shop-section .berlin-reward-frame-preview.frame-royal::before,
#reward-shop-section .berlin-reward-frame-preview.rank-gold::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-royal"]::before { border: 5px solid #ffd34d !important; box-shadow: 0 0 14px rgba(255,211,77,.94), 0 0 28px rgba(255,176,32,.52), inset 0 0 12px rgba(255,211,77,.64) !important; }
#reward-shop-section .berlin-reward-frame-preview.frame-ice::before,
#reward-shop-section .berlin-reward-frame-preview.rank-diamond::before,
#reward-shop-section .berlin-reward-frame-preview[data-frame-preview="frame-ice"]::before { border: 5px solid #7dd3fc !important; box-shadow: 0 0 14px rgba(125,211,252,.94), 0 0 28px rgba(34,211,238,.55), inset 0 0 12px rgba(255,255,255,.58) !important; }
#reward-shop-section .berlin-reward-frame-preview.rank-emerald::before { border: 5px solid #34d399 !important; box-shadow: 0 0 14px rgba(52,211,153,.9), 0 0 28px rgba(16,185,129,.50), inset 0 0 12px rgba(52,211,153,.58) !important; }
#reward-shop-section .berlin-reward-frame-preview.rank-elite::before { border: 5px solid #c084fc !important; box-shadow: 0 0 14px rgba(192,132,252,.9), 0 0 28px rgba(236,72,153,.45), inset 0 0 12px rgba(192,132,252,.58) !important; }
#reward-shop-section .berlin-reward-frame-preview.rank-unreal::before { border: 5px solid #fb7185 !important; box-shadow: 0 0 14px rgba(251,113,133,.9), 0 0 28px rgba(168,85,247,.52), inset 0 0 12px rgba(251,113,133,.58) !important; }
body > #berlin-avatar-purchase-choice-modal,
#berlin-avatar-purchase-choice-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--berlin-z-priority-modal) !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(2,6,23,.88) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
}
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-box {
    position: relative !important;
    width: min(430px, calc(100vw - 30px)) !important;
    max-height: calc(100dvh - 36px) !important;
    overflow: auto !important;
    margin: auto !important;
    padding: 24px 20px 18px !important;
    border: 1px solid rgba(251,191,36,.34) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg,#111827,#0b1020) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.62) !important;
    color: #fff !important;
    direction: rtl !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-x {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 22px !important;
    line-height: 1 !important;
}
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-preview {
    width: 92px !important;
    height: 92px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid rgba(250,204,21,.72) !important;
    box-shadow: 0 0 22px rgba(250,204,21,.26) !important;
    margin-bottom: 12px !important;
}
#berlin-avatar-purchase-choice-modal h3 { margin: 0 0 8px !important; color: #fff !important; border: 0 !important; padding: 0 !important; font-size: 1.25rem !important; }
#berlin-avatar-purchase-choice-modal p { margin: 0 !important; color: #cbd5e1 !important; line-height: 1.8 !important; font-size: .95rem !important; }
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 18px !important;
}
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-actions > button,
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-cancel {
    border: 0 !important;
    border-radius: 14px !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-actions > button { flex: 1 1 0 !important; min-width: 0 !important; }
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-buy { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; color: #111827 !important; }
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-premium { background: linear-gradient(135deg,#a855f7,#ffd34d) !important; color: #130d1f !important; }
#berlin-avatar-purchase-choice-modal .berlin-avatar-choice-cancel { width: 100% !important; margin-top: 10px !important; background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; }

.avatar-cosmetic-wrap .cosmetic-lock-badge,
.avatar-cosmetic-wrap .cosmetic-premium-badge,
.berlin-shop-cosmetic-mini-price {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
}
.avatar-cosmetic-wrap .cosmetic-lock-badge small,
.avatar-cosmetic-wrap .cosmetic-premium-badge small,
.berlin-shop-cosmetic-mini-price small {
    display: block !important;
    font-size: .64em !important;
    opacity: .92 !important;
}

@media (max-width: 860px) {
    #profile-edit-mode .berlin-profile-edit-row {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "fields"
            "avatars" !important;
        gap: 16px !important;
    }
    #profile-edit-mode .berlin-profile-main-fields {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "nameLabel"
            "nameInput"
            "colorLabel"
            "colors" !important;
    }
    #profile-edit-mode .berlin-profile-avatar-more-btn,
    #profile-edit-mode .berlin-show-more-avatars-btn {
        width: 100% !important;
    }
    #berlin-avatar-purchase-choice-modal .berlin-avatar-choice-actions { flex-direction: column !important; }
}
:where([data-berlin-keyclick="1"]) {
    cursor: pointer;
    touch-action: manipulation;
}

:where([data-berlin-keyclick="1"]:focus-visible) {
    outline: 2px solid var(--accent-yellow, #facc15);
    outline-offset: 4px;
    border-radius: 10px;
}

:where(button, a, input, select, textarea, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid var(--accent-yellow, #facc15);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

}

@media (max-width: 900px), (pointer: coarse) {
    .product-card,
    .product-item,
    .subscription-item,
    .rental-card,
    .service-offer-card,
    .payment-method-card {
        will-change: auto !important;
    }
}

#profile-premium-upgrade-wrap:not([hidden]),
#profile-premium-upgrade-wrap.is-corner-position,
#profile-premium-upgrade-wrap.berlin-premium-fixed-top-right {
    position: absolute !important;
    inset: auto !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: auto !important;
    max-width: min(340px, calc(100% - 82px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    justify-content: initial !important;
    transform: none !important;
    translate: none !important;
    z-index: 50 !important;
}

#profile-premium-upgrade-wrap #profile-premium-upgrade-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#profile-edit-mode .berlin-profile-avatar-side {

    display: flex !important;

    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
grid-area: avatars !important;

    justify-content: start !important;
    margin: 0 !important;
    padding: 0 !important;
direction: rtl !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#profile-edit-mode #berlin-avatar-preview-row {

    max-width: 292px !important;
    display: flex !important;
    grid-template-columns: none !important;

    justify-content: flex-start !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    padding: 3px 2px 5px !important;
    contain: layout paint style !important;
    content-visibility: auto !important;
display: grid !important;
    grid-template-columns: repeat(6, 48px) !important;
    grid-template-rows: repeat(2, 48px) !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: unset !important;
    padding: 4px 2px !important;
    scrollbar-width: none !important;
}

#profile-edit-mode #berlin-avatar-preview-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#profile-edit-mode #berlin-avatar-preview-row img {
width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;

    border: 2px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .06) !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
    transform: none !important;

    flex: 0 0 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.06) !important;
    cursor: pointer !important;
width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex: none !important;
}

@media (max-width: 860px) {
    #profile-edit-mode .berlin-profile-avatar-side {
        grid-template-columns: 1fr !important;
    }

    #profile-edit-mode #berlin-avatar-preview-row {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto) !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: stretch !important;
        gap: 7px !important;
    }

    #profile-edit-mode #berlin-avatar-preview-row img {
        width: min(48px, 100%) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        justify-self: center !important;
    }
}

@media (max-width: 700px) {
    #profile-premium-upgrade-wrap:not([hidden]),
    #profile-premium-upgrade-wrap.is-corner-position,
    #profile-premium-upgrade-wrap.berlin-premium-fixed-top-right {
        inset: auto !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        max-width: calc(100% - 62px) !important;
        transform: scale(.9) !important;
        transform-origin: top right !important;
    }
}
#profile-settings-page > #profile-premium-upgrade-wrap[hidden] {
    display: none !important;
}

#profile-settings-page > #profile-premium-upgrade-wrap:not([hidden]),
#profile-settings-page > #profile-premium-upgrade-wrap.is-corner-position,
#profile-settings-page > #profile-premium-upgrade-wrap.berlin-premium-fixed-top-right {
    position: absolute !important;
    inset: auto !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: auto !important;
    max-width: min(340px, calc(100% - 82px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    translate: none !important;
    z-index: 150 !important;
}

#profile-settings-page > #profile-premium-upgrade-wrap #profile-premium-upgrade-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    #profile-settings-page > #profile-premium-upgrade-wrap:not([hidden]),
    #profile-settings-page > #profile-premium-upgrade-wrap.is-corner-position,
    #profile-settings-page > #profile-premium-upgrade-wrap.berlin-premium-fixed-top-right {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100% - 62px) !important;
        transform: scale(.9) !important;
        transform-origin: top right !important;
    }
}
html body #subscriptions-section {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html body #subscriptions-section::before,
html body #subscriptions-section::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
html body #game-topup-section,
html body #game-rentals-section,
html body #goe-app-section {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html body #game-topup-section::before,
html body #game-topup-section::after,
html body #game-rentals-section::before,
html body #game-rentals-section::after,
html body #goe-app-section::before,
html body #goe-app-section::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
html body #offline-steam-section {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html body #offline-steam-section::before,
html body #offline-steam-section::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
#valorantPoints > .valorant-region-tabs {
    width: auto !important;
    margin: 8px auto 20px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    #valorantPoints > .valorant-region-tabs {
        width: min(94%, 430px) !important;
        margin-bottom: 14px !important;
    }
}
.berlin-premium-color-choice.berlin-default-name-color-choice,
.berlin-profile-name-color-row .berlin-default-name-color-choice,
.berlin-premium-color-row .berlin-default-name-color-choice {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--premium-choice, #ffffff) !important;
    border: 2px solid rgba(255,255,255,.62) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
}
.berlin-default-name-color-choice span { display: none !important; }
.berlin-default-name-color-choice::after { content:""; position:absolute; inset:5px; border-radius:999px; border:1px solid rgba(0,0,0,.28); pointer-events:none;
}
#currentProfilePic.berlin-frame-preview-only { outline:2px dashed rgba(255,211,77,.82)!important; outline-offset:5px!important;
}
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; }
    #reward-shop-section,
    #reward-shop-section.section.glass-card,
    #reward-shop-section.section.glass-card.darker {
padding: 14px 10px 38px !important;
width:100%!important; max-width:100%!important; margin-inline:auto!important; padding:14px 10px!important; border-radius:16px!important; box-sizing:border-box!important; overflow-x:hidden!important; background-attachment:scroll!important;
}
    #reward-shop-section h2 {
font-size: 1.4rem !important;
        margin: 5px 0 !important;
font-size:clamp(1.35rem,7vw,1.85rem)!important; line-height:1.25!important; margin:6px 0 8px!important;
}
    #reward-shop-section > p {
font-size: 0.85rem !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;

max-width:100%!important; margin:0 auto 16px!important; padding:0 4px!important; font-size:.86rem!important; line-height:1.65!important;
}

    #reward-shop-section .shop-balance,
    #reward-shop-section .daily-reward-trigger,
    #reward-shop-section .berlin-points-topup-inline-btn { width:100%!important; max-width:100%!important; justify-content:center!important; text-align:center!important; box-sizing:border-box!important; white-space:normal!important;
    }
    #reward-shop-section #shop-items-grid,
    #reward-shop-section .shop-grid {
padding-right: 1px !important;
        padding-left: 34px !important;
display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; max-width:100%!important; margin:0 auto!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important;
}
    #reward-shop-section .reward-card,
    #reward-shop-section .shop-item { width:100%!important; min-width:0!important; max-width:none!important; border-radius:14px!important; box-sizing:border-box!important;
    }
    #reward-shop-section .reward-image-box { height:92px!important; padding:8px!important;
    }
    #reward-shop-section .reward-image-box img { max-width:88%!important; max-height:72px!important; object-fit:contain!important;
    }
    #reward-shop-section .reward-info { padding:9px 8px 10px!important; min-width:0!important;
    }
    #reward-shop-section .reward-info h3 { min-height:0!important; font-size:12px!important; line-height:1.35!important; overflow-wrap:anywhere!important; word-break:break-word!important;
    }
    #reward-shop-section .reward-info p,
    #reward-shop-section .reward-info .reward-desc,
    #reward-shop-section .reward-info .reward-description { min-height:0!important; margin-bottom:8px!important; font-size:10.5px!important; line-height:1.45!important; display:-webkit-box!important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden!important;
    }
    #reward-shop-section .reward-meta { flex-direction:column!important; gap:6px!important; padding:7px!important;
    }
    #reward-shop-section .reward-card .buy-btn,
    #reward-shop-section .reward-card button,
    #reward-shop-section .shop-item button { width:100%!important; min-height:38px!important; padding:8px 6px!important; font-size:11px!important; line-height:1.25!important; white-space:normal!important;
    }
    #reward-shop-section .berlin-premium-suite-holder.berlin-premium-suite-reward-page { width:100%!important; max-width:100%!important; margin:16px auto 20px!important;
    }
    #reward-shop-section .berlin-premium-suite-gold-page { padding:15px 10px!important; border-radius:18px!important; box-shadow:none!important;
    }
    #reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-head,
    #reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-game,
    #reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-value { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:10px!important;
    }
    #reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
    }
    #reward-shop-section .berlin-premium-suite-actions { display:grid!important; grid-template-columns:1fr!important; gap:8px!important;
    }
    #reward-shop-section .berlin-premium-frame-row,
    #reward-shop-section .berlin-premium-color-row,
    #profile-name-color-edit .berlin-profile-name-color-row { justify-content:center!important; gap:9px!important;
    }
}
@media (max-width: 420px) {
    #reward-shop-section #shop-items-grid,
    #reward-shop-section .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
    }
    #reward-shop-section .reward-image-box { height:82px!important; }
    #reward-shop-section .reward-info { padding:8px 6px!important; }
    #reward-shop-section .reward-info h3 { font-size:11px!important; }
    #reward-shop-section .reward-card .buy-btn,
    #reward-shop-section .reward-card button { font-size:10px!important; }
    #reward-shop-section .berlin-premium-suite-gold-page .berlin-premium-suite-grid { grid-template-columns:1fr!important;
    }
}
@media (max-width: 340px) {
    #reward-shop-section #shop-items-grid,
    #reward-shop-section .shop-grid { grid-template-columns:1fr!important;
    }
}
.gold-one-order-notice {
    order: -1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    max-width: 290px;
    padding: 6px 13px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid rgba(255, 215, 0, 0.72);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(80, 55, 0, 0.96), rgba(32, 20, 3, 0.98));
    color: #fff3a3;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px) scale(0.98);
}

.gold-one-order-notice[hidden] {
    display: none !important;
}

.gold-one-order-notice.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: berlinGoldOneOrderNoticeIn 0.35s ease-out both, berlinGoldOneOrderNoticePulse 2.4s ease-in-out 0.5s infinite;
}

.gold-one-order-notice::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    transform: translateX(-260%) skewX(-18deg);
    animation: berlinGoldOneOrderNoticeShine 3s ease-in-out 0.8s infinite;
}

.gold-one-order-notice i,
.gold-one-order-notice span {
    position: relative;
    z-index: 1;
}

.gold-one-order-notice i {
    color: #ffd700;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.65));
}

@keyframes berlinGoldOneOrderNoticeIn {
    from {
        opacity: 0;
        transform: translateX(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes berlinGoldOneOrderNoticePulse {
    0%, 100% {
        border-color: rgba(255, 215, 0, 0.58);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        border-color: rgba(255, 231, 112, 0.95);
        box-shadow: 0 0 18px rgba(255, 193, 7, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
}

@keyframes berlinGoldOneOrderNoticeShine {
    0%, 62% {
        transform: translateX(-260%) skewX(-18deg);
    }
    100% {
        transform: translateX(430%) skewX(-18deg);
    }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .layout-wrapper {
        gap: 8px;
    }

    .gold-one-order-notice {
        max-width: 235px;
        padding-inline: 10px;
        font-size: 0.64rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gold-one-order-notice,
    .gold-one-order-notice::after {
        animation: none !important;
        transition: none !important;
    }
}
#currentProfilePic,
#nav-user-img,
#dropdown-user-img,
#review-user-avatar,
img[data-user-avatar],
.user-avatar img,
.profile-avatar img {
    background-color: transparent !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

.berlin-avatar-swap-pending {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    #reward-shop-section .shop-header {

        gap: 12px !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;

        flex-wrap: wrap !important;
display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:10px!important; width:100%!important; margin-bottom:14px!important;
margin-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
}
    #home .hero-spotlight-zone {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #home .spotlight-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: 72px !important;
        grid-auto-flow: column !important;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    #home .spotlight-card,
    #home .spotlight-card.spotlight-card-big {
        grid-column: auto !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 72px !important;
        min-height: 72px !important;
        border-radius: 9px !important;
    }

    #home .spotlight-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #home .spotlight-badge {
        top: 4px !important;
        right: 4px !important;
        left: 4px !important;
        max-width: calc(100% - 8px) !important;
        padding: 3px 5px !important;
        font-size: 0.54rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #home .spotlight-placeholder {
        padding: 4px !important;
        gap: 2px !important;
        font-size: 0.58rem !important;
        text-align: center !important;
    }

    #home .spotlight-placeholder i {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 390px) {
    #home .spotlight-stack {
        grid-template-rows: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        gap: 4px !important;
    }

    #home .spotlight-card,
    #home .spotlight-card.spotlight-card-big {
        height: 64px !important;
        min-height: 64px !important;
    }
}
#berlin-purchased-cosmetics {
    border: 1px solid rgba(90, 132, 115, .24) !important;
    background: radial-gradient(circle at 14% 0%, rgba(67, 116, 96, .10), transparent 42%), linear-gradient(145deg, rgba(22, 28, 26, .98), rgba(13, 17, 16, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 34px rgba(0, 0, 0, .28) !important;
}
#berlin-purchased-cosmetics .berlin-purchased-title {
    color: #e7f0ec !important;
    background: linear-gradient(135deg, rgba(55, 89, 75, .25), rgba(24, 35, 31, .32)) !important;
}
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice .berlin-purchased-thumb {
    border: 3px solid transparent !important;
    outline: 0 !important;
    border-radius: 999px !important;
}
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice.is-selected .berlin-purchased-thumb,
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice .berlin-purchased-thumb.selected-avatar {
    border-color: #35b779 !important;
    outline: 0 !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .34) !important;
}
#berlin-purchased-cosmetics .berlin-purchased-avatar-selected-check,
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice::before,
#berlin-purchased-cosmetics .berlin-purchased-avatar-choice::after {
    display: none !important;
    content: none !important;
}
.rating-discovery-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .035);
    box-sizing: border-box;
}
.rating-discovery-title {
    color: #f2f4f3;
    font-size: 13px;
    font-weight: 800;
}
.rating-discovery-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.rating-discovery-options label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .16);
    color: #dfe7e3;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.rating-discovery-options input {
    accent-color: #35b779;
}
.rating-discovery-options label:has(input:checked) {
    border-color: rgba(53, 183, 121, .72);
    background: rgba(53, 183, 121, .12);
}
.rating-discovery-other {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(53, 183, 121, .38);
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font-family: Cairo, Tajawal, sans-serif;
    box-sizing: border-box;
}
.rating-discovery-other[hidden] { display: none !important; }
@media (max-width: 560px) {
    .rating-discovery-options { grid-template-columns: 1fr; }
}
#auth-providers-container .berlin-auth-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #d8b4fe;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.55;
}

#auth-providers-container .berlin-auth-provider-badge > i {
    width: 1.15em;
    flex: 0 0 1.15em;
    text-align: center;
    font-size: 1rem;
}

#auth-providers-container .berlin-auth-provider-badge[data-provider="password"] > i { color: #c77dff; }
#auth-providers-container .berlin-auth-provider-badge[data-provider="google.com"] > i { color: #4285f4; }
#auth-providers-container .berlin-auth-provider-badge[data-provider="microsoft.com"] > i { color: #00a4ef; }
#auth-providers-container .berlin-auth-provider-badge[data-provider="apple.com"] > i { color: #f5f5f5; }
#auth-providers-container .berlin-auth-provider-badge[data-provider="facebook.com"] > i { color: #1877f2; }
#auth-providers-container .berlin-auth-provider-badge[data-provider="phone"] > i { color: #22c55e; }
.berlin-friend-request-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

#profileFriendsTab {
    position: relative;
}

.berlin-friend-request-badge[hidden] {
    display: none !important;
}

#profileFriendsPane.berlin-friends-pane {
    width: min(100%, 1180px);
    min-height: 360px;
    margin: 0 auto;
    padding: 4px 0 24px;
    box-sizing: border-box;
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: 760px;
}

.berlin-friends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(124, 58, 237, .24);
    border-radius: 18px;
    background: #0c1422;
}

.berlin-friends-header h3 {
    margin: 4px 0 3px;
    border: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.berlin-friends-header p {
    max-width: 700px;
    margin: 0;
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.75;
}

.berlin-friends-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a78bfa;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .9px;
}

.berlin-friends-count {
    min-width: 82px;
    display: grid;
    place-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(34, 211, 238, .22);
    border-radius: 14px;
    background: #101d2d;
}

.berlin-friends-count strong {
    color: #67e8f9;
    font-size: 1.35rem;
    line-height: 1.1;
}

.berlin-friends-count span {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 800;
}

.berlin-friends-auth-note {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: #0c1422;
    color: #cbd5e1;
}

.berlin-friends-auth-note[hidden],
.berlin-friends-app[hidden],
.berlin-friend-search-results[hidden] {
    display: none !important;
}

.berlin-friends-auth-note > i {
    color: #fbbf24;
}

.berlin-friends-auth-note button,
.berlin-load-more-friends {
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 10px;
    background: #6d28d9;
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
}

.berlin-friends-app {
    display: grid;
    gap: 14px;
}

.berlin-friends-tools,
.berlin-friends-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.berlin-friend-code-card,
.berlin-friend-search,
.berlin-friends-block {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: #0c1422;
    box-sizing: border-box;
}

.berlin-friend-code-card > label,
.berlin-friend-search > label {
    display: block;
    margin-bottom: 8px;
    color: #e2e8f0;
    font-size: .78rem;
    font-weight: 900;
}

.berlin-friend-code-row,
.berlin-friend-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.berlin-friend-code-row input,
.berlin-friend-search-row input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    outline: 0;
    background: #070d17;
    color: #f8fafc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .35px;
    box-sizing: border-box;
}

.berlin-friend-code-row input:focus,
.berlin-friend-search-row input:focus {
    border-color: #8b5cf6;
}

.berlin-friend-code-row button,
.berlin-friend-search-row button {
    min-width: 92px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
}

.berlin-friend-code-row button:disabled,
.berlin-friend-search-row button:disabled,
.berlin-friend-action:disabled,
.berlin-load-more-friends:disabled {
    cursor: wait;
    opacity: .55;
}

#berlin-friends-privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #64748b;
    font-size: .67rem;
    line-height: 1.5;
}

.berlin-friends-status {
    padding: 10px 13px;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 10px;
    background: #101c2b;
    color: #bfdbfe;
    font-size: .76rem;
    font-weight: 800;
}

.berlin-friends-status[hidden] {
    display: none !important;
}

.berlin-friends-status[data-type="success"] {
    border-color: rgba(34, 197, 94, .3);
    color: #86efac;
}

.berlin-friends-status[data-type="warning"] {
    border-color: rgba(245, 158, 11, .3);
    color: #fcd34d;
}

.berlin-friends-status[data-type="error"] {
    border-color: rgba(239, 68, 68, .32);
    color: #fca5a5;
}

.berlin-friend-search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
}

.berlin-friends-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.berlin-friends-section-title h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 0;
    color: #f8fafc;
    font-size: .92rem;
}

.berlin-friends-section-title h4 i {
    color: #a78bfa;
}

#berlin-requests-count {
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #312e81;
    color: #ddd6fe;
    font-size: .7rem;
    font-weight: 900;
}

.berlin-friends-list {
    display: grid;
    gap: 9px;
    contain: layout style;
}

.berlin-friend-card {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: #101a28;
    box-sizing: border-box;
    contain: layout paint style;
}

.berlin-friend-avatar {
    width: 48px;
    height: 48px;
    display: block;
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 50%;
    background: #070d17;
    object-fit: cover;
}

.berlin-friend-info {
    min-width: 0;
    display: grid;
    gap: 3px;
    text-align: right;
}

.berlin-friend-name,
.berlin-friend-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-friend-name {
    color: #f8fafc;
    font-size: .82rem;
}

.berlin-friend-code {
    direction: ltr;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .62rem;
    text-align: right;
}

.berlin-friend-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.berlin-friend-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: .67rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.berlin-friend-action.is-accept,
.berlin-friend-action.is-add {
    border-color: rgba(34, 197, 94, .28);
    background: #166534;
}

.berlin-friend-action.is-reject,
.berlin-friend-action.is-remove {
    border-color: rgba(248, 113, 113, .24);
    background: #7f1d1d;
}

.berlin-friends-empty {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border: 1px dashed rgba(148, 163, 184, .14);
    border-radius: 11px;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    text-align: center;
}

.berlin-friends-empty i {
    color: #8b5cf6;
}

.berlin-load-more-friends {
    width: 100%;
    margin-top: 10px;
    background: #312e81;
}

.berlin-load-more-friends[hidden] {
    display: none !important;
}

@media (hover: hover) {
    .berlin-friend-code-row button:hover,
    .berlin-friend-search-row button:hover,
    .berlin-friend-action:hover,
    .berlin-load-more-friends:hover,
    .berlin-friends-auth-note button:hover {
        filter: brightness(1.12);
    }
}

@media (max-width: 820px) {
    .berlin-friends-tools,
    .berlin-friends-columns,
    .berlin-friend-search-results {
        grid-template-columns: 1fr;
    }

    .profile-account-tab {
        padding-inline: 9px;
    }
}

@media (max-width: 560px) {
    #profileFriendsPane.berlin-friends-pane {
        padding-bottom: 12px;
        contain-intrinsic-size: 980px;
    }

    .berlin-friends-header {
        align-items: flex-start;
        padding: 14px;
        border-radius: 14px;
    }

    .berlin-friends-header p {
        font-size: .72rem;
    }

    .berlin-friends-count {
        min-width: 64px;
        padding: 8px 9px;
    }

    .berlin-friend-code-card,
    .berlin-friend-search,
    .berlin-friends-block {
        padding: 12px;
        border-radius: 13px;
    }

    .berlin-friend-code-row button,
    .berlin-friend-search-row button {
        min-width: 48px;
        padding-inline: 11px;
    }

    .berlin-friend-code-row button span,
    .berlin-friend-search-row button span {
        display: none;
    }

    .berlin-friend-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 9px;
    }

    .berlin-friend-avatar {
        width: 44px;
        height: 44px;
    }

    .berlin-friend-actions {
        grid-column: 1 / -1;
    }

    .berlin-friend-action {
        flex: 1 1 0;
    }

    #profileFriendsTab .berlin-friend-request-badge {
        position: absolute;
        top: 3px;
        inset-inline-end: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #profileFriendsPane *,
    #profileFriendsPane *::before,
    #profileFriendsPane *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}
@media (max-width: 768px) {

    body.berlin-orders-page-active::before,
    body.berlin-orders-page-active::after,
    body.berlin-orders-page-active .main-wrapper::before,
    body.berlin-orders-page-active .main-wrapper::after {
        display: none !important;
        content: none !important;
        animation: none !important;
        filter: none !important;
    }

    #my-orders-page,
    #my-orders-page *,
    #my-orders-page *::before,
    #my-orders-page *::after {
        animation: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
    }

    #my-orders-page .orders-header {
        background: #0a0f1c !important;
        box-shadow: none !important;
    }

    #my-orders-page .orders-list-grid {
        background: rgba(4, 8, 18, 0.82) !important;
        box-shadow: none !important;
    }

    #my-orders-page .order-history-card {
        content-visibility: auto;
        contain: layout paint style;
        contain-intrinsic-size: auto 110px;
        transform: none !important;
        filter: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
    }

    #orders-list-container .order-history-card .order-card-details-hint {
        bottom: 10px !important;
    }

    #my-orders-page .orders-loader-spinner,
    #my-orders-page .spinner-border,
    #my-orders-page .fa-spin {
        animation: spinLoader 0.8s linear infinite !important;
    }
    html:has(body.berlin-orders-page-active),
    html:has(#my-orders-page[style*="display: block"]) {
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
    }

    body.berlin-orders-page-active,
    body:has(#my-orders-page[style*="display: block"]) {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
    }

    #my-orders-page.orders-fullscreen-page {
background-attachment: scroll !important;
        animation: none !important;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        scroll-behavior: auto !important;
}

    #my-orders-page.orders-fullscreen-page .orders-main-content {
        flex: 0 0 auto !important;
        min-height: min-content !important;
        overflow: visible !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.berlin-orders-page-active #footer,
    body:has(#my-orders-page[style*="display: block"]) #footer {
        position: relative !important;
        z-index: auto !important;
        clear: both;
    }
    html body .product-item .product-content-overlay {
        justify-content: flex-start !important;
    }

    html body .product-item .product-buttons-wrapper,
    html body .product-item .product-buttons-container {
        margin-top: 4px !important;
    }

    html body .product-item .product-content-overlay > p:not(.product-description-text) {
        margin-bottom: 2px !important;
    }
}

@media (max-width: 650px) {
    .berlin-community-socials {
grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 390px !important;
        margin-inline: auto !important;
}

    .berlin-community-social,
    .berlin-community-social.instagram,
    .berlin-community-social.linktree {
grid-column: auto;
grid-column: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
}

    .berlin-community-social span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .berlin-community-social i {
        font-size: 20px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 360px) {
    .berlin-community-socials {
        gap: 4px !important;
    }

    .berlin-community-social,
    .berlin-community-social.instagram,
    .berlin-community-social.linktree {
        min-height: 41px !important;
        height: 41px !important;
        border-radius: 10px !important;
    }

    .berlin-community-social i {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    html:not(.berlin-modal-scroll-locked):not(.berlin-order-details-open),
    body:not(.berlin-modal-scroll-locked):not(.berlin-order-details-open) {
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
    }
    html.berlin-order-details-open,
    body.berlin-order-details-open {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    body.berlin-order-details-open #orderDetailsModal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #0a0a10 !important;
        z-index: var(--berlin-z-priority-modal) !important;
        isolation: isolate !important;
        overflow: hidden !important;
    }

    body.berlin-order-details-open #orderDetailsModal .order-details-content-split {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.berlin-order-details-open #orderDetailsModal .right-details-section {
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }

    body.berlin-order-details-open #orderDetailsModal .left-tracker-section {
        padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.berlin-order-details-open #orderDetailsModal .order-close-btn {
        top: calc(4px + env(safe-area-inset-top, 0px)) !important;
        left: 4px !important;
    }

    body.berlin-order-details-open #navbar,
    body.berlin-order-details-open #mobile-nav,
    body.berlin-order-details-open .mobile-fab-container,
    body.berlin-order-details-open .mobile-fab-menu,
    body.berlin-order-details-open .fixed-cart-button,
    body.berlin-order-details-open #chat-bot-toggle,
    body.berlin-order-details-open #bot-iframe-wrapper,
    body.berlin-order-details-open #chat-bot-container,
    body.berlin-order-details-open #bundle-floating-bar,
    body.berlin-order-details-open #toast-container,
    body.berlin-order-details-open .game-alert-box,
    body.berlin-order-details-open .scratch-badge,
    body.berlin-order-details-open .modern-mute-btn,
    body.berlin-order-details-open .tutorial-side-card,
    body.berlin-order-details-open .basha-product-question-prompt,
    body.berlin-order-details-open #berlinCompletedOrderAlertLayer,
    body.berlin-order-details-open .berlin-preference-suggestion,
    body.berlin-order-details-open #usd-suggestion-toast,
    body.berlin-order-details-open .navbar-search-container,
    body.berlin-order-details-open .nav-actions,
    body.berlin-order-details-open #kaito-card,
    body.berlin-order-details-open #kid-smoke {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body:not(.basha-bot-open):not(.berlin-order-details-open) #chat-bot-toggle {
        bottom: 85px !important;
    }

    #vodafoneForm .button-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    #vodafoneForm #main-payment-btn {
        order: 10 !important;
    }

    #vodafoneForm #ai-text-desc {
        order: 20 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 8px 0 14px !important;
        padding: 0 6px !important;
        text-align: center !important;
        line-height: 1.65 !important;
        font-size: 10px !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    #vodafoneForm #vodafone-confirmation-view {
        order: 30 !important;
        position: relative !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        clear: both !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    #vodafoneForm #vodafone-confirmation-view > p {
        margin: 0 0 12px !important;
        line-height: 1.6 !important;
    }

    #vodafoneForm #vodafone-confirmation-view .vodafone-confirmation-actions {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (max-width: 360px) {
    body:not(.basha-bot-open):not(.berlin-order-details-open) #chat-bot-toggle {
        bottom: 80px !important;
    }
}
@media (max-width: 650px) {
    .berlin-community-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 11px !important;
        width: calc(100% - 28px) !important;
        max-width: 330px !important;
        margin: 0 auto 22px !important;
    }

    .berlin-community-stat {
        min-width: 0 !important;
        min-height: 72px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        padding: 10px 4px !important;
        gap: 5px !important;
        border-radius: 13px !important;
    }

    .berlin-community-stat strong {
        font-size: clamp(16px, 4.8vw, 20px) !important;
        line-height: 1 !important;
    }

    .berlin-community-stat span {
        max-width: 100% !important;
        font-size: clamp(8px, 2.35vw, 9.5px) !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    .berlin-community-stats {
        width: calc(100% - 24px) !important;
        max-width: 300px !important;
        gap: 9px !important;
    }

    .berlin-community-stat {
        min-height: 66px !important;
        padding: 8px 3px !important;
        gap: 4px !important;
        border-radius: 12px !important;
    }

    .berlin-community-stat strong {
        font-size: 16px !important;
    }

    .berlin-community-stat span {
        font-size: 8px !important;
    }
}
@media (max-width: 768px) {
    #feedback-section .why-choose-us-section {
        padding: 10px 6px !important;
    }

    #feedback-section .why-choose-us-section .section-title {
        margin-bottom: 16px !important;
        font-size: clamp(20px, 6vw, 27px) !important;
        line-height: 1.45 !important;
    }

    #feedback-section .why-choose-us-section .features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #feedback-section .why-choose-us-section .feature-card {
        min-width: 0 !important;
        min-height: 150px !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    #feedback-section .why-choose-us-section .feature-icon {
        width: 39px !important;
        height: 39px !important;
        min-width: 39px !important;
        margin: 0 auto 8px !important;
    }

    #feedback-section .why-choose-us-section .feature-icon i {
        font-size: 17px !important;
    }

    #feedback-section .why-choose-us-section .feature-card h3 {
        margin: 0 0 6px !important;
        font-size: clamp(12px, 3.5vw, 15px) !important;
        line-height: 1.35 !important;
    }

    #feedback-section .why-choose-us-section .feature-card p {
        margin: 0 !important;
        font-size: clamp(9px, 2.7vw, 11px) !important;
        line-height: 1.55 !important;
    }

    #feedback-section .why-choose-us-section .feature-card::before {
        font-size: 82px !important;
        bottom: -15px !important;
        left: -12px !important;
    }
}

@media (max-width: 360px) {
    #feedback-section .why-choose-us-section .features-grid {
        gap: 7px !important;
    }

    #feedback-section .why-choose-us-section .feature-card {
        min-height: 142px !important;
        padding: 10px 6px !important;
    }
}
@media (max-width: 768px) {
    #profileOverviewPane .berlin-profile-actions-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 14px auto 0 !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button,
    #profileOverviewPane .berlin-profile-actions-row > a {
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        gap: 7px !important;
        border-radius: 10px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > i,
    #profileOverviewPane .berlin-profile-actions-row > a > i {
        flex: 0 0 auto !important;
        font-size: 1.05rem !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > div,
    #profileOverviewPane .berlin-profile-actions-row > a > div {
        min-width: 0 !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.05 !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > div span:first-child,
    #profileOverviewPane .berlin-profile-actions-row > a > div span:first-child {
        font-size: 0.6rem !important;
        line-height: 1 !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > div span:last-child,
    #profileOverviewPane .berlin-profile-actions-row > a > div span:last-child {
        max-width: 100% !important;
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #profileOverviewPane .berlin-profile-actions-row .orders-wishlist-count {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 1px 5px !important;
        border-radius: 5px !important;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 360px) {
    #profileOverviewPane .berlin-profile-actions-row {
        gap: 6px !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button,
    #profileOverviewPane .berlin-profile-actions-row > a {
        height: 50px !important;
        min-height: 50px !important;
        padding: 4px 5px !important;
        gap: 5px !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > i,
    #profileOverviewPane .berlin-profile-actions-row > a > i {
        font-size: 0.95rem !important;
    }

    #profileOverviewPane .berlin-profile-actions-row > button > div span:last-child,
    #profileOverviewPane .berlin-profile-actions-row > a > div span:last-child {
        font-size: 0.71rem !important;
    }
}
@media (max-width: 768px) {
    #discord-decorations-section {
        min-height: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    #discordServicesContainer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }

    #discordServicesContainer > .service-offer-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 224px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10px 7px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    #discordServicesContainer > .service-offer-card .service-card-image {
        width: 72px !important;
        height: 76px !important;
        min-width: 72px !important;
        margin: 0 auto 7px !important;
        border-width: 2px !important;
    }

    #discordServicesContainer > .service-offer-card h3 {
        min-height: 34px !important;
        margin: 0 0 5px !important;
        font-size: clamp(12px, 3.7vw, 14px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    #discordServicesContainer > .service-offer-card .service-card-description {
        display: -webkit-box !important;
        min-height: 45px !important;
        margin: 0 0 8px !important;
        padding: 0 1px !important;
        font-size: clamp(9px, 2.7vw, 10.5px) !important;
        line-height: 1.45 !important;
        text-align: center !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    #discordServicesContainer > .service-offer-card button {
        width: 100% !important;
        min-height: 31px !important;
        margin: auto 0 0 !important;
        padding: 5px 4px !important;
        border-width: 1px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 360px) {
    #discordServicesContainer {
        gap: 6px !important;
    }

    #discordServicesContainer > .service-offer-card {
        min-height: 210px !important;
        padding: 8px 5px !important;
    }

    #discordServicesContainer > .service-offer-card .service-card-image {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
    }

    #discordServicesContainer > .service-offer-card h3 {
        font-size: 11.5px !important;
    }

    #discordServicesContainer > .service-offer-card .service-card-description {
        font-size: 9px !important;
    }
}
#profile-settings-page {

    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;
--berlin-account-gold: #e0ad16;
    --berlin-account-gold-dark: #b98500;
    --berlin-account-gold-soft: rgba(224, 173, 22, 0.14);
position: relative !important;
--berlin-profile-glass-surface:
        radial-gradient(circle at 88% 8%, rgba(124, 58, 237, 0.14), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(14, 165, 233, 0.10), transparent 30%),
        rgba(9, 11, 22, 0.58);
    --berlin-profile-glass-inner:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    --berlin-profile-glass-border: rgba(251, 191, 36, 0.18);
    --berlin-profile-glass-inner-border: rgba(255, 255, 255, 0.09);
    --berlin-profile-glass-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
#berlin-profile-journey-root .berlin-journey-card {
    background: var(--berlin-profile-glass-surface) !important;
    border-color: var(--berlin-profile-glass-border) !important;
    box-shadow: var(--berlin-profile-glass-shadow) !important;
}

#berlin-profile-journey-root .berlin-journey-stat {
    background: var(--berlin-profile-glass-inner) !important;
    border-color: var(--berlin-profile-glass-inner-border) !important;
}
#profileFriendsPane .berlin-friends-header,
#profileFriendsPane .berlin-friends-auth-note,
#profileFriendsPane .berlin-friend-code-card,
#profileFriendsPane .berlin-friend-search,
#profileFriendsPane .berlin-social-panel,
#profileFriendsPane .berlin-friends-block {
    background: var(--berlin-profile-glass-surface) !important;
    border-color: var(--berlin-profile-glass-border) !important;
    box-shadow: var(--berlin-profile-glass-shadow) !important;
}
#profileFriendsPane .berlin-friend-card,
#profileFriendsPane .berlin-social-challenge,
#profileFriendsPane .berlin-social-notification,
#profileFriendsPane .berlin-social-rank-row {
    background: var(--berlin-profile-glass-inner) !important;
    border-color: var(--berlin-profile-glass-inner-border) !important;
}

#profileFriendsPane .berlin-friend-code-row input,
#profileFriendsPane .berlin-friend-search-row input {
    background: rgba(2, 6, 23, 0.42) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#profileFriendsPane .berlin-friends-count {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(103, 232, 249, 0.20) !important;
}

#profileFriendsPane #berlin-refresh-social-signals {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

#profileFriendsPane .berlin-friends-status {
    background: rgba(14, 165, 233, 0.07) !important;
}

@media (max-width: 768px) {
    #berlin-profile-journey-root .berlin-journey-card,
    #profileFriendsPane .berlin-friends-header,
    #profileFriendsPane .berlin-friends-auth-note,
    #profileFriendsPane .berlin-friend-code-card,
    #profileFriendsPane .berlin-friend-search,
    #profileFriendsPane .berlin-social-panel,
    #profileFriendsPane .berlin-friends-block {
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
    }
}

.berlin-checkout-progress[data-current-step="1"] {
    --berlin-progress-percent: 0%;
}

.berlin-checkout-progress[data-current-step="2"] {
    --berlin-progress-percent: 33.333%;
}

.berlin-checkout-progress[data-current-step="3"] {
    --berlin-progress-percent: 66.666%;
}

.berlin-checkout-progress[data-current-step="4"] {
    --berlin-progress-percent: 100%;
}

@media (max-width: 768px) {
    .berlin-checkout-progress {
        margin-bottom: 16px;
        padding-inline: 0;
    }

    .berlin-checkout-progress-line {
        top: 20px;
        right: calc(12.5% + 9px);
        left: calc(12.5% + 9px);
        height: 3px;
    }

    .berlin-progress-dot {
        width: 28px;
        height: 28px;
        font-size: 0.67rem;
    }

    .berlin-progress-label {
        font-size: 0.58rem;
        line-height: 1.3;
    }

}

.berlin-checkout-progress[hidden] {
    display: none !important;
}

.berlin-checkout-progress ol {
position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
gap: 2px !important;
}

.berlin-progress-dot {
display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: #181824;
    color: #71717a;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(232, 226, 240, 0.38) !important;
    background: rgba(237, 233, 244, 0.08) !important;
    color: #bcb6c6 !important;
    font-size: 0.49rem !important;
    box-shadow: none !important;
    transform: none !important;
}

.berlin-progress-label {
max-width: 100%;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: normal;
color: inherit !important;
    font-size: 0.54rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.berlin-checkout-progress[data-current-step="1"] li:nth-child(-n + 1) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="2"] li:nth-child(-n + 2) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="3"] li:nth-child(-n + 3) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="4"] li:nth-child(-n + 4) .berlin-progress-dot {
    border-color: rgba(196, 181, 253, 0.78) !important;
    background: rgba(196, 181, 253, 0.17) !important;
    color: #eeeaff !important;
}

.berlin-checkout-progress[data-current-step="1"] li:nth-child(1) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="2"] li:nth-child(2) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="3"] li:nth-child(3) .berlin-progress-dot,
.berlin-checkout-progress[data-current-step="4"] li:nth-child(4) .berlin-progress-dot {
border-color: #facc15;
    color: #111827;
    background: #facc15;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.11), 0 0 20px rgba(250, 204, 21, 0.34);
border-color: #ead484 !important;
    background: #e9d789 !important;
    color: #2a2233 !important;
    box-shadow: 0 0 0 2px rgba(233, 215, 137, 0.10) !important;
}

body.berlin-checkout-modal-transition .modal.berlin-checkout-enter {
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.992) !important;
    animation: none !important;
    transition: opacity 0.12s ease, transform 0.12s ease !important;
}

body.berlin-checkout-modal-transition .modal.berlin-checkout-enter.berlin-checkout-enter-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 600px) {
    .berlin-checkout-progress {
        width: 100% !important;
        margin-bottom: 7px !important;
        padding: 0 1px 3px !important;
    }

    .berlin-checkout-progress-line {
        top: 9px !important;
        right: calc(12.5% + 7px) !important;
        left: calc(12.5% + 7px) !important;
    }

    .berlin-progress-dot {
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        font-size: 0.46rem !important;
    }

    .berlin-progress-label {
        font-size: 0.49rem !important;
        letter-spacing: -0.1px !important;
    }
}
body.berlin-checkout-modal-transition #overlay,
#overlay.berlin-checkout-overlay-stable {

    pointer-events: auto !important;
display: block !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

.modal.berlin-checkout-native-leave {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.985) !important;
    transition: opacity .075s ease, transform .075s ease !important;
}
.berlin-checkout-progress {

    position: relative;
    width: min(100%, 760px);
    margin: 0 auto 22px;
    padding: 8px 8px 0;
    direction: rtl;
    font-family: "Cairo", "Tajawal", sans-serif;
--berlin-progress-percent: 0%;
    width: min(100%, 455px) !important;
    margin: 0 auto 8px !important;
    padding: 1px 4px 4px !important;

    border-radius: 0 !important;

    color: #e9e5ef !important;
    direction: rtl !important;
background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ddd7e2 !important;
}

.berlin-checkout-progress-line {
position: absolute;
    top: 24px;
    right: calc(12.5% + 11px);
    left: calc(12.5% + 11px);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
top: 10px !important;
    right: calc(12.5% + 8px) !important;
    left: calc(12.5% + 8px) !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(231, 226, 239, 0.28) !important;
    box-shadow: none !important;
background: rgba(216, 207, 224, .24) !important;
}

.berlin-checkout-progress-line span {
display: block;
    width: var(--berlin-progress-percent);
    height: 100%;
    margin-right: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6, #facc15);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
    transition: width 0.35s ease;
position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--berlin-progress-percent) !important;
    height: 100% !important;
    margin: 0 !important;
    background: linear-gradient(90deg, #c4b5fd, #f0d98c) !important;
    box-shadow: none !important;
    transition: width 0.16s ease !important;
background: linear-gradient(90deg, #b9a8d8, #d8c98f) !important;
}

.berlin-checkout-progress li {
display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    color: #71717a;
    font-weight: 700;
gap: 3px !important;
    color: #aaa4b4 !important;
    font-weight: 700 !important;
color: #aaa2b2 !important;
}

.berlin-checkout-progress[data-current-step="1"] li:nth-child(-n + 1),
.berlin-checkout-progress[data-current-step="2"] li:nth-child(-n + 2),
.berlin-checkout-progress[data-current-step="3"] li:nth-child(-n + 3),
.berlin-checkout-progress[data-current-step="4"] li:nth-child(-n + 4) {
    color: #d8d1dc !important;
}

.berlin-checkout-progress[data-current-step="1"] li:nth-child(1),
.berlin-checkout-progress[data-current-step="2"] li:nth-child(2),
.berlin-checkout-progress[data-current-step="3"] li:nth-child(3),
.berlin-checkout-progress[data-current-step="4"] li:nth-child(4) {
color: #f4f0f8 !important;
    font-weight: 800 !important;
color: #eee9f0 !important;
}
#profile-settings-page .profile-account-tabs {
    width: min(900px, calc(100% - 24px)) !important;
    max-width: 900px !important;
}

#profile-settings-page .berlin-profile-actions-global {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    width: min(1080px, calc(100% - 24px)) !important;
    max-width: 1080px !important;
    margin: 64px auto 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#profile-settings-page .berlin-profile-actions-global > button,
#profile-settings-page .berlin-profile-actions-global > a {
    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#profile-settings-page .berlin-profile-actions-global > button > div,
#profile-settings-page .berlin-profile-actions-global > a > div {
    min-width: 0 !important;
}

#profile-settings-page .berlin-profile-actions-global > button > div span:last-child,
#profile-settings-page .berlin-profile-actions-global > a > div span:last-child {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#profile-settings-page .berlin-account-security-action {
    border: 1px solid rgba(167, 139, 250, .38) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(79, 70, 229, .07)) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: Cairo, Tajawal, sans-serif !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#profile-settings-page .berlin-account-security-action:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 181, 253, .8) !important;
    box-shadow: 0 8px 25px rgba(124, 58, 237, .18) !important;
}

#profile-settings-page .berlin-account-security-action > i {
    flex: 0 0 auto;
    color: #a78bfa;
    font-size: 1.35rem;
}

#profile-settings-page .berlin-account-security-action > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.08;
}

#profile-settings-page .berlin-account-security-action > div span:first-child {
    color: #ddd;
    font-size: .72rem;
    opacity: .72;
}

#profile-settings-page .berlin-account-security-action > div span:last-child {
    font-size: .92rem;
    font-weight: 700;
}

.berlin-account-security-modal {
    position: fixed;
    inset: 0;
    z-index: var(--berlin-z-priority-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 6, 18, .84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.berlin-account-security-modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.berlin-account-security-dialog {
    position: relative;
    width: min(820px, 100%);
    max-height: min(88vh, 820px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 46px 18px 22px;
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(20, 15, 42, .98), rgba(7, 12, 27, .99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    box-sizing: border-box;
}

.berlin-account-security-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    z-index: 2;
}

#berlinAccountSecurityHost #account-settings-page {
    display: block !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    #profile-settings-page .berlin-profile-actions-global {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(620px, calc(100% - 16px)) !important;
        gap: 8px !important;
    }

    #profile-settings-page .berlin-profile-actions-global > :last-child {
        grid-column: 1 / -1;
        width: min(300px, 100%) !important;
        justify-self: center;
    }
}

@media (max-width: 560px) {
    #profile-settings-page .berlin-profile-actions-global {
        margin-top: 38px !important;
        margin-bottom: 18px !important;
    }

    #profile-settings-page .berlin-profile-actions-global > button,
    #profile-settings-page .berlin-profile-actions-global > a {
        height: 54px !important;
        min-height: 54px !important;
        padding: 5px 7px !important;
        gap: 7px !important;
    }

    #profile-settings-page .berlin-profile-actions-global > button > i,
    #profile-settings-page .berlin-profile-actions-global > a > i {
        font-size: 1rem !important;
    }

    #profile-settings-page .berlin-profile-actions-global > button > div span:last-child,
    #profile-settings-page .berlin-profile-actions-global > a > div span:last-child {
        font-size: .76rem !important;
    }

    .berlin-account-security-modal {
        align-items: flex-end;
        padding: 8px;
    }

    .berlin-account-security-dialog {
        width: 100%;
        max-height: 92dvh;
        padding: 44px 8px 16px;
        border-radius: 20px 20px 12px 12px;
    }

    #berlinAccountSecurityHost #account-settings-page {
        padding: 8px 2px !important;
    }
}

#bundle-savings .bundle-final-total {
    color: #dcfce7;
}

#bundle-savings .bundle-final-total strong {
    color: #4ade80;
}
#bundle-floating-bar .bundle-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

#bundle-floating-bar .bundle-current-price {
    color: #4ade80;
    font-weight: 900;
    white-space: nowrap;
}

#bundle-floating-bar .bundle-old-price {
    color: #94a3b8;
    font-size: .9em;
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-decoration-color: #fb7185;
    white-space: nowrap;
}

#bundle-floating-bar .bundle-pro-price-badge {
    color: #facc15;
    font-size: .8em;
    font-weight: 800;
    white-space: nowrap;
}

#bundle-floating-bar #bundle-savings {
    display: flex;
    justify-content: center;
    align-items: center;
}

#bundle-floating-bar .bundle-saved-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dcfce7;
    font-weight: 800;
    white-space: nowrap;
}

#bundle-floating-bar .bundle-saved-amount i,
#bundle-floating-bar .bundle-saved-amount strong {
    color: #4ade80;
}
#bundle-floating-bar .bundle-saved-amount i,
.bundle-saved-amount i {
    display: none !important;
}

/* prevents page navigation/overscroll while a modal owns the back action. */
@media (max-width: 900px), (pointer: coarse) {
    html.berlin-mobile-modal-open,
    body.berlin-mobile-modal-open {
        overscroll-behavior: none;
    }
}

/* Product promo slider — isolated, dependency-free and genuinely lazy */
.product-promo-slider-section {
    width: min(100%, 1280px);
    margin: 30px auto 22px;
    padding: 0 14px;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 720px;
}

.product-promo-slider-section[hidden] {
    display: none !important;
}

.product-promo-slider-viewport {
    position: relative;
    direction: ltr;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .04) 8%, rgba(255, 255, 255, .09) 18%, rgba(255, 255, 255, .04) 33%),
        rgba(13, 11, 25, .78);
    background-size: 220% 100%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
    isolation: isolate;
    transform: translateZ(0);
}

.product-promo-slider-viewport:not(.is-ready) {
    min-height: clamp(220px, 50vw, 720px);
}

.product-promo-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: none;
}

.product-promo-slider-viewport.is-running .product-promo-slider-track {
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.product-promo-slider-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(255, 255, 255, .035);
}

.product-promo-slider-media {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.product-promo-slider-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.012);
    transition: opacity .32s ease, transform .65s ease;
}

.product-promo-slider-slide img.is-loaded {
    opacity: 1;
    transform: scale(1);
}

.product-promo-slider-slide.has-error::after {
    content: "تعذر تحميل الصورة";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .72);
    font: 700 .9rem Cairo, Tajawal, sans-serif;
}

.product-promo-slider-youtube {
    position: relative;
    overflow: hidden;
    background: #050507;
}

.product-promo-slider-youtube-facade {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #050507;
    color: #fff;
    cursor: pointer;
}

.product-promo-slider-youtube-facade[hidden] {
    display: none !important;
}

.product-promo-slider-youtube-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .34));
    pointer-events: none;
}

.product-promo-slider-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: clamp(58px, 8vw, 82px);
    height: clamp(58px, 8vw, 82px);
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(124, 58, 237, .93);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4), 0 0 28px rgba(139, 92, 246, .35);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
    pointer-events: none;
}

.product-promo-slider-youtube-play i {
    margin-left: 4px;
    font-size: clamp(20px, 3vw, 30px);
}

.product-promo-slider-youtube-facade:hover .product-promo-slider-youtube-play,
.product-promo-slider-youtube-facade:focus-visible .product-promo-slider-youtube-play {
    background: rgba(139, 92, 246, 1);
    transform: translate(-50%, -50%) scale(1.08);
}

.product-promo-slider-youtube-facade:focus-visible {
    outline: 2px solid rgba(196, 181, 253, .95);
    outline-offset: -3px;
}

.product-promo-slider-youtube-label {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(6, 4, 14, .7);
    color: #fff;
    font: 800 .74rem Cairo, Tajawal, sans-serif;
    letter-spacing: .02em;
    pointer-events: none;
}

.product-promo-slider-youtube-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.product-promo-slider-slide.is-video-playing::after {
    display: none !important;
}

.product-promo-slider-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 !important;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(8, 7, 18, .62);
    color: #fff;
    cursor: pointer;
    opacity: .88;
    transform: translateY(-50%) !important;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.product-promo-slider-control:hover,
.product-promo-slider-control:focus-visible {
    opacity: 1;
    background: rgba(124, 58, 237, .84);
    transform: translateY(-50%) scale(1.04) !important;
    outline: none;
}

.product-promo-slider-control:active {
    transform: translateY(-50%) scale(.94) !important;
}

.product-promo-slider-prev {
    left: 14px;
    right: auto;
}

.product-promo-slider-next {
    right: 14px;
    left: auto;
}

.product-promo-slider-dots {
    position: absolute;
    right: 50%;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(8, 7, 18, .46);
    transform: translateX(50%);
}

.product-promo-slider-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .46);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
}

.product-promo-slider-dot.is-active {
    width: 24px;
    background: #fff;
}

@media (max-width: 700px) {
    .product-promo-slider-section {
        margin-top: 20px;
        padding-inline: 8px;
        contain-intrinsic-size: 360px;
    }

    .product-promo-slider-viewport,
    .product-promo-slider-slide {
        aspect-ratio: 16 / 9;
    }

    .product-promo-slider-control {
        width: 36px;
        height: 36px;
        font-size: .8rem;
    }

    .product-promo-slider-prev {
        left: 9px;
        right: auto;
    }

    .product-promo-slider-next {
        right: 9px;
        left: auto;
    }

    .product-promo-slider-dots {
        bottom: 8px;
        gap: 6px;
        padding: 6px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-promo-slider-track,
    .product-promo-slider-slide img,
    .product-promo-slider-control,
    .product-promo-slider-dot {
        transition: none !important;
    }
}

/* always-visible shell, lazy cards */

.berlin-game-accounts-header h2 i {
    color: #69c4f5;
    font-size: 27px;
    text-shadow: 0 0 12px rgba(105, 196, 245, .45);
}

.berlin-game-accounts-subtitle {
    max-width: 760px;
    margin: 10px auto 22px;
    padding-inline: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: .92rem;
    line-height: 1.8;
    text-align: center;
}

.berlin-game-accounts-grid img {
    content-visibility: visible;
}

.berlin-game-accounts-placeholder {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    min-height: 250px;
}

.berlin-game-accounts-placeholder span {
    min-height: 235px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
}

.berlin-game-accounts-more-wrap {
    display: flex;
    justify-content: center;
    margin: 20px auto 4px;
}

.berlin-game-accounts-more-wrap[hidden] {
    display: none !important;
}

.berlin-game-accounts-view-more {
    display: inline-flex;
    min-width: 160px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 24px;
    border: 1px solid rgba(105, 196, 245, .45);
    border-radius: 999px;
    background: rgba(105, 196, 245, .09);
    color: #dff5ff;
    font: 800 .9rem Cairo, Tajawal, sans-serif;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.berlin-game-accounts-view-more:hover,
.berlin-game-accounts-view-more:focus-visible {
    border-color: rgba(105, 196, 245, .85);
    background: rgba(105, 196, 245, .16);
    outline: none;
}

.berlin-game-accounts-view-more:active {
    transform: scale(.97);
}

.berlin-game-accounts-empty {
    margin: 20px auto 4px;
    color: rgba(255, 255, 255, .58);
    text-align: center;
}

@media (max-width: 1100px) {
    .berlin-game-accounts-grid,
    .berlin-game-accounts-placeholder {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .berlin-game-accounts-grid,
    .berlin-game-accounts-placeholder {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        padding-inline: 8px !important;
    }

    .berlin-game-accounts-placeholder {
        min-height: 470px;
    }

    .berlin-game-accounts-placeholder span {
        min-height: 215px;
    }

    .berlin-game-accounts-subtitle {
        margin-bottom: 16px;
        font-size: .83rem;
    }

    .berlin-game-accounts-view-more {
        min-width: 150px;
        padding: 10px 21px;
        font-size: .84rem;
    }
}

@media (max-width: 390px) {
    .berlin-game-accounts-view-more {
        min-width: 140px;
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-game-accounts-view-more {
        transition: none !important;
    }
}

.berlin-game-accounts-grid .berlin-game-account-card .product-image-wrapper,
.berlin-game-accounts-grid .berlin-game-account-card .sub-image-wrapper,
.berlin-game-accounts-grid .product-item .product-image-wrapper,
.berlin-game-accounts-grid .subscription-item .product-image-wrapper,
.berlin-game-accounts-grid .subscription-item .sub-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    border-radius: 14px !important;
}

.berlin-game-accounts-grid .berlin-game-account-card .product-image-wrapper img,
.berlin-game-accounts-grid .berlin-game-account-card .sub-image-wrapper img,
.berlin-game-accounts-grid .product-item .product-image-wrapper img,
.berlin-game-accounts-grid .subscription-item .product-image-wrapper img,
.berlin-game-accounts-grid .subscription-item .sub-image-wrapper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
}

@supports not (aspect-ratio: 1 / 1) {
    .berlin-game-accounts-grid .berlin-game-account-card .product-image-wrapper,
    .berlin-game-accounts-grid .berlin-game-account-card .sub-image-wrapper,
    .berlin-game-accounts-grid .product-item .product-image-wrapper,
    .berlin-game-accounts-grid .subscription-item .product-image-wrapper,
    .berlin-game-accounts-grid .subscription-item .sub-image-wrapper {
        height: 0 !important;
        padding-bottom: 100% !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card .product-image-wrapper img,
    .berlin-game-accounts-grid .berlin-game-account-card .sub-image-wrapper img,
    .berlin-game-accounts-grid .product-item .product-image-wrapper img,
    .berlin-game-accounts-grid .subscription-item .product-image-wrapper img,
    .berlin-game-accounts-grid .subscription-item .sub-image-wrapper img {
        position: absolute !important;
        inset: 0 !important;
    }
}

.berlin-game-accounts-grid .product-buttons-container,
.berlin-game-accounts-grid .sub-footer {
    gap: 7px !important;
}

@media (max-width: 940px) {

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        max-width: 205px !important;
    }
}

@media (max-width: 940px) {
    .berlin-game-accounts-grid {
grid-template-columns: repeat(3, minmax(0, 205px)) !important;
        gap: 18px !important;
column-gap: 22px !important;
        row-gap: 28px !important;
        padding-inline: 12px !important;
}
}

@media (max-width: 430px) {
    .berlin-game-accounts-section {
        padding-inline: 7px !important;
    }

    .berlin-game-accounts-grid {
        column-gap: 11px !important;
        row-gap: 20px !important;
        padding-inline: 5px !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        padding: 7px !important;
    }
}

@media (max-width: 350px) {
    .berlin-game-accounts-grid {
        column-gap: 8px !important;
        row-gap: 18px !important;
        padding-inline: 3px !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        padding: 6px !important;
    }
}

.berlin-game-accounts-section {
min-height: 260px;
    overflow: visible;
position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(4, 7, 18, .72) 0%, rgba(7, 8, 22, .83) 48%, rgba(5, 5, 16, .91) 100%),
        url("https://i.postimg.cc/gjsQFfq9/Leonida-Keys-01.webp") center 42% / cover no-repeat !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34) !important;
}

.berlin-game-accounts-section > * {
    position: relative;
    z-index: 1;
}

/* Restore the roomier size from before the last compacting pass. */
.berlin-game-accounts-grid {
display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    min-height: 250px;
    padding: 6px 10px 12px;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 520px;
grid-template-columns: repeat(5, minmax(0, 220px)) !important;

    gap: 20px !important;
    padding-inline: 8px !important;
box-sizing: border-box !important;

    padding: 8px 18px 14px !important;
grid-template-columns: repeat(4, minmax(0, 245px)) !important;
    justify-content: center !important;
    column-gap: 30px !important;
    row-gap: 32px !important;
    padding: 8px 18px 16px !important;
}

.berlin-game-accounts-grid .berlin-game-account-card h3,
.berlin-game-accounts-grid .product-item h3,
.berlin-game-accounts-grid .subscription-item h3 {
font-size: .9rem !important;
    line-height: 1.45 !important;
    min-height: 2.9em !important;
font-size: .94rem !important;
    line-height: 1.48 !important;
}

@media (max-width: 1240px) {
    .berlin-game-accounts-grid {
grid-template-columns: repeat(4, minmax(0, 215px)) !important;
column-gap: 26px !important;
        row-gap: 30px !important;
        padding-inline: 14px !important;
grid-template-columns: repeat(4, minmax(0, 225px)) !important;
        column-gap: 24px !important;
}

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
max-width: 215px !important;
max-width: 225px !important;
}
}

@media (max-width: 980px) {
    .berlin-game-accounts-grid {
        grid-template-columns: repeat(3, minmax(0, 220px)) !important;
        column-gap: 22px !important;
        row-gap: 28px !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        max-width: 220px !important;
    }
}

@media (max-width: 768px) {
    .berlin-game-accounts-section {
padding-inline: 10px !important;
padding-inline: 9px !important;
        background-position: center top !important;
}

    .berlin-game-accounts-grid {

        gap: 14px !important;
        padding-inline: 6px !important;

        column-gap: 14px !important;

        padding: 6px 8px 12px !important;
        overflow: visible !important;
width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 13px !important;
        row-gap: 22px !important;
        padding: 6px 7px 14px !important;
}

    .berlin-game-accounts-grid .berlin-game-account-card h3,
    .berlin-game-accounts-grid .product-item h3,
    .berlin-game-accounts-grid .subscription-item h3 {
font-size: .8rem !important;
font-size: .84rem !important;
}
}

@media (max-width: 390px) {
    .berlin-game-accounts-grid {
gap: 10px !important;
column-gap: 10px !important;
        row-gap: 19px !important;
        padding-inline: 4px !important;
}

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
max-width: 175px !important;

padding: 7px !important;
}
}

@media (min-width: 1181px) {
    .berlin-game-accounts-grid {
        grid-template-columns: repeat(5, minmax(0, 220px)) !important;
        column-gap: 22px !important;
        row-gap: 32px !important;
        justify-content: center !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        width: 100% !important;
        max-width: 220px !important;
        min-width: 0 !important;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .berlin-game-accounts-grid {
        grid-template-columns: repeat(4, minmax(0, 220px)) !important;
        column-gap: 22px !important;
    }

    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {
        max-width: 220px !important;
    }
}

.berlin-game-accounts-grid .berlin-game-account-card,
.berlin-game-accounts-grid .product-item,
.berlin-game-accounts-grid .subscription-item {

    animation: none !important;
    will-change: auto !important;

    max-width: 220px !important;
    min-height: 0 !important;

width: 100% !important;
    max-width: 245px !important;
    min-width: 0 !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-self: center !important;
position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    color: #fff !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .32) !important;
    -webkit-backdrop-filter: blur(15px) saturate(135%) !important;
    backdrop-filter: blur(15px) saturate(135%) !important;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

.berlin-game-accounts-grid .berlin-game-account-card::before,
.berlin-game-accounts-grid .product-item::before,
.berlin-game-accounts-grid .subscription-item::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 42%, rgba(255, 255, 255, .05)) !important;
    opacity: 1 !important;
}

.berlin-game-accounts-grid .berlin-game-account-card::after,
.berlin-game-accounts-grid .product-item::after,
.berlin-game-accounts-grid .subscription-item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .2), transparent 62%) !important;
    opacity: 0 !important;
    transition: opacity .22s ease !important;
}

.berlin-game-accounts-grid .berlin-game-account-card > *,
.berlin-game-accounts-grid .product-item > *,
.berlin-game-accounts-grid .subscription-item > * {
    position: relative;
    z-index: 1;
}

.berlin-game-accounts-grid .berlin-game-account-card:hover,
.berlin-game-accounts-grid .product-item:hover,
.berlin-game-accounts-grid .subscription-item:hover {
    transform: translateY(-6px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .29), rgba(255, 255, 255, .11)) !important;
    border-color: rgba(255, 255, 255, .68) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .3),
        0 0 24px rgba(255, 255, 255, .13),
        inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

.berlin-game-accounts-grid .berlin-game-account-card:hover::after,
.berlin-game-accounts-grid .product-item:hover::after,
.berlin-game-accounts-grid .subscription-item:hover::after {
    opacity: 1 !important;
}

.berlin-game-accounts-grid .product-image-wrapper,
.berlin-game-accounts-grid .sub-image-wrapper {
    border: 1px solid rgba(255, 255, 255, .34) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.berlin-game-accounts-grid h3,
.berlin-game-accounts-grid .product-title,
.berlin-game-accounts-grid .sub-title {
    color: #fff !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .48) !important;
}

.berlin-game-accounts-grid p,
.berlin-game-accounts-grid .product-description-text,
.berlin-game-accounts-grid .sub-description {
    color: rgba(255, 255, 255, .78) !important;
}

.berlin-game-accounts-grid .product-price,
.berlin-game-accounts-grid .sub-price,
.berlin-game-accounts-grid .currency-symbol {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42) !important;
}

.berlin-game-accounts-grid .buy-btn,
.berlin-game-accounts-grid .add-to-cart-text-btn,
.berlin-game-accounts-grid .add-to-cart-btn {
    border-color: rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

.berlin-game-accounts-grid .buy-btn:hover,
.berlin-game-accounts-grid .add-to-cart-text-btn:hover,
.berlin-game-accounts-grid .add-to-cart-btn:hover {
    border-color: rgba(255, 255, 255, .72) !important;
    background: rgba(255, 255, 255, .27) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

@media (max-width: 768px) {
    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item {

        max-width: 190px !important;

        min-width: 0 !important;

        margin: 0 !important;

width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
        justify-self: stretch !important;
background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .075)) !important;
        -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
        backdrop-filter: blur(10px) saturate(125%) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .27) !important;
}

    .berlin-game-accounts-grid .berlin-game-account-card:hover,
    .berlin-game-accounts-grid .product-item:hover,
    .berlin-game-accounts-grid .subscription-item:hover {
        transform: translateY(-3px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-game-accounts-grid .berlin-game-account-card,
    .berlin-game-accounts-grid .product-item,
    .berlin-game-accounts-grid .subscription-item,
    .berlin-game-accounts-grid .berlin-game-account-card::after,
    .berlin-game-accounts-grid .product-item::after,
    .berlin-game-accounts-grid .subscription-item::after {
        transition: none !important;
    }
}

.berlin-game-accounts-grid .berlin-game-account-card > .platform-icon,
.berlin-game-accounts-grid .product-item > .platform-icon,
.berlin-game-accounts-grid .subscription-item > .platform-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
}

.berlin-game-accounts-grid .berlin-game-account-card > .product-image-wrapper,
.berlin-game-accounts-grid .berlin-game-account-card > .sub-image-wrapper,
.berlin-game-accounts-grid .product-item > .product-image-wrapper,
.berlin-game-accounts-grid .subscription-item > .product-image-wrapper,
.berlin-game-accounts-grid .subscription-item > .sub-image-wrapper {
    margin-top: 0 !important;
    align-self: stretch !important;
}

/* The section now starts directly with the products grid. */
.berlin-game-accounts-section > .berlin-game-accounts-grid:first-child {
    margin-top: 0 !important;
}

.berlin-game-accounts-header {
margin-bottom: 22px !important;
display: block !important;
    width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center !important;
}

.berlin-game-accounts-header h2 {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    text-align: center;
display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .58) !important;
}

.berlin-game-accounts-header .berlin-game-accounts-subtitle {
    max-width: none !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
}

@media (max-width: 768px) {
    .berlin-game-accounts-header {

margin-bottom: 17px !important;
        padding-inline: 8px !important;
}

    .berlin-game-accounts-header h2 {
        font-size: 1.48rem !important;
    }

    .berlin-game-accounts-header .berlin-game-accounts-subtitle {
        margin-top: 5px !important;
        font-size: .78rem !important;
    }
}

/*
 * Applies only to the "اصنع الباندل الخاص بك" offer card.
 * Cyan light stays inside the card; no cyan halo is painted behind it.
 * Game account product cards remain on the original White Glass V12 design.
 */
#home-bundle-promo.ultimate-bundle-card {
    background: rgba(6, 35, 52, .34) !important;
    border: 1px solid rgba(103, 232, 249, .42) !important;
    box-shadow:
        0 16px 42px rgba(0, 0, 0, .38),
        inset 0 0 28px rgba(34, 211, 238, .12),
        inset 0 1px 0 rgba(207, 250, 254, .18) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
}

#home-bundle-promo.ultimate-bundle-card:hover {
    box-shadow:
        0 21px 52px rgba(0, 0, 0, .42),
        inset 0 0 36px rgba(34, 211, 238, .20),
        inset 0 1px 0 rgba(236, 254, 255, .26) !important;
}

#home-bundle-promo .animated-border-box {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 20%,
        #0891b2 39%,
        #67e8f9 50%,
        #0ea5e9 61%,
        transparent 80%,
        transparent 100%
    ) !important;
}

#home-bundle-promo .animated-border-box-glow {
    /* The separate rear glow layer is disabled; the light now lives inside the glass card. */
    display: none !important;
    opacity: 0 !important;
}

#home-bundle-promo.ultimate-bundle-card::after {
    background: linear-gradient(145deg, rgba(7, 36, 52, .96), rgba(3, 18, 30, .98)) !important;
    border: 1px solid rgba(103, 232, 249, .20) !important;
}

#home-bundle-promo .bundle-content-wrapper {
    background: linear-gradient(110deg, rgba(8, 47, 73, .28), rgba(2, 18, 31, .12)) !important;
}

#home-bundle-promo .highlight-text {
    background: linear-gradient(90deg, #67e8f9, #38bdf8, #0ea5e9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

#home-bundle-promo .number-pop,
#home-bundle-promo .price-pop {
    color: #67e8f9 !important;
    text-shadow: 0 0 13px rgba(34, 211, 238, .34) !important;
}

#home-bundle-promo .bundle-cta-btn {
    border: 1px solid rgba(165, 243, 252, .62) !important;
    background: linear-gradient(135deg, #67e8f9, #38bdf8 52%, #0ea5e9) !important;
    color: #062033 !important;
    box-shadow:
        0 8px 22px rgba(14, 165, 233, .28),
        inset 0 1px 0 rgba(255, 255, 255, .44) !important;
}

#home-bundle-promo .bundle-cta-btn:hover {
    background: linear-gradient(135deg, #a5f3fc, #67e8f9 50%, #38bdf8) !important;
    box-shadow:
        0 11px 28px rgba(34, 211, 238, .36),
        0 0 18px rgba(103, 232, 249, .20),
        inset 0 1px 0 rgba(255, 255, 255, .54) !important;
}

#home-bundle-promo .bundle-main-image {
    filter: drop-shadow(0 0 22px rgba(34, 211, 238, .42)) !important;
}

#home-bundle-promo .circle-1 {
    background: radial-gradient(circle, rgba(14, 165, 233, .48), transparent) !important;
}

#home-bundle-promo .circle-2 {
    background: radial-gradient(circle, rgba(103, 232, 249, .42), transparent) !important;
}

@media (max-width: 768px) {
    #home-bundle-promo.ultimate-bundle-card {
        background: rgba(6, 35, 52, .40) !important;
        -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
        backdrop-filter: blur(8px) saturate(115%) !important;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, .34),
            inset 0 0 22px rgba(34, 211, 238, .11),
            inset 0 1px 0 rgba(207, 250, 254, .16) !important;
    }
}

/*
 * Restores the exact white glass visual for game-account product cards only.
 * The cyan theme remains scoped to #home-bundle-promo.
 */

html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card > *,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item > *,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item > * {
    position: relative;
    z-index: 1;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:hover::after,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:hover::after,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:hover::after {
    opacity: 1 !important;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid .product-image-wrapper,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .sub-image-wrapper {
    border: 1px solid rgba(255, 255, 255, .34) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid h3,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .product-title,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .sub-title,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .product-price,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .sub-price,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .currency-symbol {
    color: #fff !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .48) !important;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid p,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .product-description-text,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .sub-description {
    color: rgba(255, 255, 255, .78) !important;
}

@media (max-width: 768px) {
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item {
        background: linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .075)) !important;
        -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
        backdrop-filter: blur(10px) saturate(125%) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .27) !important;
    }

    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:hover {
        transform: translateY(-3px) !important;
    }
}

#productPurchasePanel.product-action-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin-top: 25px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(25, 10, 50, .82), rgba(12, 8, 35, .86)) !important;
    border: 1px solid rgba(139, 92, 246, .28) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.product-page-options-panel[hidden] {
    display: none !important;
}

.product-page-options-panel {
    width: 100%;
    min-width: 0;
    padding: 0 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.product-page-options-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #f8fafc;
    font-size: .9rem;
    font-weight: 900;
}

.product-page-options-heading i {
    color: #38bdf8;
}

.product-page-options-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-page-option-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0;
    min-height: 52px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
    text-align: right;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.product-page-option-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    border-color: rgba(56, 189, 248, .55) !important;
    background: rgba(56, 189, 248, .09) !important;
}

.product-page-option-button.is-selected {
    border-color: rgba(56, 189, 248, .82) !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, .22), rgba(34, 211, 238, .11)) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .12) !important;
}

.product-page-option-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.product-page-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
}

.product-page-option-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, .34);
    background: rgba(234, 179, 8, .1);
    color: #fde68a;
    font-size: .58rem;
    white-space: nowrap;
}

.product-page-option-price {
    flex: 0 0 auto;
    color: #67e8f9;
    font-size: .78rem;
    white-space: nowrap;
}

.product-page-purchase-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
}

#productPurchasePanel.has-product-options .add-to-cart-product-page:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* Keep the white glow inside game-account cards; never draw it behind the card on hover. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:hover,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:hover,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:hover {
transform: translateY(-6px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .29), rgba(255, 255, 255, .11)) !important;
    border-color: rgba(255, 255, 255, .68) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .30),
        0 0 24px rgba(255, 255, 255, .13),
        inset 0 1px 0 rgba(255, 255, 255, .45) !important;
box-shadow:
        0 18px 42px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

@media (max-width: 720px) {
    #productPurchasePanel.product-action-container {
        width: 100% !important;
        padding: 11px !important;
        gap: 10px !important;
    }

    .product-page-options-list {
        grid-template-columns: 1fr;
    }

    .product-page-purchase-row {
        flex-wrap: wrap;
    }

    #productPurchasePanel .quantity-selector {
        flex: 0 0 112px;
    }

}

#productPurchasePanel .product-page-options-panel {
    width: min(82%, 455px) !important;
    max-width: 455px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
}

#productPurchasePanel .product-page-options-heading {
    gap: 5px !important;
    margin: 0 2px 6px 0 !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
}

#productPurchasePanel .product-page-options-heading i {
    font-size: .72rem !important;
}

#productPurchasePanel .product-page-options-list {
    gap: 5px !important;
}

#productPurchasePanel .product-page-option-button {
    min-height: 40px !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
}

#productPurchasePanel .product-page-option-title {
    gap: 4px !important;
    font-size: .71rem !important;
    line-height: 1.25 !important;
}

#productPurchasePanel .product-page-option-badge {
    padding: 1px 5px !important;
    font-size: .50rem !important;
}

#productPurchasePanel .product-page-option-price {
    font-size: .68rem !important;
}

@media (max-width: 720px) {
    #productPurchasePanel .product-page-options-panel {
        width: 94% !important;
        max-width: 94% !important;
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    #productPurchasePanel .product-page-option-button {
        min-height: 38px !important;
        padding: 6px 7px !important;
    }
}

/* Only products with options receive this compact layout. Normal products keep their original button size. */
#productPurchasePanel.has-product-options .product-page-options-panel {
    width: min(78%, 430px) !important;
    max-width: 430px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 9px 10px !important;
    transform: translateX(10px) !important;
    border: 1px solid rgba(148, 210, 255, .22) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(15, 23, 42, .34), rgba(8, 47, 73, .18)) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#productPurchasePanel.has-product-options .product-page-options-heading {
    margin: 0 1px 6px 0 !important;
}

#productPurchasePanel.has-product-options .product-page-option-button {
    background: rgba(15, 23, 42, .26) !important;
    border-color: rgba(186, 230, 253, .18) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

#productPurchasePanel.has-product-options .product-page-option-button:hover:not(:disabled) {
    background: rgba(14, 165, 233, .10) !important;
    border-color: rgba(125, 211, 252, .46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#productPurchasePanel.has-product-options .product-page-option-button.is-selected {
    background: linear-gradient(135deg, rgba(14, 165, 233, .20), rgba(34, 211, 238, .09)) !important;
    border-color: rgba(103, 232, 249, .68) !important;
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .10) !important;
}

#productPurchasePanel.has-product-options .add-to-cart-product-page {
flex: 1 1 190px;
    min-width: 155px;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 22px !important;

flex: 0 1 165px !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 165px !important;
    height: 42px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    font-size: .86rem !important;
    line-height: 1 !important;
    animation: none !important;
}

@media (max-width: 720px) {
    #productPurchasePanel.has-product-options .product-page-options-panel {
        width: 96% !important;
        max-width: 96% !important;
        padding: 8px !important;
        transform: translateX(3px) !important;
    }

    #productPurchasePanel.has-product-options .add-to-cart-product-page {
flex: 1 1 calc(100% - 121px);
        min-width: 150px;
flex: 0 1 150px !important;
        min-width: 132px !important;
        max-width: 150px !important;
        height: 40px !important;
        padding: 0 12px !important;
        font-size: .82rem !important;
}
}

/* Options are a standalone glass block. The original purchase box is never restyled by options. */

#productPageOptionsPanel.product-page-options-panel[hidden] {
    display: none !important;
}

#productPageOptionsPanel .product-page-options-heading {
    margin: 0 1px 6px 0 !important;
}

#productPageOptionsPanel .product-page-option-button {
    background: rgba(15, 23, 42, .26) !important;
    border-color: rgba(186, 230, 253, .18) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

#productPageOptionsPanel .product-page-option-button:hover:not(:disabled) {
    background: rgba(14, 165, 233, .10) !important;
    border-color: rgba(125, 211, 252, .46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#productPageOptionsPanel .product-page-option-button.is-selected {
    background: linear-gradient(135deg, rgba(14, 165, 233, .20), rgba(34, 211, 238, .09)) !important;
    border-color: rgba(103, 232, 249, .68) !important;
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .10) !important;
}

/* Restore the original standalone purchase box for every product, with or without options. */
#productPurchasePanel.product-action-container,
#productPurchasePanel.product-action-container.has-product-options {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 25px !important;
    padding: 8px 10px 0 !important;
    border: 1px solid rgba(139, 92, 246, .2) !important;
    border-radius: 10px !important;
    background: rgba(25, 10, 50, .7) !important;
    box-shadow: none !important;
}

#productPurchasePanel .quantity-selector {
    flex: 0 0 auto !important;
    height: 36px !important;
    margin: 10px auto !important;
    border: 0 !important;
    border-radius: 6px !important;
}

#productPurchasePanel .add-to-cart-product-page,
#productPurchasePanel.has-product-options .add-to-cart-product-page {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    margin: 0 0 20px !important;
    padding: 0 30px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    line-height: normal !important;
    animation: 2s ease-in-out greenPulse !important;
}

#productPurchasePanel #giftToFriendBtn {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 20px !important;
}

@media (max-width: 720px) {
    #productPageOptionsPanel.product-page-options-panel {
        width: 96% !important;
        max-width: 430px !important;
        margin: 20px 0 9px auto !important;
        padding: 8px !important;
        transform: translateX(3px) !important;
    }

    #productPurchasePanel.product-action-container,
    #productPurchasePanel.product-action-container.has-product-options {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 8px 9px 0 !important;
        gap: 7px !important;
    }

    #productPurchasePanel .add-to-cart-product-page,
    #productPurchasePanel.has-product-options .add-to-cart-product-page {
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        padding: 0 18px !important;
        font-size: .96rem !important;
    }
}

/* Purchase Panel Under Product Image V30 */
/* Products without options keep the original purchase-panel location and styling. */
#productOptionsPurchaseMount[hidden] {
    display: none !important;
}

#productOptionsPurchaseMount.product-options-purchase-mount {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 12px 0 0;
}

#productOptionsPurchaseMount #productPurchasePanel.product-action-container,
#productOptionsPurchaseMount #productPurchasePanel.product-action-container.has-product-options {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Wider options panel: three choices per row on desktop. */
#productPageOptionsPanel.product-page-options-panel {
width: min(78%, 430px) !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 25px 0 10px auto !important;
    padding: 9px 10px !important;
    transform: translateX(10px) !important;
    border: 1px solid rgba(148, 210, 255, .22) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(15, 23, 42, .34), rgba(8, 47, 73, .18)) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
width: min(100%, 680px) !important;
    max-width: 680px !important;
}

#productPageOptionsPanel .product-page-options-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Keep purchase controls compact enough to fit below the product image. */
#productOptionsPurchaseMount #productPurchasePanel .add-to-cart-product-page {
    padding-inline: 22px !important;
}

@media (max-width: 980px) {
    #productPageOptionsPanel .product-page-options-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #productPageOptionsPanel.product-page-options-panel {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }

    #productPageOptionsPanel .product-page-options-list {
        grid-template-columns: 1fr !important;
    }

    #productOptionsPurchaseMount.product-options-purchase-mount {
        margin-top: 10px;
    }

    #productOptionsPurchaseMount #productPurchasePanel.product-action-container,
    #productOptionsPurchaseMount #productPurchasePanel.product-action-container.has-product-options {
        max-width: 100% !important;
    }

    #productOptionsPurchaseMount #productPurchasePanel .add-to-cart-product-page {
        padding-inline: 16px !important;
    }
}

/* Directly Under Product Image V35 (Clean) */
/* The purchase controls move here only when the product has selectable options. */
#productPage .product-image-section > .product-image-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#productPage .product-image-stack > #mainImageContainer,
#productPage .product-image-stack > #productImageGallery,
#productPage .product-image-stack > #productOptionsPurchaseMount {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image[hidden] {
    display: none !important;
}

#productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
}

#productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image
    > #productPurchasePanel.product-action-container,
#productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image
    > #productPurchasePanel.product-action-container.has-product-options {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
}

@media (max-width: 640px) {
    #productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image {
        margin-top: 8px !important;
    }

    #productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image
        > #productPurchasePanel.product-action-container,
    #productPage .product-image-stack > #productOptionsPurchaseMount.product-options-purchase-under-image
        > #productPurchasePanel.product-action-container.has-product-options {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Cyan glass belongs to final payment stages only. Buy Now uses the untouched reference styling. */

#checkoutModal .modal-body,
#paymentModal:not([data-payment-stage="chooser"]) .modal-body,
#paymentModal:not([data-payment-stage="chooser"]) #vodafoneDetails,
#paymentModal:not([data-payment-stage="chooser"]) #creditcardDetails {
    background: transparent !important;
}

/* Light-cyan outlines only in the final payment flow. */
#paymentModal:not([data-payment-stage="chooser"]) .input-wrapper,
#paymentModal:not([data-payment-stage="chooser"]) .custom-select-selected {
    border-color: rgba(125, 225, 255, 0.72) !important;
}

#paymentModal:not([data-payment-stage="chooser"]) .input-wrapper:focus-within,
#paymentModal:not([data-payment-stage="chooser"]) .custom-select-container.open .custom-select-selected,
#paymentModal:not([data-payment-stage="chooser"]) .custom-select-selected:hover {
    border-color: #7de1ff !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.28) !important;
}

img[data-src]:not([src]),
img[data-srcset]:not([src]) {
    background-color: rgba(255, 255, 255, 0.025);
}

.berlin-content-auto {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

.berlin-progressive-sentinel {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2px;
    pointer-events: none;
    contain: strict;
}

.berlin-fps-paused,
.berlin-fps-paused::before,
.berlin-fps-paused::after,
html.berlin-page-hidden *,
html.berlin-page-hidden *::before,
html.berlin-page-hidden *::after{
    animation-play-state: paused !important;
}/* Heavy decorative loops only run during direct interaction. */
.glitch-effect::before,
.glitch-effect::after {
    animation-play-state: paused !important;
}

.glitch-effect:hover::before,
.glitch-effect:hover::after,
.glitch-effect:focus-visible::before,
.glitch-effect:focus-visible::after {
    animation-play-state: running !important;
}

/* Hidden modal trees do not participate in rendering until opened. */
.modal:not(.is-visible),
.berlin-modal[hidden],
[role="dialog"][hidden],
.unique-page[style*="display: none"],
.unique-page[style*="display:none"] {
    content-visibility: hidden;
    contain: layout style paint;
}

/* Do not reserve GPU layers permanently for generic acceleration helpers. */
.gpu-accelerated:not(:hover):not(:focus-within):not(.is-animating) {
    will-change: auto;
}

@media (max-width: 768px) {
    .berlin-content-auto {
        contain-intrinsic-size: 520px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
animation-duration: .01ms !important;
        animation-delay: 0s !important;

        transition-duration: .01ms !important;

animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;

scroll-behavior: auto !important;
}
}

/* Final mobile override: 2-column fluid cards, no horizontal overflow, */
/* compact actions, and no expensive glass blur on mobile. */
@media (max-width: 768px) {
    #game-accounts-section.berlin-game-accounts-section {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: clamp(6px, 2.2vw, 10px) !important;
        overflow: hidden !important;
    }

    #gameAccountsProductsContainer.berlin-game-accounts-grid {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(10px, 3vw, 14px) !important;
        padding: 6px 2px 14px !important;
        margin-inline: auto !important;
        overflow: visible !important;
    }

    #gameAccountsProductsContainer .berlin-game-account-card,
    #gameAccountsProductsContainer .product-item,
    #gameAccountsProductsContainer .subscription-item {
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(6px, 2vw, 8px) !important;
        justify-self: stretch !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.07)) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20) !important;
        transform: none !important;
    }

    #gameAccountsProductsContainer .berlin-game-account-card:hover,
    #gameAccountsProductsContainer .berlin-game-account-card:active,
    #gameAccountsProductsContainer .product-item:hover,
    #gameAccountsProductsContainer .product-item:active,
    #gameAccountsProductsContainer .subscription-item:hover,
    #gameAccountsProductsContainer .subscription-item:active {
        transform: none !important;
    }

    #gameAccountsProductsContainer .product-image-wrapper,
    #gameAccountsProductsContainer .sub-image-wrapper {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 0 7px !important;
        overflow: hidden !important;
        border-radius: 11px !important;
    }

    #gameAccountsProductsContainer .product-image-wrapper img,
    #gameAccountsProductsContainer .sub-image-wrapper img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    #gameAccountsProductsContainer .product-content-overlay,
    #gameAccountsProductsContainer .sub-content,
    #gameAccountsProductsContainer .sub-footer,
    #gameAccountsProductsContainer .product-buttons-wrapper,
    #gameAccountsProductsContainer .product-buttons-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #gameAccountsProductsContainer .product-content-overlay,
    #gameAccountsProductsContainer .sub-content {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #gameAccountsProductsContainer h3,
    #gameAccountsProductsContainer .product-title,
    #gameAccountsProductsContainer .sub-title {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.8em !important;
        margin: 3px 0 5px !important;
        padding: 0 !important;
        font-size: clamp(.72rem, 3.05vw, .84rem) !important;
        line-height: 1.4 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #gameAccountsProductsContainer .product-description-text,
    #gameAccountsProductsContainer .sub-description,
    #gameAccountsProductsContainer .sub-description-overlay {
        min-width: 0 !important;
        font-size: clamp(.62rem, 2.55vw, .72rem) !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    #gameAccountsProductsContainer .product-description-text {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        overflow: hidden !important;
        min-height: 2.9em !important;
        margin: 0 0 5px !important;
    }

    #gameAccountsProductsContainer .product-content-overlay > p:not(.product-description-text),
    #gameAccountsProductsContainer .sub-price {
        min-width: 0 !important;
        margin: 3px 0 7px !important;
        font-size: clamp(.69rem, 2.8vw, .82rem) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #gameAccountsProductsContainer .product-price,
    #gameAccountsProductsContainer .currency-symbol,
    #gameAccountsProductsContainer .discount-badge-mini {
        max-width: 100% !important;
        white-space: normal !important;
    }

    #gameAccountsProductsContainer .product-buttons-wrapper {
        margin-top: auto !important;
    }

    #gameAccountsProductsContainer .product-buttons-container {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    #gameAccountsProductsContainer .buy-btn,
    #gameAccountsProductsContainer .add-to-cart-text-btn {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 6px 4px !important;
        border-radius: 8px !important;
        font-size: clamp(.61rem, 2.45vw, .72rem) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #gameAccountsProductsContainer .add-to-cart-btn,
    #gameAccountsProductsContainer .subscription-cart-btn {
        box-sizing: border-box !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        padding: 6px !important;
        border-radius: 8px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #gameAccountsProductsContainer .add-to-cart-btn img,
    #gameAccountsProductsContainer .subscription-cart-btn img,
    #gameAccountsProductsContainer .add-to-cart-btn i,
    #gameAccountsProductsContainer .subscription-cart-btn i {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        font-size: 16px !important;
        object-fit: contain !important;
    }

    #gameAccountsProductsContainer .top-badges-wrapper {
        max-width: calc(100% - 8px) !important;
        gap: 3px !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #gameAccountsProductsContainer .top-badges-wrapper > * {
        max-width: 100% !important;
        font-size: .58rem !important;
        line-height: 1.2 !important;
    }

    #gameAccountsProductsContainer .platform-icon {
        max-width: 28px !important;
        max-height: 28px !important;
    }
}

@media (max-width: 360px) {
    #gameAccountsProductsContainer.berlin-game-accounts-grid {
        gap: 8px !important;
        padding-inline: 0 !important;
    }

    #gameAccountsProductsContainer .berlin-game-account-card,
    #gameAccountsProductsContainer .product-item,
    #gameAccountsProductsContainer .subscription-item {
        padding: 6px !important;
        border-radius: 12px !important;
    }

    #gameAccountsProductsContainer .buy-btn,
    #gameAccountsProductsContainer .add-to-cart-text-btn {
        font-size: .6rem !important;
        padding-inline: 3px !important;
    }
}

@media (max-width: 300px) {
    #gameAccountsProductsContainer.berlin-game-accounts-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
}

/* Keep actual payment stages and checkout/payment-method modal on the current cyan glass style. */
#checkoutModal,
#paymentModal:not([data-payment-stage="chooser"]) {
    background-color: rgba(0, 50, 100, 0.76) !important;
    background-image: linear-gradient(145deg, rgba(0, 112, 186, 0.64), rgba(0, 50, 100, 0.78)) !important;
    border: 1px solid rgba(125, 225, 255, 0.72) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30) !important;
    -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
    backdrop-filter: blur(12px) saturate(118%) !important;
}

/* Light-cyan outline for the discount-code controls only. */
#paymentModal .discount-code-container input,
#paymentModal .discount-code-container button,
#paymentModal #vodafoneDiscountCodeInput,
#paymentModal #vodafoneApplyBtn {
    border-color: #7de1ff !important;
}

#paymentModal .discount-code-container input:focus,
#paymentModal #vodafoneDiscountCodeInput:focus {
    outline: none !important;
    border-color: #7de1ff !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.28) !important;
}

/* Keep cart tooltip and Basha product CTA above offer cards and nearby UI. */
#homeOffersContainer.home-offers-container,
#home-offers-section {
    overflow: visible !important;
}

#homeOffersContainer .home-offer-card {
box-sizing: border-box !important;
    width: 180px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 8px 5px !important;
    overflow: hidden !important;
    border: 1px solid #00c0ff !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(0, 112, 186, 0.6), rgba(0, 50, 100, 0.8)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    filter: none !important;
    contain: layout style !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

#homeOffersContainer .home-offer-card:hover,
#homeOffersContainer .home-offer-card:focus-within {
    z-index: var(--berlin-z-modal) !important;
}

#homeOffersContainer .home-offer-card .product-image-wrapper {
height: 163px !important;
overflow: hidden !important;
}

#homeOffersContainer .home-offer-card .product-buttons-wrapper,
#homeOffersContainer .home-offer-card .product-buttons-container,
#homeOffersContainer .home-offer-card .add-to-cart-btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 30 !important;
}

#homeOffersContainer .home-offer-card .add-to-cart-btn::before,
#homeOffersContainer .home-offer-card .add-to-cart-btn::after {
    z-index: var(--berlin-z-tooltip) !important;
}

/* Basha product button: keep it above cards/overlays without changing appearance. */
[data-basha-native-slot="product"] {
    position: relative !important;
    z-index: var(--berlin-z-modal) !important;
    overflow: visible !important;
    isolation: auto !important;
}

berlin-basha-product-button[data-basha-native-trigger="product"],
[data-basha-native-trigger="product"] {
    position: relative !important;
    z-index: var(--berlin-z-modal) !important;
    overflow: visible !important;
}

#extra-info,
#productPageContent,
#productPage .product-details-section {
    overflow: visible !important;
}

/*
 * The cart hint is rendered as a BODY-level fixed portal so no card/section
 * overflow, contain, transform, isolation or stacking context can clip it.
 */
html.berlin-cart-tooltip-portal-ready .add-to-cart-btn::before,
html.berlin-cart-tooltip-portal-ready .add-to-cart-btn::after {
    content: none !important;
    display: none !important;
}

#berlin-cart-tooltip-portal.berlin-cart-tooltip-portal {
    position: fixed !important;
    z-index: var(--berlin-z-tooltip) !important;
    transform: translate(-50%, -100%) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 5px 11px !important;
    border: 1px solid rgba(150, 80, 255, 0.42) !important;
    border-radius: 7px !important;
    background: #140a28 !important;
    color: rgba(235, 222, 255, 0.98) !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.42) !important;
    font-family: "Tajawal", "Cairo", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .14s ease, visibility .14s ease !important;
    contain: none !important;
    isolation: auto !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#berlin-cart-tooltip-portal.berlin-cart-tooltip-portal::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 5px solid transparent !important;
    border-top-color: #140a28 !important;
    pointer-events: none !important;
}

#berlin-cart-tooltip-portal.berlin-cart-tooltip-portal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

#berlin-cart-tooltip-portal.berlin-cart-tooltip-portal.is-measuring {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/*
 * Keep the whole product information stack above adjacent product media/sliders,
 * then keep Basha above that stack.
 */
#productPage,
#productPageContent,
#productPage .product-main-view {
    overflow: visible !important;
}

#productPage .product-details-section,
#productPage .tabs-container,
#productPage #extra-info {
    position: relative !important;
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
}

#productPage .product-details-section {
    z-index: 80 !important;
}

#productPage .product-image-section,
#productPromoSliderSection,
#similarProductsSection {
    position: relative !important;
    z-index: 10 !important;
}

#productPage .tabs-container {
    z-index: 90 !important;
}

#productPage #extra-info,
#productPage [data-basha-native-slot="product"] {
    z-index: 100 !important;
}

#productPage berlin-basha-product-button[data-basha-native-trigger="product"],
#productPage [data-basha-native-trigger="product"] {
    position: relative !important;
    z-index: 110 !important;
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
}

/* On touch screens do not let desktop hover transforms consume the first tap. */
@media (hover: none), (pointer: coarse) {
    .product-item:hover,
    .subscription-item:hover,
    #homeOffersContainer .home-offer-card:hover {
        transform: none !important;
    }

    .product-item:hover::after,
    .subscription-item:hover::after {
        opacity: 0 !important;
    }
}

/*
 * The Buy Now chooser intentionally has NO custom color/glass override here.
 * It inherits the original verified Aug-05 modal rules already present above:
 * .modal background rgba(30,17,50,.8), original borders/radius/spacing,
 * original input/select states, product header, typography and shadows.
 */

/*
 * Scoped only to game accounts. Keeps the white-glass look while avoiding
 * expensive live backdrop blur on touch/mobile devices.
 */
@media (max-width: 900px), (pointer: coarse) {
    html body .berlin-game-accounts-section {
        /* Prevent the grid from visually leaking outside the viewport. */
        overflow-x: clip !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* Static glass: visually very close, but far cheaper than backdrop-filter. */

    /* Pseudo highlights stay static; no hover fade layer on touch devices. */
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card::after,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item::after,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item::after {
        display: none !important;
        content: none !important;
        transition: none !important;
    }

    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:active,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:active,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:active {
        transform: none !important;
        box-shadow:
            0 7px 18px rgba(0, 0, 0, .23),
            inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    }

    /* Buttons no longer run their own live blur layer. */
    html body .berlin-game-accounts-section .berlin-game-accounts-grid .buy-btn,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-text-btn,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-btn {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13) !important;
        transition: background .14s ease, border-color .14s ease !important;
    }

    html body .berlin-game-accounts-section .berlin-game-accounts-grid img {
        content-visibility: visible;
        will-change: auto !important;
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 430px) {
    html body .berlin-game-accounts-section {
        padding-left: 2px !important;
        padding-right: 6px !important;
    }

}

/*
 * Remove expensive live compositing from the Game Accounts section only.
 * The white-glass visual stays, but without per-card live backdrop blur.
 */

html body .berlin-game-accounts-section {
background:
        linear-gradient(180deg, rgba(4, 7, 18, .72) 0%, rgba(7, 8, 22, .83) 48%, rgba(5, 5, 16, .91) 100%),
        url("https://i.postimg.cc/gjsQFfq9/Leonida-Keys-01.webp") center 42% / cover no-repeat !important;
transform: none !important;
    will-change: auto !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
    contain: layout paint style;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid {
    transform: none !important;
    will-change: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Static white glass instead of live backdrop blur. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item {
position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    color: #fff !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .32) !important;
    -webkit-backdrop-filter: blur(15px) saturate(135%) !important;
    backdrop-filter: blur(15px) saturate(135%) !important;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
background: linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .075)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout paint style;
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .20) !important;
    transition: border-color .14s ease !important;
}

/* Keep one cheap static highlight only. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card::before,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item::before,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item::before {
content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .20), transparent 42%, rgba(255, 255, 255, .05)) !important;
    opacity: 1 !important;
background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 46%) !important;
    opacity: .7 !important;
    transition: none !important;
}

/* Remove the second radial glass layer entirely. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card::after,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item::after,
html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item::after {
content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .20), transparent 62%) !important;

    transition: opacity .22s ease !important;
display: none !important;
    content: none !important;
    opacity: 0 !important;
    transition: none !important;
}

/* Desktop hover stays responsive without forcing a re-blur/repaint. */
@media (hover: hover) and (pointer: fine) {
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item:hover,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item:hover {
        transform: translateY(-2px) !important;
        background: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.09)) !important;
        border-color: rgba(255,255,255,.58) !important;
        box-shadow:
            0 9px 20px rgba(0,0,0,.24),
            inset 0 1px 0 rgba(255,255,255,.22) !important;
    }
}

/* Buttons no longer create their own backdrop layers. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid .buy-btn,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-text-btn,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-btn {
border-color: rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    will-change: auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13) !important;
    transition: border-color .12s ease, background-color .12s ease !important;
}

html body .berlin-game-accounts-section .berlin-game-accounts-grid .buy-btn:hover,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-text-btn:hover,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .add-to-cart-btn:hover {
border-color: rgba(255, 255, 255, .72) !important;
    background: rgba(255, 255, 255, .27) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Images: no inherited zoom/filter animation while scrolling through this section. */
html body .berlin-game-accounts-section .berlin-game-accounts-grid .product-image-wrapper,
html body .berlin-game-accounts-section .berlin-game-accounts-grid .sub-image-wrapper,
html body .berlin-game-accounts-section .berlin-game-accounts-grid img {
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
    transition: none !important;
}

/* Preserve the mobile static-glass tone and right-shift fit from V23. */
@media (max-width: 900px), (pointer: coarse) {
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .berlin-game-account-card,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .product-item,
    html body .berlin-game-accounts-section .berlin-game-accounts-grid > .subscription-item {

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        box-shadow:
            0 7px 18px rgba(0, 0, 0, .23),
            inset 0 1px 0 rgba(255, 255, 255, .18) !important;
        transition: border-color .16s ease, background .16s ease !important;

        will-change: auto !important;
        contain: layout paint style;
background: linear-gradient(145deg, rgba(57, 63, 78, .92), rgba(24, 29, 43, .94)) !important;
        transform: none !important;
}

    html body .berlin-game-accounts-section .berlin-game-accounts-grid {
box-sizing: border-box !important;

        column-gap: 10px !important;
        contain: layout style paint !important;
        transform: none !important;
        will-change: auto !important;
width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 2px !important;
        padding-right: 8px !important;
}
}

@media (max-width: 430px) {
    html body .berlin-game-accounts-section .berlin-game-accounts-grid {

        column-gap: 9px !important;
        row-gap: 18px !important;
width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 1px !important;
        padding-right: 7px !important;
}
}

/* Slim visual break directly under the home bundle offer. */
.berlin-bundle-section-divider {
    width: min(88%, 1040px);
    height: 1px;
    margin: 26px auto 20px;
    border: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 189, 248, .18) 14%,
        rgba(103, 232, 249, .72) 50%,
        rgba(56, 189, 248, .18) 86%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(56, 189, 248, .16);
    pointer-events: none;
}

#home-bundle-promo[style*="display: none"] + .berlin-bundle-section-divider,
#home-bundle-promo[style*="display:none"] + .berlin-bundle-section-divider {
    display: none !important;
}

/* Home Recently Viewed: no outer card/container visual. */
#recentlyViewedSection {
margin: 30px 15px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(0, 200, 255, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 16px;
    display: none;
box-sizing: border-box !important;
    width: auto !important;
    margin: 22px 15px 30px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

#recentlyViewedSection .recently-viewed-track {
    padding: 0 2px 9px !important;
}

@media (max-width: 768px) {
    .berlin-bundle-section-divider {
        width: calc(100% - 34px);
        margin: 20px auto 16px;
        box-shadow: none;
    }

    #recentlyViewedSection {
        margin: 18px 10px 26px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

#recentlyViewedSection .recently-viewed-header {
margin-bottom: 13px !important;
    padding: 0 2px !important;
justify-content: flex-start !important;
    gap: 0 !important;
}

#recentlyViewedSection .recently-viewed-header h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
}

#recentlyViewedSection .recently-viewed-clear-icon {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 3px 0 0 !important;
    border: 1px solid rgba(255, 116, 116, .58) !important;
    border-radius: 9px !important;
    background: rgba(255, 116, 116, .11) !important;
    color: #ff7474 !important;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: .88rem !important;
    transition:
        background .14s ease,
        border-color .14s ease,
        color .14s ease,
        transform .14s ease !important;
}

#recentlyViewedSection .recently-viewed-clear-icon:hover,
#recentlyViewedSection .recently-viewed-clear-icon:focus-visible {
    background: rgba(255, 116, 116, .18) !important;
    border-color: rgba(255, 150, 150, .88) !important;
    color: #ff9696 !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

#recentlyViewedSection .recently-viewed-clear-icon:active {
    transform: translateY(0) scale(.96) !important;
}

@media (pointer: coarse), (max-width: 768px) {
    #recentlyViewedSection .recently-viewed-clear-icon {
font-size: .96rem !important;
        padding: 4px !important;

width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        font-size: .9rem !important;
        transform: none !important;
}
}

.berlin-home-category-card {
    min-width: 0;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    color: rgba(255,255,255,.86);
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(0,0,0,.14);
    font-family: Cairo, Tajawal, sans-serif;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.1;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.berlin-home-category-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(56, 189, 248, .09);
    color: #67e8f9;
    font-size: 1rem;
}

.berlin-home-category-card.is-active {
    border-color: rgba(103, 232, 249, .52);
    background: linear-gradient(145deg, rgba(8, 47, 73, .34), rgba(14, 165, 233, .08));
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .berlin-home-category-card:hover {
        transform: translateY(-2px);
        border-color: rgba(103, 232, 249, .48);
        background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(14,165,233,.055));
    }
}

@media (max-width: 768px) {

    .berlin-home-category-cards::-webkit-scrollbar {
        display: none;
    }

    .berlin-home-category-card {
        flex: 0 0 92px;
        min-height: 68px;
        padding: 9px 6px;
        border-radius: 13px;
        font-size: .76rem;
        scroll-snap-align: start;
        transform: none !important;
    }

    .berlin-home-category-icon {
        width: 28px;
        height: 28px;
        font-size: .92rem;
    }
}

.berlin-home-category-cards {
display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 920px);
    margin: 0 auto 24px;
    padding: 0 4px;
    box-sizing: border-box;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: min(100%, 1080px) !important;
}

.berlin-home-category-card-platform .berlin-home-category-icon {
    color: #dff7ff;
}

@media (max-width: 900px) and (min-width: 769px) {
    .berlin-home-category-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: min(100%, 760px) !important;
    }
}

@media (max-width: 768px) {
    .berlin-home-category-cards {
display: flex;
        width: 100%;
        max-width: 100%;
        gap: 9px;
        margin: 0 0 20px;
        padding: 2px 5px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
}
}

.berlin-home-category-image-cards {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: min(100%, 1120px) !important;
    gap: 11px !important;
    margin-bottom: 25px !important;
}

.berlin-home-category-image-cards .berlin-home-category-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to top,
        rgba(5, 8, 18, .86) 0%,
        rgba(5, 8, 18, .36) 48%,
        rgba(5, 8, 18, .06) 100%
    ) !important;
}

.berlin-home-category-image-cards .berlin-home-category-card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: inherit !important;
    filter: none !important;
    transform: scale(1.01);
    transition: transform .18s ease, opacity .18s ease !important;
}

.berlin-home-category-image-cards .berlin-home-category-label {
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    bottom: 8px !important;
    z-index: 2 !important;
    color: #fff !important;
    text-align: center !important;
    font-family: Cairo, Tajawal, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.88) !important;
    white-space: nowrap !important;
}

.berlin-home-category-image-cards .berlin-home-category-icon {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .berlin-home-category-image-cards .berlin-home-category-card:hover {
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .berlin-home-category-image-cards .berlin-home-category-card:hover img {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
}

.berlin-home-category-image-cards .berlin-home-category-card:focus,
.berlin-home-category-image-cards .berlin-home-category-card:focus-visible {
    outline: 0 !important;
    border: 0 !important;
}

@media (max-width: 900px) and (min-width: 769px) {
    .berlin-home-category-image-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: min(100%, 780px) !important;
    }
}

@media (max-width: 768px) {
    .berlin-home-category-image-cards {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 9px !important;
        padding: 2px 5px 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .berlin-home-category-image-cards .berlin-home-category-label {
        bottom: 7px !important;
        font-size: .74rem !important;
    }

    .berlin-home-category-image-cards .berlin-home-category-card img {
        transform: none !important;
        transition: none !important;
    }
}

.berlin-home-discovery-row {
    width: min(100%, 1180px);
    margin: 8px auto 12px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
}

.berlin-home-discovery-text {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap;
}

/* Very small secondary actions beside the discovery text. */

.berlin-home-mini-action {
    height: 26px !important;
    min-height: 26px !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    font-family: Cairo, Tajawal, sans-serif !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    top: auto !important;
    transition: background .12s ease, border-color .12s ease !important;
}

.berlin-home-mini-action i {
    font-size: .72rem !important;
    margin: 0 !important;
}

.berlin-home-mini-discord {
    background: rgba(88, 101, 242, .15) !important;
    border-color: rgba(123, 134, 255, .26) !important;
    color: #dfe3ff !important;
}

@media (hover: hover) and (pointer: fine) {
    .berlin-home-mini-discord:hover {
        background: rgba(88, 101, 242, .24) !important;
        border-color: rgba(139, 149, 255, .42) !important;
    }

    .berlin-home-mini-orders:hover {
        background: rgba(124, 58, 237, .21) !important;
        border-color: rgba(196, 181, 253, .38) !important;
    }
}

/* Categories now occupy the old large-actions area, not the Trending header. */

/* The controller shortcut remains separate and compact. */
.berlin-home-game-shortcut-row {
    min-height: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
}

.berlin-home-game-shortcut-row #open-game-btn {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .berlin-home-discovery-row {
        width: 100%;
        gap: 6px;
        padding-inline: 7px;
        margin: 6px auto 10px;
        overflow: hidden;
    }

    .berlin-home-discovery-text {
        min-width: 0;
        font-size: clamp(.68rem, 2.7vw, .86rem) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .berlin-home-mini-actions {
        gap: 4px;
    }

    .berlin-home-mini-action {
        height: 24px !important;
        min-height: 24px !important;
        padding: 2px 6px !important;
        font-size: .59rem !important;
        border-radius: 6px !important;
    }

    .berlin-home-mini-action i {
        font-size: .65rem !important;
    }

}

.berlin-home-mini-orders {
background: rgba(124, 58, 237, .13) !important;
    border-color: rgba(167, 139, 250, .25) !important;
    color: #eee7ff !important;
position: relative !important;
    top: -2px !important;
    align-self: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.berlin-home-mini-actions {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.berlin-home-mini-actions > .berlin-home-mini-action {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: inline-flex !important;
    margin: 0 !important;
    vertical-align: middle !important;
    transform: none !important;
}

.berlin-home-mini-actions > .berlin-home-mini-discord,
.berlin-home-mini-actions > .berlin-home-mini-orders {
    height: 26px !important;
    min-height: 26px !important;
    line-height: 1 !important;
}

@media (max-width: 768px) {
    .berlin-home-mini-actions > .berlin-home-mini-discord,
    .berlin-home-mini-actions > .berlin-home-mini-orders {
        height: 24px !important;
        min-height: 24px !important;
    }
}

.berlin-home-category-slot .berlin-home-category-image-cards {
margin: 0 auto !important;
margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.berlin-home-category-slot {
width: 100%;
    margin: 0 auto 8px;
margin-top: 38px !important;
    margin-bottom: 50px !important;
}

@media (max-width: 768px) {
    .berlin-home-category-slot {
margin-bottom: 6px;
margin-top: 14px !important;
        margin-bottom: 20px !important;
margin-top: 20px !important;
        margin-bottom: 28px !important;
margin-top: 30px !important;
        margin-bottom: 40px !important;
}
}

.berlin-home-category-swipe-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    direction: ltr;
    transform: translate3d(0,0,0);
    will-change: auto;
}

.berlin-home-category-swipe-track.is-swiping {
    will-change: transform;
}

.berlin-home-category-swipe-track > .berlin-home-category-card {
    flex: 0 0 calc((100% - 55px) / 6) !important;
    width: calc((100% - 55px) / 6) !important;
    min-width: 0 !important;
    margin: 0 !important;
    direction: rtl;
    contain: layout paint style;
}

.berlin-home-category-swipe-track > .berlin-home-category-card[hidden] {
    display: none !important;
}

.berlin-home-category-swipe-track.is-swiping > .berlin-home-category-card {
    pointer-events: none !important;
}

/* Category images use a tiny placeholder until the carousel is near the screen. */

/* Small manual arrows: visible but not visually heavy. */
.berlin-category-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 8 !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 9px !important;
    background: rgba(10,14,27,.74) !important;
    color: rgba(255,255,255,.88) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    cursor: pointer !important;
    transition: background .14s ease, color .14s ease, border-color .14s ease !important;
}

.berlin-category-arrow i {
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}

.berlin-category-arrow-left {
    left: 3px !important;
}

.berlin-category-arrow-right {
    right: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
    .berlin-category-arrow:hover {
        background: rgba(20,28,48,.94) !important;
        border-color: rgba(103,232,249,.32) !important;
        color: #fff !important;
    }

    .berlin-home-category-swipe-track.is-swiping > .berlin-home-category-card:hover {
        transform: none !important;
    }
}

@media (max-width: 768px) {

    .berlin-home-category-swipe-track > .berlin-home-category-card {
        flex: 0 0 124px !important;
        width: 124px !important;
        min-width: 124px !important;
    }

    .berlin-category-arrow {
        width: 27px !important;
        min-width: 27px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
    }

    .berlin-category-arrow-left {
        left: 2px !important;
    }

    .berlin-category-arrow-right {
        right: 2px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-home-category-swipe-track {
        transition-duration: 1ms !important;
    }

    .berlin-home-category-swipe-track .berlin-home-category-card img {
        transition: none !important;
    }
}

.berlin-home-category-swipe-track .berlin-home-category-card img[data-berlin-category-src] {
    background: rgba(255,255,255,.025) !important;
}

.berlin-home-category-swipe-track .berlin-home-category-card img:not(.is-category-image-ready) {
    opacity: .55 !important;
}

.berlin-home-category-swipe-track .berlin-home-category-card img.is-category-image-ready {
    opacity: 1 !important;
}

.berlin-home-category-swipe-viewport .berlin-category-arrow,
.berlin-home-category-swipe-viewport .berlin-category-arrow:hover,
.berlin-home-category-swipe-viewport .berlin-category-arrow:focus,
.berlin-home-category-swipe-viewport .berlin-category-arrow:focus-visible,
.berlin-home-category-swipe-viewport .berlin-category-arrow:active {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    translate: none !important;
    scale: 1 !important;
    animation: none !important;
}

.berlin-home-category-swipe-viewport .berlin-category-arrow-left,
.berlin-home-category-swipe-viewport .berlin-category-arrow-left:hover,
.berlin-home-category-swipe-viewport .berlin-category-arrow-left:focus,
.berlin-home-category-swipe-viewport .berlin-category-arrow-left:focus-visible,
.berlin-home-category-swipe-viewport .berlin-category-arrow-left:active {
    left: 3px !important;
    right: auto !important;
}

.berlin-home-category-swipe-viewport .berlin-category-arrow-right,
.berlin-home-category-swipe-viewport .berlin-category-arrow-right:hover,
.berlin-home-category-swipe-viewport .berlin-category-arrow-right:focus,
.berlin-home-category-swipe-viewport .berlin-category-arrow-right:focus-visible,
.berlin-home-category-swipe-viewport .berlin-category-arrow-right:active {
    right: 3px !important;
    left: auto !important;
}

.berlin-home-category-swipe-viewport .berlin-category-arrow:active {
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}

@media (max-width: 768px) {
    .berlin-home-category-swipe-viewport .berlin-category-arrow-left,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-left:hover,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-left:focus,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-left:focus-visible,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-left:active {
        left: 2px !important;
    }

    .berlin-home-category-swipe-viewport .berlin-category-arrow-right,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-right:hover,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-right:focus,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-right:focus-visible,
    .berlin-home-category-swipe-viewport .berlin-category-arrow-right:active {
        right: 2px !important;
    }
}

.berlin-home-category-image-cards .berlin-home-category-card::before,
.berlin-home-category-image-cards .berlin-home-category-card::after {
    content: none !important;
    display: none !important;
}
.berlin-home-category-image-cards .berlin-home-category-card > img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 13px !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.berlin-home-category-image-cards .berlin-home-category-card > .berlin-home-category-label {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 3px !important;
    color: #fff !important;
    background: transparent !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: normal !important;
    transform: none !important;
}
.berlin-home-category-image-cards .berlin-home-category-card:hover > img {
    transform: none !important;
}
@media (max-width: 768px) {
    .berlin-home-category-image-cards .berlin-home-category-card {
flex: 0 0 124px !important;
        width: 124px !important;
        min-width: 124px !important;
        min-height: 76px !important;
        aspect-ratio: 1.62 / 1 !important;
        border-radius: 12px !important;
        transform: none !important;
min-height: 0 !important;
        aspect-ratio: auto !important;
}

}

#berlin-steam-hub.berlin-steam-hub {
    position: relative;
    isolation: isolate;
    margin: 34px 20px;
    padding: 18px;
    border: 1px solid rgba(102, 192, 244, 0.24);
    border-radius: 26px;
    background:
        radial-gradient(circle at 12% 0%, rgba(102, 192, 244, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(8, 18, 31, 0.97), rgba(9, 12, 22, 0.96));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

#berlin-steam-hub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 15%, rgba(102, 192, 244, 0.045) 45%, transparent 75%);
}

.berlin-steam-hub-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 8px 8px 18px;
}

.berlin-steam-hub-brand {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 31px;
    color: #fff;
    background: linear-gradient(145deg, rgba(102, 192, 244, 0.28), rgba(23, 54, 78, 0.48));
    border: 1px solid rgba(102, 192, 244, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.berlin-steam-hub-copy {
    min-width: 0;
}

.berlin-steam-hub-kicker {
    display: inline-block;
    margin-bottom: 3px;
    color: #66c0f4;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.berlin-steam-hub-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.35;
}

.berlin-steam-hub-copy p {
    margin: 5px 0 0;
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.88rem;
}

.berlin-steam-hub-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #d8ffe8;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.berlin-steam-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.berlin-steam-tab {
    --steam-tab-bg: none;
    position: relative;
    min-height: 112px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    color: #fff;
    text-align: right;
    cursor: pointer;
    background: #0b1420;
    box-shadow: none;
    transform: translateY(0);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.berlin-steam-tab::before,
.berlin-steam-tab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.berlin-steam-tab::before {
    z-index: 0;
    background-image: var(--steam-tab-bg);
    background-size: cover;
    background-position: center;
    transform: scale(1.025);
    filter: saturate(0.92) contrast(1.03);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.berlin-steam-tab::after {
    z-index: 1;
    background: linear-gradient(to top, rgba(3, 8, 15, 0.96) 4%, rgba(3, 8, 15, 0.64) 48%, rgba(3, 8, 15, 0.24) 100%);
}

.berlin-steam-tab > * {
    position: relative;
    z-index: 2;
}

.berlin-steam-tab-gifting {
    --steam-tab-bg: url("https://i.postimg.cc/8zqLP9dq/your-gifting-image.webp");
}

.berlin-steam-tab-cards {
    --steam-tab-bg: url("./images/steamwallpaper.png");
}

.berlin-steam-tab-coop {
    --steam-tab-bg: url("https://i.postimg.cc/brJZR9Hr/your-coop-image.webp");
}

.berlin-steam-tab-profile {
    --steam-tab-bg: url("https://i.postimg.cc/fLMxhgDQ/steamgirl.webp");
}

.berlin-steam-tab:hover,
.berlin-steam-tab:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(102, 192, 244, 0.56);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    outline: none;
}

.berlin-steam-tab:hover::before,
.berlin-steam-tab:focus-visible::before,
.berlin-steam-tab.is-active::before {
    transform: scale(1.075);
    filter: saturate(1.08) contrast(1.07);
}

.berlin-steam-tab.is-active {
    border-color: rgba(102, 192, 244, 0.82);
    box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.18), 0 12px 32px rgba(0, 0, 0, 0.28);
}

.berlin-steam-tab.is-active::after {
    background: linear-gradient(to top, rgba(3, 8, 15, 0.94) 3%, rgba(11, 44, 67, 0.5) 60%, rgba(17, 54, 79, 0.22) 100%);
}

.berlin-steam-tab-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.berlin-steam-tab-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.berlin-steam-tab-text strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.91rem;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-steam-tab-text small {
    overflow: hidden;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berlin-steam-panels {
    position: relative;
    min-width: 0;
}

#berlin-steam-hub .berlin-steam-panel {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background-attachment: scroll !important;
}

#berlin-steam-hub .berlin-steam-panel:not(.is-active) {
    display: none !important;
}

#berlin-steam-hub .berlin-steam-panel.is-active {
    display: block !important;
    animation: berlinSteamPanelEnter 0.28s ease both;
}

@media (min-width: 769px) {
    #berlin-steam-hub #personal-gifting-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://i.postimg.cc/8zqLP9dq/your-gifting-image.webp") !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #berlin-steam-hub #steam-gift-cards-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/steamwallpaper.png") !important;
        background-size: cover !important;
        background-position: center !important;
        animation: none !important;
    }

    #berlin-steam-hub #game-rentals-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.58)), url("https://i.postimg.cc/brJZR9Hr/your-coop-image.webp") !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #berlin-steam-hub #steam-points-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://i.postimg.cc/fLMxhgDQ/steamgirl.webp") !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

@keyframes berlinSteamPanelEnter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .berlin-steam-hub-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .berlin-steam-hub-live {
        display: none;
    }

    .berlin-steam-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #berlin-steam-hub.berlin-steam-hub {
        margin: 26px 0;
        padding: 10px;
        border-radius: 20px;
    }

    .berlin-steam-hub-head {
        gap: 10px;
        padding: 7px 5px 13px;
    }

    .berlin-steam-hub-brand {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 24px;
    }

    .berlin-steam-hub-copy h2 {
        font-size: 1.08rem;
    }

    .berlin-steam-hub-copy p {
        display: none;
    }

    .berlin-steam-tabs {
        gap: 7px;
        margin-bottom: 9px;
    }

    .berlin-steam-tab {
        min-height: 84px;
        gap: 7px;
        padding: 10px;
        border-radius: 14px;
    }

    .berlin-steam-tab-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 10px;
        font-size: 0.82rem;
    }

    .berlin-steam-tab-text strong {
        font-size: 0.77rem;
    }

    .berlin-steam-tab-text small {
        font-size: 0.59rem;
    }

    #berlin-steam-hub .berlin-steam-panel {
        border-radius: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .berlin-steam-tab,
    .berlin-steam-tab::before,
    #berlin-steam-hub .berlin-steam-panel.is-active {
        animation: none !important;
        transition: none !important;
    }
}

/* Steam Hub quick links placement + styling V49 */
#berlin-steam-hub .berlin-steam-hub-head {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding-bottom: 18px !important;
}

#berlin-steam-hub .berlin-steam-tabs {
    margin-bottom: 10px !important;
}

#berlin-steam-hub .berlin-steam-hub-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

#berlin-steam-hub .berlin-steam-jump {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border: 1px solid rgba(102, 192, 244, 0.26) !important;
    border-radius: 14px !important;
    color: #eaf7ff !important;
    background: linear-gradient(135deg, rgba(18, 43, 63, 0.92), rgba(7, 18, 30, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.14) !important;
    font-family: inherit !important;
    text-align: start !important;
    cursor: pointer !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

#berlin-steam-hub .berlin-steam-jump::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 3px !important;
    background: rgba(102, 192, 244, 0.8) !important;
    opacity: .72 !important;
    pointer-events: none !important;
}

#berlin-steam-hub .berlin-steam-jump:hover,
#berlin-steam-hub .berlin-steam-jump:focus-visible {
    border-color: rgba(102, 192, 244, 0.56) !important;
    background: linear-gradient(135deg, rgba(22, 57, 83, 0.98), rgba(8, 24, 39, 0.98)) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

#berlin-steam-hub .berlin-steam-jump-icon {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: rgba(102, 192, 244, 0.12) !important;
    border: 1px solid rgba(102, 192, 244, 0.18) !important;
    font-size: 1rem !important;
}

#berlin-steam-hub .berlin-steam-jump-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.2 !important;
}

#berlin-steam-hub .berlin-steam-jump-copy strong {
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

#berlin-steam-hub .berlin-steam-jump-copy small {
    display: block !important;
    color: rgba(226, 232, 240, .66) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

#berlin-steam-hub .berlin-steam-jump-arrow {
    justify-self: end !important;
    color: #66c0f4 !important;
    font-size: .72rem !important;
}

@media (max-width: 768px) {
    #berlin-steam-hub .berlin-steam-hub-actions {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    #berlin-steam-hub .berlin-steam-jump {
        min-height: 46px !important;
        grid-template-columns: 32px minmax(0, 1fr) 18px !important;
        gap: 7px !important;
        padding: 7px 8px !important;
        border-radius: 12px !important;
    }

    #berlin-steam-hub .berlin-steam-jump-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: .86rem !important;
    }

    #berlin-steam-hub .berlin-steam-jump-copy strong {
        font-size: .66rem !important;
    }

    #berlin-steam-hub .berlin-steam-jump-copy small {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #berlin-steam-hub .berlin-steam-hub-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Dots Only V76 */
/* Keep the swipe/navigation dots, remove only their shared pill/container chrome. */
#home .main-ad-banner.berlin-main-hero-banner .hero-slider-dots,
#home #ad-banner-container .hero-slider-dots,
#hero-slider-dots.hero-slider-dots {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#home .main-ad-banner.berlin-main-hero-banner .hero-slider-dots::before,
#home .main-ad-banner.berlin-main-hero-banner .hero-slider-dots::after,
#hero-slider-dots.hero-slider-dots::before,
#hero-slider-dots.hero-slider-dots::after {
    content: none !important;
    display: none !important;
}

.payment-summary-mainline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.payment-summary-thumbs {
    display: inline-flex !important;
    align-items: center !important;
    direction: ltr !important;
    flex: 0 0 auto !important;
}

.payment-summary-thumb,
.summary-tooltip-thumb,
.order-summary-mini-thumb {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid rgba(125, 225, 255, 0.55) !important;
    background: rgba(4, 20, 34, 0.85) !important;
}

.payment-summary-thumbs .payment-summary-thumb + .payment-summary-thumb {
    margin-left: -5px !important;
}

.payment-summary-thumb-more {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-left: -5px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(125, 225, 255, 0.45) !important;
    background: rgba(0, 83, 138, 0.92) !important;
    color: #eafaff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.payment-summary-title-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.summary-tooltip-product {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.summary-tooltip-product-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.summary-item-with-thumb {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.payment-header-box:has(.payment-summary-value) {
    overflow: visible !important;
    z-index: 40 !important;
}

.payment-header-box:has(.payment-summary-value) .detailed-summary-tooltip {
    width: min(280px, calc(100vw - 34px)) !important;
    background-color: rgba(0, 50, 100, 0.97) !important;
    background-image: linear-gradient(145deg, rgba(0, 112, 186, 0.96), rgba(0, 50, 100, 0.98)) !important;
    border: 1px solid rgba(125, 225, 255, 0.78) !important;
    color: #eefaff !important;
    box-shadow: 0 14px 34px rgba(0, 16, 34, 0.48) !important;
    z-index: var(--berlin-z-tooltip) !important;
}

.payment-header-box:has(.payment-summary-value) .detailed-summary-tooltip::after {
    border-color: transparent transparent rgba(125, 225, 255, 0.92) transparent !important;
}

.payment-header-box:has(.payment-summary-value) .summary-tooltip-item {
    border-bottom-color: rgba(160, 226, 255, 0.18) !important;
    color: #eefaff !important;
}

.payment-header-box:has(.payment-summary-value) .summary-tooltip-item span.qty {
    background: rgba(0, 151, 230, 0.92) !important;
    color: #fff !important;
}

.payment-header-box:has(.payment-summary-value) .summary-tooltip-total {
    border-top-color: rgba(160, 226, 255, 0.32) !important;
    color: #8fe8ff !important;
}

@media (min-width: 769px) {
    /* The order summary is the RTL-side box; shift its details left so it stays inside the payment modal. */
    .payment-header-box:has(.payment-summary-value) .detailed-summary-tooltip {
        transform: translateX(calc(-50% - 68px)) translateY(-10px) !important;
    }

    .payment-header-box:has(.payment-summary-value):hover .detailed-summary-tooltip {
        transform: translateX(calc(-50% - 68px)) translateY(0) !important;
    }

    .payment-header-box:has(.payment-summary-value) .detailed-summary-tooltip::after {
        left: calc(50% + 68px) !important;
    }
}

@media (max-width: 768px) {
    .payment-summary-thumb,
    .summary-tooltip-thumb,
    .order-summary-mini-thumb,
    .payment-summary-thumb-more {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .payment-header-box:has(.payment-summary-value) .detailed-summary-tooltip {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(-8px) !important;
    }

    .payment-header-box:has(.payment-summary-value):hover .detailed-summary-tooltip,
    .payment-header-box:has(.payment-summary-value):focus-within .detailed-summary-tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* Game Accounts: remove section shell on mobile + keep the 2-column grid */
/* fully centered inside the viewport. Personal gifting: remove right drift. */
@media (max-width: 768px) {
    /* "حسابات الألعاب": no outer section container on mobile. */
    html body #game-accounts-section.berlin-game-accounts-section {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 20px auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    html body #game-accounts-section.berlin-game-accounts-section::before,
    html body #game-accounts-section.berlin-game-accounts-section::after {
        content: none !important;
        display: none !important;
    }

    html body #game-accounts-section .berlin-game-accounts-header {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 8px !important;
    }

    /* Center cards exactly; prevent the left edge from leaving the viewport. */

    html body #gameAccountsProductsContainer > .berlin-game-account-card,
    html body #gameAccountsProductsContainer > .product-item,
    html body #gameAccountsProductsContainer > .subscription-item {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-self: stretch !important;
        transform: none !important;
    }

    /* "شراء لعبة على حسابك الشخصي": keep the panel and its card centered. */
    html body #berlin-steam-hub #personal-gifting-section.berlin-steam-panel {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }

    html body #berlin-steam-hub #personal-gifting-section > div[style*="display: flex"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body #berlin-steam-hub #personalGiftingContainer.products-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }
}

/* Hide gifting ad panels entirely on phones and move game-account cards */
/* further to the right while keeping the two-column grid inside the viewport. */
@media (max-width: 768px) {
    /* "شراء لعبة على حسابك الشخصي": remove both ad boards and their column. */
    html body #personal-gifting-section .personal-gifting-ads-column,
    html body #gifting-ad-container-1,
    html body #gifting-ad-container-2 {
        display: none !important;
    }

    /*
 * "حسابات الألعاب": stronger right nudge requested for mobile.
 * Reduce width by the same total safety space so no horizontal overflow appears.
 */
    html body #gameAccountsProductsContainer.berlin-game-accounts-grid {
box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 6px 6px 14px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: center !important;
        justify-items: stretch !important;
        transform: none !important;
        overflow: visible !important;
width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translateX(16px) !important;
}
}

@media (max-width: 360px) {
    html body #gameAccountsProductsContainer.berlin-game-accounts-grid {
padding-inline: 3px !important;
        gap: 8px !important;
width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        transform: translateX(10px) !important;
}
}

/* Hide Discord + My Orders beside the discovery sentence on mobile only. */
@media (max-width: 768px) {
    html body .berlin-home-discovery-row .berlin-home-mini-actions {
        display: none !important;
    }

    html body .berlin-home-discovery-row {
        justify-content: center !important;
    }

    html body .berlin-home-discovery-text {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .berlin-home-category-slot,
    .berlin-home-category-swipe-viewport,
    .berlin-home-category-swipe-track,
    .berlin-home-category-cards {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .berlin-home-category-slot::before,
    .berlin-home-category-slot::after,
    .berlin-home-category-swipe-viewport::before,
    .berlin-home-category-swipe-viewport::after,
    .berlin-home-category-swipe-track::before,
    .berlin-home-category-swipe-track::after {
        content: none !important;
        display: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .berlin-home-category-swipe-viewport {
width: 100%;
        padding: 2px 33px 4px;
width: 100% !important;
        padding: 2px 0 4px !important;
        overflow: hidden !important;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: contain;
        -webkit-tap-highlight-color: transparent;
}

    .berlin-home-category-swipe-track {
gap: 9px !important;
touch-action: pan-y pinch-zoom;
        -webkit-user-select: none;
        user-select: none;
}

    /* Mobile is touch-first: no arrow buttons at all. */
    .berlin-home-category-swipe-viewport .berlin-category-arrow,
    .berlin-home-category-swipe-viewport .berlin-category-arrow:hover,
    .berlin-home-category-swipe-viewport .berlin-category-arrow:focus,
    .berlin-home-category-swipe-viewport .berlin-category-arrow:focus-visible,
    .berlin-home-category-swipe-viewport .berlin-category-arrow:active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Keep each category as only image + title; no glass card / shadow shell. */
    .berlin-home-category-image-cards .berlin-home-category-card,
    .berlin-home-category-image-cards .berlin-home-category-card:hover,
    .berlin-home-category-image-cards .berlin-home-category-card:focus,
    .berlin-home-category-image-cards .berlin-home-category-card:focus-visible,
    .berlin-home-category-image-cards .berlin-home-category-card:active {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
    }

    .berlin-home-category-image-cards .berlin-home-category-card::before,
    .berlin-home-category-image-cards .berlin-home-category-card::after {
        content: none !important;
        display: none !important;
    }

    .berlin-home-category-image-cards .berlin-home-category-card > img {
height: 76px !important;
        min-height: 76px !important;
        border-radius: 12px !important;
box-shadow: none !important;
        filter: none !important;
}
}

/*
 * - Slimmer bottom navigation
 * - Centered Steam Gift Cards products on mobile
 */
@media (max-width: 768px) {

    .mobile-nav-btn {
        min-width: 0 !important;
        padding: 2px 0 1px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-btn svg {
        width: 21px !important;
        height: 21px !important;
        margin-bottom: 1px !important;
    }

    .mobile-nav-btn i {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .mobile-nav-btn .cart-count {
        top: 2px !important;
        padding: 1px 5px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    body {
        padding-top: 120px;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
    }

    #steamGiftCardsPage.steam-gift-cards-page {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #steamGiftCardsPageContainer.products-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 14px !important;
        width: min(100%, 430px) !important;
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 8px 4px !important;
        justify-content: center !important;
        justify-items: stretch !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #steamGiftCardsPageContainer .product-item {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 360px) {
    #steamGiftCardsPage.steam-gift-cards-page {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    #steamGiftCardsPageContainer.products-container {
        column-gap: 8px !important;
        row-gap: 10px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/*
 * - Hard symmetric clipping on both left and right edges
 * - Prevent transformed GPU layers from bleeding past viewport
 */

.berlin-home-category-swipe-track,
.berlin-home-category-swipe-track > .berlin-home-category-card,
.berlin-home-category-swipe-track > .berlin-home-category-card > img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/*
 * - Soft erase/fade on both carousel edges
 * - Mask lives on a stationary wrapper so it does not move with the track
 * - Navigation arrows remain fully visible and clickable
 */
.berlin-home-category-erase-mask {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overflow: clip !important;
    overflow-clip-margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        rgba(0, 0, 0, .28) 10px,
        #000 30px,
        #000 calc(100% - 30px),
        rgba(0, 0, 0, .28) calc(100% - 10px),
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        to right,
        transparent 0,
        rgba(0, 0, 0, .28) 10px,
        #000 30px,
        #000 calc(100% - 30px),
        rgba(0, 0, 0, .28) calc(100% - 10px),
        transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}

.berlin-home-category-erase-mask > .berlin-home-category-swipe-track {
    width: 100% !important;
}

@media (max-width: 768px) {
    .berlin-home-category-erase-mask {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, .32) 7px,
            #000 21px,
            #000 calc(100% - 21px),
            rgba(0, 0, 0, .32) calc(100% - 7px),
            transparent 100%
        ) !important;
        mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, .32) 7px,
            #000 21px,
            #000 calc(100% - 21px),
            rgba(0, 0, 0, .32) calc(100% - 7px),
            transparent 100%
        ) !important;
    }
}

/*
 * - Runs only while a category image is actually loading
 * - Shimmer moves with transform only (compositor-friendly)
 * - No animated blur, filter, shadow, background-position or JS loop
 * - Automatically becomes static on constrained/reduced-motion devices
 */
@keyframes berlin-category-skeleton-sweep-v85 {
    from { transform: translate3d(-155%, 0, 0); }
    to   { transform: translate3d(355%, 0, 0); }
}

.berlin-home-category-image-cards .berlin-home-category-card {

    isolation: isolate;
    min-height: 92px !important;
    aspect-ratio: 1.7 / 1 !important;

    overflow: hidden !important;

    outline: 0 !important;
    border-radius: 13px !important;
    background: #111522 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,.20) !important;
    text-decoration: none !important;
    transform: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
position: relative !important;
}

.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading > img {
    opacity: 0 !important;
    background: linear-gradient(135deg, #111827, #172033) !important;
}

.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 92px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #111827, #172033) !important;
    pointer-events: none !important;
}

.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    left: 0 !important;
    width: 34% !important;
    height: 92px !important;
    border-radius: 13px !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.035) 26%,
        rgba(255,255,255,.16) 50%,
        rgba(255,255,255,.035) 74%,
        rgba(255,255,255,0) 100%
    ) !important;
    transform: translate3d(-155%, 0, 0);
    will-change: transform;
    animation: berlin-category-skeleton-sweep-v85 1.15s linear infinite !important;
}

@media (max-width: 768px) {
    .berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::before,
    .berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::after {
        height: 76px !important;
        border-radius: 12px !important;
    }
}

/* Static fallback: keeps the placeholder but removes all animation work. */
.berlin-home-category-swipe-viewport.berlin-category-low-power
    .berlin-home-category-card.is-category-skeleton-loading::after {
    animation: none !important;
    display: none !important;
    will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::after {
        animation: none !important;
        display: none !important;
        will-change: auto !important;
    }
}

/*
 * Desktop only: move the fixed "My Orders" bar closer to navbar.
 * Mobile/tablet positions remain untouched.
 */
@media (min-width: 769px) {
    #my-orders-page .orders-header {
        top: 1px !important;
    }
}

/*
 * - Slightly reduces the top navbar footprint on desktop.
 * - Keeps the viewport scrollbar out of the navbar's visual area.
 */
@media (min-width: 993px) {
    #navbar {
        min-height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #navbar .logo-area img {
        width: 72px !important;
    }

    /*
 * Native scrollbars cannot participate in normal z-index stacking.
 * Moving the root scrollbar track below the navbar gives the intended
 * visual result: the scrollbar no longer paints over the navbar area.
 */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        background: rgba(20, 5, 40, 0.65);
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        margin-top: 36px;
    }
}

/*
 * Mouse and touch share Pointer Events. Movement is rAF-batched and
 * uses translate3d only so dragging stays on compositor layers.
 */
.berlin-home-category-swipe-viewport {
position: relative;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 2px 38px 4px;

    box-sizing: border-box;
    direction: ltr;
    contain: layout paint style;
overflow: hidden !important;
    overflow: clip !important;
    overflow-clip-margin: 0 !important;
    -webkit-clip-path: inset(0) !important;
    clip-path: inset(0) !important;
    isolation: isolate !important;
    contain: layout paint style !important;
touch-action: pan-y pinch-zoom;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.berlin-home-category-swipe-viewport.is-pointer-dragging {
    cursor: grabbing;
}

.berlin-home-category-swipe-track.is-dragging {
    will-change: transform !important;
}

.berlin-home-category-swipe-track.is-dragging > .berlin-home-category-card {
    pointer-events: none !important;
}

.berlin-home-category-swipe-track .berlin-home-category-card img {
opacity: .72;
    transition: opacity .18s ease !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
-webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

#home #ad-banner-container.main-ad-banner.berlin-main-hero-banner,
#home #ad-banner-container .ad-link-wrapper {
    touch-action: pan-y pinch-zoom;
}

#home #ad-banner-container.main-ad-banner.berlin-main-hero-banner {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

#home #ad-banner-container.berlin-hero-pointer-down {
    cursor: grabbing;
}

#home #ad-banner-container .hero-ad-img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * During direct manipulation both slide layers must be visible; inline
 * important transforms handle their live positions and snap animation.
 */
#home #ad-banner-container.berlin-hero-dragging .slide-item.is-active,
#home #ad-banner-container.berlin-hero-dragging .slide-item.is-buffer,
#home #ad-banner-container.berlin-hero-dragging .slide-item {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    will-change: transform !important;
}

@media (prefers-reduced-motion: reduce) {
    .berlin-home-category-swipe-viewport,
    #home #ad-banner-container.main-ad-banner.berlin-main-hero-banner {
        scroll-behavior: auto;
    }
}

/*
 * Fixes Chromium/GPU flicker caused by nested scale transforms +
 * paint containment + animated overlays on offline bundle cards.
 * Scoped ONLY to bundle products inside #offlineSteamContainer.
 */
#offlineSteamContainer .product-item.bundle-card,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle {
    contain: layout style !important;
    isolation: isolate !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    #offlineSteamContainer .product-item.bundle-card:hover,
    #offlineSteamContainer .product-item.berlin-dashboard-offline-bundle:hover {
        /* Keep the lift, remove nested scaling that caused the GPU flash. */
        transform: translate3d(0, -6px, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 5 !important;
    }
}

/* Keep the media layer stable while the mouse crosses the image. */
#offlineSteamContainer .product-item.bundle-card .product-image-wrapper,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle .product-image-wrapper {
    isolation: isolate !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: none !important;
    will-change: auto !important;
    overflow: hidden !important;
}

#offlineSteamContainer .product-item.bundle-card .product-image-wrapper img,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle .product-image-wrapper img,
#offlineSteamContainer .product-item.bundle-card:hover .product-image-wrapper img,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle:hover .product-image-wrapper img {
    transform: none !important;
    -webkit-transform: none !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
}

/* The image already has a visible card hover; avoid a second animated GPU layer. */
#offlineSteamContainer .product-item.bundle-card .product-image-wrapper::before,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle .product-image-wrapper::before,
#offlineSteamContainer .product-item.bundle-card:hover .product-image-wrapper::before,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle:hover .product-image-wrapper::before {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
}

/* Bundle particles were creating many compositor layers during the same hover. */
#offlineSteamContainer .product-item.bundle-card .fire-particles-container i,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle .fire-particles-container i,
#offlineSteamContainer .product-item.bundle-card:hover .fire-particles-container i,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle:hover .fire-particles-container i {
    animation: none !important;
    opacity: 0 !important;
    will-change: auto !important;
}

/* Avoid the generic product glow pseudo-layer fighting the image layer. */
#offlineSteamContainer .product-item.bundle-card::after,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle::after,
#offlineSteamContainer .product-item.bundle-card:hover::after,
#offlineSteamContainer .product-item.berlin-dashboard-offline-bundle:hover::after {
    opacity: 0 !important;
    animation: none !important;
}

.berlin-home-category-swipe-track.is-dragging,
#home #ad-banner-container.berlin-hero-dragging .slide-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.berlin-home-category-swipe-viewport,
#home #ad-banner-container.main-ad-banner.berlin-main-hero-banner {
    overscroll-behavior-x: contain;
}

/*
 * The grab cursor is owned only by the active pointer state.
 * It is removed immediately on pointerup/pointercancel by JS.
 */
.berlin-home-category-swipe-viewport:not(.is-pointer-dragging),
#home #ad-banner-container.main-ad-banner.berlin-main-hero-banner:not(.berlin-hero-pointer-down) {
    cursor: grab;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .berlin-home-category-swipe-track:not(.is-dragging):not(.is-swiping)
        > .berlin-home-category-card {
        transition: transform .18s cubic-bezier(.2,.7,.2,1) !important;
        will-change: auto !important;
    }

    .berlin-home-category-image-cards.berlin-home-category-swipe-track:not(.is-dragging):not(.is-swiping)
        > .berlin-home-category-card:hover {
        transform: translate3d(0, -4px, 0) !important;
        z-index: 3 !important;
    }
}

/* Never let the hover lift fight the live drag transform. */
.berlin-home-category-swipe-track.is-dragging
    > .berlin-home-category-card,
.berlin-home-category-swipe-track.is-swiping
    > .berlin-home-category-card {
    transform: none !important;
}

/* Footer payment logos: keep the original mobile footer unchanged */
@media (max-width: 768px) {
    .payment-icons-corner .footer-extra-payment-logo {
        display: none !important;
    }
}

/*
 * - Removes the page-level blank strip below the footer on mobile.
 * - Keeps the fixed mobile navigation clearance inside the footer background.
 * - Lets the product reviews iframe use its real content height.
 * - Gives the main product image clearly rounded corners.
 */

#productPage #productPageImage,
#productPage .product-image-section .main-image,
#productPage #mainImageContainer .main-image-placeholder {
    border-radius: 18px !important;
}

#productPage #productPageImage {
    overflow: hidden !important;
}

#productReviewsLazyMount.product-reviews-lazy-mount {
    min-height: 0 !important;
    height: auto !important;
    contain-intrinsic-size: auto 1px !important;
}

#productReviewsLazyIframe,
iframe.product-reviews-lazy-frame#productReviewsLazyIframe {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
    overflow: hidden !important;
}

.product-reviews-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    html,
    body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #footer {
        margin-bottom: 0 !important;
        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #productPage #productPageImage,
    #productPage .product-image-section .main-image,
    #productPage #mainImageContainer .main-image-placeholder {
        border-radius: 16px !important;
    }

    #productReviewsLazyMount.product-reviews-lazy-mount,
    #productReviewsLazyIframe {
        min-height: 0 !important;
    }
}

/* Guarantees the actual product image pixels use rounded corners without clipping page badges/actions. */
#productPage #productPageImage,
#productPage .product-image-section .main-image {
    border-radius: 18px !important;
    -webkit-clip-path: inset(0 round 18px);
    clip-path: inset(0 round 18px);
}

@media (max-width: 768px) {
    #productPage #productPageImage,
    #productPage .product-image-section .main-image {
        border-radius: 16px !important;
        -webkit-clip-path: inset(0 round 16px);
        clip-path: inset(0 round 16px);
    }
}

/*
 * Keeps the original shimmer effect intact while preventing the later
 * .tab-content background-color rule from making the text disappear.
 */
#productPage #extra-info.shimmer-text {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

/* Choose -> Add to Cart Guidance V1 */
@keyframes berlinProductOptionsRequiredPulse {
    0%, 100% {
        border-color: rgba(148, 210, 255, .22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 0 rgba(168, 85, 247, 0);
    }
    35% {
        border-color: rgba(192, 132, 252, .95);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 4px rgba(168, 85, 247, .17), 0 0 28px rgba(168, 85, 247, .38);
    }
    70% {
        border-color: rgba(103, 232, 249, .85);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 3px rgba(34, 211, 238, .13), 0 0 22px rgba(34, 211, 238, .25);
    }
}

#productPageOptionsPanel.product-page-options-panel.is-selection-required {
    animation: berlinProductOptionsRequiredPulse .9s ease-in-out 2 !important;
}

#productPageOptionsPanel.product-page-options-panel.is-selection-required .product-page-options-heading {
    color: #f5d0fe !important;
}

#productPageOptionsPanel.product-page-options-panel.is-selection-required .product-page-option-button:not(:disabled) {
    border-color: rgba(192, 132, 252, .58) !important;
}

#addToCartBtn[data-awaiting-product-option="true"] {
    cursor: pointer !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    #productPageOptionsPanel.product-page-options-panel.is-selection-required {
        animation: none !important;
        border-color: rgba(192, 132, 252, .95) !important;
        box-shadow: 0 0 0 4px rgba(168, 85, 247, .17), 0 0 24px rgba(168, 85, 247, .32) !important;
    }
}

/*
 * - No animated background-position, blur, filter or shadow
 * - Compositor-only transform animation
 * - Animation exists only while a supported image is pending
 * - Offscreen / low-power / reduced-motion images stay static
 */
@keyframes berlin-image-shimmer-sweep-v2 {
    from { transform: translate3d(-180%, 0, 0); }
    to   { transform: translate3d(430%, 0, 0); }
}

.berlin-image-loading-host {
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important;
    background-image: none !important;
    contain: paint;
}

.berlin-image-loading-host > img.berlin-image-skeleton:not(.berlin-image-ready):not(.berlin-image-error) {
    opacity: 0 !important;
}

.berlin-image-loading-host::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.03) 24%,
        rgba(255,255,255,.14) 50%,
        rgba(255,255,255,.03) 76%,
        transparent 100%
    );
    transform: translate3d(-180%, 0, 0);
    animation: none;
    will-change: auto;
}

.berlin-image-loading-host.berlin-image-shimmer-active::after {
    opacity: 1;
    will-change: transform;
    animation: berlin-image-shimmer-sweep-v2 1.35s ease-in-out infinite;
}

/* Dedicated hero loader uses the same lightweight sweep. */
html.berlin-image-shimmer-low-power .skeleton-loader::before,
html.berlin-image-shimmer-low-power .product-skeleton::after,
html.berlin-image-shimmer-low-power .main-image-placeholder::before {
    animation: none !important;
    opacity: 0 !important;
    will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .berlin-image-loading-host::after,
    .skeleton-loader::before,
    .product-skeleton::after,
    .main-image-placeholder::before,
    .berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::after {
        animation: none !important;
        opacity: 0 !important;
        will-change: auto !important;
    }
}

/*
 * - no skeleton fill/color at all
 * - only a lightweight white sheen while an image is pending
 * - diamond images are not used as a special loading visual
 */
.berlin-image-loading-host,
.skeleton-loader,
.product-skeleton,
.main-image-placeholder,
.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::before,
.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading > img {
    background-color: transparent !important;
    background-image: none !important;
}

/* Keep only the sheen layer; no dark base underneath it. */
.skeleton-loader::before,
.berlin-image-loading-host::after,
.product-skeleton::after,
.main-image-placeholder::before,
.berlin-home-category-image-cards .berlin-home-category-card.is-category-skeleton-loading::after {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.025) 28%,
        rgba(255,255,255,.13) 50%,
        rgba(255,255,255,.025) 72%,
        rgba(255,255,255,0) 100%
    ) !important;
    box-shadow: none !important;
    filter: none !important;
}

/* No icon / image / glyph inside the loader. */
.skeleton-loader::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Never paint the old permanent shimmer under normal product images. */
.product-image-wrapper::before {
    content: none !important;
    animation: none !important;
    background: none !important;
}

/* When the global runtime marks an image pending, the host remains transparent. */
.berlin-image-loading-host.berlin-image-shimmer-active {
    background: transparent !important;
}

#fortnite-boosting-placeholder:empty,
#cod-services-placeholder:empty {
    display: none !important;
}

#gaming-services-section #valorant-coaching-offer-card {
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 70, 85, .24), transparent 35%),
        linear-gradient(145deg, rgba(13, 20, 25, .96), rgba(28, 13, 20, .96)) !important;
}

#gaming-services-section #valorant-coaching-offer-card::after {
    content: "COACHING";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 5px 9px;
    border: 1px solid rgba(255, 70, 85, .55);
    border-radius: 999px;
    background: rgba(8, 12, 16, .76);
    color: #ff4655;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    box-shadow: 0 0 16px rgba(255, 70, 85, .18);
    pointer-events: none;
}

#gaming-services-section #valorant-coaching-offer-card button {
    border-color: #ff4655;
    color: #ff7a86;
}

#gaming-services-section #valorant-coaching-offer-card:hover button {
    background: #ff4655;
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 70, 85, .72);
}

/*
 * Mobile only: make offline product artwork 1:1 without
 * changing desktop cards or stretching the source image.
 */
@media (max-width: 768px) {
    #offlineSteamContainer .product-item .product-image-wrapper,
    #offlineSteamContainer .product-item--offline .product-image-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
        margin-bottom: 6px !important;
    }

    #offlineSteamContainer .product-item .product-image-wrapper > img,
    #offlineSteamContainer .product-item--offline .product-image-wrapper > img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
}

/* Custom horizontal sliders may handle only clear horizontal intent in JS. */
/* Native vertical/pinch gestures stay available, including diagonal swipes. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .berlin-home-category-swipe-viewport,
    .berlin-home-category-swipe-track,
    #home #ad-banner-container.main-ad-banner.berlin-main-hero-banner,
    #home #ad-banner-container .ad-link-wrapper {
        touch-action: pan-y pinch-zoom !important;
    }
}

/* Calculator stays on its own full row; dashboard product cards stay aligned */
/* together in the row below without affecting other product sections. */
#personalGiftingContainer.products-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 180px)) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#personalGiftingContainer.products-container > .calculator-card {
    grid-column: 1 / -1 !important;
    width: min(100%, 450px) !important;
    max-width: 450px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: center !important;
}

#personalGiftingContainer.products-container > .personal-gifting-card-lines {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
}

#personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
    grid-column: auto !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
    transform: none !important;
}

@media (max-width: 768px) {
    html body #personalGiftingContainer.products-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body #personalGiftingContainer.products-container > .calculator-card {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 450px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        justify-self: center !important;
    }

    html body #personalGiftingContainer.products-container > .personal-gifting-card-lines {
        display: none !important;
    }

    html body #personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        transform: none !important;
    }
}

@media (max-width: 360px) {
    html body #personalGiftingContainer.products-container {
        gap: 8px !important;
        padding-inline: 4px !important;
    }
}

/* Slightly smaller dashboard cards with a clearer gap between each card. */
#personalGiftingContainer.products-container {
    grid-template-columns: repeat(auto-fit, minmax(165px, 165px)) !important;
    column-gap: 26px !important;
    row-gap: 22px !important;
}

#personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
    width: 165px !important;
    max-width: 165px !important;
}

@media (max-width: 768px) {
    html body #personalGiftingContainer.products-container {
        grid-template-columns: repeat(2, minmax(0, 155px)) !important;
        justify-content: center !important;
        column-gap: 16px !important;
        row-gap: 16px !important;
        padding-inline: 8px !important;
    }

    html body #personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
        width: 155px !important;
        max-width: 155px !important;
        justify-self: center !important;
    }
}

@media (max-width: 360px) {
    html body #personalGiftingContainer.products-container {
        grid-template-columns: repeat(2, minmax(0, 145px)) !important;
        column-gap: 12px !important;
        row-gap: 14px !important;
    }

    html body #personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
        width: 145px !important;
        max-width: 145px !important;
    }
}

/* Smaller cards, more breathing room, and no short description in this area. */
#personalGiftingContainer.products-container {
    grid-template-columns: repeat(auto-fit, minmax(145px, 145px)) !important;
    column-gap: 28px !important;
    row-gap: 22px !important;
}

#personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
    width: 145px !important;
    max-width: 145px !important;
}

#personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) .product-description-text {
    display: none !important;
}

@media (max-width: 768px) {
    html body #personalGiftingContainer.products-container {
        grid-template-columns: repeat(2, minmax(0, 135px)) !important;
        justify-content: center !important;
        column-gap: 18px !important;
        row-gap: 18px !important;
        padding-inline: 8px !important;
    }

    html body #personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
        width: 135px !important;
        max-width: 135px !important;
        justify-self: center !important;
    }
}

@media (max-width: 360px) {
    html body #personalGiftingContainer.products-container {
        grid-template-columns: repeat(2, minmax(0, 128px)) !important;
        column-gap: 14px !important;
        row-gap: 16px !important;
    }

    html body #personalGiftingContainer.products-container > :is(.product-item, .product-card, .subscription-item) {
        width: 128px !important;
        max-width: 128px !important;
    }
}

/* respect OS reduced-motion without changing normal mode. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .main-products-section, .product-card, .main-ad-banner, .ad-link-wrapper {
        scroll-behavior: auto !important;
    }
}

/* final UI layer contract */
:root {
    --berlin-z-assistant: 1100;
}
#chat-bot-toggle,
.mobile-fab-container,
#live-chat-frame {
    z-index: var(--berlin-z-floating, 500) !important;
}
#bot-iframe-wrapper.is-open,
body.basha-bot-open #bot-iframe-wrapper {
    z-index: var(--berlin-z-assistant, 1100) !important;
}
body.berlin-commerce-modal-open #chat-bot-toggle,
body.berlin-commerce-modal-open .mobile-fab-container,
body.berlin-commerce-modal-open #live-chat-frame,
body.berlin-commerce-modal-open #bot-iframe-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.berlin-commerce-modal-open .tutorial-side-card,
body.berlin-commerce-modal-open .bundle-tip-toast {
    pointer-events: none !important;
}

/* Single visual layer + desktop clickability + scroll-safe mobile behavior */

#offlineSteamContainer .berlin-cod-navigation-card-v9,
#offlineSteamContainer [data-berlin-product-id="cod_category_card"],
#offlineSteamContainer [data-id="cod_category_card"] {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-tap-highlight-color: transparent !important;
    isolation: isolate !important;
    overflow: hidden !important;
    animation: none !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
    background: #09192a !important;
    border: 1px solid rgba(70, 170, 255, .52) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
}

#offlineSteamContainer .berlin-cod-navigation-card-v9:hover,
#offlineSteamContainer [data-berlin-product-id="cod_category_card"]:hover,
#offlineSteamContainer [data-id="cod_category_card"]:hover,
#offlineSteamContainer .berlin-cod-navigation-card-v9:focus-visible {
    transform: none !important;
    filter: none !important;
    border-color: rgba(101, 201, 255, .82) !important;
    box-shadow: 0 7px 20px rgba(0, 111, 184, .20) !important;
}

/* Kill the generic bundle/RGB pseudo-layers that made the card look doubled. */
#offlineSteamContainer .berlin-cod-navigation-card-v9::before,
#offlineSteamContainer .berlin-cod-navigation-card-v9::after,
#offlineSteamContainer [data-berlin-product-id="cod_category_card"]::before,
#offlineSteamContainer [data-berlin-product-id="cod_category_card"]::after,
#offlineSteamContainer [data-id="cod_category_card"]::before,
#offlineSteamContainer [data-id="cod_category_card"]::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}

#offlineSteamContainer .berlin-cod-navigation-card-v9 .fire-particles-container,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .fire-particles-container * {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-image-wrapper,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .sub-image-wrapper,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-content-overlay,
#offlineSteamContainer .berlin-cod-navigation-card-v9 h3,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .buy-btn {
    pointer-events: auto !important;
}

#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-image-wrapper,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .sub-image-wrapper,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-image-wrapper:hover,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .sub-image-wrapper:hover,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-image-wrapper img,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .sub-image-wrapper img,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .product-image-wrapper:hover img,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .sub-image-wrapper:hover img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    will-change: auto !important;
}

/* Hide every obsolete COD badge; V9 inserts exactly one badge. */
#offlineSteamContainer .berlin-cod-parts-badge-v6,
#offlineSteamContainer .berlin-cod-nav-badge-v8 {
    display: none !important;
}

#offlineSteamContainer .berlin-cod-nav-badge-v9 {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    z-index: 25 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(7, 21, 35, .94) !important;
    border: 1px solid rgba(91, 201, 255, .62) !important;
    color: #e5f8ff !important;
    font-size: .64rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .24) !important;
    pointer-events: none !important;
    user-select: none !important;
    animation: none !important;
    transform: none !important;
}

#offlineSteamContainer .berlin-cod-nav-badge-v9 i {
    color: #65c9ff !important;
    font-size: .70rem !important;
}

#offlineSteamContainer .berlin-cod-navigation-card-v9 .buy-btn,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .buy-btn:hover,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .buy-btn:focus,
#offlineSteamContainer .berlin-cod-navigation-card-v9 .buy-btn:active {
    cursor: pointer !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    background: linear-gradient(135deg, #087fd0, #00a8ff) !important;
    border: 1px solid rgba(124, 213, 255, .80) !important;
    box-shadow: 0 5px 15px rgba(0, 140, 255, .18) !important;
}

@media (max-width: 768px), (pointer: coarse) {
    #offlineSteamContainer .berlin-cod-navigation-card-v9,
    #offlineSteamContainer [data-berlin-product-id="cod_category_card"],
    #offlineSteamContainer [data-id="cod_category_card"] {
        touch-action: pan-y pinch-zoom !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    #offlineSteamContainer .berlin-cod-navigation-card-v9 *,
    #offlineSteamContainer [data-berlin-product-id="cod_category_card"] *,
    #offlineSteamContainer [data-id="cod_category_card"] * {
        animation: none !important;
        will-change: auto !important;
    }

    #offlineSteamContainer .berlin-cod-nav-badge-v9 {
        top: 6px !important;
        right: 6px !important;
        padding: 4px 7px !important;
        font-size: .61rem !important;
    }
}

/* Keeps #cartModal centered and shows recently-viewed suggestions as a separate left companion panel. */
#cartAlsoBuyPanel.cart-also-buy-panel {
    position: fixed;
    top: 50%;
    left: max(16px, calc(50% - 620px));
    width: clamp(230px, calc(50vw - 350px), 280px);
    max-height: min(72vh, 620px);
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
    background: rgba(30, 17, 50, .92);
    border: 1px solid #4a2f6c;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
    transform: translateY(-50%) translateX(-31px) scale(.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: calc(var(--berlin-z-modal, 2000) + 1);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    isolation: isolate;
}

#cartAlsoBuyPanel.cart-also-buy-panel.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(-13px) scale(1);
}

#cartAlsoBuyPanel .cart-also-buy-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#cartAlsoBuyPanel .cart-also-buy-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

#cartAlsoBuyPanel .cart-also-buy-heading > i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(124, 58, 237, .14);
    border: 1px solid rgba(124, 58, 237, .30);
    color: #c4b5fd;
    font-size: 15px;
}

#cartAlsoBuyPanel h3 {
    margin: 0;
    color: #f6fbff;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.35;
}

#cartAlsoBuyPanel .cart-also-buy-heading p {
    margin: 3px 0 0;
    color: #b9aec8;
    font-size: .68rem;
    font-weight: 700;
}

#cartAlsoBuyPanel .cart-also-buy-close {
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
    color: #e8def2;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

#cartAlsoBuyPanel .cart-also-buy-close:hover,
#cartAlsoBuyPanel .cart-also-buy-close:focus-visible {
    background: rgba(255, 100, 100, .12);
    border-color: rgba(255, 130, 130, .34);
    color: #ff9a9a;
    outline: none;
}

#cartAlsoBuyPanel .cart-also-buy-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, .65) transparent;
    padding-inline-end: 2px;
}

#cartAlsoBuyPanel .cart-also-buy-products::-webkit-scrollbar {
    width: 5px;
}

#cartAlsoBuyPanel .cart-also-buy-products::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, .62);
    border-radius: 999px;
}

#cartAlsoBuyPanel .cart-also-buy-card {
    width: 100%;
    min-height: 82px;
    margin: 0 !important;
    padding: 7px !important;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    direction: ltr;
    text-align: initial;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
    overflow: hidden;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

#cartAlsoBuyPanel .cart-also-buy-card:hover {
    background: rgba(124, 58, 237, .09);
    border-color: rgba(124, 58, 237, .44);
    transform: translateY(-1px);
}

#cartAlsoBuyPanel .cart-also-buy-card > img {
    width: 64px;
    height: 64px;
    display: block;
    object-fit: cover;
    border-radius: 9px;
    background: #160d24;
    cursor: pointer;
}

#cartAlsoBuyPanel .cart-also-buy-card > img:focus-visible {
    outline: 2px solid rgba(196, 181, 253, .72);
    outline-offset: 2px;
}

#cartAlsoBuyPanel .cart-also-buy-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    direction: rtl;
    text-align: right;
}

#cartAlsoBuyPanel .cart-also-buy-card-title {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f4f9fd;
    font-family: inherit;
    font-size: .73rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#cartAlsoBuyPanel .cart-also-buy-card-title:hover,
#cartAlsoBuyPanel .cart-also-buy-card-title:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    outline: none;
}

#cartAlsoBuyPanel .cart-also-buy-card-type {
    display: block;
    color: #b9aec8;
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cartAlsoBuyPanel .cart-also-buy-card-action {
    width: fit-content;
    min-height: 28px;
    margin: 3px 0 0 auto !important;
    padding: 5px 9px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(124, 58, 237, .46);
    border-radius: 8px;
    background: rgba(124, 58, 237, .14);
    color: #e9ddff;
    font-family: inherit;
    font-size: .64rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

#cartAlsoBuyPanel .cart-also-buy-card-action:hover,
#cartAlsoBuyPanel .cart-also-buy-card-action:focus-visible {
    background: rgba(124, 58, 237, .24);
    border-color: rgba(196, 181, 253, .62);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

#cartAlsoBuyPanel .cart-also-buy-card-action:active {
    transform: translateY(0) scale(.98);
}

#cartAlsoBuyPanel .cart-also-buy-card-action i {
    font-size: .64rem;
}

#cartAlsoBuyPanel .cart-also-buy-handle {
    display: none;
}

/* Mid-size and mobile: keep the cart exactly centered; suggestions become a left drawer/tab. */
@media (max-width: 760px) {
    #cartAlsoBuyPanel.cart-also-buy-panel,
    #cartAlsoBuyPanel.cart-also-buy-panel.is-visible {
        top: 50%;
        left: 0;
        width: min(270px, 78vw);
        max-height: min(68vh, 540px);
        border-radius: 0 18px 18px 0;
        transform: translate(calc(-100% + 42px), -50%);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: calc(var(--berlin-z-modal, 2000) + 3);
    }

    #cartAlsoBuyPanel.cart-also-buy-panel:not(.is-visible) {
        transform: translate(-105%, -50%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #cartAlsoBuyPanel.cart-also-buy-panel.is-visible.is-expanded {
        transform: translate(0, -50%);
    }

    #cartAlsoBuyPanel .cart-also-buy-handle {
        position: absolute;
        top: 50%;
        right: -42px;
        width: 42px;
        min-width: 42px;
        height: 118px;
        margin: 0 !important;
        padding: 7px 4px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transform: translateY(-50%);
        border: 1px solid #4a2f6c;
        border-left: 0;
        border-radius: 0 12px 12px 0;
        background: rgba(30, 17, 50, .98);
        color: #f2eafa;
        box-shadow: 8px 0 18px rgba(0, 0, 0, .24);
        cursor: pointer;
        z-index: 2;
    }

    #cartAlsoBuyPanel .cart-also-buy-handle span {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: .66rem;
        font-weight: 900;
        letter-spacing: .2px;
    }

    #cartAlsoBuyPanel .cart-also-buy-handle i {
        color: #c4b5fd;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    #cartAlsoBuyPanel.cart-also-buy-panel,
    #cartAlsoBuyPanel.cart-also-buy-panel.is-visible {
        width: min(245px, 82vw);
        max-height: 62vh;
        padding: 11px;
    }

    #cartAlsoBuyPanel .cart-also-buy-card {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 68px;
        gap: 8px;
    }

    #cartAlsoBuyPanel .cart-also-buy-card > img {
        width: 56px;
        height: 56px;
    }

    #cartAlsoBuyPanel h3 {
        font-size: .9rem;
    }
}

#cartAlsoBuyPanel .cart-also-buy-products {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#cartAlsoBuyPanel .cart-also-buy-header,
#cartAlsoBuyPanel .cart-also-buy-heading,
#cartAlsoBuyPanel .cart-also-buy-card,
#cartAlsoBuyPanel .cart-also-buy-card-content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#cartAlsoBuyPanel .cart-also-buy-card {
    overflow-x: hidden !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-action {
    min-height: 24px !important;
    padding: 4px 7px !important;
    gap: 4px !important;
    border-radius: 7px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-action i {
    font-size: .58rem !important;
}

@media (max-width: 480px) {
    #cartAlsoBuyPanel .cart-also-buy-card-action {
        min-height: 22px !important;
        padding: 3px 6px !important;
        gap: 3px !important;
        font-size: .55rem !important;
    }

    #cartAlsoBuyPanel .cart-also-buy-card-action i {
        font-size: .55rem !important;
    }
}

#cartAlsoBuyPanel .cart-also-buy-card-buy-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-buy-row .cart-also-buy-card-action {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-price {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    color: #22c55e !important;
    -webkit-text-fill-color: #22c55e !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, .16) !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-price[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    #cartAlsoBuyPanel .cart-also-buy-card-buy-row {
        gap: 6px !important;
    }
    #cartAlsoBuyPanel .cart-also-buy-card-price {
        font-size: .6rem !important;
    }
}

#cartAlsoBuyPanel .cart-also-buy-card-buy-row {
    justify-content: space-between !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-buy-row .cart-also-buy-card-action {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-price {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-inline-start: 6px !important;
    color: #22c55e !important;
    -webkit-text-fill-color: #22c55e !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-price[hidden] {
    display: none !important;
}

/* User requested the entire "اشترِ أيضًا معها" UI removed from mobile. */
@media (max-width: 760px) {
    #cartAlsoBuyPanel,
    #cartAlsoBuyPanel.cart-also-buy-panel,
    #cartAlsoBuyPanel.cart-also-buy-panel.is-visible,
    #cartAlsoBuyPanel .cart-also-buy-handle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/*
 * Berlin Also-Buy VERIFIED FINAL FIX
 * - desktop only
 * - price always visible beside Add to cart
 * - no horizontal overflow
 */
#cartAlsoBuyPanel .cart-also-buy-card-buy-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-action {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 72px) !important;
    margin: 0 !important;
}

#cartAlsoBuyPanel .cart-also-buy-card-price,
#cartAlsoBuyPanel .cart-also-buy-card-price[hidden] {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    color: #22c55e !important;
    -webkit-text-fill-color: #22c55e !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-shadow: 0 0 8px rgba(34,197,94,.18) !important;
}

#cartAlsoBuyPanel,
#cartAlsoBuyPanel * {
    box-sizing: border-box;
}

#cartAlsoBuyPanel .cart-also-buy-products,
#cartAlsoBuyPanel .cart-also-buy-card,
#cartAlsoBuyPanel .cart-also-buy-card-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Completely remove the whole companion panel from mobile view. */
@media (max-width: 900px) {
    #cartAlsoBuyPanel,
    #cartAlsoBuyPanel.cart-also-buy-panel,
    #cartAlsoBuyPanel.cart-also-buy-panel.is-visible,
    #cartAlsoBuyPanel.cart-also-buy-panel.is-expanded,
    #cartAlsoBuyPanel .cart-also-buy-handle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

#bundle-floating-bar .bundle-final-price-wrap,
#bundle-floating-bar .bundle-before-discount-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

#bundle-floating-bar .bundle-price-label {
    color: #dcfce7;
    font-size: .82em;
    font-weight: 800;
}

#bundle-floating-bar .bundle-old-price-label {
    color: #cbd5e1;
    font-size: .68em;
    font-weight: 800;
}

#bundle-floating-bar .bundle-before-discount-wrap {
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
}

#bundle-floating-bar .bundle-old-price {
    opacity: 1 !important;
    color: #cbd5e1 !important;
    font-size: .9em !important;
    font-weight: 800 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #fb7185 !important;
}

@media (max-width: 600px) {
    #bundle-floating-bar .bundle-price {
        gap: 5px !important;
    }
    #bundle-floating-bar .bundle-before-discount-wrap {
        padding: 2px 5px;
    }
    #bundle-floating-bar .bundle-price-label {
        font-size: .72em;
    }
    #bundle-floating-bar .bundle-old-price-label {
        font-size: .64em;
    }
}

/* رقم التحويل + سكرين التحويل: same cyan-glass identity as final payment. */

#paymentModal #payment-proof-modal.berlin-payment-proof-modal {
    background: rgba(0, 18, 36, 0.74) !important;
    -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
    backdrop-filter: blur(10px) saturate(112%) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__dialog {
    background-color: rgba(0, 50, 100, 0.76) !important;
    background-image: linear-gradient(145deg, rgba(0, 112, 186, 0.64), rgba(0, 50, 100, 0.78)) !important;
    border: 1px solid rgba(125, 225, 255, 0.72) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30) !important;
    -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
    backdrop-filter: blur(12px) saturate(118%) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__head {
    border-bottom-color: rgba(125, 225, 255, 0.22) !important;
    background: linear-gradient(180deg, rgba(125, 225, 255, 0.07), transparent) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__head strong,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__head strong i {
    color: #eafaff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__head strong i {
    text-shadow: 0 0 14px rgba(125, 225, 255, 0.52) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close {
    color: #bdefff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:hover,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:focus-visible {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(125, 225, 255, 0.55) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__choice-note {
    border-color: rgba(125, 225, 255, 0.34) !important;
    color: #dff7ff !important;
    background: rgba(0, 192, 255, 0.09) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__choice-note i {
    color: #7de1ff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__phone-label-row > label,
#paymentModal #payment-proof-modal .berlin-payment-proof__panel > label {
    color: #f1fbff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__panel > small,
#paymentModal #payment-proof-modal #payment-proof-phone-help,
#paymentModal #payment-proof-modal .berlin-payment-proof__upload-btn small,
#paymentModal #payment-proof-modal .berlin-payment-proof__status {
    color: #b8dfea !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__phone-input > i {
    color: #7de1ff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__phone-input input {
    color: #ffffff !important;
    background: rgba(0, 34, 68, 0.56) !important;
    border-color: rgba(125, 225, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__phone-input input::placeholder {
    color: rgba(207, 241, 250, 0.58) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__phone-input input:hover,
#paymentModal #payment-proof-modal .berlin-payment-proof__phone-input input:focus {
    border-color: #7de1ff !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.28) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__help-trigger {
    border-color: rgba(125, 225, 255, 0.48) !important;
    color: #bdefff !important;
    background: rgba(0, 192, 255, 0.10) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__help-trigger:hover,
#paymentModal #payment-proof-modal .berlin-payment-proof__help-trigger:focus-visible,
#paymentModal #payment-proof-modal .berlin-payment-proof__help.is-open .berlin-payment-proof__help-trigger {
    border-color: #7de1ff !important;
    color: #ffffff !important;
    background: rgba(0, 192, 255, 0.20) !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.22) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__help-tooltip {
    border-color: rgba(125, 225, 255, 0.42) !important;
    color: #eefcff !important;
    background: linear-gradient(145deg, rgba(0, 71, 120, 0.98), rgba(0, 35, 70, 0.98)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__help-tooltip::before {
    border-top-color: rgba(125, 225, 255, 0.42) !important;
    border-right-color: rgba(125, 225, 255, 0.42) !important;
    background: #00446f !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__help-tooltip span {
    color: #d7f6ff !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__upload-btn {
    border-color: rgba(125, 225, 255, 0.72) !important;
    color: #eafaff !important;
    background: rgba(0, 192, 255, 0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__upload-btn:hover,
#paymentModal #payment-proof-modal .berlin-payment-proof__upload-btn:focus-visible {
    border-color: #7de1ff !important;
    background: rgba(0, 192, 255, 0.16) !important;
    box-shadow: 0 0 12px rgba(125, 225, 255, 0.24) !important;
    transform: translateY(-1px) !important;
    outline: 0 !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__upload-btn > i {
    color: #7de1ff !important;
    filter: drop-shadow(0 0 7px rgba(125, 225, 255, 0.34)) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__progress {
    background: rgba(125, 225, 255, 0.12) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__progress span {
    background: linear-gradient(90deg, #00aeea, #7de1ff) !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.34) !important;
}

/* Keep success and error semantics recognizable, but make their surfaces fit the cyan glass. */
#paymentModal #payment-proof-modal .berlin-payment-proof__preview {
    border-color: rgba(125, 225, 255, 0.38) !important;
    background: rgba(0, 192, 255, 0.08) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__preview img {
    border: 1px solid rgba(125, 225, 255, 0.42) !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof__preview span {
    color: #b8dfea !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__actions {
    border-top: 1px solid rgba(125, 225, 255, 0.10) !important;
    padding-top: 12px !important;
}

#paymentModal #payment-proof-modal #payment-proof-modal-cancel {
    border-color: rgba(125, 225, 255, 0.34) !important;
    color: #d7f6ff !important;
    background: rgba(0, 192, 255, 0.055) !important;
}

#paymentModal #payment-proof-modal #payment-proof-modal-cancel:hover,
#paymentModal #payment-proof-modal #payment-proof-modal-cancel:focus-visible {
    border-color: rgba(125, 225, 255, 0.72) !important;
    background: rgba(0, 192, 255, 0.12) !important;
    outline: 0 !important;
}

#paymentModal #payment-proof-modal #payment-proof-modal-save {
    border-color: #7de1ff !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #00aeea, #0070ba) !important;
    box-shadow: 0 7px 18px rgba(0, 112, 186, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#paymentModal #payment-proof-modal #payment-proof-modal-save:hover,
#paymentModal #payment-proof-modal #payment-proof-modal-save:focus-visible {
    border-color: #b8f0ff !important;
    background: linear-gradient(135deg, #19c4ff, #007fc9) !important;
    box-shadow: 0 8px 22px rgba(0, 174, 234, 0.30), 0 0 12px rgba(125, 225, 255, 0.22) !important;
    outline: 0 !important;
}

@media (max-width: 480px) {
    #paymentModal #payment-proof-modal .berlin-payment-proof-modal__dialog {
        border-color: rgba(125, 225, 255, 0.64) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    }
}

/* X stays fully inside the cyan dialog and never inherits yellow hover styles. */
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(125, 225, 255, 0.30) !important;
    border-radius: 9px !important;
    color: #bdefff !important;
    background: rgba(0, 34, 68, 0.34) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    overflow: hidden !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:hover,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:focus-visible,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:active {
    border-color: #7de1ff !important;
    color: #ffffff !important;
    background: rgba(0, 192, 255, 0.16) !important;
    box-shadow: 0 0 11px rgba(125, 225, 255, 0.24) !important;
    text-shadow: 0 0 9px rgba(125, 225, 255, 0.42) !important;
    filter: none !important;
    transform: none !important;
    outline: 0 !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close::before,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close::after {
    content: none !important;
    display: none !important;
}

#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close i,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:hover i,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:focus-visible i,
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__close:active i {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: inherit !important;
    filter: none !important;
}

/* Internal breathing room so the centered title never collides with the X. */
#paymentModal #payment-proof-modal .berlin-payment-proof-modal__head {
    min-height: 54px !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
    box-sizing: border-box !important;
}

/* Screenshot preview and delete control stay completely within the card bounds. */
#paymentModal #payment-proof-modal .berlin-payment-proof__preview {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
}

#paymentModal #payment-proof-modal #payment-proof-remove-btn,
#paymentModal #payment-proof-modal .berlin-payment-proof__preview button {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
}

@media (max-width: 480px) {
    #paymentModal #payment-proof-modal .berlin-payment-proof-modal__close {
        top: 9px !important;
        left: 9px !important;
    }
    #paymentModal #payment-proof-modal .berlin-payment-proof-modal__head {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}

/* The compact "تأكيد الدفع / رقم التحويل / سكرين التحويل" bar now matches */
/* the same cyan-glass identity as the final payment and proof modals. */

#paymentModal #vodafone-payment-confirmation.berlin-payment-proof {
    border-color: rgba(125, 225, 255, 0.42) !important;
    background:
        linear-gradient(145deg, rgba(0, 112, 186, 0.22), rgba(0, 34, 68, 0.48)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 8px 20px rgba(0, 112, 186, 0.08) !important;
    -webkit-backdrop-filter: blur(9px) saturate(112%) !important;
    backdrop-filter: blur(9px) saturate(112%) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__compact-title {
    color: #eafaff !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__compact-title > i {
    color: #7de1ff !important;
    background: rgba(0, 192, 255, 0.12) !important;
    border: 1px solid rgba(125, 225, 255, 0.22) !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.10) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__title-text strong {
    color: #eefcff !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__title-text small {
    color: #acdce9 !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method {
    border-color: rgba(125, 225, 255, 0.20) !important;
    color: #c8eaf3 !important;
    background: rgba(0, 34, 68, 0.30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method::before {
    border-color: rgba(125, 225, 255, 0.62) !important;
    background: rgba(0, 34, 68, 0.62) !important;
    box-shadow: inset 0 0 0 2px rgba(0, 34, 68, 0.92) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method:hover,
#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method:focus-visible {
    color: #ffffff !important;
    border-color: rgba(125, 225, 255, 0.72) !important;
    background: rgba(0, 192, 255, 0.12) !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.16) !important;
    outline: 0 !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method.active {
    color: #ffffff !important;
    border-color: #7de1ff !important;
    background: linear-gradient(135deg, rgba(0, 174, 234, 0.23), rgba(0, 112, 186, 0.16)) !important;
    box-shadow: 0 0 11px rgba(125, 225, 255, 0.17) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method.active::before {
    border-color: #7de1ff !important;
    background: #7de1ff !important;
    box-shadow:
        inset 0 0 0 2px rgba(0, 64, 100, 0.95),
        0 0 8px rgba(125, 225, 255, 0.36) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method.is-dimmed {
    opacity: 0.48 !important;
    filter: saturate(0.72) brightness(0.84) !important;
    color: #8ebecb !important;
    border-color: rgba(125, 225, 255, 0.12) !important;
    background: rgba(0, 25, 50, 0.32) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method.is-dimmed:hover,
#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__method.is-dimmed:focus-visible {
    opacity: 0.78 !important;
    filter: none !important;
    color: #dff7ff !important;
    border-color: rgba(125, 225, 255, 0.46) !important;
    background: rgba(0, 192, 255, 0.09) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__change-btn {
    border-color: rgba(125, 225, 255, 0.34) !important;
    color: #dff7ff !important;
    background: rgba(0, 192, 255, 0.08) !important;
}

#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__change-btn:hover,
#paymentModal #vodafone-payment-confirmation .berlin-payment-proof__change-btn:focus-visible {
    border-color: #7de1ff !important;
    color: #ffffff !important;
    background: rgba(0, 192, 255, 0.15) !important;
    box-shadow: 0 0 10px rgba(125, 225, 255, 0.16) !important;
    outline: 0 !important;
}

/* Keep confirmed state readable while retaining the cyan-glass shell. */
#paymentModal #vodafone-payment-confirmation.berlin-payment-proof.is-confirmed {
    border-color: rgba(125, 225, 255, 0.40) !important;
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.11), rgba(0, 71, 120, 0.32)),
        rgba(0, 34, 68, 0.46) !important;
}

/* Keeps the AI iframe above the site's fixed mobile controls when it is open. */

:root {
    --berlin-z-assistant: 2147483000;
}

#bot-iframe-wrapper.is-open,
body.basha-bot-open #bot-iframe-wrapper {
    z-index: var(--berlin-z-assistant) !important;
}

@media (max-width: 768px) {
    body.basha-bot-open #bot-iframe-wrapper,
    #bot-iframe-wrapper.is-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        isolation: isolate !important;
        transform: translateZ(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2147483000 !important;
    }

    body.basha-bot-open #basha-bot-frame,
    #bot-iframe-wrapper.is-open #basha-bot-frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: block !important;
        pointer-events: auto !important;
        z-index: 1 !important;
    }

    /* The site's bottom navigation/FAB must never cover the assistant. */
    body.basha-bot-open #mobile-nav,
    body.basha-bot-open .mobile-fab-container,
    body.basha-bot-open .mobile-fab-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    /* Keep the close control above the iframe itself. */
    body.basha-bot-open #chat-bot-toggle {
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2147483001 !important;
    }
}

/*
 * Basha Bot Desktop Position V30
 * PC only: lift the iframe slightly higher.
 * Mobile remains fullscreen through the existing <=768px rules.
 */
@media (min-width: 769px) {
    body.basha-bot-open #bot-iframe-wrapper,
    #bot-iframe-wrapper.is-open {
        top: auto !important;
        bottom: 125px !important;
        left: 20px !important;
        right: auto !important;
        width: 380px !important;
        height: 600px !important;
        max-height: min(600px, calc(100vh - 155px)) !important;
        transform: none !important;
    }

    #bot-iframe-wrapper iframe,
    #basha-bot-frame {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 640px) {
    #software-keys-section {
        padding-inline: 9px !important;
    }

    #software-keys-section #berlinGiftCardOffers.berlin-gift-card-products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .sub-image-wrapper {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1.45 / 1 !important;
        overflow: hidden !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .sub-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .sub-content {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 7px !important;
        min-width: 0 !important;
        padding: 9px !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item h3 {
        margin: 0 !important;
        min-height: 2.5em;
        font-size: .78rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .sub-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin-top: auto !important;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .sub-price {
        min-width: 0 !important;
        font-size: .68rem !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    #software-keys-section #berlinGiftCardOffers > .subscription-item .buy-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        font-size: .68rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    #software-keys-section #berlinGiftCardOffers > .berlin-gift-route-product .sub-image-wrapper {
        min-height: 0 !important;
        aspect-ratio: 1.45 / 1 !important;
    }

    #software-keys-section #berlinGiftCardOffers > .berlin-gift-route-product .sub-image-wrapper i {
        font-size: 42px !important;
    }
}

@media (max-width: 355px) {
    #software-keys-section #berlinGiftCardOffers.berlin-gift-card-products {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .berlin-home-category-swipe-viewport,
    .berlin-home-category-erase-mask,
    .berlin-home-category-swipe-track,
    .berlin-home-category-swipe-track > .berlin-home-category-card,
    .berlin-home-category-swipe-track > .berlin-home-category-card > img {
        touch-action: pan-y pinch-zoom !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .berlin-home-category-swipe-viewport.is-pointer-dragging,
    .berlin-home-category-swipe-track.is-dragging {
        cursor: grabbing !important;
    }
}


/* Mobile category cards: native finger swipe, desktop carousel unchanged. */
@media (max-width: 768px) {
    .berlin-home-category-swipe-viewport.berlin-category-native-mobile {
        overflow: hidden !important;
        overflow: clip !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        overscroll-behavior-x: contain !important;
        contain: layout paint style !important;
    }

    .berlin-home-category-swipe-viewport.berlin-category-native-mobile .berlin-home-category-erase-mask {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        scroll-behavior: smooth;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        padding-inline: 0 !important;
        direction: ltr !important;
    }

    .berlin-home-category-swipe-viewport.berlin-category-native-mobile .berlin-home-category-erase-mask::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .berlin-home-category-swipe-viewport.berlin-category-native-mobile .berlin-home-category-swipe-track.berlin-category-native-mobile-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
        overflow: visible !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        padding-inline: 4px !important;
    }

    .berlin-home-category-swipe-viewport.berlin-category-native-mobile .berlin-home-category-swipe-track.berlin-category-native-mobile-track > .berlin-home-category-card,
    .berlin-home-category-swipe-viewport.berlin-category-native-mobile .berlin-home-category-swipe-track.berlin-category-native-mobile-track > .berlin-home-category-card[hidden] {
        display: block !important;
        flex: 0 0 124px !important;
        width: 124px !important;
        min-width: 124px !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   BERLIN GLOBAL LIGHT-PURPLE TEXT SELECTION
   Keeps mouse/text selection consistent across the whole site.
   ========================================================= */
*::selection {
    background-color: #d8b4fe !important;
    color: #2e1065 !important;
    text-shadow: none !important;
}

*::-moz-selection {
    background-color: #d8b4fe !important;
    color: #2e1065 !important;
    text-shadow: none !important;
}


/* BERLIN DEALER PROGRAM V1 */
.berlin-dealer-cta{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;width:min(1180px,calc(100% - 36px));margin:30px auto 18px;padding:28px 32px;overflow:hidden;border:1px solid rgba(167,139,250,.34);border-radius:24px;background:linear-gradient(135deg,rgba(24,18,42,.97),rgba(16,24,39,.97));box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);text-align:right}.berlin-dealer-cta-glow{position:absolute;z-index:-1;width:360px;height:360px;right:-120px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.28),transparent 67%);pointer-events:none}.berlin-dealer-cta-copy{min-width:0}.berlin-dealer-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;color:#c4b5fd;font-size:.76rem;font-weight:900;letter-spacing:.2px}.berlin-dealer-cta h2{margin:0;color:#fff;font-size:1.7rem;font-weight:950}.berlin-dealer-cta p{margin:7px 0 13px;color:#cbd5e1;line-height:1.75;font-size:.93rem}.berlin-dealer-benefits{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.berlin-dealer-benefits span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#e2e8f0;font-size:.72rem;font-weight:800}.berlin-dealer-benefits i{color:#a78bfa}.berlin-dealer-cta-btn,.berlin-dealer-submit{border:0;cursor:pointer;font-family:inherit;font-weight:950}.berlin-dealer-cta-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:11px 20px;border:1px solid rgba(196,181,253,.38);border-radius:14px;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 12px 28px rgba(91,33,182,.26);transition:transform .18s ease,box-shadow .18s ease}.berlin-dealer-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(91,33,182,.34)}.berlin-dealer-modal{position:fixed;inset:0;z-index:2147482500;display:none;align-items:center;justify-content:center;padding:20px}.berlin-dealer-modal.is-open{display:flex}.berlin-dealer-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.78);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.berlin-dealer-modal-card{position:relative;z-index:1;width:min(760px,100%);max-height:min(92vh,880px);overflow:auto;padding:26px;border:1px solid rgba(167,139,250,.28);border-radius:22px;background:linear-gradient(155deg,#111827,#0b1020);box-shadow:0 26px 80px rgba(0,0,0,.52);direction:rtl}.berlin-dealer-modal-close{position:absolute;top:14px;left:14px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.04);color:#cbd5e1;cursor:pointer}.berlin-dealer-modal-head{padding-left:44px;margin-bottom:20px}.berlin-dealer-modal-head h2{margin:0;color:#fff;font-size:1.45rem}.berlin-dealer-modal-head p{margin:7px 0 0;color:#94a3b8;line-height:1.75;font-size:.86rem}.berlin-dealer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.berlin-dealer-form label{display:flex;flex-direction:column;gap:7px;min-width:0}.berlin-dealer-form label>span{color:#dbe4ef;font-size:.78rem;font-weight:850}.berlin-dealer-form label small{color:#64748b;font-size:.7rem;font-weight:700}.berlin-dealer-form input,.berlin-dealer-form select,.berlin-dealer-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.18);border-radius:11px;outline:0;background:rgba(2,6,23,.58);color:#fff;padding:10px 11px;font:inherit;font-size:.86rem;transition:border-color .18s ease,box-shadow .18s ease}.berlin-dealer-form input,.berlin-dealer-form select{min-height:44px}.berlin-dealer-form textarea{resize:vertical;min-height:95px}.berlin-dealer-form input:focus,.berlin-dealer-form select:focus,.berlin-dealer-form textarea:focus{border-color:rgba(167,139,250,.7);box-shadow:0 0 0 3px rgba(139,92,246,.11)}.berlin-dealer-field-full{grid-column:1/-1}.berlin-dealer-form-status{min-height:20px;margin:13px 0 8px;padding:0 2px;color:#94a3b8;font-size:.78rem;font-weight:750}.berlin-dealer-form-status.is-success{color:#86efac}.berlin-dealer-form-status.is-error{color:#fca5a5}.berlin-dealer-form-status.is-loading{color:#c4b5fd}.berlin-dealer-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 10px 26px rgba(109,40,217,.23)}.berlin-dealer-submit:disabled{opacity:.65;cursor:wait}.berlin-dealer-privacy{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:10px 0 0;color:#64748b;font-size:.69rem;line-height:1.6;text-align:center}body.berlin-dealer-modal-open{overflow:hidden!important}@media(max-width:700px){.berlin-dealer-cta{width:calc(100% - 24px);margin:22px auto 14px;padding:20px 17px;gap:16px;flex-direction:column;align-items:stretch;border-radius:18px}.berlin-dealer-cta h2{font-size:1.35rem}.berlin-dealer-cta p{font-size:.82rem;margin-bottom:11px}.berlin-dealer-benefits{gap:6px}.berlin-dealer-benefits span{font-size:.66rem;padding:5px 7px}.berlin-dealer-cta-btn{width:100%;min-height:46px}.berlin-dealer-modal{padding:10px}.berlin-dealer-modal-card{padding:20px 14px 18px;border-radius:17px;max-height:94vh}.berlin-dealer-modal-head{padding:0 0 0 38px}.berlin-dealer-modal-head h2{font-size:1.18rem}.berlin-dealer-modal-head p{font-size:.78rem}.berlin-dealer-form-grid{grid-template-columns:1fr;gap:10px}.berlin-dealer-field-full{grid-column:auto}.berlin-dealer-form input,.berlin-dealer-form select,.berlin-dealer-form textarea{font-size:16px}.berlin-dealer-modal-close{top:11px;left:11px;width:34px;height:34px}}