/* Theme Gadget Customizations to match Gadget & Gear */
:root {
    --bg-black: #000000;
    --gadget-yellow: #f7a400;
    --gadget-yellow-hover: #e09600;
}

/* Header Black overrides */
.header,
.header-top,
.header-middle,
.header-main {
    background-color: var(--bg-black) !important;
    color: #ffffff !important;
}

.header a,
.header .text-dark,
.header .bi {
    color: #ffffff !important;
}

.header .search-box .search-line {
    background: #fff;
    border-radius: 8px;
    padding: 0;
}

.header .search-box input {
    background: transparent !important;
    color: #000 !important;
    border: none !important;
}

.header .search-box input::placeholder {
    color: #888 !important;
}

.header .search-box button {
    background-color: var(--gadget-yellow) !important;
    border-color: var(--gadget-yellow) !important;
    color: #000 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Typography Overrides */
body {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    background-color: #f4f4f4;
}

.btn-primary {
    background-color: var(--gadget-yellow) !important;
    border-color: var(--gadget-yellow) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--gadget-yellow-hover) !important;
}

/* Dropdown styling */
.header .dropdown-menu {
    background-color: #333 !important;
}

.header .dropdown-menu a {
    color: #fff !important;
}

.header .dropdown-menu a:hover {
    background-color: #444 !important;
    color: var(--gadget-yellow) !important;
}

/* Base Footer */
.footer,
.footer-top,
.footer-main,
.footer-bottom {
    background-color: var(--bg-black) !important;
    border-color: #333 !important;
    color: #ffffff !important;
}

.footer .widget__title {
    color: #ffffff !important;
}

.footer .text-absolute-white,
.footer .absolute-white,
.footer a {
    color: #cccccc !important;
}

.footer a:hover {
    color: var(--gadget-yellow) !important;
}

.footer .newsletter-form button {
    background-color: var(--gadget-yellow) !important;
    border-color: var(--gadget-yellow) !important;
    color: #000 !important;
}

.footer .footer-bg-img {
    display: none !important;
    /* Remove background image from Gadget & Gear theme footer */
}