.button,
.faq label,
.gamecard,
.img,
.step-card {
    cursor: pointer
}

.game-link,
.product_card a,
.result-item {
    text-decoration: none
}

.red {
    color: var(--wd-primary-color)
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

@media (max-width:767px) {
    .for-stars::before {
        z-index: 1;
        opacity: .4;
        background-image: url('https://www.ggsmurfs.com/wp-content/uploads/2024/11/red-bg_compress.webp') !important
    }

    #hero-section-bg .elementor-element-2c06831::before {
        backdrop-filter: blur(6px);
        background-image: linear-gradient(180deg, transparent, #0e0e11 50%) !important;
        z-index: 0
    }

    #hero-section-bg .elementor-container.elementor-column-gap-no::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100vh;
        left: 0;
        opacity: 1;
        backdrop-filter: contrast(9);
        z-index: 0;
        background-image: url('https://www.ggsmurfs.com/wp-content/uploads/2024/11/main-bg-compressed.webp') !important
    }

    #hero-section-bg::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100vw;
        height: 57vh !important;
        left: 0;
        mix-blend-mode: softlight;
        opacity: .5;
        z-index: 1;
        background-image: url('https://www.ggsmurfs.com/wp-content/uploads/2024/11/white-shadow-compress.webp') !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top
    }

    .for-stars::before {
        height: 57vh !important
    }
}

.login-form-side.wd-side-hidden.wd-right.wd-opened,
.wd-search-full-screen {
    display: none !important
}

.imgs-parent {
    display: flex;
    gap: .4rem;
    perspective: 60rem
}

header.innerpage .whb-row.whb-general-header {
    background-color: #07080a !important;
    backdrop-filter: blur(10px);
    padding: 5px 0;
    border-bottom: 1px solid #2a2a2a57 !important
}

.img {
    border-radius: 14px;
    width: 14.4rem;
    height: 19rem;
    margin: 0 3px;
    background-size: cover;
    background-position: center;
    transition: transform 1.25s var(--transition), filter 3s var(--transition), width .3s var(--transition);
    position: relative;
    will-change: transform, filter
}

.img:hover {
    box-shadow: 1px 1px 5px #fff
}

.wd-header-my-account {
    border-radius: 10px;
    background: var(--wd-primary-color)
}

body.page-id-10279 .main-page-wrapper::before,
body.page-id-11093 .main-page-wrapper::before {
    content: '';
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .06;
    position: absolute;
    top: -27px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-height: 500px
}

.bg-image-cate,
body.page-id-10423 .main-page-wrapper::before {
    background-size: cover;
    opacity: .04;
    left: 0;
    background-repeat: no-repeat;
    position: absolute
}

body.page-id-10279 .main-page-wrapper::after,
body.page-id-11093 .main-page-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: linear-gradient(360deg, #0e0f10, transparent);
    backdrop-filter: blur(3px);
    max-height: 500px
}

section.bg-img-div,
section.bg-img-div div {
    position: static !important
}

.bg-image-cate {
    width: 100vw;
    height: 54vh;
    top: 63px;
    background-position: top
}

.data-head,
.ft-separater-after,
.ft-separater-before,
.itc-select,
.range-input,
.relative,
.search-box,
.slider-header,
body.page-id-10279 .main-page-wrapper,
body.page-id-11093 .main-page-wrapper,
body.single-product.postid-1143 {
    position: relative
}

body.page-id-10423 .main-page-wrapper::before {
    content: '';
    background-image: var(--bg-image);
    background-attachment: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 100vh
}

.elementor-element-54d60584 {
    backdrop-filter: blur(0px) !important
}

body:not(.page-id-3529, .woocommerce-checkout) .main-page-wrapper {
    padding-bottom: 50px
}

.main-page-wrapper {
    --bg-image: url('https://ggsmurfs.com/wp-content/uploads/2024/11/default-2-1.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    background-color: #0e0e11 !important
}

#hero-section-bg,
#hero-section-bg .elementor-container.elementor-column-gap-no,
#hero-section-bg .elementor-element-2c06831,
#hero-section-bg .elementor-widget-wrap.elementor-element-populated,
.elementor-section.for-stars {
    position: static
}

.scrollToTop.button-show {
    background-color: var(--wd-primary-color)
}

.search-container {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 100%
}

.search-box input:hover .search-box {
    backdrop-filter: blur(186px)
}

.search-box i {
    z-index: 9
}

.input-border:hover {
    background: #2f2f2f1c;
    border: 1px solid #5454546e;
    box-shadow: 0 0 11px #7876764d inset
}

.search-box :has(input:focus) {
    box-shadow: 0 0 5px #ffffff4a
}

input:focus {
    backdrop-filter: blur(112px);
    background: #9999991f
}

#payment_card .elementor-column-gap-default {
    max-width: 1280px !important
}

.input-border:has(.search-box input:focus) {
    background: #0b0c0f;
    border: 1px solid #5454546e;
    box-shadow: 0 0 11px #0b0c0f inset;
    border-radius: 12px 12px 0 0
}

.input-border {
    width: 55%;
    padding: 6px;
    border: 1px solid #5454546e;
    border-radius: 9px;
    box-shadow: 0 0 1px #524f4f inset;
    background: #111213
}

.page-id-12 {
    --bgcolor-white: #0b0c0f9c !important
}

.payment_methods .payment_box {
    background-color: #18191c !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important
}

.payment_methods .payment_box.payment_method_bacs:before,
.payment_methods .payment_box.payment_method_stripe:before {
    position: absolute;
    top: -4px;
    inset-inline-start: 25px;
    color: #18191c !important;
    font-size: 32px;
    line-height: 0;
    content: "\f151";
    font-family: woodmart-font
}

.input-border input[type=search] {
    border: 1px !important;
    padding: 4px 45px !important
}

.single-imageconaint {
    display: flex;
    justify-content: center;
    height: 480px;
    width: 854px
}

.search-box {
    border: 1px solid #5d5d5d54;
    width: 100%;
    background: linear-gradient(to bottom, rgb(18 18 19), rgb(15 15 15 / 0%));
    border-radius: 6px;
    overflow: hidden
}

input[type=search] {
    width: 100%;
    padding: 6px 12px 6px 40px;
    border: none;
    outline: 0;
    border-radius: 12px;
    background: 0 0;
    color: #fff
}

input[type=search]::placeholder {
    color: rgba(156, 163, 175, .8)
}

.results-container {
    margin-top: -27px;
    border: 1px solid #5454546e;
    border-top: 0;
    background-color: #171717;
    background-image: linear-gradient(180deg, #0b0c0f94, #171717 44%), url(https://cdn.gameboost.com/static/illustrations/results-section.png);
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 9;
    width: 55%;
    max-height: 375px;
    max-width: 99%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    flex-direction: column;
    border-radius: 0 0 12px 12px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 25px rgba(0, 0, 0, .5);
    scrollbar-width: thin;
    scrollbar-color: #ffffff #00000008
}

.custom-slider,
.faq label,
.product_card,
.result-info,
.slide-content,
.step-card {
    overflow: hidden
}

.results-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: .875rem;
    color: #888
}

.results-title {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em
}

.cashback b,
.game-link:hover,
.price-section .woocommerce-Price-amount.amount,
.result-count {
    color: #fff
}

.result-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    transition: background .3s;
    color: inherit
}

.container.two,
.result-info {
    display: flex;
    flex-direction: column
}

.result-item:hover {
    background: linear-gradient(to bottom, rgba(188, 195, 231, .1), rgba(188, 195, 231, .05))
}

.results-list .result-item img {
    width: 32px !important;
    height: 32px !important
}

.filter-panel label {
    text-transform: capitalize
}

.result-info {
    gap: 4px;
    font-size: .875rem;
    color: #fff;
    margin-left: 2%
}

.result-title {
    font-weight: 500
}

.arrow-icon {
    opacity: 0;
    transition: opacity .3s
}

.result-item:hover .arrow-icon {
    opacity: 1
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 102px;
    pointer-events: none;
    background: linear-gradient(to top, #151721, rgba(255, 255, 255, 0));
    border-radius: 16px
}

.custome-scrollbar::-webkit-scrollbar,
.results-container::-webkit-scrollbar {
    width: 8px;
    border-radius: 25px
}

.custome-scrollbar::-webkit-scrollbar-track,
.results-container::-webkit-scrollbar-track {
    background: #3c3737;
    border-radius: 10px
}

.custome-scrollbar::-webkit-scrollbar-thumb,
.results-container::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px
}

.custome-scrollbar::-webkit-scrollbar-thumb:hover,
.results-container::-webkit-scrollbar-thumb:hover {
    background: #888
}

.main-tabs .elementor-image-box-wrapper figure.elementor-image-box-img {
    margin: 5px auto !important;
    height: 65px;
    box-shadow: 0 0 5px #02020294 inset;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #ed1c24;
    background-color: rgba(196, 33, 33, .2);
    display: flex;
    justify-content: center;
    backdrop-filter: blur(35px);
    transition: .5s ease-in-out
}

#reset-filter,
#testimonial .elementor-element-09602f1,
.elementor.elementor-3529 {
    margin: 0 !important
}

.whb-color-light:not(.whb-with-bg) {
    backdrop-filter: blur(2px)
}

.whb-sticked .whb-color-light:not(.whb-with-bg) {
    background-color: #ffffff0d;
    backdrop-filter: blur(10px);
    padding: 5px 0;
    border-bottom: 1px solid #252525 !important
}

.custom-slider .slide .card,
.search-section,
.service-card,
.step-card {
    backdrop-filter: blur(12px)
}

.container.two {
    padding: 0;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.image-container {
    width: 72%
}

.content-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.step-card,
.steps {
    gap: 15px;
    display: flex
}

.card-bottom span,
.content-text,
.data-item span {
    text-align: center
}

.title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff
}

.icon,
.step-title {
    font-size: 1.5rem
}

.description,
.detail-options,
.mt {
    margin-top: 15px
}

.steps {
    flex-direction: column;
    padding: 0 50px 0 0;
    width: 80%
}

.step-card {
    padding: 17px;
    border-radius: 10px;
    background-color: #ffffff1f;
    position: relative;
    transition: background-color .3s
}

.step-card p {
    display: none;
    opacity: 0;
    height: 0;
    transition: opacity .4s, height .4s
}

.step-card.active {
    background-color: var(--wd-primary-color);
    color: #fff
}

.step-card.active p {
    display: block;
    opacity: 1;
    height: auto
}

.step-title {
    font-weight: 400;
    margin: 0
}

.step-card.active .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #dacfcf;
    animation: 7s linear infinite progress
}

@keyframes progress {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.image-container {
    display: flex;
    justify-content: center
}

.illustration {
    width: 58%;
    height: auto
}

#testimonial .custom-slider::before {
    left: 0;
    top: 0;
    width: 300px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #0e0e11);
    height: 100%;
    z-index: 999
}

#testimonial .custom-slider::after {
    z-index: 999;
    width: 300px;
    background: linear-gradient(to right, #0e0e11, rgba(255, 255, 255, 0));
    height: 100%
}

#more-than-talk,
#testimonial .elementor-container {
    margin: 0;
    max-width: 100% !important
}

.custom-slider {
    height: auto;
    margin: auto;
    position: relative;
    width: 100%
}

.custom-slider::after,
.custom-slider::before {
    content: "";
    height: auto;
    position: absolute;
    width: 200px;
    z-index: 2
}

.custom-slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg)
}

.custom-slider::before {
    left: 0;
    top: 0
}

.custom-slider .slide-track-right:hover,
.custom-slider .slide-track:hover {
    animation-play-state: paused
}

.custom-slider .slide-track {
    display: flex;
    animation: 40s linear infinite scroll;
    width: calc(250px * 14);
    gap: 20px
}

.custom-slider .slide-track-right {
    display: flex;
    animation: 40s linear infinite scrolls;
    width: calc(250px * 14);
    gap: 20px
}

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

    100% {
        transform: translateX(calc(-250px * 7))
    }
}

@keyframes scrolls {
    0% {
        transform: translateX(calc(-250px * 7))
    }

    100% {
        transform: translateX(0)
    }
}

.custom-slider .slide .card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff1f;
    border: 1px solid #ccc;
    margin-right: 1.5rem;
    width: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    max-width: 28rem;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    margin-top: .75rem
}

.header {
    display: flex;
    width: 100%;
    gap: 1rem
}

.info,
.location {
    display: flex;
    gap: .25rem
}

.whb-header {
    z-index: 9999;
    position: relative
}

.avatar {
    width: 3rem;
    height: 3rem !important;
    border-radius: 50% !important;
    object-fit: cover
}

.info {
    flex-direction: column;
    width: 100%
}

.name-rating {
    display: flex;
    align-items: center
}

.archive-account-content p,
.extra-inputs li label,
.left-nav p,
.name,
.platform p,
.product-content-main .product-description .card_title {
    margin: 0
}

.fa-star {
    margin-left: auto;
    color: #dd742a
}

.location {
    align-items: baseline
}

.country {
    font-size: .875rem;
    color: #d1d0d0
}

.review {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #d1d0d0
}

.dropdown-wrapper {
    background-image: linear-gradient(180deg, #171717, #171717 44%);
    display: none;
    position: fixed;
    border-radius: 15px;
    left: 15%;
    top: 20%;
    z-index: 999999;
    width: 55%;
    max-width: 909px
}

.dropdown-content {
    border-radius: 15px 15px 8px 8px;
    background-position: center top;
    background-image: linear-gradient(180deg, #3838385e, #171717 44%), url(https://cdn.gameboost.com/static/illustrations/results-section.png);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    padding: 0
}

.search-section {
    border-bottom: 1px solid #3d3d3d;
    background: #131313f7;
    border-radius: 15px
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #aaa
}

.games-section {
    padding: 20px
}

.section-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px
}

.icon-danger {
    color: #ff4d4d;
    margin-right: 5px
}

.custom-button i.icon,
.fast-secure-checkout span i,
.game-logo,
.platform-dropdown ul li label img {
    margin-right: 10px
}

.games-grid {
    display: grid;
    margin-top: 20px;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px
}

.dropdown-wrapper #game-search-input {
    border: 0;
    padding: 0 45px
}

.game-link {
    display: flex;
    align-items: center;
    padding: 0 10px 13px 0;
    border-radius: 6px;
    transition: background-color .2s;
    color: #c8c8c8
}

.game-link:hover img.game-logo {
    scale: 1.2
}

.game-logo {
    width: 24px;
    height: 24px;
    transition: .5s ease-in-out
}

.select-game-primary-btn .custom-button .icon {
    font-size: 1.2rem
}

.select-game-primary-btn .custom-button {
    text-transform: capitalize;
    padding: 14px 10px;
    font-size: 15px;
    line-height: 18px;
    background-color: hsl(217.89 10.61% 64.9% / 10%);
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #6f6f6f;
    border-radius: 28px;
    box-shadow: none;
    cursor: pointer;
    transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s, opacity .25s;
    gap: 0
}

header #main-select-game-dropdown-trigger.custom-button:hover {
    background-color: #ffffff2b;
    backdrop-filter: blur(12px);
    color: #fff !important
}

.custom-button:active {
    transform: translateY(1px)
}

.custom-button:disabled {
    pointer-events: none;
    opacity: .5;
    cursor: not-allowed
}

.custom-button i.drop-icon {
    margin-left: 10px
}

.custom-button span {
    padding: 0 8px
}

.slide-container {
    max-width: 1400px;
    width: 100%;
    height: 370px;
    padding: 40px 0
}

.slide-content {
    height: 100%;
    padding-top: 11px
}

.gamecard {
    border-radius: 6px;
    transition: transform .4s
}

.gamecard:hover {
    transform: translateY(-10px)
}

.gamecard:hover .overlay {
    background: #ffffff30
}

.gamecard-content,
.image-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px
}

.image-content {
    position: relative;
    background-image: url(https://ggsmurfs.com/wp-content/uploads/2021/10/hardware-blog-5.jpg);
    padding: 25px 0;
    background-size: cover;
    border-radius: 13px;
    height: 100%
}

.overlay {
    transition: .4s;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: transparent;
    height: 100%;
    border-radius: 15px;
    right: 0;
    top: 0
}

.faq,
.faq .faq-arrow,
.faq label,
.gamecard-image {
    position: relative
}

.gamecard-image {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: #fff;
    padding: 3px
}

.gamecard-image .gamecard-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #4070f4
}

.name {
    font-size: 18px;
    font-weight: 500;
    color: #333
}

.description {
    font-size: 14px;
    color: #fafafa;
    text-align: center
}

.button {
    border: none;
    font-size: 16px;
    color: #fff;
    padding: 8px 16px;
    background-color: #4070f4;
    border-radius: 6px;
    margin: 14px;
    transition: .3s
}

.button:hover {
    background: #265df2
}

.custom-swiper .swiper-navBtn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2a2929;
    color: #fff;
    transition: color .3s
}

.custom-swiper .swiper-navBtn:hover {
    color: #000;
    background-color: var(--wd-primary-color)
}

.custom-swiper .swiper-navBtn::after,
.custom-swiper .swiper-navBtn::before,
.header-right-btn i {
    font-size: 20px
}

.custom-swiper .swiper-button-next {
    right: -24px
}

.custom-swiper .swiper-button-prev {
    left: -24px
}

.custom-swiper .swiper-pagination-bullet {
    background-color: #720404;
    opacity: 1
}

.custom-swiper .swiper-pagination-bullet-active {
    background-color: #720404
}

#service_page .elementor-image-box-wrapper .elementor-image-box-img {
    display: flex;
    padding: 18px;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff1f;
    align-items: center
}

.faq input[type=checkbox],
.hidden-inputs,
.page-id-3529 #payment_card {
    display: none
}

.level-input .field,
.price-input .field,
.w-full {
    width: 100%
}

.lg\:w-fit {
    width: fit-content
}

button {
    font-family: Manrope, sans-serif, ui-sans-serif !important
}

#service_page .search-input:focus,
#service_page .search-input:hover,
.dashboard-header .left input:focus,
.dashboard-header .left input:hover {
    background-image: linear-gradient(358deg, #27272787, #27272787);
    box-shadow: 0 0 5px #ffffff1c
}

#service_page .search-input,
.dashboard-header .left input {
    padding: .51rem 1.25rem;
    box-shadow: 0 1px 2px 0 #0e0f108c;
    background-color: #111;
    border-radius: 9999px;
    width: 100%;
    max-width: 350px;
    border-color: #fefefe2b;
    border-width: 1px
}

#service_page .search-icon {
    position: absolute;
    top: 50%;
    left: 90%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none
}

.search-icon i {
    font-size: .875rem;
    color: var(--text-muted-foreground)
}

.faq-heading {
    font-weight: 400;
    font-size: 19px;
    -webkit-transition: text-indent .2s;
    text-indent: 20px;
    color: #fff;
    margin: 24px 0
}

.faq-text {
    font-weight: 400;
    color: #e2e1e1;
    width: 95%;
    padding-left: 20px;
    margin-bottom: 30px
}

.faq {
    width: 100%;
    margin: 0 auto;
    border-radius: 4px
}

.faq label {
    backdrop-filter: blur(65px);
    height: 80px;
    padding-top: 1px;
    border-radius: 7px;
    margin-bottom: 10px;
    border: .5px solid #706f6f8c;
    background: #0b0c0f !important
}

.faq .faq-arrow {
    width: 15px;
    height: 15px;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    float: right;
    top: -57%;
    right: 27px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.data-head::after,
.ft-separater-after::after,
.ft-separater-before::before,
.slider-header::after {
    background-image: radial-gradient(#72727254, transparent 95%);
    width: 100%;
    height: 1px;
    left: 0;
    content: ''
}

.faq input[type=checkbox]:checked+label>.faq-arrow {
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: -23%
}

.faq input[type=checkbox]:checked+label {
    display: block;
    background-color: hsl(240deg 6.25% 6.27%) !important;
    height: 200px;
    transition: height .8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.faq input[type=checkbox]:not(:checked)+label {
    display: block;
    transition: height .8s;
    height: 80px;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.service-card {
    height: 318px;
    background-color: rgb(92 92 92 / 35%);
    width: auto;
    border-radius: 9px;
    transition: .2s ease-in-out
}

.service-card:hover {
    outline: #616161 solid 1px;
    outline-offset: 4px;
    box-shadow: 0 0 5px #a0a0a075
}

.card-top {
    height: 85%;
    background-size: cover;
    border-radius: 9px 9px 0 0
}

.pro-count {
    padding: 3px 12px;
    background: #ffffff1f;
    border-radius: 5px
}

.cate-name {
    font-size: 16px
}

.pro-count i {
    margin-left: 7px
}

.card-top img {
    border-radius: 6px 6px 0 0
}

footer.footer-container .container,
footer.footer-container .footer-sec .elementor-column-gap-default {
    max-width: 1540px !important
}

.ft-contact-info p b,
.ft-contact-info p strong {
    color: #fff;
    font-weight: 600
}

.ft-separater-before::before {
    top: 0;
    position: absolute;
    z-index: 11111
}

.data-head::after,
.ft-separater-after::after,
.slider-header::after {
    bottom: 0;
    position: absolute
}

.card-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f5f5f5;
    height: 15%;
    justify-content: space-between;
    padding: 9px
}

.card-bottom span p {
    font-size: 13px;
    color: #989899;
    margin: -4px
}

.card-bottom span h4,
.right-site-title {
    font-size: 18px;
    margin: 0
}

.container-card {
    display: grid;
    grid-template: auto/repeat(6, 1fr);
    margin: 0 15px;
    gap: 15px
}

.filter-btn-options,
.filter-wrapper,
.left-side-filter {
    display: flex
}

.product_card-container {
    display: grid;
    margin: 30px auto;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

.product_card:hover {
    border: 1px solid #aaa9a98a;
    background-color: #161617
}

.product_card {
    border: 1px solid #aaa9a924;
    border-radius: 15px;
    display: block;
    background-color: #161617;
    backdrop-filter: blur(62px);
    transition: background-color .3s
}

.product_card a {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.table-cell.price-text span.amount {
    color: rgb(184 184 184)
}

.badge {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 14px
}

.bolt-icon {
    background-color: gold
}

.star-icon {
    background-color: tomato
}

.product_card-content {
    padding: 20px 16px 7px
}

.platform {
    display: flex;
    align-items: center;
    gap: 8px
}

.platform-icon {
    width: 24px;
    height: 24px
}

.products-title {
    color: #fff;
    font-size: 14px;
    margin: 0
}

.product-image-container {
    width: 100%;
    position: relative;
    height: 200px;
    border-radius: 16px
}

.product_card-container .product-image {
    width: 100%;
    height: 100%;
    border-radius: 6px
}

.image-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, .8);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    border: none
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0 15px;
    font-size: 12px
}

.separator {
    height: 1px;
    background-image: radial-gradient(#72727254, transparent 78%)
}

.price-section.pric {
    margin-top: 7px
}

.price-section {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.right-sided-icon {
    padding: 2px 10px;
    background: #008000;
    border-radius: 5px;
    font-size: 12px
}

.buy-now,
.right-reset #reset-filter {
    background-color: var(--wd-primary-color) !important;
}

.right-sided-icon i {
    margin-left: 4px;
    font-size: 10px
}

.products-price {
    display: flex;
    font-size: 24px;
    color: #fff
}

.products-price .price-country-code {
    /* margin: 7px 0 0 5px; */
    display: flex;
    font-size: 12px;
    align-items: center;
    color: #d7d7d7
}

.product_card form.shop-page-form,.product_card .shop-page-ft {
    padding: 10px 16px 5px 20px;
    display: flex;
    justify-content: space-between;
}

.buy-now {
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 22px;
    font-size: 12px;
}

.dropd ul li,
.filter-button {
    padding: 10px;
    cursor: pointer
}

.buy-now:hover {
    background-color: #751515;
    color: #fff
}

.filter-button {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px
}

.filters {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center
}

.right-reset #reset-filter {
    padding: 11px 15px
}

.filter-option,
.more-filters,
.recommended-filters {
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 100;
    text-transform: capitalize;
    align-items: center;
    backdrop-filter: blur(44px);
    background-color: #0f0f11;
    border-radius: 5px;
    cursor: pointer;
    border: .3px solid #d6d6d62b;
    color: #fff;
    margin-right: 9px
}

.filter-option i,
.more-filters i,
.recommended-filters i {
    margin-right: 8px
}

.filter-option i.fa-caret-down,
.more-filters i.fa-caret-down,
.recommended-filters i.fa-caret-down {
    margin: 0 0 0 8px
}

.filter-option:hover,
.more-filters:hover,
.recommended-filters:hover {
    background-color: #d4d4d42e;
    color: #fff;
    border: 1px solid #989898
}

.search-product {
    margin-right: -4px;
    width: 379px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

.filters .search-product input:focus,
.filters .search-product input:hover {
    border: 1px solid #d6d6d663
}

.filters .search-product input {
    box-sizing: border-box;
    background-color: #0f0f11;
    border-radius: 5px;
    padding: 22px 20px;
    border: .3px solid #d6d6d62b
}

.filters .search-product i.fa-solid {
    position: relative;
    right: 33px;
    color: #aaa
}

.platform {
    margin-bottom: 7px
}

.dropd {
    position: absolute;
    display: none;
    width: 300px;
    background: #0e0e11;
    border-radius: 9px;
    z-index: 99999
}

.platform-dropdown,
.tier-dropdown {
    left: 375.7px
}

.accountType-dropdown {
    left: 507.7px
}

.price-wrapper {
    left: 35.7em
}

.filter-dropdown {
    left: 54em
}

.level-wrapper {
    left: 64.2em
}

.top-heading {
    padding: 20px;
    background: #07080a;
    color: #fff;
    border-radius: 10px 10px 0 0
}

#user-navi,
.main-archive-new {
    background-color: #0b0c0f
}

.accountType-dropdown ul,
.filter-dropdown ul,
.platform-dropdown ul,
ul.availability-drop,
.tier-dropdown ul {
    padding: 10px 6px;
    margin: 0;
    overflow-y: auto;
    max-height: 250px
}

div.availability-dropdown {
    left: 37.7rem
}

.dropd ul li {
    list-style: none;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-radius: 7px;
    margin: 0 0 2px
}

.filter-item:hover,
.filter-meta-item.active,
.filter-meta-item:hover,
li.filter-item.active {
    background: #ffffff1f
}

.dropd ul li label {
    cursor: pointer;
    display: flex;
    align-items: center
}

::selection {
    color: #fff;
    background: #ff0b0b
}

.price-wrapper {
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .1)
}

.archive-account-content :first-child,
header h2 {
    font-size: 24px;
    font-weight: 600
}

header p {
    margin-top: 5px;
    font-size: 16px
}

.level-input,
.price-input {
    width: 100%;
    display: flex;
    padding: 32px
}

.field input[type=number] {
    width: 100%;
    outline: 0;
    font-size: 19px;
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #999;
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.level-input .level-separator,
.price-input .price-separator {
    width: 130px;
    display: flex;
    font-size: 29px;
    align-items: center;
    justify-content: center;
    top: 11px;
    position: relative
}

.slider.level,
.slider.price {
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: 5px;
    margin: 0
}

.slider .progress {
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
    border-radius: 5px;
    background: #ff0b0b
}

.range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: 0 0;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

input[type=range]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #ff0b0b;
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, .05)
}

input[type=range]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: var(--wd-primary-color);
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, .05)
}

.main-archive-new {
    color: #fff;
    height: 67px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.archive-nav {
    max-width: 1542px !important;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px
}

.main-image,
.main-image-order-page,
.single-main-content {
    max-width: 100%
}

.left-nav {
    display: flex;
    gap: 15px;
    font-size: 20px;
    align-items: center
}

.middle-nav,
.middle-nav .items {
    align-items: center;
    display: flex
}

.left-nav.user-avtar p {
    font-family: Red Hat Display, sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

.left-nav.user-avtar img {
    width: 48px;
    border-radius: 48px !important
}

.left-nav img {
    width: 30px
}

.middle-nav {
    gap: 10px;
    margin-left: 6%
}

.middle-nav a.items {
    padding: 10px
}

.middle-nav a.items:hover .custom-gradient,
a.tooltip-container.items img,
a.tooltip-container.items span {
    opacity: .3
}

.custom-gradient {
    position: absolute;
    width: 64px;
    height: 24px;
    bottom: -16px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    filter: blur(8px);
    background: linear-gradient(198deg, rgb(239 83 83) 6.61%, rgb(249 96 96) 48.47%, rgb(255 4 4) 92.12%);
    transition: .3s ease-in-out
}

#talkjs-chat-container,
.main-image,
body.archive.tax-product_cat header.container,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
    width: 100% !important
}

.tab-orders.dashboard-tab i {
    font-size: 16px;
    margin-right: 4px
}

.tab-orders.dashboard-tab.active-tab i {
    color: var(--wd-primary-color);
    font-size: 16px;
    margin-right: 4px
}

.middle-nav .items {
    gap: 5px
}

.page-id-10752 .middle-nav {
    gap: 26px
}

.right-nav .archive-btn {
    padding: 8px;
    border: transparent;
    border-radius: 3px;
    font-size: 12px;
    text-transform: capitalize;
    margin-left: 5px;
    font-weight: 200;
    color: #fff;
    background-color: #b1b1b126
}

.discord,
footer .btn.btn-color-primary {
    background-color: #5865f2 !important;
    color: #fff
}

.archive-account-name {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 30px auto
}

.archive-content-icon {
    display: flex;
    border: 1px solid #000;
    border-radius: 50%;
    justify-content: center;
    padding: 18px;
    background: #ffffff1f
}

body.postid-1143 .container.archive-nav,
body.postid-1145 .container.archive-nav {
    max-width: 1500px !important
}

body.archive.tax-product_cat .archive-main-content .elementor-column-gap-default,
body.archive.tax-product_cat .container,
body.page-id-10686 .container,
body.page-id-10686 .elementor-column-gap-default,
body.page-id-10752 .container,
body.page-id-10752 .elementor-column-gap-default {
    max-width: 1550px !important
}

body.elementor-page-10531 .main-page-wrapper .acc-single .elementor-column-gap-default,
body.elementor-page-10531 .main-page-wrapper .container {
    max-width: 1440px !important
}

body.postid-1143 #boosting-container .archive-account-name.container,
body.postid-1143 .main-page-wrapper .container,
body.postid-1143 .twelve-eaity .elementor-column-gap-default {
    max-width: 1450px !important
}

.account-data,
.chat-container,
.slider-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #8484843d;
    max-width: 100%;
    border-radius: 12px;
    background: #292929a8
}

.data-head,
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 22px;
    background: #0b0c0f;
    border-radius: 12px 12px 0 0
}

.scrolled .header-custom {
    backdrop-filter: blur(24px) !important;
    background-color: #191919a6 !important
}

.data-head h3 {
    margin: 0;
    font-size: 21px
}

.slider-header h3 {
    margin: 0;
    font-size: 1.2em;
    display: flex;
    align-items: center
}

.slider-header button {
    color: #fff !important;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5em
}

.main-image,
.slider-images img {
    border-radius: 4px !important;
    object-fit: cover
}

.slider-images {
    display: flex;
    gap: 10px;
    overflow: auto;
    height: 84px;
    order: 2;
    scroll-behavior: smooth
}

.slider-images.in-order-page {
    height: 77px;
    flex-direction: row;
    order: 2
}

.right-buy-now .review-image {
    display: flex;
    justify-content: center;
    margin-top: 20px
}

.page-id-10752 .images-data {
    padding: 10px 15px
}

.images-data {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    justify-content: center;
    align-items: center
}

.slider-images img {
    width: 136px;
    height: 100px;
    cursor: pointer
}

.main-image-order-page {
    height: 202.5px !important;
    width: 360px !important;
    object-fit: cover;
    border-radius: 12px !important
}

.single-main-content .grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px
}

.single-product.postid-1143 header.whb-header {
    padding: 0 !important;
    margin: 0 !important
}

.active-as-main {
    border: 2px solid #fff !important
}

.fast-secure-checkout {
    background: rgba(196, 33, 33, .2);
    border-radius: 16px;
    height: fit-content;
    padding: 32px;
    border: 1px solid #c42121;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.fast-secure-checkout .top-content span {
    margin-bottom: 7px;
    font-size: 17px;
    align-items: center;
    display: flex;
    font-weight: 600
}

.fast-secure-checkout .top-content span i {
    color: #ed1c24
}

.fast-secure-checkout .product-price {
    margin-top: 10px
}

.fast-secure-checkout .product-price .woocommerce-Price-amount {
    font-size: 36px;
    color: #fff
}

.fast-secure-checkout .center-content span {
    font-size: 15px;
    display: flex;
    margin-bottom: 10px;
    align-items: center
}

.archive-account-content h1 {
    margin: 0;
    width: 87%
}

.fast-secure-checkout button:hover {
    background: rgb(255 45 53);
    color: #fff
}

.fast-secure-checkout button {
    width: 100%;
    border-radius: 10px;
    background: var(--wd-primary-color);
    color: #fff;
    font-weight: 100;
    font-size: 19px;
    text-transform: capitalize
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 20px
}

.account-data {
    background: #292929a8;
    padding: 0
}

.data-item {
    justify-content: center;
    display: flex;
    flex-direction: column
}

.data-item .separator {
    margin-bottom: 10px
}

.label {
    font-weight: 600;
    font-size: 16px
}

.value {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #9d9d9d;
    font-weight: 600;
    white-space: pre-wrap
}

.account-data.account-information .account-discription {
    padding: 0
}

.account-data .account-discription,
.data-grid {
    padding: 22px
}

.elementor-element-5613b99 {
    margin-top: -30px !important
}

.elementor-element-5571108a h2 {
    font-size: 40px;
    margin-top: 25px
}

.extra-inputs li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: start
}

.card_wrap_grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px
}

.selection {
    padding: 15px 0
}

.extra-inputs label {
    color: #b5b5b5
}

.card_wrap {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    overflow: hidden
}

.catalog_cart_item_img_wrap {
    position: relative;
    margin-bottom: -16px
}

.catalog_cart_item_img_link {
    display: block;
    text-align: center
}

.catalog_cart_item_img_link img {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0 !important;
    min-height: 275px
}

.catalog_cart_title {
    text-align: center;
    margin: 10px 0
}

.catalog_cart_title_link {
    font-size: 18px;
    font-weight: 700;
    color: #333
}

.catalog_cart_info {
    padding: 20px !important;
    background: #ffffff1f;
    backdrop-filter: blur(15px);
    border-radius: 26px;
    position: relative
}

.card_info_p_wrap,
.deliverytime {
    margin-bottom: 15px
}

.card_info_p_text {
    font-size: 16px;
    color: #555;
    margin-bottom: 5px
}

.itc-select__toggle {
    background: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.itc-select__dropdown {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    z-index: 10;
    width: 100%
}

.itc-select__options {
    list-style: none;
    padding: 0;
    margin: 0
}

.itc-select__option {
    padding: 10px;
    cursor: pointer
}

.itc-select__option:hover {
    background: #f0f0f0
}

.card_price_info_wrap {
    display: flex;
    flex-direction: column;
    align-items: center
}

.card_price_wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0
}

.card_price_old {
    text-decoration: line-through;
    color: #888
}

.card_price_cur {
    font-size: 20px;
    font-weight: 700;
    color: #d9534f
}

.card_price_ggcoins {
    margin: 10px 0
}

.dropdown-toggle_ggcoins {
    background: 0 0;
    border: none;
    cursor: pointer
}

.card_price_info {
    color: #28a745;
    font-weight: 700;
    margin: 5px 0
}

.top-cr-content {
    display: none;
    justify-content: space-between;
    background: #07080a;
    padding: 10px;
    align-items: center
}

.top-cr-content .lef-logo-img {
    width: 110px
}

.top-cr-content #close-select-drop {
    background: #ffffff12;
    color: #fff;
    border-radius: 30px;
    width: 30px;
    height: 40px;
    cursor: pointer
}

.hours_order {
    display: flex;
    align-items: center;
    margin: 10px 0
}

.catalog_cart_info_btn img,
.hours_order_img,
.view-credentials i {
    margin-right: 5px
}

.catalog_cart_info_dec_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.extra-inputs {
    padding: 20px 0
}

[type=submit],
button.catalog_cart_info_btn {
    width: 100%;
    justify-content: center;
    background-color: var(--wd-primary-color) !important;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color .3s;
    display: flex;
    align-items: center
}

[type=submit]:hover,
button.catalog_cart_info_btn:hover {
    background-color: #b30000;
    color: #a2a2a2
}

.catalog_cart_info_detail .selection label {
    margin: 0 0 10px;
    color: #ffffffba
}

.catalog_cart_info_detail .selection label::after {
    content: '';
    height: 1px;
    background-color: #fff;
    width: 100%
}

.catalog_cart_info_detail .selection select {
    border-radius: 4px;
    padding: 0 8px
}

.catalog_cart_info_detail .selection select option {
    border: none;
    background: #4b4f55;
    color: #fff
}

.product-detail.pricing-info {
    display: flex;
    padding: 20px 0 0;
    justify-content: space-between
}

.cashback,
.ggsmurfs-get-reviews {
    align-items: center;
    display: flex
}

.cashback {
    width: fit-content;
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(22px);
    gap: 5px;
    justify-content: center
}

.product-detail.pricing-info del {
    display: block;
    font-size: 20px;
    margin-bottom: -13px;
    color: #989898
}

.product-detail.pricing-info .orignal-price {
    font-size: 36px;
    color: #fff;
    font-weight: 700
}

.product-detail.pricing-info .discount p {
    background: linear-gradient(56deg, #efefef, #747474);
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 22px;
    text-align: end
}

.product-detail.pricing-info .discount {
    width: 50%
}

body.woocommerce-checkout .site-content.col-lg-12 .alignwide {
    width: 100% !important;
    margin: 0 !important
}

.order-delivery span {
    padding: 5px 10px;
    background: #ffffff1f;
    border-radius: 30px
}

.order-delivery p {
    margin: 8px 0
}

.product-content-main .product-description {
    white-space: pre-line;
    margin-top: -3%
}

#custom-payment button {
    margin: 0;
    background: var(--wd-primary-color);
    border-radius: 4px
}

body.woocommerce-checkout table td.product-total {
    align-items: normal;
    display: flex;
    justify-content: end
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name ul.variation {
    margin-top: 20px;
    width: 132% !important
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name ul.variation li {
    justify-content: space-between;
    display: flex;
    font-size: 16px;
    color: #fff
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    max-width: 100% !important;
    width: auto !important;
    border: none
}

ul.variation li .item-variation-name::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: maroon;
    padding: 2px;
    margin-right: 8px;
    background: #fff;
    border-radius: 4px;
    font-size: 14px
}

.ggsmurfs-get-reviews {
    justify-content: space-between;
    border-radius: 0 0 12px 12px;
    padding: 10px 20px 10px 10px
}

.right-site-para {
    margin: -5px 0 0;
    font-size: 12px
}

.ggsmurfs-get-reviews .site-info {
    display: flex;
    align-items: center;
    gap: 10px
}

.ggsmurfs-get-reviews .site-info img {
    width: 60px;
    height: 60px
}

.trustpilot-reviews {
    padding: 5px;
    background: #ffffff1f;
    font-size: 12px;
    border-radius: 5px
}

.trustpilot-reviews i {
    margin-left: 2px
}

.product-header-title {
    margin: 23px 0 45px
}

.left-sided-grid-container,
.right-sided-grid-container {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.back-button {
    background: #33333326;
    border-radius: 6px;
    color: #fff
}

.buttons button,
.filter-ppup {
    border-radius: 5px;
    text-transform: capitalize
}

.back-button i {
    margin-right: 6px
}

.content {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 44px
}

@media(min-width:687px) {
    .single-main-content .content .icon {
        width: 65px;
        height: 65px
    }
}

.single-main-content .content .icon {
    display: flex;
    background: #ffffff29;
    border-radius: 47px;
    padding: 18px
}

.content .details {
    max-width: 655px
}

.details h1 {
    font-size: 26px;
    line-height: 1.4;
    margin: 0
}

.details p {
    font-size: 16px;
    margin-top: 5px
}

.details .short-detail {
    display: block
}

.details span {
    font-size: 14px;
    color: #999
}

.buttons {
    display: flex;
    gap: 10px
}

.buttons button {
    font-weight: 700
}

.view-credentials {
    color: #fff;
    background: var(--wd-primary-color)
}

.filter-ppup {
    padding: 10px 20px;
    font-weight: 100;
    align-items: center;
    backdrop-filter: blur(44px);
    background-color: #0f0f11;
    cursor: pointer;
    border: .3px solid #d6d6d62b;
    color: #fff
}

.view-credentials:hover {
    color: var(--wd-primary-color);
    background: #fff
}

.report-issue:hover {
    background: var(--wd-primary-color);
    color: #fff
}

#talkjs-chat-container {
    margin: 0 !important
}

@media screen and (max-width:768px) {
    .slide-content {
        margin: 0 10px
    }

    .custom-swiper .swiper-navBtn {
        display: none
    }

    .images-data {
        padding: 10px
    }

    .single-main-content .grid-container {
        grid-template-columns: 1fr
    }

    .service-card {
        height: 190px
    }

    .container-card {
        grid-template: auto/repeat(4, 1fr)
    }
}

@media (min-width:1024px) {
    .fq-para-min p {
        max-width: 225px
    }

    .input-border,
    .results-container {
        width: 64%
    }

    .content-text .description {
        font-size: 16px;
        margin: 0 0 44px !important;
        color: #fafafa;
        text-align: start;
        max-width: 71%
    }

    .content-text .title {
        margin-bottom: 7px;
        max-width: 60%;
        font-weight: 700
    }

    .content-text {
        text-align: left
    }

    .content-grid {
        grid-template-columns: 4fr 3fr;
        gap: 35px
    }

    .whb-general-header-inner {
        height: auto !important
    }

    .illustration {
        position: absolute;
        top: -37px
    }
}

@media (max-width:687px) {

    .container.two .title,
    .liner-continer .woodmart-title-container {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px
    }

    .card-bottom span.cate-name,
    .label {
        font-size: 14px
    }

    .back-button,
    .comming {
        font-size: 9px
    }

    .trustpilot-logo .logop {
        font-size: 24px;
        font-weight: 500
    }

    .faq label {
        margin-bottom: 15px
    }

    .account-data.account-information .account-discription {
        padding: 0 !important;
        margin: 0 !important
    }

    .account-data .account-discription {
        padding: 0 !important;
        margin: 10px
    }

    .account-data.account-information .data-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 1px solid #84848454
    }

    #service_page .search-input,
    .order-dashboard .main-header.dashboard-header input#search {
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
        background-color: #111;
        border-radius: 9999px;
        height: 51px;
        border-color: #fefefe2b;
        max-width: 100%
    }

    #credential-popup .account-data.account-information {
        min-width: 90% !important
    }

    footer .elementor-element-4975624 .liner-continer .woodmart-title-container {
        text-align: unset;
        font-size: 22px;
        font-weight: var(--wd-title-font-weight);
        line-height: 1.4
    }

    .main-page-wrapper .reset-last-child>:last-child {
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }

    .content-text .description {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }

    .page-id-10686 .middle-nav,
    .page-id-10686 .right-nav .discord {
        display: none
    }

    .social-login a {
        padding: 10px 22px
    }

    .social-login {
        gap: 0
    }

    .login-form .close-btn {
        right: 30px !important;
        top: 3px !important
    }

    .login-container,
    .register-container {
        width: 391px;
        justify-content: center;
        align-items: center
    }

    .login-form,
    .register-form {
        padding: 15px
    }

    .main-header.dashboard-header {
        flex-direction: column;
        gap: 20px;
        align-items: start !important
    }

    .top-cr-content {
        display: flex
    }

    .slide-container {
        height: 263px
    }

    .service-card {
        height: 169px !important
    }

    .container-card {
        gap: 20px 7px;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important
    }

    .wd-images-gallery div.gallery-images.row {
        gap: 22px 0
    }

    .wd-images-gallery div.gallery-images.row .wd-gallery-item img {
        width: 50px
    }

    #service_page .search-input {
        padding: 0 15px;
        width: 100%
    }

    .order-dashboard .main-header.dashboard-header .order-title .shop-icon {
        width: 70px;
        height: 70px;
        padding: 25px
    }

    .order-heading h1 {
        font-size: 20px
    }

    .order-heading p {
        font-size: 10px
    }

    .order-dashboard .main-header.dashboard-header div {
        width: 100%
    }

    .order-dashboard .main-header.dashboard-header input#search {
        padding: .51rem 1.25rem;
        width: 100%
    }

    .card-bottom span.pro-count {
        font-size: 9px;
        min-width: 36px;
        padding: 3px 4px
    }

    .card-bottom .cate-name {
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .pro-count i {
        margin-left: 3px
    }

    .details span {
        font-size: 12px
    }

    .right-content-dash {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: end
    }

    .back-button {
        padding: 9px !important
    }

    .content .details {
        padding-right: 20px
    }

    .content .details h1 {
        font-size: 13px
    }

    .right-content-dash .buttons button {
        font-size: 12px;
        padding: 9px
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 40px;
        margin-top: 18px;
        align-items: start
    }

    .left-content-dash {
        display: flex;
        gap: 15px;
        align-items: center
    }

    .grid-container .left-sided-grid-container {
        order: 2
    }
}

.left-content-dash {
    display: flex;
    gap: 15px
}

@media (max-width:780px) {
    .left-side-filter {
        display: flex;
        justify-content: space-between;
        width: 100%
    }

    .filter-btn-options,
    .right-reset {
        display: none !important
    }

    .card_wrap_grid {
        grid-template-columns: 1fr
    }

    .archive-account-content :first-child {
        font-size: 16px
    }

    .middle-nav,
    .right-nav button.discord {
        display: none
    }
}

@media (max-width:1280px) {
    .container-card {
        grid-template: auto/repeat(6, 1fr)
    }

    .service-card {
        height: 240px
    }
}

@media (max-width:640px) {
    .service-card {
        height: 222px
    }

    .container-card {
        grid-template: auto/repeat(3, 1fr)
    }
}

@media (max-width:460px) {
    .service-card {
        height: 234px
    }
}

@media (max-width:400px) {
    .slide-container {
        height: 230px
    }
}

@media (min-width:768px) {
    .main-tabs .elementor-image-box-wrapper figure.elementor-image-box-img {
        width: 70% !important
    }
}

@media (max-width:576px) {

    .filter-option,
    .more-filters {
        margin-bottom: 10px !important
    }

    .right-reset #reset-filter {
        width: 97%
    }

    .search-product {
        margin-bottom: 10px;
        width: 100% !important
    }

    .dropdown-wrapper {
        width: 100vw !important;
        overflow-y: scroll;
        border-radius: 0;
        background: #0b0c0f
    }

    .container.two .illustration,
    .container.two .image-container,
    .dropd,
    .input-border,
    .results-container,
    .steps {
        width: 100%
    }

    #service_page .elementor-image-box-wrapper {
        display: flex;
        justify-content: space-around;
        align-items: center
    }

    #service_page .elementor-image-box-wrapper .elementor-image-box-img {
        padding: 23px;
        width: auto;
        margin-right: 10px !important
    }

    .service-card {
        height: 301px
    }

    .images-data {
        padding: 10px
    }

    .single-imageconaint {
        height: 230px
    }

    .elementor-3529 .elementor-element.elementor-element-49e736e.elementor-column>.elementor-widget-wrap,
    .elementor-3529 .elementor-element.elementor-element-7917ad4.elementor-column>.elementor-widget-wrap {
        padding: 0
    }

    .single-main-content .grid-container {
        grid-template-columns: auto !important
    }

    .games-section {
        background: #0b0c0f;
        overflow: scroll
    }

    .games-section .games-grid {
        grid-template-columns: repeat(1, 1fr)
    }

    #dropdown-menu-content .search-section {
        background: #0b0c0f;
        backdrop-filter: blur(12px);
        border-radius: 0
    }

    .select-game-primary-btn .custom-button .icon {
        display: none
    }

    .select-game-primary-btn .custom-button i.drop-icon {
        margin-left: 6px
    }

    .dropd {
        left: 0 !important
    }

    div.faq .faq-heading {
        margin: 26px 0;
        font-size: 14px
    }

    #testimonial .custom-slider::after,
    #testimonial .custom-slider::before {
        width: 75px !important
    }

    .steps {
        padding: 0 18px
    }

    .custom-slider .slide {
        width: 295px
    }
}

@media (min-width:780px) {
    .filter-ppup {
        display: none !important
    }
}

@media (max-width:1025px) {
    .content-text {
        text-align: left
    }

    .input-border {
        width: 99%
    }

    .innerpage .whb-general-header-inner {
        height: auto !important;
        max-height: 60px
    }

    .select-game-primary-btn .custom-button {
        padding: 10px;
        font-size: 16px
    }

    .dropdown-wrapper {
        left: 0 !important;
        top: 0 !important
    }

    .product-detail.pricing-info .discount p {
        font-size: 15px
    }

    .product-detail.pricing-info .orignal-price {
        font-size: 28px
    }

    .card_wrap_grid {
        grid-template-columns: 1fr
    }
}

@media (min-width:600px) and (max-width:900px) {
    .single-imageconaint {
        height: 343px
    }

    .image-container,
    .steps {
        width: 100%
    }

    .games-section .games-grid {
        grid-template-columns: repeat(1, 1fr)
    }

    .games-section {
        overflow: scroll
    }

    .dropdown-wrapper {
        width: 50vw !important
    }
}

.filter-panel {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    left: 0;
    right: 0;
    background-color: #0E0E10;
    padding: 20px;
    border-radius: 10px;
    max-width: 520px;
    z-index: 999999
}

.filter-panel .filter-head .cls-filter {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 17px;
    background: #ffffff1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-panel .filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.filter-panel #reset-filter {
    background: #ed1c24;
    margin-top: 28px !important
}

.filter-panel .reset-filters {
    justify-content: space-around !important;
    background-color: #ed1c24;
    margin-top: 40px;
    padding: 13px !important
}

.filter-panel .filter-option {
    display: flex;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    justify-content: space-between;
    padding: 10px 10px;
    font-size: 16px
}

.filter-panel .filter-option label {
    font-size: 19px;
    text-transform: capitalize;
    display: block;
    margin-bottom: 5px
}

.filter-panel .filter-option input,
.filter-panel .filter-option select {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 5px
}

.selector-color {
    background-color: #1b1d22;
    color: #fafafa;
    height: 47px
}

footer .fot-btns .wd-btn-text {
    font-size: 16px;
    text-transform: capitalize
}

.woocommerce-checkout .login-form-checkout {
    width: 100%;
    text-align: center
}

.h5-heading-to,
.woocommerce-checkout .h5-heading {
    margin-bottom: 1.3rem;
    font-size: 1.4rem;
    text-align: start;
    font-weight: 500;
    line-height: 1rem;
    transition: .5s ease-in-out
}

.woocommerce-checkout .input-container {
    position: relative;
    margin-bottom: 1.5rem
}

.woocommerce-checkout .input-container input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #dddddd24;
    border-radius: 4px;
    background: rgb(255 255 255 / 1%);
    color: #fff;
    outline: 0
}

.woocommerce-checkout .input-container input:focus {
    border-image: linear-gradient(45deg, #70707047, #93939338, #d2d2d229, #f8f8f866);
    border-image-slice: 1
}

.woocommerce-checkout .input-container label {
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #777;
    pointer-events: none;
    transition: .3s
}

.woocommerce-checkout .input-container input:focus+label,
.woocommerce-checkout .input-container input:not(:placeholder-shown)+label {
    top: -.7rem;
    left: 0;
    font-size: .8rem;
    color: #fff
}

.woocommerce-checkout .btn {
    width: 100%;
    padding: .8rem;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s
}

.woocommerce-checkout .btn.disabled {
    background: gray !important;
    cursor: not-allowed;
    text-transform: capitalize;
    font-weight: 300;
    font-size: 14px;
    color: #fff
}

.woocommerce-checkout .login-form-checkout .btn-primary {
    background: var(--wd-primary-color);
    color: #fff;
    text-transform: capitalize;
    font-weight: 100;
    font-size: 16px;
    transition: .3s ease-in-out
}

.woocommerce-checkout .btn-primary:hover {
    background: #146abf;
    color: #fff
}

.woocommerce-checkout .btn-secondary {
    background: var(--wd-primary-color);
    color: #fff;
    margin-top: 1rem;
    text-transform: capitalize
}

.woocommerce-checkout .btn-secondary:hover {
    background: rgb(237 28 36 / 78%);
    color: #fff
}

.woocommerce-checkout .divider {
    margin: 1.5rem 0;
    position: relative
}

.woocommerce-checkout .divider::after,
.woocommerce-checkout .divider::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-image: radial-gradient(#72727254, transparent 78%)
}

.woocommerce-checkout .divider::before {
    left: 0
}

.woocommerce-checkout .divider::after {
    right: 0
}

.woocommerce-checkout .divider span {
    padding: 0 10px;
    position: relative;
    color: #dedede;
    font-size: .9rem
}

.woocommerce-checkout #feedback {
    text-align: end;
    color: rgb(255 178 0)
}

.woocommerce-checkout .checkoutpage-otp-container {
    z-index: 999999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(12px)
}

.woocommerce-checkout .checkoutpage-otp-container .login-otp-container {
    position: absolute;
    background-color: #111;
    border-radius: 12px;
    padding: 15px;
    width: 100%;
    height: 300PX;
    max-width: 420px
}

.woocommerce-checkout .resend-buttn,
.woocommerce-checkout .resend-buttn:hover {
    background: 0 0;
    padding: 0;
    color: #fff;
    text-transform: capitalize
}

.woocommerce-checkout .resend-buttn:hover {
    text-decoration: underline
}

@media(max-width:687px) {
    .woocommerce-checkout .checkoutpage-otp-container .login-otp-container {
        max-width: 397px;
        margin-right: -5%
    }
}

.pet-card {
    width: 240px;
    background: linear-gradient(145deg, #1f1f26, #141418);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    overflow: hidden;
}

.pet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%,
            rgba(237, 28, 36, 0.05) 100%);
    border-radius: 20px;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.pet-card:hover {
    transform: translateY(-15px) rotateX(0deg) rotateY(5deg) scale(1.02);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(237, 28, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pet-card:hover::before {
    opacity: 1;
}

.card-inner {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.pet-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 3;
}

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateZ(20px);
    transition: all 0.3s ease;
}

.badge.hot {
    background: linear-gradient(135deg, #ED1C24, #ff4444, #ED1C24);
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

.badge.new {
    background: linear-gradient(135deg, #00ff88, #28a745, #00ff88);
    color: white;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(237, 28, 36, 0.6);
    }
}

.pet-image {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a1f 50%, #0a0a0f 100%);
    border-radius: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateZ(10px);
    transition: all 0.4s ease;
}

.pet-image::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    /* background: conic-gradient(from 0deg, #ffffff, rgba(237, 28, 36, 0.1), #f5f5f5, rgba(255, 255, 255, 0.05), #ffffff); */
    background: conic-gradient(from 0deg, #ffffff, rgba(237, 28, 36, .1), #a5a5b3, rgba(255, 255, 255, .05), #ffffff);
    animation: rotate 8s linear infinite;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.pet-card:hover .pet-image::before {
    opacity: 1;
}

.pet-image::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a1f 50%, #0a0a0f 100%);
    border-radius: 14px;
    z-index: 1;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.pet-icon {
    padding: 23px;
    ;
    position: relative;
    z-index: 2;
    transform: translateZ(15px);
    transition: all 0.4s ease;
}

.pet-card:hover .pet-icon {
    transform: translateZ(25px) scale(1.1);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.pet-info {
    text-align: center;
    transform: translateZ(5px);
}

.pet-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.pet-card:hover .pet-name {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transform: translateZ(5px);
}

.pet-rarity {
    font-size: 11px;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.rarity-divine {
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.rarity-legendary {
    background: linear-gradient(135deg, #ff6b00, #ffa500, #ff6b00);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.rarity-prismatic {
    background: linear-gradient(135deg, #9b59b6, #e74c3c, #9b59b6);
    color: white;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.pet-card:hover .pet-rarity {
    transform: translateZ(10px) scale(1.05);
}

.pet-price {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffffff, #cccccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

.pet-card:hover .pet-price {
    transform: translateZ(8px);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.quantity-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #2a2a30, #1a1a20);
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.qty-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.qty-btn:hover {
    background: linear-gradient(135deg, #3a3a40, #2a2a30);
    transform: translateY(-2px) translateZ(5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.qty-btn:hover::before {
    left: 100%;
}

.qty-input {
    width: 45px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #2a2a30, #1a1a20);
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.qty-input:focus {
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(237, 28, 36, 0.3);
}

.buy-item-btn {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px;
    background: linear-gradient(135deg, #2a2a30 0%, #1a1a20 50%, #2a2a30 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Red Hat Display', sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

.buy-item-btn.active {
    background: linear-gradient(135deg, #ED1C24, #ff4444, #ED1C24);
}

button.buy-item-btn.active[disabled] {
    opacity: 1 !important;
}

.buy-item-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ED1C24, #ff4444, #ED1C24);
    transition: all 0.4s ease;
    z-index: -1;
}

.buy-item-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.buy-item-btn:hover {
    transform: translateY(-3px) translateZ(10px);
    box-shadow: 0 12px 30px rgba(237, 28, 36, 0.3);
    color: white;
}

.buy-item-btn:hover::before {
    left: 0;
}

.buy-item-btn:hover::after {
    left: 100%;
}

.buy-item-btn:active {
    transform: translateY(-1px) translateZ(5px);
}

.mycc-cart-container {
    position: fixed;
    top: 0px;
    right: -100%;
    z-index: 999999999999;
    border-radius: 0px;
    min-height: 100vh;
    width: 442px;
    background: #0e0e1103;
    backdrop-filter: blur(53px);
    padding: 0;
    transform-style: preserve-3d;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin: 0 auto;
    transform: translateZ(0);
    display: none;
}

.cart-item-detail {
    width: 100%;
}

.cart-item-detail div.qty {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.cart-item-detail div.qty input.mycc-qty-input {
    width: 74px;
    border-radius: 6px;
}

.mycc-cart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%,
            rgba(237, 28, 36, 0.05) 100%);
    opacity: 0.5;
    pointer-events: none;
}

.mycc-cart {
    position: relative;
    z-index: 2;
    height: 100vh;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.cart-header {
    display: flex;
    padding: 8px 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    justify-content: space-between;
}

.cart-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0px;
}

.cart-subtitle {
    font-size: 12px;
    color: #888;
    text-align: center;
    font-weight: 500;
    margin: 0px;
}

.mycc-cart-list {
    list-style: none;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
}

.mycc-cart-list::-webkit-scrollbar {
    width: 6px;
}

.mycc-cart-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.mycc-cart-list::-webkit-scrollbar-thumb {
    background: rgba(237, 28, 36, 0.5);
    border-radius: 3px;
}

.mycc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #2a2a30, #1a1a20);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mycc-row:hover {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.mycc-row:hover::before {
    opacity: 1;
}

.mycc-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 7px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0f, #1a1a1f);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transform: translateZ(3px);
    transition: all 0.3s ease;
}

.mycc-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(237, 28, 36, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mycc-row:hover .mycc-thumb::before {
    opacity: 1;
}

.mycc-thumb img {
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.mycc-row:hover .mycc-thumb img {
    transform: scale(1.1);
}

.mycc-info {
    display: flex;
    justify-content: space-between;
}

.mycc-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 4px;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: color 0.2s ease;
}

.mycc-title:hover {
    color: #ED1C24;
}

.mycc-price {
    font-size: 13px;
    font-weight: 600;
    color: #ED1C24;
    margin-bottom: 8px;
}

.mycc-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mycc-qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: linear-gradient(135deg, #3a3a40, #2a2a30);
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.mycc-qty-btn:hover {
    background: linear-gradient(135deg, #4a4a50, #3a3a40);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.mycc-qty-input {
    width: 35px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mycc-qty-input:focus {
    outline: none;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(237, 28, 36, 0.3);
}

.mycc-line-total {
    font-size: 14px;
    font-weight: 700;
    color: #da2229;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 70px;
    text-align: right;
}

.mycc-remove {
    cursor: pointer;
    width: 32px;
    border: none;
    background: transparent;
    color: #ED1C24;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 700;
}

.mycc-remove:hover {
    color: white;
}

.mycc-remove:hover::before {
    left: 0;
}

.mycc-summary {
    position: relative;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.02));
}

.cart-spinner-overlay,
.order-summary-overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 99999;
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
}

.mycc-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.mycc-subtotal span {
    color: #cccccc;
    font-weight: 500;
}

.mycc-subtotal strong {
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mycc-note {
    font-size: 11px;
    color: #888;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 400;
}

.mycc-proceed {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ED1C24, #ff4444, #ED1C24);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Red Hat Display', sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mycc-proceed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #950006, #ff4444, #f10811);
    transition: all 0.4s ease;
    z-index: -1;
}

.mycc-proceed::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.mycc-proceed:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(237, 28, 36, 0.4);
    color: white;
}

.mycc-proceed:hover::before {
    left: 0;
}

.mycc-proceed:hover::after {
    left: 100%;
}

.mycc-proceed:active {
    transform: translateY(-1px);
}

.woocommerce-Price-currencySymbol {
    font-weight: 600;
}

/* Empty state */
.empty-cart {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.empty-cart-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-cart-text {
    font-size: 16px;
    font-weight: 500;
}