/* ==========================================================
   Telegram Mini App — Каталог квартир
   Дизайн-токены проекта (docs/DESIGN_SYSTEM.md) с приоритетом
   переменных темы Telegram (--tg-theme-*), если они доступны.
   ========================================================== */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --accent-indigo: #6366f1;
    --accent-cyan: #06b6d4;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;

    /* Светлая тема — дефолт (fallback, если Telegram не отдал themeParams) */
    --bg-base: var(--tg-theme-bg-color, #f8fafc);
    --bg-mid: var(--tg-theme-secondary-bg-color, #f1f5f9);
    --card-bg: var(--tg-theme-section-bg-color, #ffffff);
    --card-border: rgba(0, 0, 0, 0.08);
    --text-main: var(--tg-theme-text-color, #0f172a);
    --text-body: var(--tg-theme-text-color, #334155);
    --text-muted: var(--tg-theme-hint-color, #64748b);
    --link-color: var(--tg-theme-link-color, var(--accent-indigo));
    --btn-bg: var(--tg-theme-button-color, var(--accent-indigo));
    --btn-text: var(--tg-theme-button-text-color, #ffffff);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
    --track-bg: rgba(0, 0, 0, 0.10);
}

/* Тёмная тема мессенджера: класс ставит JS по Telegram.WebApp.colorScheme,
   media-query — страховка при открытии страницы вне Telegram. */
html.tg-dark {
    --bg-base: var(--tg-theme-bg-color, #050811);
    --bg-mid: var(--tg-theme-secondary-bg-color, #0b1120);
    --card-bg: var(--tg-theme-section-bg-color, #10172a);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-main: var(--tg-theme-text-color, #fafafa);
    --text-body: var(--tg-theme-text-color, #cbd5e1);
    --text-muted: var(--tg-theme-hint-color, #808ea3);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --track-bg: rgba(255, 255, 255, 0.14);
}

@media (prefers-color-scheme: dark) {
    html:not(.tg-light) {
        --bg-base: var(--tg-theme-bg-color, #050811);
        --bg-mid: var(--tg-theme-secondary-bg-color, #0b1120);
        --card-bg: var(--tg-theme-section-bg-color, #10172a);
        --card-border: rgba(255, 255, 255, 0.08);
        --text-main: var(--tg-theme-text-color, #fafafa);
        --text-body: var(--tg-theme-text-color, #cbd5e1);
        --text-muted: var(--tg-theme-hint-color, #808ea3);
        --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
        --track-bg: rgba(255, 255, 255, 0.14);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* Нижний отступ держит запас под фиксированную панель отправки вместе со
       статусной строкой — иначе последняя карточка уезжает под панель. */
    padding: 12px 12px 124px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    background: var(--bg-base);
    color: var(--text-body);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { color: var(--text-main); margin: 0; }

.page-title { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }

.panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 14px;
    margin-bottom: 14px;
}

.panel-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Отбивка блока внутри панели: было инлайновым style="margin-top:…" в разметке,
   вынесено сюда вместе с темой, чтобы правки отступов не требовали правки HTML. */
.panel-field { margin-top: 10px; }
.panel-field.is-gap-md { margin-top: 12px; }
.panel-field.is-gap-lg { margin-top: 14px; }

/* --- Фильтры по комнатности --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    appearance: none;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip.is-active {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 600;
}

/* --- Ползунки --- */
.slider-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.slider-label { font-size: 13px; color: var(--text-muted); }
.slider-value { font-size: 14px; font-weight: 700; color: var(--text-main); }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--track-bg);
    outline: none;
    margin: 8px 0 2px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--btn-bg);
    border: 2px solid var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    background: var(--btn-bg);
    cursor: pointer;
}

select {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--bg-mid);
    color: var(--text-main);
}

/* --- Карточки квартир --- */
.cards { display: flex; flex-direction: column; gap: 12px; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.card.is-selected { border-color: var(--accent-indigo); }

.card-plan {
    width: 100%;
    max-width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    background: var(--bg-mid);
}
.card-plan-empty {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--bg-mid);
}

.card-body { padding: 12px 14px 14px; }
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.card-title { font-size: 16px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.card-price { font-size: 17px; font-weight: 800; color: var(--accent-emerald); white-space: nowrap; }
.card-permeter { font-size: 11px; color: var(--text-muted); text-align: right; }

/* Акция застройщика: цена по акции и условие одной строкой под прайсом.
   Отдельной строкой, а не вместо цены, — прайс остаётся первым и главным
   (смета и КП считаются от него), а скидка условная. */
.card-discount {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-amber);
}

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--bg-mid);
    color: var(--text-muted);
}
.badge-finish { color: var(--accent-amber); }
.badge-payment { color: var(--accent-indigo); }
.badge-status-available { color: var(--accent-emerald); }
.badge-status-reserved { color: var(--accent-amber); }
.badge-status-sold { color: var(--accent-rose); }

.card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
}

.card-actions { display: flex; gap: 8px; margin-top: 12px; }

.btn {
    flex: 1;
    appearance: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    background: var(--bg-mid);
    color: var(--text-main);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-tour { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.btn-tour[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn-select { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.btn-select.is-on { background: var(--accent-emerald); border-color: var(--accent-emerald); color: #062a1e; }

/* --- Калькулятор --- */
.calc-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-mid);
}
.calc-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 3px 0;
}
.calc-line span:last-child { font-weight: 600; color: var(--text-main); }
.calc-line.is-primary { font-size: 16px; padding-top: 8px; }
.calc-line.is-primary span:last-child { color: var(--accent-emerald); font-weight: 800; }
.calc-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* --- Нижняя панель отправки --- */
.sendbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-base);
    border-top: 1px solid var(--card-border);
}
.sendbar .btn { width: 100%; }
.sendbar .btn[disabled] { opacity: 0.5; }
/* Во время отправки кнопка заблокирована, но остаётся читаемой: полупрозрачный
   «выключенный» вид сбивал бы с толку, пока идёт запрос. */
.sendbar .btn.is-sending[disabled] { opacity: 0.85; cursor: progress; }

/* Статусная строка отправки: единственное место, где пользователь видит причину
   отказа. Пустая строка скрыта атрибутом hidden и не занимает высоту. */
.sendbar-status {
    margin: 8px 2px 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: center;
}
.sendbar-status[hidden] { display: none; }
.sendbar-status.is-error { color: var(--accent-rose); }
.sendbar-status.is-success { color: var(--accent-emerald); }

/* Спиннер внутри кнопки на время запроса. */
.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-pill);
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.state {
    text-align: center;
    padding: 28px 12px;
    color: var(--text-muted);
    font-size: 14px;
}
.state-error { color: var(--accent-rose); }

@media (max-width: 480px) {
    body { padding: 10px 10px 124px; }
    .card-plan { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-spinner { animation-duration: 0.01ms; }
}