/* ==========================================================
   VEHIGEEK.COM — DARK MODE (Onsus თემის სტილებზე მორგებული)
   ჩასვით: Appearance → Customize → Additional CSS
   (ან child theme-ის style.css-ის ბოლოში, ორიგინალი styles.css-ის შემდეგ)
   ==========================================================
   შენიშვნა: თემის ორიგინალური ცვლადები (--white, --gray, --gray-5
   და ა.შ.) გამოყენებულია ერთდროულად ფონისთვისაც და ტექსტის
   ფერისთვისაც ფერად ღილაკებზეც — ამიტომ მათი პირდაპირი გადაფარვა
   გატეხდა საიტს. ამის ნაცვლად ვქმნით ახალ, ცალკე "dark" ცვლადებს
   და ვაფარებთ კონკრეტულ, რეალურ სექციებს.
   ========================================================== */

/* -----------------------------------------
   1. ახალი DARK MODE ცვლადები
----------------------------------------- */
:root {
  /* light mode-ის დეფოლტები (თემის ორიგინალის ანალოგიურად) */
  --dm-bg: #ffffff;
  --dm-bg-2: #fafafa;
  --dm-bg-3: #f5f5f5;
  --dm-surface: #ffffff;         /* card, header, dropdown, modal ფონები */
  --dm-surface-2: #f7f7f7;       /* mega menu / demo item ფონები */
  --dm-text: #333e48;            /* body-ს ძირითადი ტექსტი (თემის --gray) */
  --dm-text-muted: #73787d;      /* თემის --gray-2 */
  --dm-heading: #000000;
  --dm-border: #ebebeb;          /* თემის --gray-5 */
  --dm-border-2: #e1e1e1;        /* თემის --gray-4 */
  --dm-input-bg: #ffffff;
  --dm-shadow: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
  --dm-bg: #121212;
  --dm-bg-2: #161616;
  --dm-bg-3: #1a1a1a;
  --dm-surface: #1e1e1e;
  --dm-surface-2: #232323;
  --dm-text: #e8e8e8;
  --dm-text-muted: #a3a3a3;
  --dm-heading: #ffffff;
  --dm-border: #333333;
  --dm-border-2: #3a3a3a;
  --dm-input-bg: #1c1c1c;
  --dm-shadow: rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------
   2. საბაზისო ფონი / ტექსტი
----------------------------------------- */
[data-theme="dark"] body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6,
[data-theme="dark"] .text-main,
[data-theme="dark"] .product-title,
[data-theme="dark"] .name-product,
[data-theme="dark"] .box-title {
  color: var(--dm-heading) !important;
}

[data-theme="dark"] .text-main-2,
[data-theme="dark"] .text-cl-1,
[data-theme="dark"] .text-cl-2,
[data-theme="dark"] .text-cl-3 {
  color: var(--dm-text-muted) !important;
}

[data-theme="dark"] a {
  color: var(--dm-text);
}

[data-theme="dark"] .line,
[data-theme="dark"] .line-2,
[data-theme="dark"] .line-bt,
[data-theme="dark"] .line-tp {
  border-color: var(--dm-border) !important;
}

/* -----------------------------------------
   3. Header / Topbar / Navigation
----------------------------------------- */
[data-theme="dark"] header,
[data-theme="dark"] .tf-topbar {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] header.header-type-stc {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .main-nav-menu .item-link {
  color: var(--dm-text) !important;
}

[data-theme="dark"] .main-nav-menu .sub-menu-container,
[data-theme="dark"] .tf-nav-menu .sub-menu-container,
[data-theme="dark"] .mega-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .main-nav-menu .sub-menu-list li a span {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .category-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .category-menu ul li {
  box-shadow: inset 0px -1px 0px var(--dm-border) !important;
}

[data-theme="dark"] .tf-nav-menu .menu-category-list {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .tf-header .hover-shopcart .dropdown-shopcart {
  background-color: var(--dm-surface) !important;
  box-shadow: 0px 4px 8px var(--dm-shadow) !important;
}

/* mobile off-canvas მენიუ */
[data-theme="dark"] .canvas-mb .mb-body {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .nav-ul-mb .nav-mb-item:not(:last-child) {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .nav-ul-mb .nav-mb-item .mb-menu-link,
[data-theme="dark"] .nav-ul-mb .sub-nav-link {
  color: var(--dm-text) !important;
}

/* -----------------------------------------
   4. Footer
----------------------------------------- */
[data-theme="dark"] .tf-footer .ft-body-inner {
  background-color: var(--dm-bg-2) !important;
}

[data-theme="dark"] .ft-link-wrap .ft-contact-list .icon::after {
  background-color: var(--dm-border) !important;
}

[data-theme="dark"] .social-list a {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* -----------------------------------------
   5. პროდუქტის ბარათები (card-product)
----------------------------------------- */
[data-theme="dark"] .card-product.style-3,
[data-theme="dark"] .card-product.style-4,
[data-theme="dark"] .card-product.style-border,
[data-theme="dark"] .card-product.style-img-border .card-product-wrapper {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* პროდუქტის სურათებს ვუტოვებთ თეთრ ფონს, რადგან ისინი
   თეთრ ფონზეა გადაღებული — ბნელ ფონზე უფრო კარგად ჩანს */
[data-theme="dark"] .card-product-wrapper,
[data-theme="dark"] .tf-image-view,
[data-theme="dark"] .tf-product-media-main .item,
[data-theme="dark"] .tf-product-view-main .tf-image-view {
  background-color: #ffffff;
}

[data-theme="dark"] .card-product .box-icon {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .card-product .name-product,
[data-theme="dark"] .card-product .prd-name {
  color: var(--dm-heading) !important;
}

[data-theme="dark"] .old-price {
  color: var(--dm-text-muted);
}

/* -----------------------------------------
   6. ღილაკები — ბრენდის ფერებს ვტოვებთ,
      მხოლოდ ნეიტრალურ ვარიანტებს ვასწორებთ
----------------------------------------- */
[data-theme="dark"] .tf-btn.btn-line {
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .tf-btn.btn-gray-2 {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* -----------------------------------------
   7. ფორმები / input / select / dropdown-სორტირება
----------------------------------------- */
[data-theme="dark"] form textarea,
[data-theme="dark"] form input[type="text"],
[data-theme="dark"] form input[type="email"],
[data-theme="dark"] form input[type="tel"],
[data-theme="dark"] form input[type="number"],
[data-theme="dark"] form input[type="search"],
[data-theme="dark"] form input[type="password"],
[data-theme="dark"] form .tf-select select,
[data-theme="dark"] .select-color,
[data-theme="dark"] .sib-form .sib-form-container .input {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] form textarea::placeholder,
[data-theme="dark"] form input::placeholder {
  color: var(--dm-text-muted) !important;
}

[data-theme="dark"] .tf-dropdown-sort .dropdown-menu,
[data-theme="dark"] .tf-my-dropdown,
[data-theme="dark"] .tf-my-dropdown .list,
[data-theme="dark"] .image-select.style-default > .dropdown-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .tf-dropdown-sort .select-item,
[data-theme="dark"] .tf-my-dropdown .list .option {
  color: var(--dm-text) !important;
}

[data-theme="dark"] .tf-dropdown-sort .select-item.active,
[data-theme="dark"] .tf-dropdown-sort .select-item:hover,
[data-theme="dark"] .tf-my-dropdown .list .option:hover,
[data-theme="dark"] .tf-my-dropdown .list .option.selected {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-heading) !important;
}

[data-theme="dark"] .checkbox-item-wrap .btn-checkbox,
[data-theme="dark"] .tf-check {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
}

/* ფასის ფილტრის slider (noUiSlider) */
[data-theme="dark"] .noUi-base .noUi-connects {
  background-color: var(--dm-border) !important;
}

/* -----------------------------------------
   8. მოდალები, Offcanvas, Cart, Compare, Search
----------------------------------------- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .canvas-sidebar .canvas-body,
[data-theme="dark"] .canvas-filter-product,
[data-theme="dark"] .offcanvas-search .popup-header,
[data-theme="dark"] .offcanvas-compare,
[data-theme="dark"] .popup-style .popup-header {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .canvas-sidebar .canvas-header::after,
[data-theme="dark"] .popup-style .popup-header {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .offcanvas-search .popular-searches ul a {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .offcanvas-compare .tf-compare-item,
[data-theme="dark"] .offcanvas-compare .icon-close-popup {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .modal-log .orther-log p {
  background-color: var(--dm-surface) !important;
}

/* -----------------------------------------
   9. ცხრილები (cart, wishlist, compare, order history)
----------------------------------------- */
[data-theme="dark"] .tf-table-order-detail,
[data-theme="dark"] .tf-table-order-detail td,
[data-theme="dark"] .tf-table-order-detail th,
[data-theme="dark"] .tf-table-wishlist,
[data-theme="dark"] .tf-table-wishlist td,
[data-theme="dark"] .tf-table-wishlist th,
[data-theme="dark"] .tf-table-compare td,
[data-theme="dark"] .tf-table-compare th,
[data-theme="dark"] .table_def td,
[data-theme="dark"] .table_def th,
[data-theme="dark"] .tf-order_history-table tr,
[data-theme="dark"] .billing-info,
[data-theme="dark"] .tf-table-page-cart thead {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .tf-table-compare tr:nth-child(odd) {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .tf-table-page-cart .tf-cart-item {
  border-color: var(--dm-border) !important;
}

/* -----------------------------------------
   10. Sidebar / Account / Blog
----------------------------------------- */
[data-theme="dark"] .my-account-nav-item {
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .my-account-nav-item:hover,
[data-theme="dark"] .my-account-nav-item.active {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .account-address-item,
[data-theme="dark"] .account-address-item .title,
[data-theme="dark"] .wd-form-address {
  border-color: var(--dm-border-2) !important;
}

[data-theme="dark"] .account-address-item.editing {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .blog-sidebar .sidebar-item.style-2 {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .blog-sidebar .sidebar-item.style-2 .sb-title,
[data-theme="dark"] .facet-categories .title,
[data-theme="dark"] .flat-title-tab-product-des .flat-title-tab {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .blog-sidebar .sb-category li:not(:last-child) a,
[data-theme="dark"] .blog-sidebar .sb-recent li:not(:last-child) {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .blog-sidebar .sb-tags a,
[data-theme="dark"] .facet-categories {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .rating-filter-list a {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .wg-testimonial {
  background-color: var(--dm-surface) !important;
  box-shadow: 0px 4px 8px var(--dm-shadow) !important;
}

/* -----------------------------------------
   11. Accordion / FAQ / Tabs
----------------------------------------- */
[data-theme="dark"] .flat-title-tab-product-des,
[data-theme="dark"] .faq-wrap .widget-accordion:not(:last-child) .accordion-title.collapsed,
[data-theme="dark"] .flat-title-tab-nav-mobile .menu-tab-line {
  border-color: var(--dm-border) !important;
}

[data-theme="dark"] .faq-wrap .accordion-title .icon {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .faq-wrap .accordion-title .icon::before,
[data-theme="dark"] .faq-wrap .accordion-title .icon::after {
  background-color: var(--dm-text) !important;
}

/* -----------------------------------------
   12. Checkout / Sidebar Checkout
----------------------------------------- */
[data-theme="dark"] .flat-sidebar-checkout,
[data-theme="dark"] .payment-body,
[data-theme="dark"] .payment-choose-card .select-payment {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border-2) !important;
}

[data-theme="dark"] .flat-sidebar-checkout .sec-total-price li {
  border-color: var(--dm-border) !important;
}

/* -----------------------------------------
   13. Scrollbar (მთელი საიტისთვის)
----------------------------------------- */
[data-theme="dark"] body::-webkit-scrollbar-thumb,
[data-theme="dark"] .canvas-sidebar .canvas-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .row-demo::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}

/* -----------------------------------------
   14. Utility კლასები (bg-white, bg-gray-5 და მისთ.)
   ეს ის ადგილია, საიდანაც სურათზე ნანახი თეთრი
   ყუთები მოდიოდა — bootstrap-ის უტილითი კლასები
   პირდაპირ --bs-white-rgb / --gray-5-ზეა დამოკიდებული
   და ჩვენს სექციურ სელექტორებში არ ხვდებოდა.
----------------------------------------- */
[data-theme="dark"] .bg-white {
  background-color: var(--dm-surface) !important;
}

[data-theme="dark"] .bg-gray-5,
[data-theme="dark"] .bg-gray-6,
[data-theme="dark"] .bg-3,
[data-theme="dark"] .bg-2 {
  background-color: var(--dm-surface-2) !important;
}

[data-theme="dark"] .wg-pagination {
  border-top-color: var(--dm-border) !important;
}

/* card-product-ის შიგნით სათაურის/ფასის არეები ხშირად
   .bg-white-ს იყენებენ პირდაპირ — დავრწმუნდეთ ტექსტიც
   იკითხებოდეს იმ ფონზე */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white * {
  color: var(--dm-text);
}

[data-theme="dark"] .bg-white h1,
[data-theme="dark"] .bg-white h2,
[data-theme="dark"] .bg-white h3,
[data-theme="dark"] .bg-white h4,
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white h6,
[data-theme="dark"] .bg-white .price-text,
[data-theme="dark"] .bg-white .price-text-2 {
  color: var(--dm-heading) !important;
}

/* -----------------------------------------
   16. Select2 dropdown-ები
----------------------------------------- */
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--dm-text) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  color: var(--dm-text-muted) !important;
}

[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
}

/* Select2-ს dropdown ფანჯარა ცალკე ivsleba body-ს ბოლოში,
   ამიტომ ცალკე უნდა მოვარგოთ */
[data-theme="dark"] .select2-dropdown {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border-2) !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

[data-theme="dark"] .select2-results__option {
  color: var(--dm-text) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-heading) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
}

/* -----------------------------------------
   17. Toggle ღილაკის სტილი
----------------------------------------- */
.vg-dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dm-border-2);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vg-dark-toggle:hover {
  background-color: var(--dm-surface-2);
}

.vg-dark-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--dm-text, #333e48);
  stroke-width: 2;
}

.vg-dark-toggle .icon-sun { display: none; }
.vg-dark-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .vg-dark-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .vg-dark-toggle .icon-moon { display: none; }


.form-search-product.style-2 {
    
    border-color: var(--dm-border) !important;
}
.woocommerce-checkout-payment li {
    padding: 14px 0;
    border-top: 1px solid var(--dm-border) !important;
}

.offcanvas {
    
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

.tf-nav-menu .menu-item:not(:last-child) .item-link > span {
    border-color: var(--dm-border) !important;
}


[data-theme="dark"] .YMMSearch .block-content select {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border-2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .YMMSearch .widget-text {
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .YMMSearch .block-content select option {
    background-color: var(--dm-input-bg);
    color: var(--dm-text);
}

[data-theme="dark"] .YMMSearch .block-content .button:hover {
    background-color: var(--dm-surface-2);
    color: var(--dm-heading) !important;
}

[data-theme="dark"] .YMMSearch .ymm-selector.ymm-box select.disabled {
    background: var(--dm-surface-2) !important;
}

.card-product .card-product-info .box-title .bg-white,
.card-product .card-product-info .box-title .bg-white * {
    background-color: transparent !important;
}

[data-theme="dark"] .flat-title {
    border-bottom: 1px solid var(--dm-border);
}
[data-theme="dark"] .tf-shop-control {
    border-bottom: 1px solid var(--dm-border);    
}

[data-theme="dark"] .woocommerce-ordering .sorting select {
    padding:10px;
    border-radius:10px;
    border: 1px solid var(--dm-border);
    background:var(--dm-surface-2);
    color:#fff;
}



[data-theme="dark"] .ajax-product-search-results {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border-2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .ajax-search-product-item {
    border-bottom-color: var(--dm-border) !important;
}

[data-theme="dark"] .ajax-search-product-item:hover {
    background: var(--dm-surface-2) !important;
}

[data-theme="dark"] .ajax-search-loading,
[data-theme="dark"] .ajax-search-no-results {
    color: var(--dm-text) !important;
}


[data-theme="dark"] .site-logo__title,
[data-theme="dark"] .site-logo__subtitle {
    fill: #ffffff !important;
}