/* Ветклиника «Соколовая», Саратов. Основные стили сайта. Правил с 2019 г. */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #f3f1ec;
    color: #262523;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

a {
    color: #2c6a52;
}

a:hover {
    color: #1d4838;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3 {
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 12px 0;
}

h1 {
    font-size: 25px;
}

h2 {
    font-size: 20px;
    border-bottom: 1px solid #d8d3c9;
    padding-bottom: 6px;
}

h3 {
    font-size: 17px;
}

p {
    margin: 0 0 12px 0;
}

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

.vet-header {
    background: #ffffff;
    border-bottom: 3px solid #2c6a52;
}

.vet-header__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 12px 16px 10px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.vet-header__logo {
    text-decoration: none;
    color: #262523;
    display: block;
}

.vet-header__mark {
    vertical-align: -2px;
    margin-right: 6px;
}

.vet-header__name {
    font-size: 21px;
    font-weight: bold;
    color: #2c6a52;
}

.vet-header__slogan {
    display: block;
    font-size: 13px;
    color: #6d6a63;
    margin-top: 2px;
}

.vet-header__contacts {
    text-align: right;
    font-size: 13px;
    color: #6d6a63;
}

.vet-header__phone {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #262523;
    text-decoration: none;
    letter-spacing: 0.2px;
}

.vet-header__hours {
    display: block;
}

.vet-header__night {
    display: block;
    color: #a03b2b;
}

.vet-header__burger {
    display: none;
    background: #2c6a52;
    color: #fff;
    border: 0;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
}

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

.vet-nav {
    background: #2c6a52;
}

.vet-nav__list {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.vet-nav__item {
    margin: 0;
}

.vet-nav__link {
    display: block;
    padding: 9px 14px;
    color: #eef4f0;
    text-decoration: none;
    font-size: 15px;
}

.vet-nav__link:hover {
    background: #22523f;
    color: #fff;
}

.vet-nav__link--current {
    background: #22523f;
    color: #fff;
}

/* ---------- каркас страницы ---------- */

.page {
    max-width: 1000px;
    margin: 18px auto 24px auto;
    background: #fff;
    border: 1px solid #ddd8ce;
    padding: 20px 22px 26px 22px;
}

.lead {
    font-size: 16px;
}

.hero_8cff7e {
    margin: 0 0 20px 0;
}

.hero__photo {
    display: block;
    border: 1px solid #ddd8ce;
    margin-bottom: 10px;
}

.hero__caption {
    font-size: 13px;
    color: #6d6a63;
    margin-bottom: 14px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #2c6a52;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    border: 0;
}

.btn:hover {
    background: #22523f;
    color: #fff;
}

.btn--call {
    background: #a03b2b;
    font-weight: bold;
}

.btn--call:hover {
    background: #86301f;
}

/* ---------- услуги ---------- */

.service-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

.service-card {
    width: 50%;
    padding: 0 8px 14px 8px;
}

.service-card__title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 3px;
}

.service-card__text {
    font-size: 14px;
    color: #4a4842;
    margin: 0;
}

.service-card__price {
    font-size: 14px;
    color: #a03b2b;
    white-space: nowrap;
}

.service-card--night {
    width: 100%;
    background: #fdf6ee;
    border: 1px solid #e6d3b8;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* ---------- ночной вызов ---------- */

.night-call {
    background: #fdf6ee;
    border: 1px solid #e6d3b8;
    padding: 14px 16px 6px 16px;
    margin: 0 0 22px 0;
}

.night-call__title {
    border: 0;
    padding: 0;
    margin-bottom: 6px;
}

.night-call__toggle {
    background: #fff;
    border: 1px solid #c9b58f;
    color: #7a4a1e;
    padding: 7px 13px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 10px;
}

.night-call__toggle:hover {
    background: #f6ecdd;
}

.night-call__body {
    display: none;
    border-top: 1px dashed #d9c39c;
    padding-top: 10px;
}

.night-call__body--open {
    display: block;
}

.night-call__phone {
    font-size: 19px;
    font-weight: bold;
    color: #a03b2b;
    text-decoration: none;
}

/* ---------- прайс ---------- */

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px 0;
    font-size: 14px;
}

.price-table caption {
    text-align: left;
    font-weight: bold;
    padding: 0 0 6px 0;
}

.price-table th {
    text-align: left;
    background: #eceae4;
    border: 1px solid #d8d3c9;
    padding: 6px 8px;
}

.price-table td {
    border: 1px solid #e2ded6;
    padding: 6px 8px;
    vertical-align: top;
}

.price-table__sum {
    text-align: right;
    white-space: nowrap;
}

.price-table tr:hover td {
    background: #f7f6f2;
}

/* ---------- врачи ---------- */

.doc-list {
    margin: 0 0 18px 0;
    padding: 0;
    list-style: none;
}

.doc-card {
    border-left: 3px solid #2c6a52;
    padding: 2px 0 2px 12px;
    margin-bottom: 14px;
}

.doc-card__name {
    font-weight: bold;
}

.doc-card__spec {
    color: #6d6a63;
    font-size: 14px;
}

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

.faq__item {
    margin-bottom: 14px;
}

.faq__q {
    font-weight: bold;
    margin-bottom: 3px;
}

.faq__a {
    margin: 0;
}

/* ---------- две колонки ---------- */

.cols {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.cols__item {
    width: 50%;
    padding: 0 10px;
}

.note {
    background: #f2f5f3;
    border-left: 3px solid #9ab8a9;
    padding: 10px 12px;
    font-size: 14px;
    margin: 0 0 18px 0;
}

/* ---------- контакты ---------- */

.contact-block {
    margin-bottom: 18px;
}

.contact-block__row {
    margin-bottom: 5px;
}

.contact-block__label {
    display: inline-block;
    min-width: 160px;
    color: #6d6a63;
}

.hours-table {
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 16px;
}

.hours-table td {
    border: 1px solid #e2ded6;
    padding: 5px 12px 5px 8px;
}

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

.vet-footer {
    background: #2b2a27;
    color: #cbc7bf;
    font-size: 13px;
    padding: 18px 0 22px 0;
}

.vet-footer__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

.vet-footer a {
    color: #d8e5dd;
}

.vet-footer__legal {
    color: #8f8b83;
    margin-top: 10px;
}

/* ---------- 404 ---------- */

.oops {
    padding: 10px 0 30px 0;
}

.oops__code {
    font-size: 46px;
    color: #c9c4ba;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
}

/* ---------- узкие экраны ---------- */

@media (max-width: 760px) {
    .vet-header__inner {
        padding: 10px 12px;
    }

    .vet-header__contacts {
        text-align: left;
        margin-top: 8px;
        width: 100%;
        order: 3;
    }

    .vet-header__burger {
        display: block;
    }

    .vet-nav {
        display: none;
    }

    .vet-nav--open {
        display: block;
    }

    .vet-nav__list {
        display: block;
        padding: 0;
    }

    .vet-nav__link {
        border-bottom: 1px solid #3d7d63;
    }

    .page {
        margin: 10px 0 14px 0;
        border-left: 0;
        border-right: 0;
        padding: 14px 12px 18px 12px;
    }

    .service-card,
    .cols__item {
        width: 100%;
    }

    h1 {
        font-size: 21px;
    }

    .contact-block__label {
        min-width: 0;
        display: block;
    }

    .price-table {
        font-size: 13px;
    }
}