/* =========================================
   CUSTOM OPENCART THEME
   Shared styling for all custom themes
   ========================================= */


/* ---------- PAGE ---------- */

html,
body {
    background-color: var(--page-bg);
    color: var(--text);
}

body {
    min-height: 100vh;
}


/* ---------- GENERAL TEXT ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
label,
legend,
p,
span,
small,
strong {
    color: var(--text);
}

.text-muted {
    color: var(--text-muted) !important;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}


/* ---------- TOP BAR ---------- */

#top {
    background-color: var(--top-bg);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

#top a,
#top .btn-link,
#top button {
    color: var(--text-muted);
}

#top a:hover,
#top .btn-link:hover,
#top button:hover {
    color: var(--accent);
}


/* ---------- HEADER ---------- */

header {
    background-color: var(--header-bg);
    padding-top: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}


/* ---------- MAIN CONTENT ---------- */

main {
    background-color: var(--page-bg);
}

.container,
.container-fluid {
    color: var(--text);
}


/* ---------- NAVIGATION ---------- */

#menu {
    background-color: var(--panel-bg);
    border-color: var(--border);
}

#menu .nav-link,
#menu a {
    color: var(--text);
}

#menu .nav-link:hover,
#menu a:hover {
    color: var(--accent);
}

.navbar,
.navbar-nav {
    background-color: transparent;
}


/* ---------- SEARCH ---------- */

#search .form-control,
#search input {
    background-color: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

#search .form-control::placeholder,
#search input::placeholder {
    color: var(--text-muted);
}

#search .form-control:focus,
#search input:focus {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem var(--accent-soft);
}

#search button,
#search .btn {
    background-color: var(--panel-hover);
    color: var(--text);
    border-color: var(--border);
}

#search button:hover,
#search .btn:hover {
    background-color: var(--accent);
    color: var(--button-text);
    border-color: var(--accent);
}


/* ---------- CART ---------- */

#header-cart .btn,
#header-cart button {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

#header-cart .btn:hover,
#header-cart button:hover {
    background-color: var(--panel-hover);
    border-color: var(--accent);
}


/* ---------- PRODUCT CARDS ---------- */

.product-thumb {
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.product-thumb:hover {
    background-color: var(--panel-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow);
}

.product-thumb .image {
    background-color: var(--image-bg);
}

.product-thumb .content,
.product-thumb .description {
    background-color: transparent;
    color: var(--text-muted);
}

.product-thumb h4,
.product-thumb h4 a {
    color: var(--text);
}

.product-thumb h4 a:hover {
    color: var(--accent);
}

.product-thumb .price {
    color: var(--accent);
}

.product-thumb .price-old {
    color: var(--text-muted);
}


/* ---------- BUTTONS ---------- */

.btn {
    border-radius: 8px;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--button-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--button-text);
}

.btn-light,
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.btn-light:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--panel-hover);
    color: var(--accent);
    border-color: var(--accent);
}


/* ---------- INPUTS ---------- */

.form-control,
.form-select,
textarea,
input,
select {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--text-muted);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem var(--accent-soft);
}

.form-select option {
    background-color: var(--panel-bg);
    color: var(--text);
}


/* ---------- DROPDOWNS ---------- */

.dropdown-menu {
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px var(--shadow);
}

.dropdown-item {
    color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--panel-hover);
    color: var(--accent);
}

.dropdown-divider {
    border-color: var(--border);
}


/* ---------- CARDS / PANELS ---------- */

.card {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.card-header,
.card-footer {
    background-color: var(--panel-hover);
    border-color: var(--border);
    color: var(--text);
}


/* ---------- LIST GROUPS ---------- */

.list-group-item {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.list-group-item:hover {
    background-color: var(--panel-hover);
    color: var(--accent);
}


/* ---------- TABLES ---------- */

.table {
    color: var(--text);
    border-color: var(--border);
}

.table > :not(caption) > * > * {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--panel-hover);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--panel-hover);
}


/* ---------- BREADCRUMBS ---------- */

.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--text-muted);
}

.breadcrumb-item a:hover {
    color: var(--accent);
}

.breadcrumb-item.active {
    color: var(--text);
}


/* ---------- PAGINATION ---------- */

.page-link {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.page-link:hover {
    background-color: var(--panel-hover);
    color: var(--accent);
    border-color: var(--accent);
}

.active > .page-link,
.page-link.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--button-text);
}


/* ---------- ALERTS ---------- */

.alert {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}


/* ---------- MODALS ---------- */

.modal-content {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}


/* ---------- OFFCANVAS ---------- */

.offcanvas {
    background-color: var(--panel-bg);
    color: var(--text);
}


/* ---------- ACCORDIONS ---------- */

.accordion-item,
.accordion-button {
    background-color: var(--panel-bg);
    color: var(--text);
    border-color: var(--border);
}

.accordion-button:not(.collapsed) {
    background-color: var(--panel-hover);
    color: var(--accent);
}


/* ---------- HR / BORDERS ---------- */

hr {
    border-color: var(--border);
    opacity: 1;
}


/* ---------- FOOTER ---------- */

footer {
    background-color: var(--footer-bg);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

footer h5,
footer h4 {
    color: var(--text);
}

footer a {
    color: var(--text-muted);
}

footer a:hover {
    color: var(--accent);
}


/* ---------- SCROLLBAR ---------- */

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

::-webkit-scrollbar-track {
    background: var(--page-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}