/* ==========================================================================
   retail-points.css — карточка торговых точек ФПП

   Компонент двух страниц: реестра спецучёта (/probpalata/) и карточки компании.
   Отдельным листом, а не в assay-registry.css, потому что тот подключают семь
   шаблонов раздела, а карточке компании нужен только этот блок. Разметка —
   `assay_registry/partials/retail-points.html`.

   Префикс `uv-retail-*`, а не прежний `ar-*`: «ar» значит assay registry, и на
   странице компании это имя врало бы. Общесайтовые примитивы (значок-плитка,
   счётчик, кнопка «показать все») лежат в base.css.
   ========================================================================== */

/* Retail points */
.uv-retail-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.uv-retail-item:last-child { border-bottom: none; }
.uv-retail-num {
    width: 24px;
    height: 24px;
    border-radius: var(--uv-radius-sm);
    background: var(--uv-bg-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--uv-fs-xs);
    font-weight: var(--uv-fw-bold);
    color: var(--uv-text-muted);
    flex-shrink: 0;
}
.uv-retail-address { font-size: var(--uv-fs-small); color: var(--uv-text); line-height: var(--uv-lh-base); }
.uv-retail-body { min-width: 0; flex: 1; }
/* Значки — справа от адреса и не сжимаются: адрес переносится, значки остаются в строке */
.uv-retail-marks {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Значок флага — по одному на каждый список ФПП, где точка значится: холодный синий
   у реестра розницы, зелёный у списка соблюдающих требования. Точка из обоих списков
   несёт оба. Подписи в строке нет — её несёт подсказка, а расшифровка обоих флагов
   всегда видна в легенде под списком. */
.uv-retail-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--uv-radius-circle);
    font-size: var(--uv-fs-small);
    line-height: var(--uv-lh-none);
    flex-shrink: 0;
    cursor: help;
}
.uv-retail-mark-registered { background: rgba(var(--uv-primary-rgb), .1);  color: var(--uv-primary-dark); }
.uv-retail-mark-compliant  { background: rgba(var(--uv-success-rgb), .1);  color: var(--uv-success); }

/* QR-код — только у точек из списка goodshop; клик открывает картинку в лайтбоксе */
.uv-retail-mark-qr {
    background: var(--uv-bg-warm);
    color: var(--uv-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--uv-duration-fast) var(--uv-ease), background-color var(--uv-duration-fast) var(--uv-ease);
}
.uv-retail-mark-qr:hover {
    background: rgba(var(--uv-primary-rgb), .1);
    color: var(--uv-primary);
}

/* Легенда флагов */
.uv-retail-legend {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--uv-border);
    display: grid;
    gap: .45rem;
}
.uv-retail-legend-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: var(--uv-fs-xs);
    color: var(--uv-text-muted);
    line-height: var(--uv-lh-base);
}
.uv-retail-legend-item .uv-retail-mark { cursor: default; }
.uv-retail-legend-item strong { color: var(--uv-text); font-weight: var(--uv-fw-semibold); }

/* Группировка по региону — только на длинных списках */
.uv-retail-group + .uv-retail-group { margin-top: .25rem; }
.uv-retail-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    cursor: pointer;
    text-align: left;
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-semibold);
    color: var(--uv-text);
}
.uv-retail-group-head:hover { color: var(--uv-primary); }
.uv-retail-group-name { flex: 1; min-width: 0; }
.uv-retail-group-head .uv-foldable-chevron { color: var(--uv-text-muted); }
.uv-retail-group-body { padding-left: .25rem; }
