/* ============================================================
   Модернизированный раздел «Магазины» — /shops/ — alleyadoma.ru
   Дизайн-система 2026
   ============================================================ */

.shops {
    --shops-green:        #559723;
    --shops-green-dark:   #427E15;
    --shops-green-bg:     #E9F1E2;
    --shops-green-border: #BCD5A9;
    --shops-ink:          #191919;
    --shops-text:         #363636;
    --shops-muted:        #6E727A;
    --shops-border:       #E3E4E6;
    --shops-border-input: #9D9FA3;
    --shops-bg-soft:      #F0F1F4;
    --shops-yellow:       #F9DA36;
    --shops-card-bg:      #FFFFFF;
    --shops-radius-s:     8px;
    --shops-radius-m:     12px;
    --shops-radius-l:     16px;
    --shops-speed:        1;

    display: block;
    font-family: inherit;
    color: var(--shops-text);
    line-height: 1.35;
}

.shops [hidden] { display: none !important; }

.shops-wrap {
    max-width: 3840px;
    margin: 0;
    padding: 8px 0 64px;
}

.shops p { letter-spacing: normal; }

/* --- Поиск по магазинам и кнопка геолокации --- */
.shops-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.shops-search {
    position: relative;
    flex: 1 1 auto;
}

.shops-search-input {
    width: 100%;
    height: 56px;
    padding: 0 52px 0 50px;
    box-sizing: border-box;
    border: 1px solid var(--shops-border-input);
    border-radius: var(--shops-radius-m);
    background: var(--shops-card-bg);
    font: inherit;
    font-size: 16px;
    color: var(--shops-ink);
    transition: border-color calc(.2s * var(--shops-speed)), box-shadow calc(.2s * var(--shops-speed));
    -webkit-appearance: none;
    appearance: none;
}

/* Отключение системного дублирующего крестика Webkit/Chrome */
.shops-search-input::-webkit-search-cancel-button,
.shops-search-input::-webkit-search-decoration,
.shops-search-input::-webkit-search-results-button,
.shops-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

.shops-search-input::placeholder { color: #8C8E94; opacity: 1; }

.shops-search-input:focus {
    outline: none;
    border-color: var(--shops-green);
    box-shadow: 0 0 0 3px rgba(85, 151, 35, .15);
}

.shops-search-ico {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 17.5L13.8833 13.8833M15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z' stroke='%236E727A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.shops-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--shops-bg-soft) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L10 10M10 2L2 10' stroke='%23363636' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
    cursor: pointer;
    transition: background-color .2s;
}

.shops-search-clear:hover { background-color: var(--shops-border); }

/* Фирменная зеленая кнопка «Рядом со мной» */
.shops-geo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 0 24px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--shops-radius-m);
    background-color: var(--shops-green, #559723);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(85, 151, 35, 0.2);
    transition: background-color .2s, transform .15s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.shops-geo-btn:hover {
    background-color: var(--shops-green-dark, #427E15);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(66, 126, 21, 0.3);
}

.shops-geo-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.shops-geo-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: #FFFFFF;
    display: block;
    margin-top: -1px;
}

.shops-geo-btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
    background-color: var(--shops-green-dark, #427E15);
}

.shops-search-meta {
    min-height: 20px;
    margin: 10px 2px 0;
    font-size: 14px;
    color: var(--shops-muted);
}

/* Плашка найденного ближайшего салона */
.shops-geo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 18px;
    border-radius: var(--shops-radius-s);
    background: var(--shops-green-bg);
    border: 1px solid var(--shops-green-border);
    color: var(--shops-green-dark);
    font-size: 14px;
    font-weight: 600;
}

.shops-geo-banner a {
    color: var(--shops-green-dark);
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Чипсы категорий / регионов --- */
.shops-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 24px;
}

.shops-nav-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 120px;
    background-color: #ffffff;
    border: 1px solid #DFE0E5;
    color: #191919;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.shops-nav-chip:hover {
    border-color: var(--shops-green-bg);
    background-color: var(--shops-green-bg);
    color: var(--shops-green);
}

.shops-nav-chip.is-active,
.shops-nav-chip.is-active:hover {
    border-color: var(--shops-green-bg);
    background-color: var(--shops-green-bg);
    color: var(--shops-green);
    font-weight: 700;
}

.shops-nav-chip-count {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #797D83;
    opacity: 0.9;
}

.shops-nav-chip.is-active .shops-nav-chip-count {
    color: var(--shops-green);
    opacity: 1;
}

.shops-nav-chip.is-empty {
    opacity: .35;
    pointer-events: none;
}

/* --- Блок интерактивной карты --- */
.shops-map-wrapper {
    margin: 0 0 32px;
    border-radius: var(--shops-radius-l);
    overflow: hidden;
    border: 1px solid var(--shops-border);
    background: #eef0f2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.shops-map {
    width: 100%;
    height: 420px;
}

/* --- Секции и аккордеоны магазинов --- */
.shops-section {
    margin-top: 36px;
    scroll-margin-top: 96px;
}

.shops-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.shops-section-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--shops-ink);
}

.shops-toggle-all {
    flex: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--shops-green-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.shops-toggle-all:hover { color: var(--shops-green); }

.shops-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shops-item {
    border: 1px solid var(--shops-border);
    border-radius: var(--shops-radius-m);
    background: var(--shops-card-bg);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    scroll-margin-top: 96px;
}

.shops-item:hover {
    border-color: #C9CBCF;
}

.shops-item[open] {
    border-color: var(--shops-green-border);
    box-shadow: 0 4px 16px rgba(25, 25, 25, .06);
}

/* Анимация подсветки Flash при клике по метке на карте */
@keyframes shopsCardFlash {
    0% {
        background-color: #E9F1E2;
        border-color: #559723;
        box-shadow: 0 0 0 4px rgba(85, 151, 35, 0.35);
        transform: scale(1.01);
    }
    60% {
        background-color: #F4F8F0;
        border-color: #83BD57;
        box-shadow: 0 0 0 2px rgba(85, 151, 35, 0.15);
    }
    100% {
        background-color: #FFFFFF;
        border-color: var(--shops-green-border);
        box-shadow: 0 4px 16px rgba(25, 25, 25, .06);
        transform: scale(1);
    }
}

.shops-item.is-flashing {
    animation: shopsCardFlash 2.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.shops-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.shops-q::-webkit-details-marker,
.shops-q::marker { display: none; content: ''; }

.shops-q-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shops-q-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shops-q-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--shops-ink);
}

.shops-q-sub {
    font-size: 14px;
    color: var(--shops-muted);
}

/* Бейдж расстояния */
.shops-dist-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    background-color: #E0F2FE;
    color: #0369A1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Бейдж «Умный статус работы» */
.shops-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.shops-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shops-status--open {
    background-color: var(--shops-green-bg, #E9F1E2);
    color: var(--shops-green-dark, #427E15);
}
.shops-status--open .shops-status-dot {
    background-color: var(--shops-green, #559723);
    box-shadow: 0 0 0 2px rgba(85, 151, 35, 0.2);
}

.shops-status--warning {
    background-color: #FEF3C7;
    color: #92400E;
}
.shops-status--warning .shops-status-dot {
    background-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.shops-status--closed {
    background-color: var(--shops-bg-soft, #F0F1F4);
    color: var(--shops-muted, #6E727A);
}
.shops-status--closed .shops-status-dot {
    background-color: #9D9FA3;
}

.shops-q-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--shops-green-bg) url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.25L6 7.75L9.5 4.25' stroke='%23427E15' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
    transition: transform .25s ease;
}

.shops-item[open] .shops-q-ico {
    transform: rotate(180deg);
}

.shops-a {
    overflow: hidden;
}

.shops-a-inner {
    padding: 20px 24px 24px;
    border-top: 1px dashed var(--shops-border);
}

/* --- Сетка карточки: 280px + авто-выравнивание по линии кнопок --- */
.shops-card-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: stretch;
}

.shops-card-photo {
    width: 100%;
    height: 100%;
    min-height: 240px;
    border-radius: var(--shops-radius-m);
    background-color: var(--shops-bg-soft);
    border: 1px solid var(--shops-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}

/* Аппаратный GPU-рендеринг для максимальной детализации и резкости при 100% масштабе */
.shops-card-photo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    image-rendering: smooth;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform .35s ease;
}

.shops-item:hover .shops-card-photo-img {
    transform: scale(1.025) translateZ(0);
}

.shops-card-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 12px;
    font-size: 15px;
    line-height: 1.55;
}

.shops-card-details > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shops-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.shops-info-label {
    font-weight: 700;
    color: var(--shops-ink);
    min-width: 120px;
    flex-shrink: 0;
}

.shops-info-val a {
    color: var(--shops-green-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.shops-info-val a:hover {
    color: var(--shops-green);
}

/* --- Ряд действий: Показать на карте + Маршрут + Соцсети --- */
.shops-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--shops-bg-soft);
    width: 100%;
}

/* Кнопка «Показать на карте» */
.shops-card-actions .shops-btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 22px;
    box-sizing: border-box;
    width: auto;
    border: 0;
    border-radius: var(--btn-radius, 10px);
    background-color: var(--shops-green, #559723);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(85, 151, 35, 0.2);
    transition: background-color .2s, transform .15s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.shops-card-actions .shops-btn-map:hover {
    background-color: var(--shops-green-dark, #427E15);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(66, 126, 21, 0.3);
}

.shops-card-actions .shops-btn-map:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Кнопка «Маршрут» */
.shops-btn-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--btn-radius, 10px);
    background-color: var(--shops-green, #559723);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(85, 151, 35, 0.2);
    transition: background-color .2s, transform .15s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.shops-btn-route:hover {
    background-color: var(--shops-green-dark, #427E15);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(66, 126, 21, 0.3);
}

.shops-btn-route:active {
    transform: translateY(1px);
    box-shadow: none;
}

.shops-btn-route svg {
    width: 17px;
    height: 17px;
    fill: #ffffff;
    display: block;
    margin-top: -1px;
    flex-shrink: 0;
}

/* Кнопки соцсетей */
.shops-soc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--btn-radius, 10px);
    background: #F0F1F4;
    border: 1px solid #E3E4E6;
    transition: background-color .2s, border-color .2s, transform .15s;
    text-decoration: none;
}

.shops-soc-btn:hover {
    background: var(--shops-green-bg, #E9F1E2);
    border-color: var(--shops-green, #559723);
}

.shops-soc-btn:active {
    transform: translateY(1px);
}

.shops-soc-btn img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    border-radius: 5px;
}

.shops-mark {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--shops-yellow);
    color: inherit;
}

/* --- Пустая выдача поиска --- */
.shops-empty {
    margin-top: 28px;
    padding: 40px 24px;
    border: 1px dashed #C6C8CB;
    border-radius: var(--shops-radius-l);
    text-align: center;
}

.shops-empty-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--shops-ink);
}

.shops-empty-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--shops-muted);
}

.shops-empty-text a {
    color: var(--shops-green-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Адаптивность под планшеты --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .shops-card-grid {
        grid-template-columns: 240px 1fr;
        gap: 20px;
    }
}

/* --- Адаптивность под мобильные экраны (2 четких ряда) --- */
@media (max-width: 768px) {
    .shops-search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .shops-geo-btn {
        height: 50px;
        min-height: 50px;
        width: 100%;
        font-size: 15px;
    }

    .shops-search-input {
        height: 50px;
        padding-left: 46px;
        padding-right: 46px;
        font-size: 15px;
    }
    .shops-search-ico { left: 15px; }

    .shops-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -15px;
        margin-right: -15px;
        padding: 2px 15px 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shops-nav::-webkit-scrollbar { display: none; }

    .shops-nav-chip {
        padding: 8px 14px;
        font-size: 14px;
    }

    .shops-map { height: 300px; }

    .shops-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .shops-card-photo {
        height: 220px;
        min-height: 220px;
    }

    .shops-info-row {
        flex-direction: column;
        gap: 2px;
    }

    .shops-info-label {
        min-width: unset;
        font-size: 13px;
        color: var(--shops-muted);
    }

    /* Мобильная сетка кнопок карточки */
    .shops-card-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
        margin-top: 8px;
    }

    /* Ряд 1: Показать на карте (100% ширины) */
    .shops-card-actions .shops-btn-map {
        width: 100%;
        flex: 1 1 100%;
        height: 48px;
        min-height: 48px;
        font-size: 15px;
        padding: 0 16px;
        order: 1;
    }

    /* Ряд 2: Маршрут (тянется) + Соцсети (компактно справа) */
    .shops-btn-route {
        flex: 1 1 auto;
        min-width: 110px;
        height: 44px;
        min-height: 44px;
        font-size: 14px;
        padding: 0 12px;
        order: 2;
    }

    .shops-soc-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        order: 2;
    }
}