/* =========================================================
   BLSKO PLUS
   BLUE x BLACK PREMIUM THEME
   ========================================================= */

:root {
    --blsko-blue: #08c9e3;
    --blsko-blue-2: #00a9c0;
    --blsko-black: #050708;
    --blsko-dark: #091114;
    --blsko-white: #ffffff;
    --blsko-bg: #f5f8f9;
    --blsko-text: #101719;
    --blsko-muted: #727d80;
    --blsko-border: #e5ebed;
}


/* =========================================================
   BODY
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--blsko-bg) !important;
    color: var(--blsko-text) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
.store-header,
.header {
    background: var(--blsko-black) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(8,201,227,.12) !important;
}

header a,
.store-header a,
.header a {
    color: #fff !important;
}

header svg,
.store-header svg,
.header svg {
    color: var(--blsko-blue) !important;
}

.sicon-menu:before,
.sicon-search:before,
.sicon-shopping-bag:before,
.sicon-user:before,
.sicon-cart:before {
    color: var(--blsko-blue) !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-header,
.header-top,
.top-bar {
    background: #020506 !important;
    color: #fff !important;
}

.top-header *,
.header-top *,
.top-bar * {
    color: #fff;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav,
.navbar,
.main-nav,
.header-nav {
    background: var(--blsko-black) !important;
}

nav a,
.navbar a,
.main-nav a,
.header-nav a {
    transition: .25s ease !important;
}

nav a:hover,
.navbar a:hover,
.main-nav a:hover,
.header-nav a:hover {
    color: var(--blsko-blue) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.button,
.btn,
.s-button-element,
.add-to-cart,
.s-button-primary {
    border-radius: 13px !important;
    transition: .3s ease !important;
}

.s-button-primary,
.btn-primary,
.button-primary {
    background: var(--blsko-blue) !important;
    border-color: var(--blsko-blue) !important;
    color: #001317 !important;
    font-weight: 800 !important;
}

.s-button-primary:hover,
.btn-primary:hover,
.button-primary:hover {
    background: #2cdef0 !important;
    border-color: #2cdef0 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(8,201,227,.18) !important;
}


/* =========================================================
   الأقسام الرئيسية
   ========================================================= */

.s-block {
    position: relative;
    margin-top: 65px !important;
    margin-bottom: 65px !important;
}

.s-block__title {
    margin-bottom: 28px !important;
}

.s-block__title h2,
.s-block__title .title {
    color: var(--blsko-text) !important;
    font-weight: 900 !important;
    letter-spacing: -.5px;
}

.s-block__title p {
    color: var(--blsko-muted) !important;
}


/* =========================================================
   عناوين الأقسام — خط أزرق صغير
   ========================================================= */

.s-block__title h2::before {
    content: "";
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-left: 9px;

    border-radius: 50%;

    background: var(--blsko-blue);

    box-shadow:
        0 0 12px rgba(8,201,227,.45);
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.salla-product-card,
.product-card,
.s-product-card {
    position: relative !important;

    overflow: hidden !important;

    border-radius: 20px !important;

    background: #fff !important;

    border: 1px solid var(--blsko-border) !important;

    box-shadow: 0 5px 20px rgba(0,0,0,.025) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


.salla-product-card:hover,
.product-card:hover,
.s-product-card:hover {
    transform: translateY(-7px) !important;

    border-color: rgba(8,201,227,.3) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.08) !important;
}


/* =========================================================
   صور المنتجات
   ========================================================= */

.salla-product-card img,
.product-card img,
.s-product-card img {
    transition: transform .5s ease !important;
}


.salla-product-card:hover img,
.product-card:hover img,
.s-product-card:hover img {
    transform: scale(1.045) !important;
}


/* =========================================================
   اسم المنتج
   ========================================================= */

.salla-product-card h3,
.salla-product-card .product-title,
.product-card h3,
.product-card .product-title {
    color: var(--blsko-text) !important;

    font-weight: 800 !important;

    transition: color .25s ease;
}


.salla-product-card:hover h3,
.product-card:hover h3 {
    color: var(--blsko-blue-2) !important;
}


/* =========================================================
   أسعار المنتجات
   ========================================================= */

.salla-product-card .price,
.salla-product-card .product-price,
.product-card .price,
.product-card .product-price {
    color: var(--blsko-blue-2) !important;

    font-weight: 900 !important;
}


.salla-product-card .old-price,
.product-card .old-price {
    color: #999 !important;
}


/* =========================================================
   زر إضافة للسلة
   ========================================================= */

.salla-product-card .add-to-cart,
.product-card .add-to-cart,
.s-product-card .add-to-cart {
    background: var(--blsko-blue) !important;

    color: #001317 !important;

    border: 0 !important;

    border-radius: 12px !important;

    font-weight: 900 !important;

    transition: .3s ease !important;
}


.salla-product-card .add-to-cart:hover,
.product-card .add-to-cart:hover,
.s-product-card .add-to-cart:hover {
    background: #2cdef0 !important;

    transform: translateY(-2px);
}


/* =========================================================
   BADGES / TAGS
   ========================================================= */

.salla-product-card .badge,
.product-card .badge,
.s-product-card .badge,
.badge {
    background: var(--blsko-blue) !important;

    color: #001317 !important;

    border: 0 !important;

    border-radius: 9px !important;

    font-weight: 900 !important;
}


/* =========================================================
   BANNERS
   ========================================================= */

.s-block img {
    transition: transform .6s ease;
}

.s-block a {
    transition: .3s ease;
}


/* صور البانرات */

.s-block img:hover {
    transform: scale(1.015);
}


/* =========================================================
   COLLECTIONS / CATEGORIES
   ========================================================= */

.collection-card,
.category-card,
.s-block--categories .item {
    overflow: hidden !important;

    border-radius: 22px !important;

    background: #fff !important;

    border: 1px solid var(--blsko-border) !important;

    transition: .35s ease !important;
}


.collection-card:hover,
.category-card:hover,
.s-block--categories .item:hover {
    transform: translateY(-6px) !important;

    border-color: rgba(8,201,227,.3) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.07) !important;
}


/* =========================================================
   الخلفيات الخاصة بالأقسام
   ========================================================= */

.s-block--full-bg {
    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f8fa
        ) !important;
}


.s-block--full-bg::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    border: 1px solid rgba(8,201,227,.08);

    left: -120px;
    top: -120px;

    pointer-events: none;
}


/* =========================================================
   قسم داكن
   ========================================================= */

.blsko-dark-section {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(8,201,227,.13),
            transparent 28%
        ),
        #050708 !important;

    color: #fff !important;

    border-radius: 28px;

    padding: 40px !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

input,
textarea,
select,
.search-input {
    border-radius: 13px !important;

    border-color: var(--blsko-border) !important;

    transition: .25s ease !important;
}


input:focus,
textarea:focus,
select:focus,
.search-input:focus {
    border-color: var(--blsko-blue) !important;

    box-shadow:
        0 0 0 3px rgba(8,201,227,.08) !important;

    outline: none !important;
}


/* =========================================================
   CART
   ========================================================= */

.cart,
.cart-item,
.s-cart-item {
    border-radius: 18px !important;
}


.cart-total,
.s-cart-summary {
    color: var(--blsko-blue-2) !important;

    font-weight: 900 !important;
}


/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page,
.product-details {
    border-radius: 25px;
}


.product-page .price,
.product-details .price {
    color: var(--blsko-blue-2) !important;

    font-weight: 950 !important;
}


.product-page button,
.product-details button {
    background: var(--blsko-blue) !important;

    color: #001317 !important;

    border-radius: 14px !important;

    font-weight: 900 !important;
}


/* =========================================================
   TABS
   ========================================================= */

.tabs a,
.nav-tabs a,
.tab-button {
    transition: .25s ease !important;
}


.tabs a:hover,
.nav-tabs a:hover,
.tab-button:hover {
    color: var(--blsko-blue) !important;
}


.tabs .active,
.nav-tabs .active,
.tab-button.active {
    color: var(--blsko-blue) !important;

    border-color: var(--blsko-blue) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer {
    margin-top: 80px !important;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(8,201,227,.10),
            transparent 28%
        ),
        #050708 !important;

    color: #fff !important;
}


footer a,
.footer a {
    color: rgba(255,255,255,.65) !important;

    transition: .25s ease;
}


footer a:hover,
.footer a:hover {
    color: var(--blsko-blue) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #050708;
}

::-webkit-scrollbar-thumb {
    background: var(--blsko-blue);
    border-radius: 20px;
}


/* =========================================================
   ظهور ناعم
   ========================================================= */

.s-block {
    animation: blskoSectionIn .7s ease both;
}


@keyframes blskoSectionIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .s-block {
        margin-top: 42px !important;
        margin-bottom: 42px !important;
    }

    .s-block__title {
        margin-bottom: 20px !important;
    }

    .s-block__title h2 {
        font-size: 23px !important;
    }

    .salla-product-card,
    .product-card,
    .s-product-card {
        border-radius: 16px !important;
    }

    .salla-product-card h3,
    .product-card h3 {
        font-size: 13px !important;
    }

    .salla-product-card .price,
    .product-card .price {
        font-size: 15px !important;
    }

    .blsko-dark-section {
        padding: 25px !important;
        border-radius: 22px;
    }

    footer,
    .footer {
        margin-top: 50px !important;
    }

}