/* Bumbleb (WPBingo) theme skin — yellow #f7c601 / black, Inter + Kanit.
   Loaded after color.php so it overrides the dynamic primary colour. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Kanit:wght@400;500;600;700&display=swap');

:root {
    --bb-accent: #f7c601;
    --bb-accent-dark: #c49d01;
    --bb-black: #000;
    --bb-text: #212529;
    --bb-muted: #9b9b9b;
    --bb-border: #e5e5e5;
    --bb-bg-soft: #f5f5f5;
    --bb-danger: #ef262c;
    --bb-success: #57bf6d;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--bb-text);
    background: #fff;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6,
.section-title h2, .widget-title, .product-card .product-title,
.page-title h1 {
    font-family: 'Kanit', sans-serif;
    color: var(--bb-black);
    font-weight: 500;
}

a { color: var(--bb-black); }
a:hover, a:focus { color: var(--bb-accent) !important; text-decoration: none; }

/* ---------- Header ---------- */
.menu-top-area { background: var(--bb-black) !important; border-bottom: 0; }
.menu-top-area a, .menu-top-area .main-link, .menu-top-area i { color: #fff !important; font-size: 13px; }
.menu-top-area a:hover, .menu-top-area .login-register:hover { color: var(--bb-accent) !important; }
.t-h-dropdown .t-h-dropdown-menu { border-top: 2px solid var(--bb-accent) !important; border-radius: 0; }
.t-h-dropdown a:hover, .t-h-dropdown a.active { color: var(--bb-accent) !important; }

.site-header, .site-header .topbar { background: #fff; }
.site-header .topbar { border-bottom: 1px solid var(--bb-border); }
.site-header .search-box { border: 1px solid var(--bb-black); border-radius: 0; overflow: hidden; }
.site-header .search-box .categoris { border: 0; border-right: 1px solid var(--bb-border); background: #fff; }
.site-header .search-box button[type=submit] { background: var(--bb-accent); color: var(--bb-black); }
.site-header .toolbar .toolbar-item > a { color: var(--bb-black) !important; }
.site-header .toolbar .toolbar-item > a > div > .compare-icon > .count-label,
.site-header .toolbar .toolbar-item > a > div > .cart-icon > .count-label {
    background-color: var(--bb-accent) !important;
    color: var(--bb-black) !important;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
}
.site-header .site-menu > ul > li > a { color: var(--bb-black); font-weight: 500; text-transform: capitalize; }
.site-header .site-menu > ul > li:hover > a,
.site-header .site-menu > ul > li.active > a { color: var(--bb-accent) !important; }
.mm-heading-area { background: var(--bb-black) !important; }

/* ---------- Buttons (fill-up yellow on hover, like the theme) ---------- */
.btn, .btn-primary, .btn-default, .btn-outline-primary {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: var(--bb-black) !important;
    border: 1px solid var(--bb-black);
    border-radius: 0;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    transition: color .2s ease-in-out, border-color .2s ease-in-out;
}
.btn::before, .btn-primary::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 0;
    background: var(--bb-accent);
    opacity: 0;
    z-index: -1;
    transition: all .2s ease-in-out;
}
.btn:hover, .btn-primary:hover, .btn-default:hover, .btn-outline-primary:hover {
    color: var(--bb-black) !important;
    border-color: var(--bb-accent) !important;
    background-color: var(--bb-black) !important;
}
.btn:hover::before, .btn-primary:hover::before { height: 100%; opacity: 1; }
.btn-outline-primary { background: transparent !important; color: var(--bb-black) !important; }
.btn-default { border-color: var(--bb-muted); }

/* ---------- Section titles ---------- */
.section-title h2 { font-size: 30px; text-transform: capitalize; }
.section-title h2::before, .section-title .links a::before, .widget-title::after {
    background: var(--bb-accent) !important;
}
.section-title .links a:hover, .section-title .links a.active,
.section-title .right_link:hover, #quick_filter li a:hover, #quick_filter li a.active {
    color: var(--bb-black) !important;
}

/* ---------- Product cards ---------- */
.product-card {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    transition: border-color .3s, box-shadow .3s;
}
.product-card:hover { border-color: var(--bb-border); box-shadow: 0 5px 25px rgba(0, 0, 0, .08); }
.product-card .product-title a { color: var(--bb-black); font-weight: 500; }
.product-card .product-title > a:hover,
.product-card .product-category > a:hover { color: var(--bb-accent) !important; }
.product-card .product-category a { color: var(--bb-muted); }
.product-card .product-price { color: var(--bb-black) !important; font-weight: 600; }
.product-card .product-price del { color: var(--bb-muted); font-weight: 400; }
.product-card .product-badge, .product-card .badge {
    background: var(--bb-danger); color: #fff; border-radius: 0;
}
.product-card .product-button-group .product-button {
    background: #fff !important;
    color: var(--bb-black) !important;
    border: 1px solid var(--bb-border);
    border-radius: 50%;
}
.product-card .product-button-group .product-button:hover {
    background: var(--bb-accent) !important;
    border-color: var(--bb-accent);
}
.product-card .countdown span { background: var(--bb-black) !important; color: #fff; }
.rating-stars i.filled, .rating-stars .active { color: var(--bb-accent); }

/* ---------- Carousel nav / dots ---------- */
.owl-carousel .owl-nav div { border-radius: 50%; background: #fff; color: var(--bb-black); border: 1px solid var(--bb-border); }
.owl-carousel .owl-nav div:hover { background: var(--bb-accent) !important; color: var(--bb-black) !important; border-color: var(--bb-accent); }
.hero-slider > .owl-carousel.dots-inside .owl-dots .owl-dot { background-color: var(--bb-accent) !important; }

/* ---------- Tabs / pagination / forms ---------- */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: var(--bb-accent) !important; color: var(--bb-black) !important;
}
.pagination li a, .pagination li span { border-radius: 0; color: var(--bb-black); }
.pagination li a:hover, .pagination li span:hover,
.pagination li.active span, .pagination li.active a {
    background: var(--bb-accent) !important; border-color: var(--bb-accent); color: var(--bb-black) !important;
}
.form-control { border-radius: 0; border-color: var(--bb-border); }
.form-control:focus { border-color: var(--bb-black); box-shadow: none; }
.text-primary, .text-base-color, .details-page-top-right-content .price-area .main-price,
.details-page-top-right-content a, .breadcrumbs > li > a:hover {
    color: var(--bb-black) !important;
}
.details-page-top-right-content .countdown span { background: var(--bb-black) !important; }
.scroll-to-top-btn { background: var(--bb-accent); color: var(--bb-black); }
.scroll-to-top-btn:hover { background-color: var(--bb-black) !important; color: #fff !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bb-black); color: #cfcfcf; }
.site-footer h3, .site-footer h4, .site-footer .widget-title { color: #fff; }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: var(--bb-accent) !important; }
.footer-social-links a, .a2a_kit a {
    background: transparent !important;
    border: 1px solid #444;
    color: #fff;
    border-radius: 50%;
}
.footer-social-links a:hover { background: var(--bb-accent) !important; border-color: var(--bb-accent); color: var(--bb-black) !important; }
.footer-copyright { color: var(--bb-muted); }