/* =====================================================================
   XP Game Store — brand refresh
   Modern look with a palette sampled from the "XP GAMESTORE" logo
   (green -> cyan -> blue gradient) plus softer, rounder cards.
   Loaded after style.css so these rules win.
   ===================================================================== */

:root {
    /* Logo-sampled brand colors */
    --xp-green: #08c23d;
    --xp-cyan: #00a6c8;
    --xp-blue: #0a3ab5;
    --xp-navy: #0f2080;
    --xp-preorder: #3f4d99;
    --xp-preorder-soft: #ebf0f8;
    --xp-blue-600: #0d46d1;
    --xp-blue-050: #eef3ff;

    /* Signature diagonal gradient (matches the logo lettering) */
    --xp-gradient: linear-gradient(120deg, #08c23d 0%, #00a6c8 45%, #0a3ab5 100%);
    --xp-gradient-soft: linear-gradient(120deg, #0aa64f 0%, #0a86c8 50%, #0a3ab5 100%);

    /* Card system */
    --xp-radius: 16px;
    --xp-radius-sm: 12px;
    --xp-radius-pill: 999px;
    --xp-shadow: 0 6px 22px rgba(15, 32, 128, 0.08);
    --xp-shadow-hover: 0 16px 40px rgba(10, 58, 181, 0.18);
    --xp-border: 1px solid rgba(15, 32, 128, 0.08);

    /* Re-point the theme's core variables to the brand palette so buttons,
       links, badges, prices, etc. all recolor consistently. */
    --color-1st: var(--xp-blue);
    --primary-color: var(--xp-blue);
    --color-2nd: var(--xp-green);
    --secondary-color: var(--xp-green);
}

/* Links / accents follow the brand blue */
a:hover {
    color: var(--xp-blue-600);
}

/* --------------------------------------------------------------------
   Product cards — smoother edges + modern hover
   -------------------------------------------------------------------- */
.product .product__wrapper {
    border-radius: var(--xp-radius);
    background: #fff;
    border: var(--xp-border);
    box-shadow: var(--xp-shadow);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.product .product__wrapper:hover {
    transform: translateY(-6px);
    box-shadow: var(--xp-shadow-hover);
    border-color: rgba(10, 58, 181, 0.16);
}

.product .product__thumbnail {
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
    overflow: hidden;
    background: #f7f9fc;
}

.product .product__thumbnail img {
    border-radius: 0;
    transition: transform .5s ease;
}

.product .product__wrapper:hover .product__thumbnail img {
    transform: scale(1.05);
}

.product .product__content {
    padding: 16px 16px 18px;
}

/* Sale / label badges — rounded pills, brand sale color */
.product .product__badges .badge,
.badge {
    border-radius: var(--xp-radius-pill);
    padding: 5px 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

.product .product__badges .badge--sale,
.badge--sale {
    background: var(--xp-gradient) !important;
    color: #fff !important;
}

/* Wishlist heart bubble */
.product .product__favorite {
    border-radius: var(--xp-radius-pill);
    box-shadow: 0 4px 12px rgba(15, 32, 128, 0.12);
}

.product .product__favorite:hover {
    background: var(--xp-blue);
    color: #fff;
}

/* Product hover CTA (add to cart / select options) */
.product .product__actions a,
.add-to-cart-button,
.quick-shop-button {
    border-radius: var(--xp-radius-pill);
    background: var(--xp-gradient);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(10, 58, 181, 0.28);
    transition: filter .25s ease, transform .25s ease;
}

.product .product__actions a:hover,
.add-to-cart-button:hover,
.quick-shop-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff;
}

.product .product__title:hover {
    color: var(--xp-blue);
}

/* Price color = brand blue for consistency */
.product__price,
.product__price .price-text,
.product__price ins {
    color: var(--xp-navy);
}

/* Sale prices: original (struck) on top, discounted price below */
.product__price.sale,
.product-price--on-sale,
.bb-product-price.product-price--on-sale {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem;
}

/* Old/original price always red (override Bootstrap .text-muted and muted theme colors) */
.product__price.sale del,
.product__price.sale del *,
.product__price.sale .bb-product-price-text-old,
.product__price.sale .bb-product-price-text-old *,
.product__price.sale .xp-price-original,
.product__price.sale .xp-price-original *,
.product__price.sale .old-price,
.product__price.sale .old-price *,
.product__price.sale [data-bb-value="product-original-price"],
.product__price.sale [data-bb-value="product-original-price"] *,
.product-price--on-sale del,
.product-price--on-sale del *,
.product-price--on-sale .bb-product-price-text-old,
.product-price--on-sale .bb-product-price-text-old *,
.product-price--on-sale .xp-price-original,
.product-price--on-sale .xp-price-original *,
.product-price--on-sale .old-price,
.product-price--on-sale .old-price *,
.product-price--on-sale [data-bb-value="product-original-price"],
.product-price--on-sale [data-bb-value="product-original-price"] *,
.product--detail .product__price.sale del,
.product--detail .product__price.sale del *,
.table--orders .product__price.sale del,
.table--orders .product__price.sale del *,
.table--cart .product__price.sale del,
.table--cart .product__price.sale del * {
    color: #db1d2c !important;
    font-weight: 400;
}

.product__price.sale .bb-product-price-text-old,
.product__price.sale [data-bb-value="product-original-price"],
.product-price--on-sale .bb-product-price-text-old,
.product-price--on-sale [data-bb-value="product-original-price"] {
    order: 0;
}

.product__price.sale [data-bb-value="product-price"],
.product__price.sale [data-bb-value="product-price"] *,
.product__price.sale .product-price--sale,
.product__price.sale .product-price--sale *,
.product__price.sale .product-sale-price-text,
.product__price.sale .product-sale-price-text *,
.product-price--on-sale [data-bb-value="product-price"],
.product-price--on-sale [data-bb-value="product-price"] *,
.product-price--on-sale .product-price--sale,
.product-price--on-sale .product-price--sale *,
.product-price--on-sale .product-sale-price-text,
.product-price--on-sale .product-sale-price-text * {
    color: var(--xp-navy) !important;
    font-weight: 700;
    order: 1;
}

/* --------------------------------------------------------------------
   Buttons — modern, brand-gradient primary actions
   -------------------------------------------------------------------- */
.btn,
button.btn,
.button {
    border-radius: var(--xp-radius-pill);
    transition: filter .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn-primary,
.btn.btn-primary,
button[type="submit"].btn-primary,
.btn-checkout,
.add_to_cart_button,
.btn-add-to-cart {
    background: var(--xp-gradient) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(10, 58, 181, 0.25);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-checkout:hover,
.add_to_cart_button:hover,
.btn-add-to-cart:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--xp-blue) !important;
    color: var(--xp-blue) !important;
    border-radius: var(--xp-radius-pill);
}

.btn-outline-primary:hover {
    background: var(--xp-blue) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------
   Generic cards / panels / inputs — soften edges site-wide
   -------------------------------------------------------------------- */
.card,
.panel,
.widget,
.box-shadow,
.list-group,
.category-item,
.brand-item,
.blog-post .post__thumbnail,
.checkout-information,
.cart__wrapper {
    border-radius: var(--xp-radius);
}

.card {
    border: var(--xp-border);
    box-shadow: var(--xp-shadow);
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    border-radius: var(--xp-radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--xp-cyan);
    box-shadow: 0 0 0 3px rgba(0, 166, 200, 0.18);
}

/* --------------------------------------------------------------------
   Section headings — subtle brand accent
   -------------------------------------------------------------------- */
.section__title:after,
.section-title:after,
.widget-title:after,
.title-wrapper .title:after {
    background: var(--xp-gradient);
}

/* Category tiles on the homepage */
.category__item,
.categories__item,
.top-categories .item,
.top-category-item {
    border-radius: var(--xp-radius);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease;
}

.category__item:hover,
.categories__item:hover,
.top-categories .item:hover,
.top-category-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--xp-shadow-hover);
}

/* Cart / mini-cart badge already uses --color-1st (now brand blue) */
.btn-shopping-cart > span {
    background: var(--xp-gradient) !important;
}

/* Pagination + rating accents */
.pagination .page-item.active .page-link {
    background: var(--xp-blue);
    border-color: var(--xp-blue);
    border-radius: var(--xp-radius-sm);
}

/* Footer keeps contrast but links pick brand on hover */
.footer a:hover {
    color: var(--xp-cyan);
}

/* Loyalty points batch lists — grid layout avoids ecommerce table card overrides */
.loyalty-points-batch-list {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 1rem;
}

.loyalty-points-batch-list__head,
.loyalty-points-batch-list__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0;
}

.loyalty-points-batch-list--2col .loyalty-points-batch-list__head,
.loyalty-points-batch-list--2col .loyalty-points-batch-list__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loyalty-points-batch-list__head {
    border-bottom: 1px solid #dee2e6;
    color: #333;
    font-weight: 600;
    padding-top: 0;
}

.loyalty-points-batch-list__row {
    border-bottom: 1px solid #eee;
}

.loyalty-points-batch-list__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body[dir=rtl] .loyalty-points-batch-list__head,
body[dir=rtl] .loyalty-points-batch-list__row {
    text-align: right;
}

@media (max-width: 575px) {
    .loyalty-points-batch-list {
        padding-inline: 0.75rem;
    }

    .loyalty-points-batch-list__head,
    .loyalty-points-batch-list__row {
        gap: 0.5rem;
        font-size: 0.8125rem;
    }
}

/* --------------------------------------------------------------------
   Homepage collections — title + products + View all
   -------------------------------------------------------------------- */
.xp-collections__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Keep collection product cards equal height in each row */
.xp-collection-block__products {
    align-items: stretch;
}

.xp-collection-block__products > [class*="col-"] {
    display: flex !important;
}

.xp-collection-block .product,
.xp-collection-block .product .product__wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

.xp-collection-block .product .product__content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.xp-collection-block .product .product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.8em !important;
    min-height: 2.8em !important;
    max-height: 2.8em !important;
    line-height: 1.4 !important;
}

.xp-collection-block .product .product__price {
    min-height: 48px !important;
}

.xp-collection-block .product .product__thumbnail {
    height: 280px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    .xp-collections__list {
        gap: 2.25rem;
    }

    /* One horizontal sliding row per collection on mobile */
    .xp-collection-block__products--slider {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 12px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 4px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .xp-collection-block__products--slider::-webkit-scrollbar {
        display: none;
    }

    .xp-collection-block__products--slider > .xp-collection-block__item,
    .xp-collection-block__products--slider > [class*="col-"] {
        flex: 0 0 72% !important;
        width: 72% !important;
        max-width: 72% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-snap-align: start;
    }

    .xp-collection-block .product .product__thumbnail {
        height: 200px !important;
    }
}

@media (max-width: 480px) {
    .xp-collection-block__products--slider > .xp-collection-block__item,
    .xp-collection-block__products--slider > [class*="col-"] {
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
    }
}

body[dir="rtl"] .xp-collection-block__products--slider {
    scroll-snap-type: x mandatory;
}

.xp-collection-block__header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.xp-collection-block__title {
    margin: 0;
    color: var(--xp-navy);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.xp-collection-block__action {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.xp-collection-block__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 252px;
    padding: 0.7rem 3.15rem;
    border: 1.5px solid var(--xp-navy);
    border-radius: 12px;
    background: #fff;
    color: var(--xp-navy) !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.xp-collection-block__view-all:hover,
.xp-collection-block__view-all:focus {
    background: var(--xp-navy);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--xp-shadow);
}

body[dir="rtl"] .xp-collection-block__title {
    letter-spacing: 0;
    text-transform: none;
}

/* Pre-order badge + launch date — unified brand color (navy lightened 20%) */
.xp-preorder-badge,
.product__badges .badge.xp-preorder-badge {
    background-color: var(--xp-preorder) !important;
    color: #fff !important;
}

.xp-preorder-text {
    color: var(--xp-preorder) !important;
    font-weight: 600;
}

.product__preorder-date:not(.product__preorder-date--placeholder),
.home-products .product .product__preorder-date:not(.product__preorder-date--placeholder),
.section--pre-order-products .product .product__preorder-date:not(.product__preorder-date--placeholder),
.section--all-products .product .product__preorder-date:not(.product__preorder-date--placeholder),
.section--related-posts .product .product__preorder-date:not(.product__preorder-date--placeholder),
.shop__products .product .product__preorder-date:not(.product__preorder-date--placeholder),
.bb-product-items-wrapper .product .product__preorder-date:not(.product__preorder-date--placeholder) {
    color: var(--xp-preorder) !important;
}

.product__preorder-note {
    border-inline-start: 3px solid var(--xp-preorder);
    background: var(--xp-preorder-soft);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.product__preorder-note strong {
    color: var(--xp-preorder);
}

.pre-order-filters .btn.is-active,
.pre-order-filters .btn.active-preorder {
    background-color: var(--xp-preorder) !important;
    border-color: var(--xp-preorder) !important;
    color: #fff !important;
}

/* Category filter: keep expand button off the label in RTL (Arabic) */
.bb-product-filter-item {
    padding-right: unset !important;
    padding-inline-end: 20px !important;
    position: relative;
}

.bb-product-filter-item > button[data-bb-toggle="toggle-product-categories-tree"] {
    right: auto !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    width: auto !important;
    max-width: 1.5rem;
}

/* Price filter slider — noUiSlider (touch-draggable on phones) */
.bb-product-price-filter .price-slider,
.bb-product-price-filter .xp-noui-price-slider.noUi-target {
    touch-action: none !important;
    -ms-touch-action: none !important;
    height: 6px;
    margin: 18px 10px 14px;
    border: none;
    box-shadow: none;
    background: #dbe3f0;
    border-radius: 999px;
}

.bb-product-price-filter .xp-noui-price-slider .noUi-connect {
    background: var(--primary-color, #3b82f6);
}

.bb-product-price-filter .xp-noui-price-slider .noUi-handle {
    width: 22px !important;
    height: 22px !important;
    top: -8px !important;
    right: -11px !important;
    border-radius: 50% !important;
    border: 2px solid var(--primary-color, #3b82f6) !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: grab;
    touch-action: none !important;
    -ms-touch-action: none !important;
}

.bb-product-price-filter .xp-noui-price-slider .noUi-handle:before,
.bb-product-price-filter .xp-noui-price-slider .noUi-handle:after {
    display: none !important;
}

.bb-product-price-filter .xp-noui-price-slider .noUi-handle:active {
    cursor: grabbing;
}

@media (max-width: 991px) {
    .bb-product-price-filter .price-slider,
    .bb-product-price-filter .xp-noui-price-slider.noUi-target {
        height: 8px;
        margin: 22px 12px 16px;
    }

    .bb-product-price-filter .xp-noui-price-slider .noUi-handle {
        width: 28px !important;
        height: 28px !important;
        top: -10px !important;
        right: -14px !important;
    }

    .bb-product-price-filter .xp-noui-price-slider .noUi-handle .noUi-touch-area {
        width: 44px;
        height: 44px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }
}