/* ===== База страницы SOS ===== */
body {
    background: linear-gradient(135deg, #fff, #f7f7f7);
    color: #111;
}

/* Растягиваем основной контейнер на всю ширину */
main.container {
    max-width: none;
    width: 100%;
    padding: 20px 12px;
    margin: 0 auto;
}

/* Баннер про геолокацию */
.geo-banner {
    background: #fff;
    color: #111;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
}

/* ===== Карточка SOS ===== */
.sos-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    max-width: 720px;
    margin: 16px auto;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
}

.sos-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -4px 0 12px;
}

.sos-menu {
    display: none;
}

.sos-grabber {
    height: 4px;
    width: 52px;
    border-radius: 10px;
    background: #ddd;
}

/* Небольшой отступ для версии с двумя полями */
.sos-two-inputs {
    padding-top: 8px;
}

/* ===== Поля — одна строка, элементы на одной высоте ===== */
:root {
    --control-h: 40px;
}

.input-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    /* иконка, инпут, ✕, Karte */
    gap: 6px;
    align-items: center;
    padding: 8px 2px;
}

.input-row.compact {
    padding: 6px 2px;
}

/* Единый бокс для иконок слева (точка/лупа) — строго 10×10, по центру строки */
.input-row .dot,
.input-row .icon-left {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Точка-метка */
.dot {
    border-radius: 50%;
}

.dot.origin {
    background: #ff9800;
}

.dot.dest {
    background: #0a84ff;
}

/* Лупа (если это emoji/иконка-символ) — подгоним размер под 10×10 */
.icon-left {
    font-size: 12px;
    line-height: 10px;
    opacity: .65;
}

/* Текстовые поля (высота как у кнопок) */
.sos-input {
    width: 100%;
    height: var(--control-h);
    line-height: var(--control-h);
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 16px;
    background: #fff;
    color: #111;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input-row input.sos-input {
    border-bottom: 1px solid #ddd;
}

/* лёгкий акцент */
.sos-input::placeholder {
    font-size: 0.9rem;
    color: #999;
}

.sos-input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, .20);
    background: #fff;
}

/* Кнопки в строке — одна высота с инпутом */
.icon-btn,
.link-btn {
    height: var(--control-h);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 2px 6px rgba(17, 17, 17, .04);
}

.icon-btn:hover,
.link-btn:hover {
    background: #f7f7f7;
    transform: translateY(-1px);
}

.link-btn {
    border-color: #ffd9a1;
}

.link-btn:hover {
    border-color: #ff9800;
}

/* Разделитель между полями */
.divider {
    height: 1px;
    background: #eee;
    margin: 10px 0 8px;
}

/* Подсказка под полями/адаптивность текста */
.hint {
    font-size: 0.85rem;
    line-height: 1.3;
    color: #666;
    margin-top: 8px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

/* ===== Кнопки действий ===== */
.btn {
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
}

.btn.primary {
    background: #ff9800;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 152, 0, .25);
}

.btn.primary:hover {
    background: #e68a00;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(230, 138, 0, .28);
}

.btn.primary:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn.secondary {
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
}

.btn.secondary:hover {
    background: #f7f7f7;
}

.btn.danger {
    background: #d32f2f;
    color: #fff;
    box-shadow: 0 6px 16px rgba(211, 47, 47, .25);
}

.btn.danger:hover {
    background: #b71c1c;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(183, 28, 28, .28);
}

.btn.wide {
    width: 100%;
}

.btn-submit {
    width: 100%;
}

.btn-submit-wrap {
    margin-top: 14px;
}

/* Кнопка «Назад» */
.btn-back {
    display: inline-block;
    background: #ff9800;
    color: #fff;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: .95em;
    box-shadow: 0 4px 12px rgba(255, 152, 0, .3);
    transition: background .2s, transform .1s, box-shadow .2s;
}

.btn-back:hover {
    background: #e68a00;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(230, 138, 0, .35);
}

/* ===== Модалка карты ===== */
.map-modal[hidden] {
    display: none;
}

.map-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .85);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    width: min(900px, 96vw);
    height: min(72vh, 780px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    padding-top: 6px;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 1000;
    transition: background .2s, transform .1s;
}

.modal-content .close:hover {
    background: #f7f7f7;
    transform: translateY(-1px);
}

#map {
    flex: 1;
    min-height: 320px;
}

.confirm-buttons {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, .95);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* ===== Мобильная адаптация ===== */
@media (max-width: 520px) {
    .sos-card {
        margin: 10px 8px;
        padding: 14px;
    }

    .input-row {
        grid-template-columns: 12px 1fr auto auto;
        gap: 6px;
    }

    .sos-input {
        font-size: 16px;
    }

    .icon-btn,
    .link-btn {
        padding: 0 10px;
    }
}

/* Placeholder чуть меньше на совсем узких экранах */
@media (max-width: 480px) {
    .sos-input::placeholder {
        font-size: 0.8rem;
    }
}

.sos-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 10px;
    border-radius: 18px;
    font-size: 0.9rem;
    margin: 16px auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    max-width: calc(720px - 20px);
    /* чуть уже карточки */
    width: calc(100% - 40px);
    /* по 20px отступа от краёв экрана */
    box-sizing: border-box;
}

.sos-warning p {
    margin: 0;
    line-height: 1.4;
}

.suggest-wrapper {
    position: relative
}

.suggest-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(17, 17, 17, .12);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 50;
    max-height: 56vh;
    overflow: auto;
    display: none;
}

.suggest-list.visible {
    display: block
}

.suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

.suggest-item:hover,
.suggest-item.active {
    background: #fff7e6
}

.s-ico {
    width: 18px;
    line-height: 18px;
    opacity: .6
}

.s-main {
    font-weight: 700
}

.s-sub {
    font-size: .85rem;
    color: #666
}

.s-dist {
    margin-left: auto;
    color: #999;
    font-size: .85rem;
    white-space: nowrap
}

.s-sep {
    height: 1px;
    background: #eee;
    margin: 6px 14px
}

@media (max-width:520px) {
    .suggest-list {
        border-radius: 12px
    }
}

/* Панель подтверждения — уже по ширине, выше атрибуции/контролов */
.confirm-panel {
    display: flex;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(17, 17, 17, .20);
    margin-bottom: 74px;
    /* выше атрибуции Google */
    max-width: min(520px, calc(100vw - 140px));
    /* не налезать на правые контролы */
}

.confirm-panel .btn {
    padding: 10px 14px;
    border-radius: 12px;
}

/* Плавающая круглая кнопка */
.map-fab {
    background: #fff;
    border: 1px solid #ddd;
    width: 54px;
    /* было 42px */
    height: 54px;
    /* было 42px */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 0;
    box-shadow: 0 8px 22px rgba(17, 17, 17, .18);
    /* чуть плотнее */
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
}

.map-fab:hover {
    transform: translateY(-1px);
    background: #f7f7f7;
}

.map-fab svg {
    display: block;
}

/* конкретно для GPS-кнопки: размер и наклон «самолётика» */
.map-fab--gps svg {
    width: 32px;
    height: 32px;
    transform: rotate(42deg);
    /* наклон как на скрине */
}