/**
 * Theme Toggle — Dark theme overrides
 * GMS Theme — GrandMetal-Service
 *
 * Color-only overrides for dark theme (layout and structure unchanged).
 * All rules scoped within body.dark-theme / html.dark-theme.
 */

/* ===================================================================
   1. CSS Variables
   =================================================================== */
html.dark-theme,
body.dark-theme {
	--bg-main:        #05080C;
	--bg-secondary:   #0B121A;
	--bg-card:        #101A25;
	--text-main:      #ffffff;
	--text-muted:     #AFC4DC;
	--text-heading:   #EAF2FF;
	--accent:          #1654CE;
	--accent-hover:    #1a5fe8;
	--border:          #27405A;
	--shadow-card:     0 4px 15px 0 rgba(0, 0, 0, 0.28);
	--footer-bg:      #0B121A;
	--footer-text:    #E6F2FC;
}

/* ===================================================================
   2. Base
   =================================================================== */
html body.dark-theme {
	background-color: var(--bg-main) !important;
	color: var(--text-main);
}

body.dark-theme {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===================================================================
   3. Typography
   =================================================================== */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
	color: var(--text-heading);
}

body.dark-theme p  { color: var(--text-main); }
body.dark-theme a  { color: var(--text-main); }
body.dark-theme a:hover { color: var(--accent); }

/* ===================================================================
   4. Layout Sections – Backgrounds
   =================================================================== */
body.dark-theme .second,
body.dark-theme .five,
body.dark-theme .b_objects,
body.dark-theme .contact_s1,
body.dark-theme .f_about,
body.dark-theme .prod_second,
body.dark-theme .history,
body.dark-theme .top_bread,
body.dark-theme .page-template-page-news #page > section,
body.dark-theme .other_cat,
body.dark-theme .all_product,
body.dark-theme .all_news,
body.single-post.dark-theme #primary,
body.wp-singular.dark-theme .site-main,
body.page.dark-theme .site .contact_socials,
body.single-post.dark-theme .entry-header,
body.dark-theme .category main,
body.dark-theme #tbcnbBlock-1>div,
body.dark-theme .four {
	background-color: var(--bg-main) !important;
}

body.dark-theme .eight {
	margin-bottom: 70px;
}

body.dark-theme .socials_feed,
body.dark-theme .cat_content,
body.dark-theme .six {
	background-color: var(--bg-secondary);
}

body.dark-theme .socials_feed {
	margin: 0;
}
body.dark-theme.single-post #primary {
    padding-bottom: 0;
}

/* ===================================================================
   5. Six Section
   =================================================================== */
body.dark-theme .six .block_content p,
body.dark-theme .six .block_content li {
	color: #A8BACC;
}

/* ===================================================================
   6. Slider
   =================================================================== */
body.dark-theme .slider__item {
	padding: 0 5px;
	box-sizing: border-box;
}

body.dark-theme .slider.partner .slider__item img {
	background-color: #0F161F;
	/* border: 3.5px solid #304761;
	border-radius: 7px; */
	display: block;
	width: 100%;
}

body.dark-theme .slider.news .slider__item a {
	background-color: #0F161F;
	border: 1px solid #304761;
	border-radius: 7px;
	display: block;
	width: 100%;
}

/* ===================================================================
   7. Products & Catalog Cards
   =================================================================== */
body.dark-theme .prod .slider__item > div,
body.dark-theme .cat_prods > div,
body.dark-theme .h_prod_c {
	background-color: var(--bg-card);
	border-color: var(--border);
	box-shadow: var(--shadow-card);
}

body.dark-theme .h_buy,
body.dark-theme .cat_prods .h_buy,
body.dark-theme .prod .slider__item .h_buy {
	background-color: var(--accent);
	border: 1px solid var(--accent);
	color: #ffffff;
}

body.dark-theme .h_buy:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* ===================================================================
   8. Services (Second / Third)
   =================================================================== */
body.dark-theme .second .sec_item > a h3 {
	color: #263646;
}

body.dark-theme .second .sec_item > a {
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 7px;
	overflow: hidden;
	position: relative;
}

body.dark-theme .second .sec_item > a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: 7px;
	background: transparent;
	transition: background 0.25s ease-out;
}

body.dark-theme .second .sec_item > a > img { z-index: 1; }

body.dark-theme .second .sec_item > a > div {
	z-index: 3;
	position: relative;
}

body.dark-theme .second .sec_item > a p {
	color: #546E8C;
}

body.dark-theme .third .service > a {
	background: var(--bg-main);
	color: var(--text-heading);
	border: 1px solid var(--border);
}

body.dark-theme .third .service > a:hover {
	background: linear-gradient(112.18deg, #1D1E1F 41.97%, #414344 82.75%);
}

/* ===================================================================
   9. Product First
   =================================================================== */
body.dark-theme .prod_first {
	background-color: #090E14 !important;
}

body.dark-theme .prod_first > div {
	background-color: #090E14;
	border: 1.5px solid #304559;
	border-radius: 7px;
}

body.dark-theme .prod_first .top_char p {
	color: #C2D1DE;
}

body.dark-theme .prod_first > div > div:last-child > div:last-child a {
	color: #6EA3FF;
	background: #304559;
}

body.dark-theme .cat_prods>div {
    border-radius: 7px;
    border: 1.5px solid #304559;
}

/* ===================================================================
   10. Category Content
   =================================================================== */
body.dark-theme .cat_content .block_content p,
body.dark-theme .cat_content .block_content li {
	color: #E5F2FC;
}

/* ===================================================================
   11. News / Blog
   =================================================================== */
body.dark-theme .one_news,
body.dark-theme .news .slider__item a,
body.dark-theme .new_content {
	background-color: var(--bg-card);
	border-color: var(--border);
}

body.dark-theme .one_news h4,
body.dark-theme .news .slider__item a h3,
body.dark-theme .news .slider__item a h4,
body.dark-theme .new_content h4 {
	color: var(--text-heading);
}

body.dark-theme .one_news p,
body.dark-theme .news .slider__item a p,
body.dark-theme .new_content p {
	color: var(--text-muted);
}

body.dark-theme .one_news > div > a > div > p:first-child,
body.dark-theme .one_news div p {
	color: #E5F2FC;
}

body.dark-theme .all_news .url_more {
	border: none;
	background-color: transparent;
}

body.dark-theme #tbcnbBlock-1 :where(a.tbcn-table-content-anchor-list):hover {
    color: var(--accent) !important;
    text-decoration: none !important;
}

body.dark-theme #tbcnbBlock-1 :where(a.tbcn-table-content-anchor-list) {
    color: #C2D1DE !important;
    text-decoration: none;
}

/* ===================================================================
   12. Contact
   =================================================================== */
body.dark-theme .contact_s1 .contact_bls > div,
body.dark-theme .contact_socials > div {
	background-color: #131C26;
	box-shadow: var(--shadow-card);
	border: 1px solid #335478;
	border-radius: 4px;
	color: #D1E0F0;
}

body.dark-theme .contact_s1 .adress {
	color: var(--text-main);
}

body.dark-theme .contact_s1 .post {
	color: var(--text-muted);
}

body.dark-theme .contact_socials .section_title,
body.dark-theme .contact_socials .flow a,
body.dark-theme .contact_s1 .contact_bls a,
body.dark-theme .contact_s1 h1,
body.dark-theme .contact_s2 h2,
body.dark-theme .contact_s2 .contact_form h3,
body.dark-theme .contact_s2 p,
body.dark-theme .s_page_content > div,
body.dark-theme .s_page_content > div > p {
	color: #D1E0F0;
}

/* ===================================================================
   13. Contact Form
   =================================================================== */
body.dark-theme .contact_s2 .contact_form .bt_f_c input {
	background-color: #1654CE;
	color: #FFFFFF;
}

body.dark-theme .contact_form {
	background-color: var(--bg-secondary);
}

body.dark-theme .contact_form h3 { color: var(--text-main); }
body.dark-theme .contact_form label { color: var(--text-muted); }

body.dark-theme .contact_form input,
body.dark-theme .contact_form textarea {
	background-color: var(--bg-card);
	border-color: var(--border);
	color: var(--text-main);
}

/* ===================================================================
   14. Quote
   =================================================================== */
body.dark-theme .quot {
	color: #E5F2FC;
}

/* ===================================================================
   15. About
   =================================================================== */
body.dark-theme .about_num > div {
	background-color: var(--bg-card);
	border-color: var(--border);
	box-shadow: var(--shadow-card);
}

body.dark-theme .about_num > div b {
	color: var(--text-heading);
}

body.dark-theme .about_num h3 {
	color: #6EA3FF;
}

body.dark-theme .f_about p,
body.dark-theme .f_about div p,
body.dark-theme .f_about li,
body.dark-theme .f_about span {
	color: #A8BACC !important;
}

body.page-template-page-about_company.dark-theme p {
	color: #A8BACC !important;
}

body.dark-theme .studied_about h2 {
    margin-bottom: 30px;
}

/* ===================================================================
   16. Sidebar
   =================================================================== */
body.dark-theme aside a,
body.dark-theme aside span {
	background-color: var(--bg-card);
}

body.dark-theme aside a h4,
body.dark-theme aside a p {
	color: var(--text-main);
}

body.dark-theme aside a {
	background-color: #0B121A;
	border-radius: 7px;
}

/* ===================================================================
   17. Single Post
   =================================================================== */
body.single-post.dark-theme #primary article {
	background-color: var(--bg-card);
	border-color: var(--border);
}

body.single-post.dark-theme aside a:hover {
	box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.22);
}

body.single-post.dark-theme aside a h4,
body.single-post.dark-theme aside a p,
body.single-post.dark-theme .new_cont .new_info p {
	color: #E5F2FC;
}

body.single-post.dark-theme .entry-content p,
body.single-post.dark-theme .entry-content li {
	color: #C2D1DE;
}

/* ===================================================================
   18. Buttons & Links
   =================================================================== */
body.dark-theme .url_more {
	background-color: var(--bg-main);
	border: 1.5px solid var(--border);
}

body.dark-theme .h_price_b .url_more:hover {
	background-color: var(--accent);
	border-color: var(--accent);
}

body.dark-theme .seven .more_oblect {
	background-color: var(--bg-main);
	border: 1px solid var(--border);
	color: var(--text-heading);
}

body.dark-theme .seven .more_oblect:hover {
	color: #294057 !important;
}

body.dark-theme .url_more {
    background: #05080C url(/wp-content/uploads/2026/06/icon-show-more-dark.svg);
    border-radius: 7px;
    border: 1px solid #27405A;	
    display: flex;
    background-repeat: no-repeat;
    background-position: 50%;
    transition: .25s ease-out;
}

/* ===================================================================
   19. Error / 404
   =================================================================== */
body.dark-theme .eror_1 a {
	background: var(--accent);
}

body.dark-theme .eror_1 a::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 9px;
	margin-left: 8px;
	background: url(/wp-content/uploads/2023/11/arrow-right.svg) no-repeat;
	background-size: contain;
	filter: invert(1) brightness(2);
}

/* ===================================================================
   20. Footer
   =================================================================== */
body.dark-theme .site-footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
}

body.dark-theme .site-footer a { color: #E6F2FC; }
body.dark-theme .site-footer a:hover { color: var(--accent); }
body.dark-theme .site-info > p { color: #E6F2FC; }
body.dark-theme .site-info a { color: var(--text-muted); }
body.dark-theme .m_title { color: var(--text-muted); }
body.dark-theme .f_contact > p:last-child { color: var(--text-muted); }

/* ===================================================================
   21. Header
   =================================================================== */
body.dark-theme #masthead {
	background-color: var(--bg-main);
}

/* ===================================================================
   22. Navigation
   =================================================================== */
body.dark-theme .bmenu,
body.dark-theme .bmenu a {
	color: #EBF4FA;
}

body.dark-theme .bmenu a:hover {
	color: var(--accent);
}

body.dark-theme .bmenu .menu-item-has-children::after {
	border-color: #304559;
}

body.dark-theme .menu-toggle > span {
	background-color: var(--text-main);
}

body.dark-theme .sub-menu {
	background: var(--bg-card) !important;
	border-color: var(--border) !important;
}

body.dark-theme .sub-menu > li > a {
	color: var(--text-main);
}

body.dark-theme .main-navigation.toggled {
	background-color: var(--bg-main);
}

/* ===================================================================
   23. Time / Phone / Lang
   =================================================================== */
body.dark-theme .time_tel a,
body.dark-theme .time_tel p {
	color: #C2D1DE;
}

body.dark-theme .lang a,
body.dark-theme .lang span {
	color: #C2D1DE;
}

body.dark-theme .time_tel svg path,
body.dark-theme .lang svg path {
	stroke: #304559;
}

body.dark-theme #pop_tel {
	background-color: var(--accent);
	color: #ffffff;
}

body.dark-theme #pop_tel:hover {
	background-color: var(--accent-hover);
}

/* ===================================================================
   24. Popup
   =================================================================== */
body.dark-theme .popup_order > section > div > div {
	background-color: var(--bg-card);
	border-color: var(--border);
}

/* ===================================================================
   25. Filters & Categories List
   =================================================================== */
body.dark-theme .cats_filters_list li a,
body.dark-theme .cats_filters_list li span {
	background-color: var(--bg-card);
	border-color: #304559;
	color: #C2D1DE;
}

body.dark-theme .cats_filters_list li.active a,
body.dark-theme .cats_filters_list li.active span {
	background-color: var(--accent);
	border-color: #246FFC;
	color: #FFFFFF;
}

body.dark-theme .cats_filters_list li a:hover {
	background-color: var(--accent);
	border-color: #246FFC;
	color: #FFFFFF;
}

body.dark-theme .b_objects .filters p {
	background-color: var(--bg-card);
	color: #E5F2FC;
}

body.dark-theme .b_objects .filters p.f_active,
body.dark-theme .b_objects .filters p:hover {
	color: #6EA3FF;
}

/* ===================================================================
   26. Characteristic Tabs
   =================================================================== */
body.dark-theme .ch_title p {
	background-color: #304559;
	color: var(--text-muted);
}

body.dark-theme .ch_title p.topean {
	background-color: var(--bg-card);
	color: var(--text-main);
}

body.dark-theme .ch_content {
	background-color: #05080C;
}

body.dark-theme .ch_content div p,
body.dark-theme .ch_content div li {
	color: #C2D1DE;
}

body.dark-theme .ch_content #ch_char_op h4 {
	color: var(--text-heading);
}

/* ===================================================================
   27. Misc
   =================================================================== */
body.dark-theme #text_m {
	color: #D7E5F5;
}

body.dark-theme #text_m:hover {
	color: var(--accent);
}

body.dark-theme .first h1,
body.dark-theme .first h1 > p,
body.dark-theme .first div > p {
	color: #0B1624;
}

body.dark-theme .first a {
	background-color: var(--accent);
	color: #ffffff;
}

body.dark-theme .first a:hover {
	background-color: var(--accent-hover);
}

body.dark-theme .first a:after {
	filter: invert(1) brightness(2);
}

body.dark-theme .nine .feed_link_item a {
	background-color: var(--border);
	border: 1px solid var(--border);
	color: #ffffff;
}

body.dark-theme .prod_second p.dev_title {
	color: #EBF4FA;
}

body.dark-theme .prod_second div p,
body.dark-theme .prod_second div li,
body.dark-theme .site-main .container div p,
body.dark-theme .site-main .container div li {
	color: #C2D1DE;
}

body.dark-theme.page-template-page-service #primary > div > div a {
	color: #FFFFFF;
}

body.dark-theme #menu-menu_service a {
	color: #E5F2FC;
}

body.dark-theme .current-menu-item > span,
body.dark-theme #menu-menu_service a:hover {
	color: #6EA3FF !important;
}

/* ===================================================================
   28. Breadcrumbs / Price
   =================================================================== */
body.dark-theme #breadcrumbs a,
body.dark-theme #breadcrumbs span {
	color: var(--text-muted);
}

body.dark-theme .price,
body.dark-theme .h_price .hpprice,
body.dark-theme .h_price {
	color: var(--text-main);
}

body.dark-theme .green {
	color: #40D173;
}

body.dark-theme.page-template-page-map .wsp-container a {
    text-decoration: none;
    color: #C2D1DE;
}

/* ===================================================================
   29. Social Icons
   =================================================================== */
body.dark-theme .social > a.telega svg rect   { fill: #27A6E5; }
body.dark-theme .social > a.watsapp svg rect  { fill: #48C95F; }
body.dark-theme .social > a.viber svg rect    { fill: #7C509A; }

body.dark-theme .social > a:hover svg rect {
	filter: brightness(1.4);
	transition: filter 0.25s ease-out;
}

body.dark-theme .fsocial > a {
	background: transparent;
}

body.dark-theme .fsocial > a svg {
	filter: brightness(1.2);
}

body.dark-theme .fsocial > a:first-child:hover {
	background: url(/wp-content/uploads/2023/12/f-telegram-h.svg) no-repeat !important;
	background-size: contain;
}

body.dark-theme .fsocial > a:nth-child(2):hover {
	background: url(/wp-content/uploads/2023/12/f-watsapp-h.svg) no-repeat !important;
	background-size: contain;
}

body.dark-theme .fsocial > a:nth-child(3):hover {
	background: url(/wp-content/uploads/2023/12/f-viber-h.svg) no-repeat !important;
	background-size: contain;
}

/* ===================================================================
   30. Theme Switcher Component
   =================================================================== */
.theme-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 132px;
	height: 36px;
	background: #081019;
	border: 1px solid #246FFC;
	border-radius: 18px;
	padding: 3px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	margin-bottom: 30px;
}

.theme-switcher__slider {
	position: absolute;
	top: 3px;
	left: var(--sw-left, 65px);
	width: 62px;
	height: 28px;
	background: #1554CE;
	border-radius: 14px;
	transition: left 0.25s ease;
	z-index: 0;
	pointer-events: none;
}

.theme-switcher__option {
	position: relative;
	z-index: 1;
	flex: 0 0 62px;
	height: 28px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	padding: 0;
	color: #ffffff;
	transition: color 0.2s ease;
}

.theme-switcher__option svg {
	width: 14px;
	height: 14px;
	display: block;
	fill: #ffffff;
}

.theme-switcher__option:focus-visible {
	outline: 2px solid #246FFC;
	outline-offset: 2px;
}