:root {
    /* -------------------- Preserved Colors -------------------- */
    --main-color: #26A37C;          /* Primary accent color (greenish) */
    --secondary-color: #4D7EA8;     /* Secondary accent color (blueish) */

    /* -------------------- Adjusted Colors for Dark Theme -------------------- */
    --text-color: #e0e0e0;          /* Light gray for general text */
    --light-color: #ffffff;            /* White text */
    --text-color: #e0e0e0;            /* Light gray text */
    --dark-color: #1e1e1e;          /* Slightly lighter than pure black for better contrast */
    --light-color: #6b94b8;         /* Neutral or accent color */
    --hover-color: #125842;         /* Hover state color */
    --dark-background: #121516;     /* Deep dark background for the overall theme */

    /* -------------------- Additional Variables from dark.css -------------------- */
    --background-color: #121516;     /* Main background color */
    --background-100: #1e1e1e;       /* Secondary background shade */
    --background-200: #2a2a2a;       /* Tertiary background shade */
    --background-300: #3c4245;       /* Quaternary background shade */
    --background-800: #454545;       /* Accent background shade */
    --primary-100: #26A37C;          /* Same as --main-color */
    --primary-200: #32ce9d;          /* Same as --hover-color */
    --accent-950: #8c8c8c;           /* Accent color */

    /* -------------------- Optional Additional Variables -------------------- */
    --border-color: #333333;         /* Dark borders */
    --card-background: #1e1e1e;      /* Dark cards or containers */
    --input-background: #2a2a2a;     /* Dark input fields */
    --input-text-color: #ffffff;     /* White text in input fields */
}

/* -------------------- Scrollbar Styling -------------------- */
* {
    scrollbar-color: var(--background-300) var(--background-color);
    /* Optional: Customize scrollbar for WebKit browsers */
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--background-300);
    border-radius: 4px;
    border: 2px solid var(--background-color);
}

/* -------------------- General Styles -------------------- */

/* Body */
body {
    background-color: var(--dark-background);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

/* Links */
.link-color {
    color: var(--main-color);
}

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

::-moz-selection { /* Firefox */
    color: var(--dark-color);
    background: var(--main-color);
}

::selection {
    color: var(--dark-color);
    background: var(--main-color);
}

/* -------------------- Header -------------------- */
.main-container-wrapper .sticky-header {
    height: 60px;
    background-color: var(--background-color);
    color: var(--text-color);
}

header #search-form {
    height: 50px;
    background-color: var(--card-background);
}

header .left-wrapper {
    padding-top: 5px;
}

/* Search Form */
header #search-form #header-search-icon {
    background-color: var(--main-color);
}

header #search-form .btn-group select,
header #search-form .quantity select,
header #search-form input {
    border: 1px solid var(--main-color);
    background-color: var(--input-background);
    color: var(--input-text-color);
}

header #search-form select.form-control.fs13.styled-select {
    color: var(--text-color);
}

/* Mini Cart in Header */
header .mini-cart-container #mini-cart .mini-cart-content {
    color: var(--text-color);
}

header .mini-cart-container #mini-cart .mini-cart-content .material-icons-outlined,
header .mini-cart-container #mini-cart .mini-cart-content .cart-text {
    color: var(--text-color);
}

/* Compare and Wishlist Badges */
header .left-wrapper .compare-btn .badge-container .badge,
header .left-wrapper .wishlist-btn .badge-container .badge,
.mini-cart-container #mini-cart .badge {
    background: var(--main-color);
}

/* Branch Modal */
#branchModal .choose-branch {
    background-color: var(--main-color);
    color: var(--text-color) !important;
}

.main-content-wrapper .main-category {
    color:var(--dark-color) !important;
    background: var(--main-color) !important;
}

/* -------------------- Main Content -------------------- */
.main-content-wrapper .content-list ul {
    background-color: var(--card-background);
    color: var(--text-color);
}

.main-content-wrapper .content-list ul li {
    background-color: var(--card-background);
}

.main-content-wrapper .content-list ul li a {
    color: var(--text-color);
}

.main-content-wrapper .content-list ul li:hover {
    background-color: var(--background-300);
    border-bottom: 3px solid var(--primary-100);
}

.main-content-wrapper .content-list ul li:hover > a {
    color: var(--main-color);
}

/* Categories Sidemenu */
.categories-sidemenu .parent a,
.categories-sidemenu .current,
.sidebar .category-content .category-title {
    color: var(--text-color) !important;
}
.category-list-container li a:hover .category-title {
    color: var(--dark-color) !important;
}
.category-list-container .sub-categories {
    background: var(--background-300);
}

/* -------------------- Buttons -------------------- */
.theme-btn,
.cart-details .continue-shopping-btn,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button,
.quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button,
.account-content .account-layout .bottom-toolbar .pagination .page-item {
    background-color: var(--main-color) !important;
    border: none;
    color: var(--text-color) !important;
}

.theme-btn:hover,
.cart-details .continue-shopping-btn:hover,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn:hover,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button:hover,
.quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button:hover,
.account-content .account-layout .bottom-toolbar .pagination .page-item:hover,
.btn-add-to-cart:hover {
    border-color: var(--main-color);
    background-color: var(--hover-color);
}

.btn-add-to-cart,
.carousel-products.with-recent-viewed .btn-add-to-cart {
    border-color: var(--main-color) !important;
    background-color: var(--main-color) !important;
}

.btn-outline-dark {
    color: #8c8c8c !important;
    border-color: #8c8c8c !important;
}

/* Focus States */
.theme-btn:focus,
.cart-details .continue-shopping-btn:focus,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.btn:focus,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button:focus,
.quantity .account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button:focus,
.account-content .account-layout .bottom-toolbar .pagination .page-item:focus {
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
}

/* -------------------- Buttons Variants -------------------- */
.theme-btn.light,
.cart-details .light.continue-shopping-btn,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.light.btn,
.account-content .account-layout .account-table-content #datagrid-filters .dropdown-filters .dropdown-container .quantity button.light,
.quantity .account-content .account-layout .bottom-toolbar .pagination button.page-item,
.quantity .account-content .account-layout .bottom-toolbar .pagination .account-table-content #datagrid-filters .dropdown-filters .dropdown-container button.page-item,
.account-content .account-layout .bottom-toolbar .pagination .account-table-content .dropdown-filters .dropdown-container button.btn.page-item,
.account-content .account-layout .bottom-toolbar .pagination .page-item {
    color: var(--main-color);
}

/* -------------------- Stickers and Icons -------------------- */
.sticker.new {
    background-color: var(--main-color);
}

.wishlist-icon i,
.product-card-new .card-body .compare-icon i {
    color: var(--main-color);
}

/* -------------------- Footer -------------------- */
.footer,
.footer .footer-content > .row {
    background: var(--background-color) !important;
}

.footer-content {
    background: radial-gradient(circle, var(--primary-100) 0%, var(--primary-200) 100%) !important;
}

.footer .footer-content > .row .footer-ct-content > div ul li a,
.footer .footer-content > .row .footer-rt-content h3,
.footer .footer-content > .row .footer-ct-content > div ul li {
    color: var(--secondary-color);
}

.footer .footer-content .newsletter-subscription {
    background-color: var(--hover-color);
}

.footer .footer-content .newsletter-subscription .newsletter-wrapper input.subscribe-field {
    background: var(--background-100) !important;
}

.footer .footer-content .newsletter-subscription .newsletter-wrapper button.subscribe-btn {
    background-color: var(--main-color) !important;
}

.footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons .within-circle {
    color: var(--primary-200);
    background: var(--text-color);
}

.footer .footer-content > .row .footer-ct-content > div ul li a:hover {
    color: var(--main-color);
}

/* -------------------- Banners and Icons -------------------- */
.banner-icon {
    object-fit: cover;
    object-position: 0px 35%;
}

/* -------------------- View Mode -------------------- */
.view-mode .rango-view-grid-container.active,
.view-mode .rango-view-list-container.active {
    background-color: var(--main-color);
}

/* -------------------- Modals -------------------- */
.modal-content {
    background: var(--background-300);
    color: var(--text-color);
    border: 1px solid var(--background-300);
}

.modal-parent {
    background: rgb(80 80 80 / 90%);
}

#branchModal .modal-content {
    background-color: var(--background-300);
    color: var(--text-color);
    border: 1px solid var(--background-300);
}

#branchModal select {
    background-color: var(--background-color);
    color: var(--text-color);
}

#branchModal option {
    background-color: var(--background-300) !important;
}

/* Product Quick View Modal */
.cd-quick-view {
    background: var(--background-300);
}

.counter-input input,
.counter-input button {
    background: var(--background-100) !important;
}

.varition-div.active {
    background: var(--main-color) !important;
}

.varition-div:has(.variation-item) {
    border: 1px solid var(--main-color) !important;
}

.view-product p {
    color: var(--text-color) !important;
}

/* -------------------- Forms and Inputs -------------------- */
input,
select,
textarea,
.edit-complaint .form-control,
.image-wrapper .image-item {
    background: var(--background-300) !important;
    color: var(--text-color);
}

.form-style {
    color: var(--text-color);
}

/* -------------------- Tables -------------------- */
.table thead th,
.table td,
.table th {
    color: var(--text-color);
}

/* -------------------- Pagination and Tabs -------------------- */
.pagination,
.tabs {
    color: var(--text-color);
}

/* -------------------- Labels and Policies -------------------- */
.label-style,
.policy .left i,
.role.locales-new,
.static-container,
.full-specifications,
.account-table-content,
.bb-social-share__title,
.login .form-check-label,
#store-profile-image p.click-upload,
.product-card-new .product-rating span,
.text-nowrap,
.product-card-new .product-rating,
header .mini-cart-container #mini-cart .mini-cart-content,
.account-content .account-layout .sale-container .tabs-content .sale-section .section-content .totals .sale-summary,
.account-content .account-layout .sale-container .order-box-container,
.nav-container .wrapper .greeting > i,
ul.meta-wrapper,
.reviews-container,
.empty,
textarea#cd-textarea,
.contact input#phone_number {
    color: var(--text-color) !important;
}

/* -------------------- Cards and Containers -------------------- */
.card,
.card-icon,
header #search-form .btn-group .selectdiv .select-icon,
header #search-form .quantity .selectdiv .select-icon,
#sidebar-level-0,
.sidebar .sub-categories .category,
.card-icon:hover,
.card .product-card-new {
    background: var(--background-300);
    color: var(--text-color);
}
.iti__country.iti__highlight {
    background-color: var(--background-300) !important;
}


.carousel-products.with-recent-viewed .btn-add-to-cart {
    border-color: var(--main-color) !important;
    background-color: var(--main-color) !important;
}

/* -------------------- Product Details -------------------- */
.product-name {
    color: var(--main-color);
}
.product-price,
.product-rating {
    color: var(--text-color);
}

.product-detail .info .main {
    border-bottom: 1px solid var(--background-200);
}

.product-detail .info .variations-section {
    border-top: 1px solid var(--background-200);
}

.product-detail .product-actions > div .compare-icon i {
    color: var(--text-color);
}

.product-detail .product-policy-container .col-lg-4.col-sm-12.product-policy-wrapper {
    border: 1px solid var(--background-800);
}

.product-detail .product-policy-container .card,
.row.small-card-container {
    background: var(--background-300) !important;
    margin-bottom: 10px;
}

/* -------------------- Shopping Cart -------------------- */
.container-right .cart-details header,
.container-right #checkout header,
ul.navbar-nav {
    background: var(--background-color);
}

.cart-item {
    border-bottom: 1px solid var(--background-200);
}

.cart-item .rango-close {
    background: var(--background-200);
}

.product-variation span {
    border: 1px solid var(--background-200) !important;
}

.cart-item .add-note button {
    margin: 5px !important;
}

.cart-details .discount-control input.control {
    border-bottom: 1px solid var(--background-200);
}

.order-summary-container .order-summary {
    border: 1px solid var(--background-200);
}

.quantity button.increase,
.quantity button.decrease {
    background: var(--background-800);
}

/* -------------------- Checkout -------------------- */
#checkout header li.nav-item:first-child {
    color: #454545;
}

div#comment-section {
    padding-top: 0px !important;
}

.billing-address-info .col-6 {
    max-width: 49% !important;
}

.checkout-container .form-container,
.order-summary {
    background: var(--background-300) !important;
    color: var(--text-color);
}

.summary-table tbody tr:hover td {
    color: var(--accent-950) !important;
}

/* -------------------- Customer Dashboard -------------------- */
.breadcrumbs a,
.account-content .account-layout .account-heading {
    color: var(--text-color);
}

.breadcrumbs span {
    color: var(--light-color);
}

.account-content .sidebar .customer-sidebar .navigation li i.icon,
.account-content .sidebar .customer-sidebar .navigation li [class^="rango-"] {
    color: var(--main-color);
}

.account-content .sidebar .customer-sidebar .account-details {
    display: none;
}

.account-content .sidebar .customer-sidebar .navigation li {
    border-bottom: 1px solid var(--background-100);
}

.account-content .sidebar .customer-sidebar .navigation li span {
    color: var(--text-color) !important;
}

.account-content .sidebar .customer-sidebar .navigation li.active {
    background: var(--accent-950);
}

.account-content .sidebar .customer-sidebar .navigation li.active span {
    color: var(--text-color) !important;
}

.account-content .sidebar .customer-sidebar .navigation li:hover {
    background-color: var(--background-300);
    color: var(--text-color);
}

.edit-complaint .name-user,
.edit-complaint .replay_message {
    color: var(--light-color);
}

.edit-complaint .message_title {
    color: var(--text-color);
}

.account-content .account-layout h4,
.account-content .account-layout.right p {
    color: var(--text-color);
}

/* -------------------- Recommended Section -------------------- */
.recommended .text-center,
.recommended .tab {
    color: var(--text-color) !important;
}

/* -------------------- Shop by Category -------------------- */
.category .header h5,
.category .header a {
    color: var(--text-color);
}

.home .card.grid-card.product-card-new {
    background: transparent;
    color: var(--text-color);
}

/* -------------------- Search -------------------- */
.filters-container .toolbar-wrapper > div select {
    color: var(--text-color);
}

/* -------------------- Dashboard Header -------------------- */
.container-right header {
    background-color: var(--primary-200);
}

/* -------------------- Compare  -------------------- */
.cart-details {
    color: var(--text-color);
}

/* -------------------- Downloadable Products  -------------------- */
.account-content .account-layout .account-table-content #datagrid-filters {
    color: var(--text-color);
}

/* -------------------- Additional Components -------------------- */
.card,
.modal,
.dropdown-menu {
    background-color: var(--card-background);
    color: var(--text-color);
}

.customer-name {
    background: var(--main-color);
}

/* -------------------- Banner and Icon Adjustments -------------------- */
.banner-icon {
    object-fit: cover;
    object-position: 0px 35%;
}

/* -------------------- Offcanvas Cart -------------------- */
#cart-modal-content,
#cart-modal-content .row.small-card-container {
    background: var(--background-300);
}

#cart-modal-content h5,
#cart-modal-content header h6,
#cart-modal-content .subtotal h5,
#cart-modal-content .mini-cart-container .small-card-container .product-details-container .name,
#cart-modal-content .modal-footer a.btn.btn-outline-dark.text-uppercase {
    color: var(--text-color) !important;
}

#cart-modal-content .btn-outline-dark {
    border: 2px solid var(--text-color);
}

/* -------------------- Additional UI Elements -------------------- */
.empty,
textarea#cd-textarea,
.contact input#phone_number {
    color: var(--text-color) !important;
}

#top {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

#top .notification .icon-button {
    color: #b3b3b3;
}

#top #account .welcome-content span.text-center,
#top .dropdown select,
.select-branches label {
    color: var(--text-color) !important;
}

#top .dropdown select {
    color: var(--text-color);
    background-color: var(--background-color) !important;
}

#top #account + .account-modal .modal-content ul li:hover {
    background: var(--background-800);
    color: var(--text-color);
}
.notifications .dropdown-item {
    color: #b5b5b5 !important;
}
.notifications .dropdown-item:hover {
    color: #5d5e5d !important;
}

/* -------------------- lite checkout -------------------- */
select#country,
select#state,
select#city {
    color: var(--light-color) !important;
}