/******************************************************
    Dark Mode Styling
*******************************************************/

/*

[Table of contents]

1. Generic Styling
2. Main Header Styling
3. Homepage Intro Section Styling
4. Recent Posts Styling
5. Sidebar Styling
6. Single Post Page Styling
7. Error Page Styling
8. WooCommerce Styling
9. Main Footer Styling

*/

/*-------------------------------------------*\
	1. Generic Styling
\*-------------------------------------------*/

body.dark {
    color: #c5c5c5;
    background-color: #222;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .post-title a,
.dark .entry blockquote p, .dark a {
    color: #fff;
}

.dark blockquote {
    background-image: url(../images/quotation-marks-white.svg);
    border-color: #303030;
    background-color: #222;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 17%);
}

.dark .entry table td,
.dark .entry table th,
.dark .comment table td,
.dark .comment table th,
.dark .wp-block-table.is-style-stripes td,
.dark .wp-block-table.is-style-stripes th {
    border-color: #3c3c3c;
}

.dark .entry table th {
    color: #fff;
}

.dark .entry table td {
    color: #c5c5c5;
}

/*-------------------------------------------*\
	2. Main Header Styling
\*-------------------------------------------*/

.dark #main-header {
    background-color: #222;
}

.dark #main-header.stick-it {
    border-bottom: 1px solid #303030;
}

.dark #hidden-sidebar-icon span,
.dark #hidden-sidebar-icon span::before,
.dark #hidden-sidebar-icon span::after {
    background-color: #fff;
}

.dark #main-nav .current-menu-item > a,
.dark #main-nav .current-menu-item > a:hover {
    color: #fff;
    border-color: #303030;
    background-color: #303030;
}

.dark #main-nav .current-menu-item.menu-item-has-children > a::before {
    border-color: #222;
    background-color: #303030;
}

.dark #main-nav .menu-item-has-children > a::before {
    border-color: #222;
}

.dark #main-nav a:hover {
    color: #fff;
    border-color: #303030;
    background-color: #303030;
}

.dark #main-nav ul li ul {
    background-color: #303030;
}

.dark #main-header.stick-it #main-nav ul li ul li,
.dark #main-nav ul li ul li {
    border-color: #404040;
}

.dark #main-nav ul li ul .menu-item-has-children > a::before {
    border-color: #303030;
}

.dark .cart-customlocation {
    background-image: url(../images/cart-customlocation-white.svg);
}

.dark #header-search-icon {
    background-image: url(../images/search-icon-white.svg);
}

.dark .header-elements-icon:hover {
    background-color: #303030;
}

.dark .header-button {
    background-color: #303030;
}

.dark .header-button:hover {
    color: #fff;
    background-color: #484848;
}

.dark #modal-search {
    background-color: rgb(34 34 34 / 99%);
}

.dark #modal-search #searchform #s {
    color: #fff;
    border-bottom-color: #303030;
}

.dark .modal-close {
    border-color: #303030;
    background-image: url(../images/modal-close-white.svg);
}

.dark .modal-close:hover {
    background-color: #303030;
}

/*-------------------------------------------*\
	3. Homepage Intro Section Styling
\*-------------------------------------------*/

.dark #intro-deco {
    color: #303030;
}

.dark #intro-heading .highlight {
    background-color: #303030;
}

.dark .intro-tags {
    background-color: #222;
}

.dark .intro-tags-wrap::after {
    background-color: #404040;
}

.dark .tagged-btns a {
    border-color: #303030;
    background-color: #303030;
}

.dark .tagged-btns .post-count {
    border-color: #303030;
    background-color: #222;
}

.dark .tagged-btns a:hover .post-count {
    border-color: #484848;
    background-color: #222;
}

.dark .tagged-btns a:hover {
    color: #fff;
    border-color: #484848;
    background-color: #484848;
}

/*-------------------------------------------*\
	4. Recent Posts Styling
\*-------------------------------------------*/

.dark .medium-post,
.dark .list-post.has-post-thumbnail .post-content {
    border-color: #303030;
    background-color: #222;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 17%);
}

.dark .medium-post::after,
.dark .list-post .post-content::after {
    background-color: #959595;
}

.dark .category-highlight:hover {
    color: #fff;
}

.dark .category-highlight::before {
    background-color: #303030;
}

.dark .category-highlight:hover::before {
    background-color: #484848;
}

.dark .post-date::before {
    background-color: #fff;
}

.dark .post-title:hover a,
.dark .post-date:hover {
    color: #dbdbdb;
}

.dark .more-btn:hover {
    color: #fff;
}

.dark .more-arrow {
    background-color: #303030;
    background-image: url(../images/more-arrow-white.svg);
}

.dark .more-arrow:hover {
    background-color: #303030;
}

.dark .more-btn:hover .more-arrow {
    background-color: #484848;
}

.dark .author-avatar-li::after {
    background-color: #303030;
}

/*** Pagination Styling ***/

.dark .pagination {
	color: #fff;
}

.dark .pagination a, .dark .post-nav-links a {
    border-color: #303030;
    background-color: #222;
}

.dark .pagination .current, .dark .post-nav-links .current,
.dark .pagination a:hover, .dark .post-nav-links a:hover {
    border-color: #303030;
    background-color: #303030;
}

.dark article.sticky 
.post-title a::before {
    background-image: url(../images/sticky-pin-white.svg);
}

/*-------------------------------------------*\
	5. Sidebar Styling
\*-------------------------------------------*/

.dark .widget-sidebar > div {
    border-color: #303030;
    background-color: #222;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 17%);
}

.dark .widget-sidebar > div::after {
    background-color: #959595;
}

.dark .widget-title::after,
.dark .widget-sidebar .wp-block-group__inner-container h2:first-of-type::after,
.dark .widget .wp-block-search .wp-block-search__label::after,
.dark .widget .wc-block-product-search__label::after {
    background-color: #303030;
}

.dark .widget .wp-block-search .wp-block-search__label,
.dark .widget .wc-block-product-search__label {
    color: #fff;
}

.dark .tagcloud a, 
.dark .wp-block-tag-cloud a {
    color: #fff;
    background-color: #303030;
}

.dark .tagcloud a:hover, 
.dark .wp-block-tag-cloud a:hover {
    background-color: #484848;
}

.dark .widget #s,
.dark .wp-block-search .wp-block-search__input,
.dark .wc-block-product-search__field {
    border-color: #343434;
    background-color: #1e1e1e;
}

.dark .widget #s:focus,
.dark .wp-block-search .wp-block-search__input:focus,
.dark .wc-block-product-search__field:focus {
    color: #fff;
}

.dark .wp-block-categories-list li, .dark .wp-block-archives-list li, 
.dark .widget .menu li, .dark .widget_pages li, 
.dark .wp-block-latest-posts__list li, .dark .widget_recent_entries li, 
.dark .widget_recent_comments li, .dark .widget_archive li, 
.dark .widget_categories li, .dark .widget_meta li, .dark .entry .wp-block-rss li, 
.dark .wc-block-product-categories-list li, .dark .wp-block-latest-comments li {
    border-bottom-color: #323232;
}

.dark .wp-block-categories-list li a, .dark .wp-block-archives-list li a, 
.dark .widget .menu li a, .dark .widget_pages li a, 
.dark .wp-block-latest-posts__list li a, .dark .widget_recent_entries li a, 
.dark .widget_recent_comments li a, .dark .widget_archive li a, 
.dark .widget_categories li a, .dark .widget_meta li a, 
.dark .wc-block-product-categories-list li a, .dark .wp-block-latest-comments li a {
    color: #929292;
}

.dark .wp-block-categories-list li a:hover, .dark .wp-block-archives-list li a:hover, 
.dark .widget .menu li a:hover, .dark .widget_pages li a:hover, 
.dark .wp-block-latest-posts__list li a:hover, .dark .widget_recent_entries li a:hover, 
.dark .widget_recent_comments li a:hover, .dark .widget_archive li a:hover, 
.dark .widget_categories li a:hover, .dark .widget_meta li a:hover, 
.dark .wc-block-product-categories-list li a:hover, .dark .wp-block-latest-comments li a:hover {
    color: #fff;
}

.dark .small-post {
    border-bottom-color: #323232;
}

.dark .noted-social-links a {
    background-color: #303030;
}

.dark .noted-social-links a:hover {
    background-color: #484848;
}

.dark .noted-social-links .x {
    background-image: url(../images/x-white.svg);
}

.dark .noted-social-links .facebook {
    background-image: url(../images/facebook-white.svg);
}

.dark .noted-social-links .instagram {
    background-image: url(../images/instagram-white.svg);
}

.dark .noted-social-links .tiktok {
    background-image: url(../images/tiktok-white.svg);
}

.dark .noted-social-links .youtube {
    background-image: url(../images/youtube-white.svg);
}

.dark .noted-slider-item::after {
    background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.97) 72%);
}

.dark .slick-arrow {
    background-color: #303030;
}

.dark .slick-arrow:hover {
    background-color: #484848;
}

.dark .slick-next {
    background-image: url(../images/slick-next-white.svg);
}

.dark .slick-prev {
    background-image: url(../images/slick-prev-white.svg);
}

/*-------------------------------------------*\
	6. Single Post Page Styling
\*-------------------------------------------*/

.dark .small-nav-post,
.dark #respond {
    border-color: #303030;
    background-color: #222;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 17%);
}

.dark .single-elements-heading {
    color: #fff;
}

.dark .single-elements-heading::before {
    background-color: #303030;
}

.dark .single-share-wrap a {
    color: #fff;
    border-color: #303030;
    background-color: #303030;
}

.dark .single-share-wrap a:hover {
    border-color: #484848;
    background-color: #484848;
}

.dark .single-share-wrap a::before {
    border: 1px solid #303030;
    background-color: #222;
}

.dark .single-share-wrap a:hover::before {
    border-color: #484848;
}

.dark #comments {
    border-color: #303030;
    background-color: #222;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 17%);
}

.dark .comment .children {
    border-top-color: #303030;
}

.dark .comment-meta,
.dark .comment-author, .dark .comment-author a {
    color: #fff;
}

.dark .comment-author::after,
.dark .comment-reply-link::before {
    background-color: #fff;
}

.dark #respond #author, .dark #respond #email, 
.dark #respond #url, .dark #respond #comment,
.dark .wpcf7-text, .dark .wpcf7-textarea, .dark .wpcf7-select {
    color: #9e9e9e;
    border-color: #303030;
    background: #1a1a1a;
}

.dark #respond #author:focus, .dark #respond #email:focus, 
.dark #respond #url:focus, .dark #respond #comment:focus,
.dark .wpcf7-text:focus, .dark .wpcf7-textarea:focus, .dark .wpcf7-select:focus {
    color: #c5c5c5;
    border-color: #3b3b3b;
}

/*-------------------------------------------*\
	7. Error Page Styling
\*-------------------------------------------*/

.dark .error-content-wrap::before {
	background-image: url(../images/error-broken-white.svg);
}

.dark .error-wrap #s {
    color: #9e9e9e;
    background: #1a1a1a;
    border-color: #323232;
}

.dark .error-wrap #s:focus {
    color: #c5c5c5;
    border-color: #404040;
}

.dark .error-wrap #searchsubmit {
    color: #fff;
    background-color: #303030;
}

.dark .error-wrap #searchsubmit:hover {
    background-color: #484848;
}

/*-------------------------------------------*\
	8. WooCommerce Styling
\*-------------------------------------------*/

.woocommerce.dark #respond input#submit, 
.woocommerce.dark a.button, 
.woocommerce.dark button.button, 
.woocommerce.dark input.button, 
.woocommerce.dark #respond input#submit.alt, 
.woocommerce.dark a.button.alt, 
.woocommerce.dark button.button.alt, 
.woocommerce.dark input.button.alt, 
.woocommerce.dark button.button:disabled, 
.woocommerce.dark button.button:disabled[disabled] {
    color: #ffffff;
    border-color: #363636;
    background-color: #363636;
}

.dark .product-content .product-price,
.dark .wc-block-grid__product .wc-block-grid__product-title {
    color: #fff;
}

.woocommerce.dark nav.woocommerce-pagination ul li span.current {
    background-color: #2a2a2a;
}

.dark select {
    color: #8a8a8a;
    background-color: #363636;
}

.dark .woocommerce form .form-row label {
    color: #fff;
}

.dark .select2-container--default .select2-selection--single,
.dark .woocommerce form .form-row input.input-text,
.dark .woocommerce form .form-row textarea {
    color: #949494;
    border-color: #373737;
    background-color: #1D1D1D;
}

.dark .select2-container--default .select2-selection--single:focus,
.dark .woocommerce form .form-row input.input-text:focus,
.dark .woocommerce form .form-row textarea:focus {
    color: #c5c5c5;
    background-color: #1a1a1a;
}

.dark .woocommerce .woocommerce-error, 
.dark .woocommerce .woocommerce-info, 
.dark .woocommerce .woocommerce-message {
    color: #fff;
    border-color: #3a3a3a;
    background-color: #2a2a2a;
}

.dark #add_payment_method #payment, 
.dark .woocommerce-cart #payment, 
.dark .woocommerce-checkout #payment {
    background: #282828;
}

.woocommerce-checkout.dark  #payment ul.payment_methods {
    border-bottom-color: #222;
}

.dark .woocommerce #respond input#submit, 
.dark .woocommerce a.button, 
.dark .woocommerce button.button, 
.dark .woocommerce input.button, 
.dark .woocommerce #respond input#submit.alt, 
.dark .woocommerce a.button.alt, 
.dark .woocommerce button.button.alt, 
.dark .woocommerce input.button.alt, 
.dark .woocommerce button.button:disabled, 
.dark .woocommerce button.button:disabled[disabled] {
    color: #fff;
    background-color: #363636;
}

.woocommerce-cart.dark table.cart .product-name a,
.dark .product_meta, .woocommerce.dark div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce.dark div.product .woocommerce-tabs ul.tabs li:hover a,
.woocommerce.dark #reviews #reply-title, .dark .comment-form-rating label,
.woocommerce.dark .woocommerce-breadcrumb a {
    color: #fff;
}

.woocommerce-cart.dark table.cart tr,
.dark .woocommerce table.shop_table {
    border-color: #383838;
}

.dark #add_payment_method .cart-collaterals .cart_totals tr td, 
.dark #add_payment_method .cart-collaterals .cart_totals tr th, 
.woocommerce-cart.dark .cart-collaterals .cart_totals tr td, 
.woocommerce-cart.dark .cart-collaterals .cart_totals tr th, 
.woocommerce-checkout.dark .cart-collaterals .cart_totals tr td, 
.woocommerce-checkout.dark .cart-collaterals .cart_totals tr th {
    border-top-color: #383838;
}

.woocommerce-cart.dark table.cart td.actions .coupon .input-text,
.dark .woocommerce .quantity .qty {
    color: #949494;
    border-color: #373737;
    background-color: #1D1D1D;
}

.woocommerce-cart.dark table.cart td.actions .coupon .input-text:focus,
.dark .woocommerce .quantity .qty:focus {
    color: #ccc;
}

.dark .woocommerce-product-details__short-description {
    color: #c5c5c5;
}

.woocommerce.dark .quantity .qty {
    color: #B1B1B1;
    border-color: #373737;
    background-color: #1D1D1D;
}

.woocommerce.dark .quantity .qty:focus {
    color: #fff;
    background-color: #1a1a1a;
}

.woocommerce.dark div.product .woocommerce-tabs ul.tabs::before {
    border-bottom-color: #363636;
}

.woocommerce.dark div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #fff;
}

.dark .woocommerce-MyAccount-navigation ul li {
    border-bottom-color: #303030;
}

.dark .woocommerce-MyAccount-navigation ul li a {
    color: #fff;
}

.woocommerce.dark button.single_add_to_cart_button.button.alt:hover {
    color: #222;
    background-color: #fff;
}

/*-------------------------------------------*\
	9. Main Footer Styling
\*-------------------------------------------*/

.dark #main-footer {
    background-color: #282828;
}