﻿/*
Theme Name: ЭлектроПроект
Theme URI: https://eproekt71.ru/
Author: ЭлектроПроект
Version: 2.0
*/
:root{--primary:#0052cc;--primary-hover:#0747a6;--secondary:#ffab00;--dark:#091e42;--text:#172b4d;--text-muted:#6b778c;--bg-light:#f4f5f7;--bg-white:#fff;--border:#ebecf0;--radius:12px;--transition:all .25s ease}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);background-color:var(--bg-white);line-height:1.6;font-size:16px}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-hover)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo-title{font-size:24px;font-weight:800;color:var(--dark);letter-spacing:-.5px}
.logo-title span{color:var(--primary)}
.logo-tagline{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.header-contacts{display:flex;align-items:center;gap:25px}
.header-phone{display:flex;flex-direction:column;text-align:right}
.header-phone a{font-size:18px;font-weight:700;color:var(--dark)}
.header-phone span{font-size:12px;color:var(--text-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:15px;font-weight:600;border-radius:var(--radius);cursor:pointer;border:none;transition:var(--transition)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.hero{padding:80px 0 60px;background:linear-gradient(135deg,#f4f5f7 0%,#e6effc 100%);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.hero h1{font-size:42px;line-height:1.2;color:var(--dark);margin-bottom:20px;font-weight:800}
.hero p{font-size:18px;color:var(--text-muted);margin-bottom:30px}
.hero-badges{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:35px}
.badge-item{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 14px;border-radius:30px;font-size:14px;font-weight:600;border:1px solid var(--border)}
.hero-form-card{background:#fff;padding:35px;border-radius:16px;box-shadow:0 10px 30px rgba(9,30,66,.08);border:1px solid var(--border)}
.hero-form-card h3{font-size:20px;color:var(--dark);margin-bottom:10px}
.form-group{margin-bottom:15px}
.form-control{width:100%;padding:12px 16px;border:1px solid #dfe1e6;border-radius:8px;font-size:15px;outline:none;transition:var(--transition)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,82,204,.2)}
.section{padding:80px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:32px;color:var(--dark);margin-bottom:12px}
.section-title p{font-size:17px;color:var(--text-muted);max-width:650px;margin:0 auto}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.service-card{background:#fff;border:1px solid var(--border);padding:30px;border-radius:var(--radius);transition:var(--transition)}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(9,30,66,.06);border-color:#c1c7d0}
.service-icon{width:50px;height:50px;background:var(--bg-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px}
.service-card h3{font-size:20px;color:var(--dark);margin-bottom:12px}
.service-card p{font-size:15px;color:var(--text-muted);margin-bottom:20px}
.service-list{list-style:none;font-size:14px}
.service-list li{position:relative;padding-left:18px;margin-bottom:8px}
.service-list li::before{content:"•";color:var(--primary);position:absolute;left:0;font-size:18px;line-height:1}
.calc-section{background:var(--bg-light);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.calc-box{background:#fff;max-width:800px;margin:0 auto;border-radius:16px;padding:40px;box-shadow:0 4px 20px rgba(9,30,66,.05);border:1px solid var(--border)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
.calc-options{margin-bottom:25px}
.calc-checkbox{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;cursor:pointer}
.calc-checkbox input{width:18px;height:18px;accent-color:var(--primary)}
.calc-result-box{background:#f4f8ff;border:2px dashed #b3d4ff;border-radius:12px;padding:25px;text-align:center;margin-bottom:25px}
.calc-result-price{font-size:38px;font-weight:800;color:var(--primary);margin:5px 0}
.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.scope-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.scope-box h3{font-size:20px;color:var(--dark);margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--primary)}
.site-footer{background:var(--dark);color:#a5b2c6;padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-title{color:#fff;font-size:18px;margin-bottom:20px}
.footer-contacts p{margin-bottom:10px;font-size:15px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:25px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:992px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.calc-row,.scope-grid,.footer-grid{grid-template-columns:1fr}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}.hero h1{font-size:30px}.calc-box{padding:20px}}
/* Адаптивная шапка */
.site-header {
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.site-branding a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.site-branding .brand-main {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark, #1a202c);
    line-height: 1.2;
}

.site-branding .brand-sub {
    font-size: 13px;
    color: var(--text-muted, #718096);
    margin-top: 2px;
}

.site-branding .brand-cities {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #0052cc);
    margin-top: 4px;
    letter-spacing: 0.3px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-phone {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark, #1a202c);
    text-decoration: none;
    white-space: nowrap;
}

.header-phone:hover {
    color: var(--primary, #0052cc);
}

/* Модальное окно */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(9, 30, 66, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
}
.modal-card {
    background: #fff;
    padding: 35px 30px;
    border-radius: 16px;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.modal-close {
    position: absolute;
    top: 15px; right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-muted, #718096);
}

/* Мобильная адаптация шапки */
@media screen and (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f0f2f5;
        padding-top: 10px;
    }

    .header-phone {
        font-size: 16px;
        white-space: nowrap;
    }

    .header-actions .btn {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}