/* Автошкола «Старт», Красногорск — простой сайт без излишеств */

body {
  margin: 0;
  padding: 0;
  background: #eceff1;
  color: #222;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
}

a { color: #14508c; }
a:hover { color: #c00; }

/* --- верхняя полоса --- */

.topline {
  background: #14508c;
  color: #fff;
  font-size: 13px;
  padding: 6px 0;
}

.topline a { color: #fff; text-decoration: none; }

.topline .tel {
  float: right;
  font-weight: bold;
}

/* --- шапка --- */

header {
  background: #fff;
  border-bottom: 2px solid #14508c;
  padding: 14px 0;
}

.head { overflow: hidden; }

.logo { float: left; }

.logo b {
  display: block;
  font-size: 22px;
  color: #14508c;
}

.logo span {
  font-size: 13px;
  color: #666;
}

.head-note {
  float: right;
  font-size: 13px;
  color: #444;
  text-align: right;
}

/* --- меню --- */

nav {
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav li { float: left; }

nav li a {
  display: block;
  padding: 9px 14px;
  color: #14508c;
  text-decoration: none;
  font-size: 14px;
  border-right: 1px solid #ddd;
}

nav li a:hover {
  background: #14508c;
  color: #fff;
}

.menu-btn {
  display: none;
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: 0;
  border-bottom: 1px solid #ddd;
  font: inherit;
  color: #14508c;
  text-align: left;
  cursor: pointer;
}

/* --- контент --- */

.main {
  background: #fff;
  border: 1px solid #ccc;
  border-top: 0;
  padding: 18px 20px 8px;
}

section {
  margin-bottom: 26px;
  padding-bottom: 6px;
}

h1 {
  font-size: 22px;
  margin: 0 0 12px;
  color: #14508c;
}

h2 {
  font-size: 18px;
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
  color: #14508c;
}

p { margin: 0 0 10px; }

.hero {
  background: #f7f9fb;
  border: 1px solid #cfd8e0;
  padding: 16px 18px 6px;
}

.hero-list { color: #2b6b2b; }

.btn {
  display: inline-block;
  background: #14508c;
  color: #fff;
  text-decoration: none;
  padding: 9px 20px;
  border: 1px solid #0d3a68;
}

.btn:hover { background: #0d3a68; color: #fff; }

.payment-link {
  margin-top: 10px;
}

.btn2 {
  background: #fff;
  color: #14508c;
  border: 1px solid #14508c;
  margin-left: 6px;
}

.btn2:hover { background: #e6ecf2; color: #14508c; }

/* --- блок про онлайн-обучение --- */

.online {
  background: #fbf8ec;
  border: 1px solid #ddd0a0;
  padding: 16px 18px 6px;
}

.online h2 { border-bottom-color: #ddd0a0; }

.online h3 {
  font-size: 15px;
  margin: 0 0 8px;
}

/* --- кнопки входа: MAX / Госуслуги / Сбер ID --- */

.auth { margin: 0 0 12px; }

.auth-btn {
  display: block;
  background: #fff;
  border: 1px solid #bbb;
  border-left-width: 5px;
  padding: 9px 12px;
  margin-bottom: 7px;
  text-decoration: none;
  color: #222;
}

.auth-btn:hover {
  background: #f2f5f8;
  color: #222;
}

.auth-btn b {
  display: block;
  font-size: 15px;
  color: #14508c;
}

.auth-btn span {
  display: block;
  font-size: 13px;
  color: #555;
  margin-top: 2px;
}

/* вариант с переключателем — в форме записи */

label.auth-btn { cursor: pointer; }

label.auth-btn input {
  float: left;
  margin: 3px 8px 0 0;
}

label.auth-btn b,
label.auth-btn span { margin-left: 22px; }

label.auth-btn:has(input:checked) {
  background: #eef2f6;
  border-top-color: #888;
  border-right-color: #888;
  border-bottom-color: #888;
}

.auth-max { border-left-color: #14508c; }
.auth-gos { border-left-color: #0d4cd3; }
.auth-gos b { color: #0d4cd3; }
.auth-sber { border-left-color: #21a038; }
.auth-sber b { color: #1a7f2c; }

/* --- шаги записи --- */

.step {
  background: #fff;
  border: 1px solid #cfd8e0;
  padding: 12px 14px 4px;
  margin-bottom: 12px;
}

.step-h {
  font-weight: bold;
  color: #14508c;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e8ec;
}

.step-n {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #14508c;
  color: #fff;
  font-size: 13px;
  margin-right: 6px;
}

.step-ok { color: #2b6b2b; }
.step-ok .step-n { background: #2b6b2b; }

.code-input {
  font-size: 20px;
  letter-spacing: 6px;
  width: 160px !important;
  text-align: center;
}

.lnk {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: #14508c;
  text-decoration: underline;
  cursor: pointer;
}

.lnk:hover { color: #c00; }

.lnk:disabled {
  color: #999;
  cursor: default;
  text-decoration: none;
}

.timer {
  font-size: 13px;
  color: #777;
  margin-left: 6px;
}

button:not(.lnk):disabled {
  background: #8fa6bd;
  border-color: #8fa6bd;
  cursor: default;
}

.online-cta { margin: 14px 0; }

.online-cta span {
  font-size: 14px;
  color: #444;
  margin-left: 10px;
}

/* --- таблицы --- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.tbl th,
.tbl td {
  border: 1px solid #ccc;
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}

.tbl th {
  background: #f2f5f8;
  font-weight: bold;
  width: 30%;
}

.price th { width: auto; }
.price tr:first-child th { background: #e6ecf2; }

.sum {
  font-weight: bold;
  white-space: nowrap;
}

.note {
  font-size: 14px;
  color: #444;
}

/* --- списки --- */

.steps, .docs {
  margin: 0 0 10px;
  padding-left: 22px;
}

.steps li, .docs li { margin-bottom: 8px; }

/* --- вопросы --- */

.q {
  font-weight: bold;
  margin-bottom: 4px;
}

.a {
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid #dde3e8;
  color: #333;
}

/* --- форма --- */

.zapis {
  background: #f7f9fb;
  border: 1px solid #cfd8e0;
  padding: 16px 18px 6px;
}

form label,
.step label:not(.check):not(.auth-btn) {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

form input[type=text],
form input[type=tel],
form select,
.step input[type=text],
.step input[type=tel] {
  width: 280px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid #aaa;
  font: inherit;
  background: #fff;
}

.check { font-size: 14px; }
.check input { margin-right: 5px; }

.req { color: #c00; }

form button,
.step button:not(.lnk) {
  background: #14508c;
  color: #fff;
  border: 1px solid #0d3a68;
  padding: 9px 20px;
  font: inherit;
  cursor: pointer;
}

form button:hover,
.step button:not(.lnk):hover { background: #0d3a68; }

.msg { font-size: 14px; }
.msg.err { color: #c00; }
.msg.ok { color: #2b6b2b; }

/* --- всплывающее объявление --- */

.popup-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  padding: 20px 12px;
  overflow: auto;
}

.popup {
  max-width: 440px;
  margin: 60px auto 20px;
  background: #fff;
  border: 1px solid #0d3a68;
}

.popup-head {
  background: #14508c;
  color: #fff;
  padding: 7px 10px;
  font-size: 14px;
  overflow: hidden;
}

.popup-x {
  float: right;
  background: none;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.popup-body { padding: 14px 16px 6px; }

.popup-lead {
  font-size: 17px;
  font-weight: bold;
  color: #14508c;
}

.popup-btns { margin-top: 14px; }

/* --- подвал --- */

footer {
  background: #14508c;
  color: #cdd9e6;
  font-size: 13px;
  padding: 14px 0;
  margin-top: 18px;
}

footer p { margin: 0 0 4px; }

/* --- телефоны --- */

@media (max-width: 700px) {
  .topline .tel { float: none; display: block; margin-top: 3px; }
  .logo, .head-note { float: none; text-align: left; }
  .head-note { margin-top: 8px; }

  .menu-btn { display: block; }
  nav ul { display: none; }
  nav ul.open { display: block; }
  nav li { float: none; }
  nav li a { border-right: 0; border-bottom: 1px solid #ddd; }

  .main { padding: 14px 12px 4px; }

  .tbl th { width: auto; }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { font-size: 14px; }

  .btn { display: block; text-align: center; }
  .btn2 { margin: 8px 0 0; }

  .online-cta span { display: block; margin: 8px 0 0; }

  .popup { margin-top: 20px; }
}