/*
 * Страница отчёта по участку.
 * Подключается поверх index.css — оттуда берутся токены дизайн-системы,
 * .shell, .button, шапка, подвал и cookie-баннер.
 */

.page {
    padding: 48px 0 88px;
}

/* Ширина совпадает с .shell из index.css — контент в одной сетке с шапкой */
.container {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
}

.page-header {
    margin-bottom: 32px;
}

.page-subtitle {
    margin-bottom: 10px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    word-break: break-word;
}

.result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

/* Колонки сетки и карточки внутри не должны распираться содержимым:
   ни картой Leaflet, ни длинной строкой. min-width: auto по умолчанию
   как раз это и позволял, из-за чего страница уезжала вбок. */
.result-grid > * {
    min-width: 0;
}

.result-wrapper {
    position: relative;
}

.result-wrapper.is-guest .result-grid {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}

.guest-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
}

.guest-overlay__box {
    width: min(420px, 100%);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-overlay);
}

.guest-overlay__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.guest-overlay__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
}

.guest-overlay__text {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.6;
    margin: 0 0 20px;
}

.guest-overlay__btns {
    display: flex;
    gap: 10px;
}

.guest-btn {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
}

.guest-btn-primary {
    background: var(--deep-green);
    color: var(--surface-elevated);
}

.guest-btn-primary:hover {
    background: #1c4a2e;
}

.guest-btn-secondary {
    background: var(--surface-sunken);
    color: var(--ink);
    border: 1px solid var(--hairline);
}

.guest-btn-secondary:hover {
    background: var(--hairline);
}

.map-placeholder-blurred {
    height: 280px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    font-weight: 600;
}

.panel {
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    padding: 0 24px 24px;
    min-width: 0;
}

.section-title {
    margin-top: 24px;
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.info-list {
    display: grid;
    gap: 14px;
}

.info-item {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 14px;
}

.info-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}

.info-value {
    line-height: 1.5;
    font-size: 15px;
    /* Адреса и кадастровые номера — длинные строки без пробелов.
       Без переноса они вылезали за карточку на узком экране. */
    overflow-wrap: anywhere;
}

.copy-value {
    cursor: pointer;
}

.copy-value:hover {
    color: var(--accent-strong);
}

.copy-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-muted);
}

.address-link {
    color: inherit;
    text-decoration: underline;

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.address-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.restriction-block {
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--hairline);
    margin-bottom: 12px;

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.restriction-block:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(17, 23, 19, 0.06);
}

.restriction-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;
}

.restriction-title {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.restriction-percent {
    flex-shrink: 0;

    padding: 6px 10px;

    border-radius: 999px;

    background: var(--accent-soft);

    color: var(--accent-strong);

    font-size: 13px;
    font-weight: 700;
}

.restriction-desc {
    color: var(--ink-muted);
    line-height: 1.55;
    font-size: 14px;
}

.price-title {
    margin-top: 10px;
    margin-bottom: 6px;
    font-weight: 700;
}

.map-panel {
    grid-column: 1 / -1;
}

.map-shell {
    position: relative;
    margin-top: 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
    /*
     * Не декорация, а фикс наложения. У .site-header z-index 1000 и
     * position: sticky, у контролов Leaflet внутри карты — тоже 1000.
     * Сам контейнер карты стекового контекста не создавал, поэтому
     * контролы всплывали в корневой контекст на тот же уровень, что и
     * шапка, и при равном z-index побеждали как более поздние в DOM:
     * переключатель подложек проезжал поверх шапки при скролле.
     * z-index: 0 запирает всю внутреннюю кухню карты в свой контекст.
     */
    z-index: 0;
}

.map-canvas {
    width: 100%;
    height: 480px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
}

.map-shell-fullscreen {
    position: fixed;
    inset: 0;
    /* Выше шапки (1000): развёрнутая карта перекрывает и её тоже */
    z-index: 2000;
    margin-top: 0;
    border-radius: 0;
}

.map-shell-fullscreen .map-canvas {
    height: 100%;
    border-radius: 0;
}

body.map-fullscreen-open {
    overflow: hidden;
}

.map-fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.map-fullscreen-btn:hover {
    background: var(--surface-elevated);
}

/* Панель переключения подложек Leaflet */
.map-shell .leaflet-control-layers {
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    font-weight: 600;
}

.leaflet-attribution-flag {
    display: none !important;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--surface-elevated);
    padding: 12px 16px;
    border-radius: 999px;
    display: none;
}

.error-page {
    text-align: center;
    padding: 100px 20px;
    font-size: 22px;
}

.bottom-action {
    grid-column: 1 / -1;

    margin-top: 28px;

    display: flex;
    justify-content: center;
}

.retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.retry-btn:hover {
    background: var(--accent-strong);
    color: var(--surface-elevated);
    transform: translateY(-1px);
}

.retry-btn:active {
    transform: translateY(0);
}

.retry-btn::before {
    content: "↺";
    font-size: 17px;
}

@media (max-width: 960px) {
    .result-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .map-panel {
        grid-column: auto;
    }

    /* Горизонтальные отступы даёт только .container — раньше их добавлял
       ещё и .page, и на телефоне отступы складывались: 16px от .page плюс
       32px от .container с каждой стороны. Контент сжимался до 264px на
       экране 360px, то есть страница участка была заметно уже остального
       сайта. Ширина .container ниже повторяет .shell из index.css. */
    .page {
        padding: 16px 0 56px;
    }

    .container {
        width: min(100% - 40px, 100%);
    }
}

@media (max-width: 860px) {
    .map-canvas {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .bottom-action {
        margin-top: 22px;
    }
    

    .retry-btn {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
        border-radius: var(--radius-md);
        padding: 0 20px;
    }

}

@media (max-width: 480px) {
    /* Совпадает с .shell на этой же ширине — сайт держит одну сетку */
    .container {
        width: min(100% - 28px, 100%);
    }

    .guest-overlay__box {
        padding: 24px 20px;
    }

    /* Была фиксированная height: 100px под две кнопки по 44px.
       Стоило тексту перенестись в две строки — кнопки вылезали за блок. */
    .guest-overlay__btns {
        flex-direction: column;
        height: auto;
    }
}

/* ======================== REPORT CTA PANEL ======================== */

.report-cta-panel {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--accent-soft);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-md);
    padding: 24px 28px;
}

.report-cta-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-cta-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

.report-cta-desc {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 520px;
}

.report-cta-btn {
    flex-shrink: 0;
    height: 52px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--deep-green);
    color: var(--surface-elevated);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease;
    white-space: nowrap;
}

.report-cta-btn:hover {
    background: #1c4a2e;
    transform: translateY(-1px);
}

.report-cta-btn:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .report-cta-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .report-cta-btn {
        width: 100%;
    }
}

/* ======================== EXTENDED REPORT ======================== */

.extended-report {
    grid-column: 1 / -1;
    scroll-margin-top: 80px;
}

/* Sticky loading banner */
.ext-loading-banner {
    position: fixed;
    top: 82px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    background: var(--ink);
    color: var(--surface-elevated);
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
    white-space: nowrap;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.ext-loading-banner--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ext-loading-banner--done {
    background: var(--accent-strong);
}

/* Skeleton loader */
.ext-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ext-sk-block {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--hairline) 50%, var(--surface-sunken) 75%);
    background-size: 400% 100%;
    animation: ext-shimmer 1.4s ease infinite;
}

.ext-sk-block--tall   { height: 280px; }
.ext-sk-block--medium { height: 220px; }
.ext-sk-block--short  { height: 120px; }

@keyframes ext-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Content panels */
.ext-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ext-panel {
    background: var(--surface-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 24px 24px 20px;
    /* Иначе панель раздувается под ширину таблицы сделок, и её
       собственный горизонтальный скролл никогда не включается */
    min-width: 0;
    overflow: hidden;
}

.ext-panel-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 18px;
}

.ext-panel-hint {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
}

/*
 * Карты отчёта — интерактивный Leaflet, блоками одна под другой.
 *
 * min-width: 0 ниже принципиально. У элемента grid и flex по умолчанию
 * min-width: auto — он не может стать уже собственного содержимого,
 * и широкий контент внутри распирал колонку, утаскивая за собой всю
 * страницу: на телефоне отчёт скроллился вбок.
 */
.ext-maps {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.ext-map-block {
    min-width: 0;
}

.ext-map-head {
    margin-bottom: 10px;
}

.ext-map-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.ext-map-hint {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

.ext-map-shell {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--hairline);
    min-width: 0;
    /* Тот же запор стекового контекста, что и у .map-shell выше */
    z-index: 0;
}

.ext-map-canvas {
    width: 100%;
    height: 420px;
    background: var(--accent-soft);
}

.ext-map-shell.map-shell-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    border: none;
    border-radius: 0;
}

.ext-map-shell.map-shell-fullscreen .ext-map-canvas {
    height: 100%;
}

/* Выше подсказки-заглушки, иначе её не развернуть с телефона */
.ext-map-shell .map-fullscreen-btn {
    z-index: 700;
}

.ext-map-shell .leaflet-control-layers {
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    font-weight: 600;
}

/* Подсказка поверх карты на тач-экранах: пока она есть, свайп
   пролистывает страницу, а не двигает карту */
.ext-map-veil {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    background: rgba(15, 23, 42, 0.32);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

/* display:flex выше сильнее атрибута hidden — гасим явно */
.ext-map-veil[hidden] {
    display: none;
}

/* Подсказка по клику на зону */
.ext-popup {
    min-width: 0;
}

.ext-popup-kind {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.ext-popup-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    /* break-word, а не anywhere: рвём слово только если оно само
       не влезает, иначе строки рубятся по живому */
    overflow-wrap: break-word;
}

.ext-popup-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-muted);
}

.ext-popup-note {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: break-word;
}

/*
 * Ширину .leaflet-popup-content Leaflet считает сам и проставляет
 * инлайном — перебивать её на auto нельзя: блок схлопывается по
 * min-content, и длинное название ЗОУИТ рассыпается в столбик по
 * слову в строке. Задаём только отступы и шрифт.
 */
.ext-map-shell .leaflet-popup-content {
    margin: 12px 14px;
    font-family: inherit;
}

.ext-map-shell .leaflet-popup-content-wrapper {
    border-radius: var(--radius-sm);
}

/* Deals section */
.ext-deals-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.ext-deals-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--ink-muted);
}

.ext-download-btn {
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

/* На тач-экранах кнопка 38px мала для пальца — доводим до 44px.
   На мышке оставляем компактной. */
@media (hover: none) {
    .ext-download-btn {
        height: 44px;
    }
}

.ext-download-btn:hover {
    background: #d3f5e8;
    transform: translateY(-1px);
}

.ext-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
}

.ext-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 480px;
}

.ext-table thead th {
    background: var(--surface);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}

.ext-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-muted);
    white-space: nowrap;
}

.ext-table tbody tr:last-child td {
    border-bottom: none;
}

.ext-table tbody tr:hover td {
    background: var(--surface);
}

.ext-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Prices grid */
.ext-prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 14px;
    align-items: start;
}

.ext-price-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ext-price-group-header {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--hairline);
    margin-top: 4px;
}

.ext-price-group-header:first-child {
    margin-top: 0;
}

.ext-price-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 20px 18px 18px;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ext-price-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 23, 19, 0.08);
}

.ext-price-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}

.ext-price-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
}

.ext-price-currency {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
}

.ext-price-sub {
    font-size: 11px;
    color: var(--ink-subtle);
    margin-top: 6px;
}

/* Utility */
.ext-empty {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0;
}

.ext-error {
    padding: 18px 20px;
    background: var(--danger-soft);
    border: 1px solid rgba(200, 77, 60, 0.28);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 14px;
}

/* Ссылка на тарифы в сообщении «нужен оплаченный отчёт» */
.ext-error-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--danger);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .ext-map-canvas {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .ext-maps {
        gap: 22px;
    }
    .ext-map-canvas {
        /* Не выше половины экрана: карта во весь экран телефона
           выглядит как отдельная страница и ломает чтение отчёта */
        height: min(52vh, 320px);
    }
    .ext-map-label {
        font-size: 14px;
    }
    .ext-map-hint {
        font-size: 12px;
    }
    /* Элементы управления Leaflet мельче тапа — увеличиваем */
    .ext-map-shell .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
        background-size: 22px 22px;
    }
    .ext-map-shell .leaflet-touch .leaflet-bar a {
        width: 36px;
        line-height: 36px;
    }
    .ext-prices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ext-panel {
        padding: 18px 16px;
    }
    .ext-deals-header {
        flex-direction: column;
        gap: 12px;
    }
    .ext-download-btn {
        width: 100%;
    }
}