/* Модалка выбора карты — стиль Бэнкси (стенси, чёрно-белый, красная печать) */
.skmap-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.72);
    z-index: 99998; display: none; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(2px);
}
.skmap-backdrop.open { display: flex; animation: skmapFadeIn .18s ease-out; }
@keyframes skmapFadeIn { from { opacity: 0; } to { opacity: 1; } }

.skmap-modal {
    position: relative;
    background: #f4f1e8; /* грубый бумажно-цементный тон */
    background-image:
        repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px);
    color: #111; max-width: 440px; width: 100%; padding: 28px 26px 22px;
    box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 0 4px #111 inset;
    border: 3px solid #111;
    transform: rotate(-.6deg);
    animation: skmapSlideIn .22s cubic-bezier(.2,.9,.3,1.2);
    font-family: 'Impact', 'Oswald', 'Arial Black', system-ui, sans-serif;
}
@keyframes skmapSlideIn {
    from { transform: rotate(-3deg) translateY(20px); opacity: 0; }
    to { transform: rotate(-.6deg) translateY(0); opacity: 1; }
}

/* Наклонная лента-заголовок как трафарет */
.skmap-modal::before {
    content: 'STENCIL';
    position: absolute; top: -14px; left: -8px;
    background: #111; color: #f4f1e8; padding: 4px 14px 3px;
    font-size: 11px; letter-spacing: 4px; font-weight: 900;
    transform: rotate(-4deg);
    box-shadow: 2px 2px 0 #d21f1f;
}
/* Красная "печать" в углу */
.skmap-modal::after {
    content: 'OPEN\A MAP';
    white-space: pre;
    position: absolute; top: 14px; right: 14px;
    width: 68px; height: 68px; border: 3px solid #d21f1f;
    color: #d21f1f; font-size: 13px; line-height: 1.05; text-align: center;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transform: rotate(12deg);
    font-weight: 900; letter-spacing: 1px;
    opacity: .85;
}

.skmap-title {
    font-size: 26px; line-height: 1; margin: 0 0 6px;
    text-transform: uppercase; letter-spacing: 1px;
    color: #111; font-weight: 900;
    padding-right: 78px;
}
.skmap-title .accent {
    background: #111; color: #f4f1e8; padding: 0 6px; display: inline-block;
    transform: rotate(-1deg); margin: 0 2px;
}
.skmap-sub {
    font-family: 'Courier New', monospace;
    font-size: 13px; color: #444; margin: 0 0 18px;
    letter-spacing: .5px; padding-right: 78px;
    border-left: 3px solid #111; padding-left: 10px;
}

.skmap-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.skmap-btn {
    display: flex; align-items: center; gap: 12px;
    background: #111; color: #f4f1e8;
    padding: 14px 16px; border: 0;
    font-family: inherit; font-size: 18px; letter-spacing: 1.5px;
    text-transform: uppercase; text-decoration: none;
    cursor: pointer; position: relative;
    box-shadow: 4px 4px 0 #d21f1f;
    transition: transform .1s ease, box-shadow .1s ease;
}
.skmap-btn:hover, .skmap-btn:focus {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #d21f1f;
    color: #f4f1e8;
}
.skmap-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #d21f1f; }
.skmap-btn .ico {
    width: 26px; height: 26px; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
}
.skmap-btn .ico svg { width: 100%; height: 100%; }
.skmap-btn.yandex { background: #111; }
.skmap-btn.yandex .ico { color: #ffcc00; }
.skmap-btn.google  { background: #111; }
.skmap-btn.google .ico { color: #4285f4; }
.skmap-btn.phone     { background: #111; }
.skmap-btn.phone .ico    { color: #6fbf1a; }
.skmap-btn.maxru     { background: #111; }
.skmap-btn.maxru .ico    { color: #ff9800; }
.skmap-btn.share   { background: #d21f1f; box-shadow: 4px 4px 0 #111; }
.skmap-btn.share:hover, .skmap-btn.share:focus { box-shadow: 6px 6px 0 #111; }
.skmap-btn.share:active { box-shadow: 2px 2px 0 #111; }
.skmap-btn.share .ico { color: #f4f1e8; }

/* Toast — короткое уведомление после копирования */
.skmap-toast {
    position: fixed; left: 50%; bottom: 40px;
    transform: translate(-50%, 20px);
    background: #111; color: #f4f1e8;
    padding: 10px 18px; border: 2px solid #d21f1f;
    box-shadow: 3px 3px 0 #d21f1f;
    font-family: 'Impact', 'Oswald', 'Arial Black', system-ui, sans-serif;
    font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
    z-index: 99999; opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.skmap-toast.show { opacity: 1; transform: translate(-50%, 0); }

.skmap-close {
    position: absolute; bottom: -18px; right: -12px;
    background: #d21f1f; color: #fff; border: 3px solid #111;
    width: 46px; height: 46px; border-radius: 50%;
    font-size: 22px; font-weight: 900; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(8deg);
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
    line-height: 1; padding: 0;
}
.skmap-close:hover { transform: rotate(8deg) scale(1.08); }

/* Печать askprice — другой текст */
.askprice-modal::before { content: 'PRICE?'; }
.askprice-modal::after { content: 'ASK\A MGR'; }

/* Блок с готовым сообщением для менеджера */
.skmap-msgbox {
    margin: 4px 0 14px;
    padding: 10px 12px;
    background: #fff;
    border: 2px dashed #111;
    position: relative;
    transform: rotate(.2deg);
}
.skmap-msg-label {
    font-family: 'Courier New', monospace;
    font-size: 10px; color: #666; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 4px;
}
.skmap-msg-text {
    font-family: 'Courier New', monospace;
    font-size: 13px; color: #111; line-height: 1.35;
    word-break: break-word;
}
.skmap-copy {
    display: inline-block; margin-top: 8px;
    background: #f4f1e8; color: #111;
    border: 2px solid #111;
    padding: 4px 12px;
    font-family: 'Impact', 'Oswald', 'Arial Black', sans-serif;
    font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 2px 2px 0 #d21f1f;
    transition: transform .1s, box-shadow .1s;
}
.skmap-copy:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #d21f1f; }
.skmap-copy:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #d21f1f; }

/* Крыса в углу — маленький силуэт, добавляет узнаваемости */
.skmap-rat {
    position: absolute; bottom: 10px; left: 14px;
    width: 42px; height: 24px; opacity: .55;
    pointer-events: none;
}
.skmap-rat svg { width: 100%; height: 100%; }

@media (max-width: 480px) {
    .skmap-modal { padding: 22px 18px 20px; }
    .skmap-title { font-size: 22px; padding-right: 68px; }
    .skmap-sub { padding-right: 68px; }
    .skmap-modal::after { width: 58px; height: 58px; font-size: 11px; }
    .skmap-btn { font-size: 16px; padding: 12px 14px; }
}