/* ============================= */
/* ROOT COLOR SYSTEM */
/* ============================= */
:root {
    --primary: #2563EB;
    --primary-dark: #1E40AF;
    --primary-light: #60A5FA;
    --primary-soft: rgba(37, 99, 235, 0.1);
    --text-dark: #2F2F2F;
    --text-light: #ffffff;
}

/* ============================= */
/* GLOBAL */
/* ============================= */
* {
    transition: all 0.25s ease-in-out;
}

a:hover,
a:focus {
    color: var(--primary-light);
}

/* ============================= */
/* BACKGROUND */
/* ============================= */
.bg-color2,
.footer-copyright.bg-color2 {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ============================= */
/* BUTTON */
/* ============================= */
.btn-custom,
.btn-custom-red {
    background: transparent;
    border: none;
    height: 40px;
    padding: 0 8px;
}

.btn-custom {
    color: var(--text-dark);
}

.btn-custom-red {
    color: var(--primary);
}

.btn-custom:hover,
.btn-custom-red:hover {
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

/* ============================= */
/* NAV */
/* ============================= */
.main-nav > ul > li:hover > a {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ============================= */
/* SEARCH */
/* ============================= */
.smart-search {
    border-color: var(--primary);
}

.smart-search-form input[type="submit"] {
    background: var(--primary);
    color: #fff;
}

/* ============================= */
/* PRODUCT */
/* ============================= */
.product-title a:hover,
.price-from span,
.product-price ins {
    color: var(--primary);
}

/* ============================= */
/* CART */
/* ============================= */
.mini-cart-icon,
.mini-cart1 .mini-cart-icon {
    background: var(--primary);
    color: #fff;
}

/* ============================= */
/* PAGINATION */
/* ============================= */
.pagi-bar a:hover,
.pagi-bar a.current-page {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ============================= */
/* SOCIAL */
/* ============================= */
.list-social > a:hover,
.footer-box6 .list-social > a:hover,
.social-footer9 .list-social > a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================= */
/* FORM */
/* ============================= */
input[type="submit"],
.newsletter-form input[type="submit"],
.form-contact input[type="submit"] {
    background: var(--primary);
    color: #fff;
}

input[type="submit"]:hover {
    background: var(--primary-dark);
}

/* ============================= */
/* TAG */
/* ============================= */
.widget-tag-cloud li a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================= */
/* BORDER */
/* ============================= */
.title-box1,
.title-box3,
.title-box6,
.header-nav3,
.latest-news6,
.brand-box17 {
    border-color: var(--primary);
}

/* ============================= */
/* HOVER EFFECT */
/* ============================= */
.product-extra-link a:hover,
.quickview-link:hover,
.addcart-link:hover,
.shop-button:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 12px var(--primary-light);
}

/* ============================= */
/* ICON / TEXT */
/* ============================= */
.color,
.current-color,
.current-size,
.detail-qty > a:hover {
    color: var(--primary);
}

/* ============================= */
/* SLIDER */
/* ============================= */
.owl-theme .owl-controls .owl-buttons div:hover {
    background: var(--primary);
    color: #fff;
}

.owl-theme .owl-controls .owl-page.active span {
    background: var(--primary);
}

/* ============================= */
/* CATEGORY */
/* ============================= */
.list-cat-icon > li:hover > a,
.list-cat-mega-menu a:hover {
    color: var(--primary);
}

/* ============================= */
/* ACCENT */
/* ============================= */
.title-box1 .title30 span,
.deal-percent,
.flash-label::before {
    background: var(--primary);
    color: #fff;
}

/* ============================= */
/* SPECIAL FIX (SEMUA YANG DULU MERAH) */
/* ============================= */
.header-nav7,
.order_review_heading,
.title-box19::before,
.item-product19 .saleoff,
.mini-cart-checkout19 a,
.wc-proceed-to-checkout a.checkout-button {
    background: var(--primary);
    color: #fff;
}

/* ============================= */
/* GLOW EFFECT */
/* ============================= */
.quickview-link:hover,
.scroll-top:hover {
    box-shadow: 0 0 15px var(--primary-light);
}

/* ============================= */
/* MOBILE */
/* ============================= */
@media (max-width: 767px) {
    .main-nav > ul > li:hover > a {
        color: var(--primary) !important;
    }
}