/* Start:/local/templates/dryrent/assets/style.css?178696751832735*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.header-phone {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.3s;
}

.header-phone:hover {
    opacity: 0.85;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 120px 20px 80px;
    text-align: center;
}

.hero h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
    font-weight: 300;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero p {
    font-size: 1.3em;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    background: white;
    color: #667eea;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.2s;
}

.cta-btn:hover {
    transform: translateY(-3px);
}

.cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.features {
    padding: 80px 20px;
    background: white;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #2c3e50;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.feature-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    background: #f8f9fa;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #2c3e50;
}

.feature-card p {
    color: #6c757d;
    line-height: 1.6;
}

.booking-title {
    text-align: center;
}

.booking-subtitle {
    text-align: center;
}

.booking-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
}

.price-info {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.price-info h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.price-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e1e8ed;
}

.price-item:last-child {
    border-bottom: none;
    font-weight: 600;
    font-size: 1.1em;
}

.booking-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 20px;
}

/* Группа «Адрес аренды»: регион чипами-радиокнопками + текстовый адрес под ними.
   fieldset по умолчанию несёт свою рамку и отступы — снимаем, вид задаём сами. */
.form-fieldset {
    border: 0;
    padding: 0;
    margin-inline: 0;
}

.form-fieldset legend {
    padding: 0;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Чип: сама радиокнопка скрыта визуально, но остаётся в потоке и фокусируется —
   поэтому клавиатура и скринридер работают штатно, а :focus-visible виден. */
.radio-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.radio-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-chip span {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid #d6dee5;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    line-height: 1.2;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.radio-chip:hover span {
    border-color: #9fb3c8;
}

.radio-chip input:checked + span {
    background: #2c3e50;
    border-color: #2c3e50;
    color: #fff;
}

.radio-chip input:focus-visible + span {
    outline: 2px solid #2c3e50;
    outline-offset: 2px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

.submit-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
}

.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.result {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    display: none;
}

.result.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.result.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.faq {
    padding: 80px 20px;
    background: #f8f9fa;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #2c3e50;
}

.faq-item {
    background: white;
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
    font-size: 1.15em;
    margin-bottom: 8px;
    color: #2c3e50;
}

.faq-item p {
    color: #6c757d;
}

.footer {
    background: #2c3e50;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
}

.footer p {
    opacity: 0.7;
}

.form-group.form-consent {
    margin-top: 26px;
}

.form-group .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #6c757d;
    cursor: pointer;
}

.form-group .consent-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-top: 1px;
    padding: 0;
    border-width: 1px;
    accent-color: #3498db;
    cursor: pointer;
}

.form-group .consent-label a {
    color: #2980b9;
}

.footer-legal {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    line-height: 1.75;
    opacity: 0.75;
}

.footer-legal a {
    color: white;
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .logo {
        font-size: 19px;
    }

    .header-phone {
        font-size: 17px;
    }

    .hero h1 {
        font-size: 1.9em;
    }

    .doc h1 {
        font-size: 1.5em;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* ── Документ-страница (/privacy/ и будущие юр-страницы) ─────────────────── */
/* Верхний отступ, как у .hero, освобождает место под фиксированную шапку. */

.doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 130px 20px 70px;
}

.doc h1 {
    font-size: 2em;
    font-weight: 300;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.25;
}

.doc .rev {
    color: #6c757d;
    font-size: 15px;
    margin-bottom: 35px;
}

.doc h2 {
    font-size: 1.25em;
    color: #2c3e50;
    margin: 34px 0 12px;
}

.doc p {
    margin-bottom: 12px;
}

.doc ul {
    margin: 0 0 12px 22px;
}

.doc li {
    margin-bottom: 7px;
}

.doc a {
    color: #2980b9;
}

.doc .req {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 12px;
    line-height: 1.8;
}

.doc .back {
    display: inline-block;
    margin-top: 40px;
    background: #3498db;
    color: white;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* ── Посадочные страницы Тира A ──────────────────────────────────────────── */
/* Классы только НОВЫЕ: ни одно существующее правило не переопределяется,     */
/* поэтому главная и /privacy/ рендерятся байт-в-байт как раньше.             */

.crumbs {
    max-width: 900px;
    margin: 0 auto 22px;
    font-size: 15px;
    opacity: 0.85;
}

.crumbs a {
    color: inherit;
    text-decoration: underline;
}

.crumbs-sep {
    margin: 0 8px;
    opacity: 0.6;
}

/* Блок фактов: то, что языковые модели вытаскивают со страницы дословно
   (адрес пункта, минимальный срок, доставка, модель). Явный <dl> вместо
   прозы — чтобы факт был отделим от текста и машиной, и глазом. */

.facts {
    padding: 70px 20px;
    background: #f8f9fa;
}

.facts-container {
    max-width: 900px;
    margin: 0 auto;
}

.facts h2 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 300;
}

.facts-list {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 0;
    background: white;
    border-radius: 12px;
    padding: 8px 26px;
}

.facts-list dt {
    font-weight: 600;
    color: #2c3e50;
    padding: 16px 20px 16px 0;
    border-top: 1px solid #eceff1;
}

.facts-list dd {
    margin: 0;
    padding: 16px 0;
    color: #444;
    border-top: 1px solid #eceff1;
}

.facts-list dt:first-of-type,
.facts-list dt:first-of-type + dd {
    border-top: 0;
}

/* Пошаговая инструкция и расчёт стоимости */

.article {
    padding: 70px 20px;
    background: white;
}

.article.alt {
    background: #f8f9fa;
}

.article-container {
    max-width: 900px;
    margin: 0 auto;
}

.article h2 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 22px;
    font-weight: 300;
}

.article h3 {
    font-size: 1.25em;
    color: #2c3e50;
    margin: 28px 0 10px;
}

.article p {
    margin-bottom: 14px;
    color: #444;
}

.article ol,
.article ul {
    margin: 0 0 16px 22px;
    color: #444;
}

.article li {
    margin-bottom: 10px;
}

.article .note {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 22px 0;
    color: #444;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 8px;
}

.calc-table th,
.calc-table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #eceff1;
    vertical-align: top;
}

.calc-table th {
    color: #2c3e50;
    font-size: 15px;
}

.calc-table td:last-child {
    white-space: nowrap;
    font-weight: 600;
    color: #2c3e50;
}

/* Таблица возмещения на /pravila-arendy/.
   🔴 Своих правил у неё НЕ БЫЛО вовсе — разметка `.price-table` отдавалась голой,
   строки сливались в сплошной текст. Именно это и есть замечание §8 вычитки
   «оформить красивее, чтобы строки были видны», а не вопрос вкуса.
   .table-wrap даёт горизонтальную прокрутку на узком экране: таблица с суммами
   не должна тянуть за собой всю страницу. */
.table-wrap {
    overflow-x: auto;
    margin: 18px 0 8px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}

.price-table th,
.price-table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #e1e8ed;
    vertical-align: top;
}

.price-table thead th {
    color: #2c3e50;
    font-size: 15px;
    background: #f8f9fa;
    border-bottom: 2px solid #d6dee5;
}

/* Зебра: на длинном списке позиций глаз теряет строку между «что» и «сколько». */
.price-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.price-table td:last-child {
    white-space: nowrap;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

/* ── Фотографии с объектов ───────────────────────────────────────────────── */
/* Кадры снимаются телефоном и почти все ВЕРТИКАЛЬНЫЕ. Поэтому размер задаёт   */
/* высота, а не ширина: при ограничении по ширине вертикальный кадр вырастает  */
/* на полтора экрана. Обрезку (object-fit: cover) не берём — на лучших кадрах  */
/* прибор стоит внизу кадра, кроп его срежет.                                  */

.photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 26px 0 8px;
}

/* Высоту держит FIGURE, а не max-height на самой картинке. Причина —
   резервирование места: при `width:auto; height:auto; max-height:420px`
   ещё не загруженный кадр занимает 0×0, страница дёргается при подгрузке
   (CLS), а до загрузки на её месте пусто. Фиксированная высота figure даёт
   браузеру место сразу, ширину он берёт из соотношения width/height. */
.photo-row figure {
    margin: 0;
    flex: 0 1 auto;
    height: 420px;
}

.photo-row img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, .12);
}

.photo-caption {
    max-width: 900px;
    margin: 6px auto 0;
    color: #7f8c8d;
    font-size: 15px;
    text-align: center;
}

/* Перелинковка в подвале страницы */

.related {
    padding: 60px 20px;
    background: #f8f9fa;
}

.related-container {
    max-width: 900px;
    margin: 0 auto;
}

.related h2 {
    font-size: 1.6em;
    color: #2c3e50;
    margin-bottom: 18px;
    font-weight: 300;
}

.related ul {
    list-style: none;
}

.related li {
    margin-bottom: 12px;
}

.related a {
    color: #2980b9;
    font-size: 17px;
}

@media (max-width: 768px) {
    .facts-list {
        grid-template-columns: 1fr;
        padding: 6px 20px;
    }

    .facts-list dt {
        padding: 16px 0 2px;
    }

    .facts-list dt + dd {
        border-top: 0;
        padding-top: 0;
    }

    .facts h2,
    .article h2 {
        font-size: 1.6em;
    }

    .calc-table th,
    .calc-table td {
        padding: 10px 8px;
        font-size: 15px;
    }

    /* На телефоне два вертикальных кадра рядом дают по ~150 px ширины —
       разглядеть нечего. Кадр на всю ширину, друг под другом; место до
       загрузки резервируется соотношением из атрибутов width/height. */
    .photo-row figure {
        height: auto;
        width: 100%;
    }

    .photo-row img {
        width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: cover;
    }
}

/* ── Уведомление о cookie ────────────────────────────────────────────────── */
/* Прилепленная строка внизу окна. Узкая и НЕ перекрывает контент модально:   */
/* на посадочных из поиска блокирующий оверлей бьёт по поведенческим, ради    */
/* которых эти страницы и делаются.                                          */

/* Уведомление о cookie стоит В ПОТОКЕ, СРАЗУ ПОД подвалом, а не фиксировано
   у нижней кромки экрана (вычитка 17.08.2026, §9): фиксированная полоса
   перекрывала подвал, и реквизиты было не прочитать.
   🔴 Отсюда же второе требование владельца — «после закрытия не должно
   оставаться пустого пространства»: оно выполняется САМО, потому что
   [hidden] + display:none убирает блок из потока. Вернёшь position:fixed —
   вернёшь и перекрытие подвала. */
.cookie-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: rgba(44, 62, 80, 0.97);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
}

.cookie-notice[hidden] {
    display: none; /* [hidden] иначе проигрывает display:flex выше */
}

.cookie-notice p {
    margin: 0;
    max-width: 900px;
}

.cookie-notice a {
    color: #fff;
    text-decoration: underline;
}

.cookie-notice-btn {
    flex: 0 0 auto;
    background: #fff;
    color: #2c3e50;
    border: 0;
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cookie-notice-btn:hover {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .cookie-notice {
        gap: 10px;
        padding: 12px 16px;
        font-size: 13px;
    }

    .cookie-notice-btn {
        width: 100%;
    }
}

/* ── Знак в шапке и видеоинструкция ──────────────────────────────────────── */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.logo img {
    display: block;
    flex: 0 0 auto;
}

.video-instr {
    display: block;
    width: 100%;
    max-width: 420px;   /* ролик вертикальный: во всю ширину он бы занял экран */
    height: auto;
    margin: 22px auto 0;
    border-radius: 12px;
    background: #000;
}

/* Ссылки на профили с отзывами в подвале */

.footer-profiles {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 15px;
}

/* Иконка площадки — буквенный знак в кружке (§9). Текстом, а не картинкой:
   ни одного обращения к чужому домену и нечего кешировать. */
.profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s;
}

.profile-icon:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Название площадки для скринридера: ряд кружков без него нечитаем.
   clip-path вместо display:none — скрытое display:none не озвучивается. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.footer-offer {
    margin-top: 10px;
}

/* Быстрый старт рядом с видеоинструкцией.
   Две колонки на десктопе, одна на мобильном. Видео теряет верхний margin:
   в ряду его задаёт gap, иначе колонки разъезжаются по вертикали. */

.video-row {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 22px;
}

.video-row .video-instr {
    margin: 0;
    max-width: 100%;
    display: block;
}

/* Колонка с видео: ролик + ссылка на руководство ПОД ним (§1) — раньше под
   видео была пустота, а вся текстовая «колбаса» уезжала во вторую колонку. */
.video-col {
    min-width: 0;
}

.video-col .qs-manual {
    margin: 14px 0 0;
}

/* Блок «Какой осушитель привозим»: фото слева, характеристики справа. */
.device-row {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 18px;
}

.device-row .photo-row {
    margin: 0;
}

.device-specs > p {
    margin-top: 0;
}

.device-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    margin: 16px 0 0;
}

.device-list dt {
    font-weight: 600;
    color: #2c3e50;
}

.device-list dd {
    margin: 0;
}

@media (max-width: 768px) {
    .device-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .device-list {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .device-list dd {
        margin-bottom: 10px;
    }
}

/* Плашка тарифа над формой — две строки вместо сетки из карточек (§1). */
.price-line {
    margin: 0;
    text-align: center;
    font-size: 1.05em;
}

.quickstart h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.quickstart h3 + p,
.quickstart ol + h3 {
    margin-top: 0;
}

.quickstart > * + h3 {
    margin-top: 22px;
}

.qs-steps {
    margin: 0;
    padding-left: 22px;
}

.qs-steps li {
    margin-bottom: 7px;
}

.qs-warn {
    border-left: 3px solid #d9822b;
    padding-left: 14px;
}

.qs-manual {
    margin-top: 20px;
}

@media (max-width: 800px) {
    .video-row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .video-row .video-instr {
        max-width: 420px;
        margin: 0 auto;
    }
}

/* Подпись разработчика в подвале — тише реквизитов, но кликабельна */

.footer-dev {
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.75;
}

.footer-dev a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ⚠️ Цвет ОБЯЗАТЕЛЕН: без него ссылка берёт браузерный синий и на тёмном
   подвале почти не читается. Поймано только визуальной проверкой —
   ни tidy, ни разметка такого не видят. */

.footer-dev a {
    color: inherit;
}

/* ── Схема районов (S5a) ──────────────────────────────────────────────────── */
/* Своя SVG вместо картографического API: ноль обращений к третьей стороне,    */
/* ноль лимитов и, в отличие от картинки, район кликабелен, а его название     */
/* лежит в разметке. Геометрия — в local/php_interface/geo-data.php.           */

.geomap {
    margin: 28px 0 10px;
}

.geomap-svg {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

.geomap-shape {
    fill: #e8eef3;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill 0.15s;
}

/* Район, в котором уже были работы. Цвет, а не значок: значок на мелком
   районе не виден, а заливка читается при любом размере. */
.geomap-shape.has-cases {
    fill: #cfe3d2;
}

.geomap-shapes a:hover .geomap-shape,
.geomap-shapes a:focus .geomap-shape,
.geomap-shape.is-active {
    fill: #7fb3d5;
}

/* Обводка только для клавиатуры: рамка вокруг всей фигуры при клике мышью
   выглядит как дефект, а без неё табом невозможно понять, где ты. */
.geomap-shapes a:focus-visible .geomap-shape {
    stroke: #2c3e50;
    stroke-width: 2.5;
}

.geomap-city {
    fill: #d8e4ee;
    stroke: #fff;
    stroke-width: 1.4;
}

/* Ладога и Онега поверх районов — иначе административные лучи, которыми
   поделена вода, читаются как дефект отрисовки. */
.geomap-water {
    fill: #dce9f2;
}

.geomap-kad {
    fill: none;
    stroke: #b0413e;
    stroke-width: 2.2;
    stroke-dasharray: 6 4;
}

/* 🔴 Всё, что нарисовано ПОВЕРХ районов, курсор не ловит — иначе оно съедает
   клик по району под собой, а район остаётся невыбранным. Оба случая пойманы
   живым кликом в браузере, скриптовая приёмка их не видит (в разметке всё на
   месте): подпись района — самая естественная цель клика, а пунктир КАД идёт
   через весь город и перехватывал клик на всей своей длине. */
.geomap-labels,
.geomap-pins text,
.geomap-kad,
.geomap-water,
.geomap-city {
    pointer-events: none;
}

.geomap-labels text {
    font-family: inherit;
    font-weight: 600;
    fill: #33475b;
    text-anchor: middle;
    /* Белая подложка под буквами: без неё подпись теряется на границе районов. */
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3;
    stroke-linejoin: round;
}

.geomap-labels .geomap-city-label {
    font-size: 15px;
    fill: #1b3a57;
}

.geomap-pins circle {
    fill: #b0413e;
    stroke: #fff;
    stroke-width: 2;
}

.geomap-pins text {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    fill: #b0413e;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
}

.geomap-legend {
    max-width: 900px;
    margin: 6px auto 0;
    font-size: 14px;
    color: #667;
}

/* Плашка рисуется псевдоэлементом, а не пустым <span>: пустой элемент
   ради цвета — и разметочный мусор, и предупреждение tidy на каждой странице. */
.geomap-key::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border-radius: 3px;
    vertical-align: -2px;
}

.geomap-key-cases::before {
    background: #cfe3d2;
}

.geomap-key-city::before {
    background: #d8e4ee;
}

.geomap-key-pin::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b0413e;
}

.geomap-key-kad::before {
    height: 0;
    width: 18px;
    border-top: 3px dashed #b0413e;
    border-radius: 0;
    vertical-align: 3px;
}

/* Карточка района: её наполняет geomap.js ИЗ СТРОКИ ТАБЛИЦЫ — своих данных
   у неё нет и быть не должно, иначе карта и таблица разъедутся. */
.geomap-panel {
    max-width: 900px;
    margin: 14px auto 0;
    padding: 16px 20px;
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 0 8px 8px 0;
}

.geomap-panel h3 {
    font-size: 1.15em;
    color: #2c3e50;
    margin: 0 0 8px;
}

.geomap-panel dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0;
}

.geomap-panel dt {
    color: #667;
}

.geomap-panel dd {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
}

/* Строка района в таблице: подсвечивается и при переходе по якорю (без JS),
   и при выборе района на схеме. */
.geo-table tbody tr:target,
.geo-table tbody tr.is-active {
    background: #eaf4fb;
}

.geo-table th[scope="row"] {
    font-weight: 600;
    color: #2c3e50;
}

.geo-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 6px;
    color: #667;
    font-size: 14px;
}

.geo-sub {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #7a8794;
}

.geo-mark {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #cfe3d2;
    color: #24603a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* На телефоне подпись района ужимается до 5 пикселей — читать нечего,
       а грязь на схеме остаётся. Название района всё равно есть в таблице
       под картой и во всплывающей подсказке. */
    .geomap-labels {
        display: none;
    }

    /* Кегль подписи пункта на узком экране подобран ЗАМЕРОМ, а не на глаз:
       при 22px самая длинная подпись выходила за правый край viewBox (1000
       единиц) и теряла последнюю букву. Замер повторять при смене состава
       точек — длина подписи считается от самой длинной из них. */
    .geomap-pins text {
        font-size: 19px;
    }

    .geomap-panel dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .geomap-panel dd {
        margin-bottom: 8px;
    }
}

.geomap-panel-sub {
    margin: -4px 0 10px;
    color: #667;
    font-size: 14px;
}

/* End */
/* /local/templates/dryrent/assets/style.css?178696751832735 */