/* Файл: public/css/style.css */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { 
    color: #333; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    transition: background-color 0.3s, color 0.3s; 
}
body.dark-mode { background-color: #121212; color: #eee; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; flex-grow: 1; }

/* === ШАПКА === */
header { background-color: #0A0A0A; padding: 22px 25px; position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; }
.header-left, .header-right { display: flex; gap: 10px; align-items: center; }
.logo-container { flex-grow: 1; display: flex; justify-content: center; text-decoration: none !important; transition: transform 0.3s; }
.logo-container:hover { transform: scale(1.02); }
.logo-container img { height: 60px; max-width: 220px; object-fit: contain; }
.icon-btn { width: 46px; height: 46px; background: #ffffff; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #0A0A0A; border: none; cursor: pointer; text-decoration: none; transition: 0.2s; position: relative; }
.icon-btn:hover { background: #e0e0e0; transform: scale(0.96); }
.icon-btn svg { width: 22px; height: 22px; }
.badge-count { position: absolute; top: -5px; right: -5px; background: #0A0A0A; border: 2px solid #fff; color: #fff; border-radius: 50%; min-width: 22px; height: 22px; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; }

/* === БОКОВОЕ МЕНЮ === */
.side-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; opacity: 0; visibility: hidden; transition: 0.3s; }
.side-menu-overlay.active { opacity: 1; visibility: visible; }
.side-menu { position: fixed; top: 0; left: 0; width: 340px; max-width: 85%; height: 100%; background: #f9f9f9; z-index: 1000; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; overflow-y: auto; }
.side-menu.active { transform: translateX(0); }
.sm-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 20px 15px; border-bottom: 1px solid #eee; }
.sm-logo-wrap { display: flex; align-items: center; }
.sm-logo-wrap img { max-height: 45px; width: auto; object-fit: contain; }
.sm-close { width: 36px; height: 36px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; font-size: 16px; color: #555; transition: 0.2s; }
.sm-close:hover { background: #ddd; }
.sm-nav { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.sm-link { display: flex; align-items: center; padding: 18px 20px; background: #ffffff; border-radius: 16px; text-decoration: none; color: #222; box-shadow: 0 2px 8px rgba(0,0,0,0.02); font-weight: 500; font-size: 16px; transition: 0.2s; }
.sm-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); }
.sm-footer { padding: 25px 20px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; background: #fafafa; }
.sm-phone { color: #C4A47C; font-weight: bold; text-decoration: none; font-size: 15px; }

/* === ПОИСК === */
.search-overlay { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; padding: 15px 25px; z-index: 99; transform: translateY(-150%); opacity: 0; visibility: hidden; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; display: flex; gap: 10px; }
.search-overlay.active { transform: translateY(0); opacity: 1; visibility: visible; }
.search-overlay input { flex-grow: 1; padding: 14px 15px; border-radius: 12px; border: 1px solid #ddd; outline: none; font-size: 16px; background: #f9f9f9; }
.search-overlay button { padding: 0 20px; background: #0A0A0A; color: #fff; border: none; border-radius: 12px; cursor: pointer; font-weight: bold; }

/* === ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ === */
.theme-toggle-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; background: #fff; padding: 15px 20px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.theme-toggle { position: relative; width: 48px; height: 26px; background: #ccc; border-radius: 13px; cursor: pointer; transition: 0.3s; }
.theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: 0.3s; }
.theme-toggle.dark { background: #C4A47C; }
.theme-toggle.dark::after { transform: translateX(22px); }

/* === ТЕМНАЯ ТЕМА (ПЕРЕОПРЕДЕЛЕНИЯ) === */
body.dark-mode .side-menu { background: #121212; border-right: 1px solid #222; }
body.dark-mode .sm-header { border-color: #222; }
body.dark-mode .sm-close { background: #222; color: #ccc; }
body.dark-mode .sm-link { background: #1a1a1a; color: #eee; box-shadow: none; border: 1px solid #222; }
body.dark-mode .sm-footer { background: #181818; border-color: #222; }
body.dark-mode .theme-toggle-wrap { background: #1a1a1a; color: #eee; border: 1px solid #222; }
body.dark-mode .search-overlay { background: #1a1a1a; border-bottom: 1px solid #333; }
body.dark-mode .search-overlay input { background: #222; border-color: #333; color: #fff; }

/* Адаптивность для общих элементов */
@media (max-width: 768px) {
    header { padding: 18px 15px; }
    .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
}