/* default, light mode styles set with variables */
:root {
    --wrapper-search-bg:#f9f9f9;
    --wrapper-search:#ffffff;
    --wrapper-search-border:#f2f2f2;
    --wrapper-search-input:#ffffff;
    --wrapper-search-placeholder:#000000;

    --mainbrand-body-bg:#ffffff;
    --mainbrand-body-color:#222222;
    --mainbrand-backtop-bg:#cfcfcf;
    --mainbrand-title-bg:#ffffff;
    --mainbrand-title-color:#000000;
    --mainbrand-title-after:#e5e5e5;
    --mainbrand-listitem-bg:#ffffff;
    --mainbrand-listitemname-color:#222222;
    --mainbrand-listitem-hover:0 0 2px 0 rgb(0 0 0 / 30%);
    --mainbrand-recommendbrand-bg:#f9f9f9;
    --mainbrand-recommendbrand-border: #f0f0f0;
    --mainbrand-recommendbrand-color:#272727;
    --mainbrand-recommendbrand-btn:#272727;
    --mainbrand-recommend-btn:#272727;
    --mainbrand-screensize-bg:#353535;
    --mainbrand-sort-border:#ebebeb;
    --mainbrand-lunch-bordertop:#3d3d3d;
    --mainbrand-blackwhite-color:#000000;
    --mainbrand-sortfilter-color:rgba(50, 50, 50, 0.6);
    --mainbrand-lightgray-bg:rgba(0, 0, 0, 0.05);
    --mainbrand-sortby-bg:#ffffff;
    --mainbrand-sortby-border:#ebebeb;
    --mainbrand-dropdown3-bg:#ffffff;
    --mainbrand-dropdown3-color:#222222;
    --mainbrand-dropdown3-border:#eeeeee;
    --mainbrand-dropdown3-after:#464646 transparent;
    --mainbrand-brandScroll2-bg:#ffffff;
    --mainbrand-tabinner-bg:rgba(245, 246, 246, 0.8);
    --mainbrand-tabheader-color:#222222;
    --mainbrand-tabcontent-bg:rgba(255, 255, 255, 0.07);
    --mainbrand-slider-color:#222222;
    --mainbrand-slider-bg:#ededed;
    --mainbrand-placeholder-color:#222222;
    --mainbrand-checkradio-color:#464646;
    --mainbrand-checkradio-bg:#FFFFFF;
    --mainbrand-checkradio-border:#eeeeee;
    --mainbrand-checkradiocheck-bg:#ffffff;
    --mainbrand-dropdown3list-bg:#ffffff;
    --mainbrand-dropdown3list-border:#eeeeee;
    --mainbrand-dropdown3list-hover:#f0f0f0;
    --mainbrand-diagonal-before:-webkit-radial-gradient(center, ellipse cover, rgb(255, 255, 255) 0%,rgba(255,255,255,0) 150%);
    --mainbrand-clear-bg:#222222;
    --mainbrand-clear-color:#ffffff;
    --mainbrand-demo2-border:#646464;
    --mainbrand-demo2-bg:#d7d7d7;
    --mainbrand-tablist-bg:#ffffff;
    --mainbrand-tablist-border:#eeeeee;
    --mainbrand-scrollbar-track:#dddddd;
    --mainbrand-scrollbar:#ebebeb;
    --mainbrand-scrollbar-thumb:rgba(0,0,0,.25);
    --mainbrand-brandlist-bg:#f5f5f5;
    --mainbrand-modal-bg:#ffffff;
    --mainbrand-modal-border:#dee2e6;
    --mainbrand-modalletter-color:#ffffff;
    --mainbrand-modalletter-bg:#222222;
    --mainbrand-modal-dt:#000000;
    --mainbrand-modal-dd:#222222;
    --mainbrand-modal-close:#dddddd;
    --mainbrand-brandlist-color:#222222;

    --mainbrand-breadcrumb-bg:#ffffff;
    --mainbrand-breadcrumb-border:rgba(237,237,237,1);
    --mainbrand-breadcrumb-color:#222222;
    --mainbrand-hilight-bg:#f9f9f9;
    --mainbrand-swiperyear-bg:#f2f2f2;

    --mainbrand-swiperyearactive-bg:#242424;
    --mainbrand-swiperyearactive-color:#ffffff;
    --mainbrand-club-bg:#e5e5e5;
    --mainbrand-club-color:#222222;
}
/*dark-mode styles*/
.dark-mode {
    --wrapper-search-bg:#333333;
    --wrapper-search:#4a4a4a;
    --wrapper-search-border:#323232;
    --wrapper-search-input:#4a4a4a;
    --wrapper-search-placeholder:#ffffffa6;

    --mainbrand-body-bg:#222222;
    --mainbrand-body-color:#dddddd;
    --mainbrand-backtop-bg:#353535;
    --mainbrand-title-bg:#222222;
    --mainbrand-title-color:#ffffff;
    --mainbrand-title-after:#505050;
    --mainbrand-listitem-bg:#222222;
    --mainbrand-listitemname-color:#dddddd;
    --mainbrand-listitem-hover:0 0 1px 0 rgb(255 255 255 / 30%);
    --mainbrand-recommendbrand-bg:#333333;
    --mainbrand-recommendbrand-border:#666666;
    --mainbrand-recommendbrand-color:#dddddd;
    --mainbrand-recommendbrand-btn:linear-gradient(to right, #4096ee 0%,#2a84e1 100%);
    --mainbrand-recommend-btn:#dddddd;
    --mainbrand-screensize-bg:#4e4e4e;
    --mainbrand-sort-border:#666666;
    --mainbrand-lunch-bordertop:#6d6d6d;
    --mainbrand-blackwhite-color:#ffffff;
    --mainbrand-sortfilter-color:rgb(255 255 255 / 60%);
    --mainbrand-lightgray-bg:#333333;
    --mainbrand-sortby-bg:#333333;
    --mainbrand-sortby-border:#333333;
    --mainbrand-dropdown3-bg:#292929;
    --mainbrand-dropdown3-color:#dddddd;
    --mainbrand-dropdown3-border:#5f5f5f;
    --mainbrand-dropdown3-after:#cecece transparent;
    --mainbrand-brandScroll2-bg: #4a4a4a;
    --mainbrand-tabinner-bg:#292929;
    --mainbrand-tabheader-color:#ffffff;
    --mainbrand-tabcontent-bg:transparent;
    --mainbrand-slider-color:#dddddd;
    --mainbrand-slider-bg:#6d6d6d;
    --mainbrand-placeholder-color:#dddddd;
    --mainbrand-checkradio-color:#dddddd;
    --mainbrand-checkradio-bg:#cecece;
    --mainbrand-checkradio-border:#5f5f5f;
    --mainbrand-checkradiocheck-bg:transparent;
    --mainbrand-dropdown3list-bg:#777777;
    --mainbrand-dropdown3list-border:#6b6b6b;
    --mainbrand-dropdown3list-hover:#656565;
    --mainbrand-diagonal-before:transparent;
    --mainbrand-clear-bg:#777777;
    --mainbrand-clear-color:#ffffff;
    --mainbrand-demo2-border:#eeeeee;
    --mainbrand-demo2-bg:#eeeeee;
    --mainbrand-demo2-color:#222222;
    --mainbrand-tablist-bg:#292929;
    --mainbrand-tablist-border:#5f5f5f;
    --mainbrand-scrollbar-track:#5d5c5c;
    --mainbrand-scrollbar:#222222;
    --mainbrand-scrollbar-thumb:rgba(0,0,0,.25);
    --mainbrand-brandlist-bg:#777777;
    --mainbrand-modal-bg:#464646;
    --mainbrand-modal-border:#666666;
    --mainbrand-modalletter-color:#222222;
    --mainbrand-modalletter-bg:#f1f1f1;
    --mainbrand-modal-dt:#ffffff;
    --mainbrand-modal-dd:#dddddd;
    --mainbrand-modal-close:#666666;
    --mainbrand-brandlist-color:#dddddd;
    --mainbrand-breadcrumb-bg:#222222;
    --mainbrand-breadcrumb-border:rgb(70, 70, 70);
    --mainbrand-breadcrumb-color:rgba(255, 255, 255, 0.65);
    --mainbrand-hilight-bg:#333333;
    --mainbrand-swiperyear-bg:#333333;
    --mainbrand-swiperyearactive-bg:#ffffff;
    --mainbrand-swiperyearactive-color:#222222;
    --mainbrand-club-bg:#333333;
    --mainbrand-club-color:#eeeeee;
}

/* start wrapper search */
.search-home2{
    background:var(--wrapper-search-bg);
}
#wrapper-search input[type="text"]{
    background-color:var(--wrapper-search);
    border-color:var(--wrapper-search-border);
}
#wrapper-search input[type="text"]::placeholder{
  color:var(--wrapper-search-placeholder);
}
#wrapper-search .tab-content{
    background-color: transparent;
}
.dark-mode #wrapper-search input[type="text"]{
    background-image: url(//www.siamphone.com/images/magnifying.png) ;
    background-size: 18px;
    background-position: 10px 17px;
    background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
    #wrapper-search input[type="text"]{
        background-image: url(//www.siamphone.com/images/magnifying.png) ;
        background-size: 18px;
        background-position: 10px 17px;
        background-repeat: no-repeat;
    }
    .light-mode #wrapper-search input[type="text"]{
        background-image: url(//www.siamphone.com/images/magnifying-glass.svg);
        background-size: 20px;
        background-position: 10px 15px;
        background-repeat: no-repeat;
    }
}
/* end wrapper search */

body , #wrapper{
    background: var(--mainbrand-body-bg);
    color: var(--mainbrand-body-color);
}
body.dark-mode{background-color:#222222;}
.title_image h1, .title_image h2, .header-widget h2, .header-widget-left h2{
    background: var(--mainbrand-title-bg);
    color:var(--mainbrand-title-color);
}
.header-widget h2 a, .header-widget-left h2 a{
    color:var(--mainbrand-title-color);
}
.title_image:after, .header-widget:before, .header-widget-left:before{
    background:var(--mainbrand-title-after);
}
.model_list_item,.model_list_item_name{
    background-color: var(--mainbrand-listitem-bg);
}
.model_list_item_name a{
    color: var(--mainbrand-listitemname-color);
}
.model_list_item:hover{
    box-shadow:var(--mainbrand-listitem-hover);
}
.dark-mode .model_list_item_image_vertical img{
    border-radius: 5px;
}
.recommendList, .randomBrand,.allListBrand a{
    background:var(--mainbrand-recommendbrand-bg) ;
    border-color:var(--mainbrand-recommendbrand-border);
}
.recommendList p{
    color:var(--mainbrand-recommendbrand-color);
}
.allListBrand a{
    color:var(--mainbrand-recommend-btn) !important;
}
.btn-list-phone{
    background: var(--mainbrand-recommendbrand-btn);
}
.big_block .review a {
    color:var(--mainbrand-body-color);
}


.sort_by, .launch, .detailBox, .display_content{
    border-color:var(--mainbrand-sort-border);
}
.screen_size{
    background-color: var(--mainbrand-screensize-bg);
}
.launch{
    background:var(--mainbrand-body-bg);
    color:var(--mainbrand-body-color);
    border-bottom: 1px dotted var(--mainbrand-sort-border);
    border-top: 1px solid var(--mainbrand-lunch-bordertop);
}
.launch span{
    color:var(--mainbrand-blackwhite-color);
}
.sortFilter button{
    color:var(--mainbrand-sortfilter-color);
}
#back-top span {
    background: var(--mainbrand-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
    background-size: 25px;
}
.dark-mode #back-top span {
    background: var(--mainbrand-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
    background-size: 25px;
}

/* Search Filter */
.lightGrayBg, .quick_search{
    background: var(--mainbrand-lightgray-bg);
}
.sort_by{
    background: var(--mainbrand-sortby-bg);
    border-color: var(--mainbrand-sortby-border);
    color:var(--mainbrand-body-color);
}
.select_sort a{
    color:var(--mainbrand-body-color);
}
.dark-mode .sortIcon {
    filter: brightness(1) invert(1);
}
.select_sort a.active .sortIcon, .select_sort a:hover .sortIcon {
    filter: none;
}
.wrapper-demo, .wrapper-dropdown-3, #q {
    background-color: var(--mainbrand-dropdown3-bg);
    color:  var(--mainbrand-dropdown3-color);
    border-color:var(--mainbrand-dropdown3-border);
}
.wrapper-dropdown-3{
 
}
.category_review{
    background:transparent;
}
.tab-content{
    background: var(--mainbrand-tabcontent-bg);
}
.tab-inner{
    background-color: var(--mainbrand-tabinner-bg);
}
.tab-header{
    color:var(--mainbrand-tabheader-color);
}
.tab-list li{
    background:var(--mainbrand-tablist-bg);
    border-color:var(--mainbrand-tablist-border);
}
#q{
    background: #fff url(//www.siamphone.com/images/search_box.png) no-repeat 3px 10px;
}
.dark-mode .search-home .input_qs_spc #q {
    background: #4a4a4a url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 16px;
    background-size: 15px;
}

#brand_model{
    background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
    background-size: 35px;
}
.dark-mode #brand_model{
    background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
    background-size: 20px;
}
.category_review_item p{
    color:var(--mainbrand-slider-color);
}
.slider{
    background:var(--mainbrand-slider-bg);
}
.dark-mode .slider:before{
    box-shadow:none;
}
.swiper1{
    background:var(--mainbrand-swiperyear-bg);
}
.swiper1 .selected{
    background:var(--mainbrand-swiperyearactive-bg);
    color:var(--mainbrand-swiperyearactive-color);
}
.siamphone_club_item{
    background: var(--mainbrand-club-bg);
}
.siamphone_club_item a{
    color:var(--mainbrand-club-color);
}

.wrapper-dropdown-3 .dropdown li.brand_textbox input::placeholder,.search-home .input_qs_spc #q::placeholder, #brand_model::placeholder{
    color:var(--mainbrand-placeholder-color);
}
.wrapper-dropdown-3 .dropdown li a{
    color:var(--mainbrand-body-color);
}
.wrapper-dropdown-3 .dropdown li:hover a{
    background:transparent;
}
.checkbox label, .radio label{
    color:var(--mainbrand-checkradio-color);
}
.checkbox label::before, .radio label::before{
    background-color: var(--mainbrand-checkradio-bg);
    border-color:var(--mainbrand-checkradio-border);
}
.category ul li, .display_diagonal ul li{border-color:var(--mainbrand-checkradio-border);}
.category ul li.radio label{
   background: transparent;
}
.tab-list input:checked + li.radio{
    background: var(--mainbrand-checkradiocheck-bg);
}
.dark-mode .category ul li em{
    filter: invert(0.9);
}
.dark-mode .tab-list input:checked + li.radio em{
    filter: none;
}
.wrapper-dropdown-3:after{
    border-color:var(--mainbrand-dropdown3-after);
}
.wrapper-dropdown-3 .dropdown{
    background:var(--mainbrand-dropdown3list-bg);
}
.wrapper-dropdown-3 .dropdown li{
    border-color:var(--mainbrand-dropdown3list-border);
}
.wrapper-dropdown-3 .dropdown li:hover{
    background-color:var(--mainbrand-dropdown3list-hover);
}
.display_diagonal ul input:checked + li.radio label::before{
    background:var(--mainbrand-diagonal-before);
}
#demo2{
    color:var(--mainbrand-demo2-color);
    border:0;
    border-color:var(--mainbrand-demo2-border);
    border-radius: 3px;
    background-color: var(--mainbrand-demo2-bg);
}
#clear-form{
    background-color: var(--mainbrand-clear-bg);
    color:var(--mainbrand-clear-color);
}

.brand-recommend::-webkit-scrollbar-track,.brand-all::-webkit-scrollbar-track{background-color:var(--mainbrand-scrollbar-track);}
.brand-recommend::-webkit-scrollbar, .brand-all::-webkit-scrollbar{background-color:var(--mainbrand-scrollbar);}
.brand-recommend::-webkit-scrollbar-thumb,.brand-all::-webkit-scrollbar-thumb{background-color:var(--mainbrand-scrollbar-thumb);}
.brand_list li:nth-child(-n+12){
    background-color: var(--mainbrand-brandlist-bg);
}
.brand-recommend li a, .brand-all li a{
    color:var(--mainbrand-brandlist-color);
}
.dark-mode .brand-recommend li img{
    border-radius: 8px;
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input{
    background:var(--watch-brandtext-bg);
    border-color:var(--watch-brandtext-border);
}
.modal-content{
    background:var(--mainbrand-modal-bg);
}
.modal-header{
    border-color:var(--mainbrand-modal-border);
}
.tab_letter ul li a{
    color: var(--mainbrand-modalletter-color);
    background: var(--mainbrand-modalletter-bg);
}
.brand-all dd a{
    color:var(--mainbrand-modal-dd);
}
.brand-all dt a, .brand-all dd strong{
    color:var(--mainbrand-modal-dt);
}
.dark-mode .brand-all dd{
    background-image: url("https://www.siamphone.com/images/fullstop_wh.png");
}
.modal-header .close{
    border-color:var(--mainbrand-modal-close);
    text-shadow: none;
}
.dark-mode .modal-header .close{
    filter:invert(1);
}


#breadcrumb_list{
    text-shadow:none;
    background: var(--mainbrand-breadcrumb-bg);
    border: 1px solid var(--mainbrand-breadcrumb-border);
}
#breadcrumb_list a, #breadcrumb_list li:before{
    color:var(--mainbrand-breadcrumb-color);
}
.dark-mode .brand_logo img {
    padding: 0 15px;
    border-radius: 10px;
    background: #fff;
    width: auto;
}
.brand-name h1 a{
    color:var(--mainbrand-blackwhite-color);
}
.cover-hilight{
    background:var(--mainbrand-hilight-bg) ;
}
.cover-hilight .title_image h2, .cover-hilight .header-widget h2{
    background-color:var(--mainbrand-hilight-bg);
    color: var(--mainbrand-blackwhite-color);
}
.swiper-slide-detail{
    color:#222222;
}



@media (prefers-color-scheme: dark) {
    
    #back-top span {
        background: var(--mainbrand-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
        background-size: 25px;
    }
    .light-mode #back-top span {
        background:var(--mainbrand-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
        background-size: 33px;
    }
    .model_list_item_image_vertical img,#store ul li .image img{
        border-radius: 5px;
    }
    .light-mode .arrow-right, .arrow-left , .light-mode .top-views .icon-user, .light-mode .sortFilter img{
        filter: invert(0);
    }
    .light-mode .sortFilter button:focus img, .light-mode .sortFilter button:hover img{
        filter:none;
    }
    .breakingNews ul li font i {
        filter: invert(0.6);
    }

    
    .light-mode #brand_model{
        background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
        background-size: 35px;
    }
    #brand_model{
        background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
        background-size: 20px;
    }
}