/**
 * Multiwidget — FULL 0.2 styles (новый дефолт).
 *
 * Чистая разметка .mwf-* (свой шаблон full.php), без войн специфичности
 * с боевым widget.css — другие классы. !important не нужен.
 *
 * Строка 50px: картинка 50×50 edge-to-edge | цена грн + «на {магазин}» (+$) | кнопка.
 *
 * @package MyChooz_Partners
 * @version 0.2
 */

/* обёртка: общая ширина/центрирование для шапки, виджета и промо */
.mwf-wrap { width: 560px; max-width: 100%; margin: 8px auto; }

.mwf {
    width: 100%; margin: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; box-sizing: border-box;
}
/* снизу пришит промо → нижние углы виджета прямые, промо их продолжает */
.mwf--has-promo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* шапка-мета над виджетом: гео слева, ссылка E-Katalog справа (без рамки) */
.mwf-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 5px; }
.mwf-geo { display: inline-flex; align-items: center; gap: 4px; color: #1a1a1a; font-size: 12px; font-weight: 600; }
.mwf-geo__ic { width: 13px; height: 13px; flex: none; }
.mwf-geo__txt { line-height: 1; }
.mwf-ek { display: inline-flex; align-items: center; gap: 3px; opacity: .8; font-size: 11px; color: #1a1a1a; text-decoration: none; }
.mwf-ek:hover { opacity: 1; }
.mwf-ek img { width: 16px; height: 16px; }
.mwf-ek span { font-size: 11px; }

/* строка-оффер */
.mwf-row, .mwf-row:hover, .mwf-row:focus,
.mwf-row * , .mwf-row:hover * {
    text-decoration: none !important;
}
.mwf-row {
    display: grid; grid-template-columns: 50px 1fr 162px; align-items: stretch;
    height: 50px; color: #1a1a1a;
    border-bottom: 1px solid #eef1f4; transition: background .15s, transform .15s, box-shadow .15s;
    position: relative;
}
.mwf-row:last-child { border-bottom: 0; }
.mwf-row:nth-child(even) { background: #f6f8fa; }
.mwf-row:hover { background: #f0f7ff; transform: scale(1.01); box-shadow: 0 2px 8px rgba(0,0,0,.06); z-index: 1; }
.mwf-row:nth-child(even):hover { background: #eaf2ff; }

/* картинка 50×50 edge-to-edge */
.mwf-thumb { width: 50px; height: 50px; background: #fff; overflow: hidden; }
/* contain: вертикальные картинки E-Katalog (925×1150) влезают целиком, без обрезки */
.mwf-thumb img { width: 50px; height: 50px; object-fit: contain; display: block; }

/* середина: цена + магазин на одной линии, слева */
.mwf-mid {
    min-width: 0; padding: 12px 14px 0; display: flex; align-items: baseline;
    gap: 6px; overflow: hidden; white-space: nowrap;
}
/* ширина по контенту → «на {магазин}» прижат к цене на любом рынке
   (грн шире, $ уже); ряды одной валюты выровнены (tabular-nums одинаковой ширины) */
.mwf-price {
    flex: 0 0 auto; min-width: 0;
    color: #e53e3e; font-size: 22px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* магазин занимает остаток и при нехватке места обрезается «…» (а не пропадает);
   $-нота внутри клипается первой, имя магазина сохраняется максимально */
.mwf-store {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-size: 18px; font-weight: 500; color: #1a1a1a; line-height: 1;
}
.mwf-na  { font-size: 15px; font-weight: 500; color: #a3a9b0; margin-right: 3px; }
.mwf-usd { font-size: 15px; font-weight: 500; color: #a3a9b0; margin-left: 9px; }

/* фирменные цвета магазинов */
.mwf-shop--ali    { color: #e62e04; }
.mwf-shop--amazon { color: #ff9900; }

/* кнопка «Купить» — красная пилюля по центру ячейки */
.mwf-cta { display: flex; align-items: center; justify-content: center; }
.mwf-btn {
    width: 130px; height: 38px; border-radius: 9px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #e53e3e; color: #fff; font-size: 17px; font-weight: 500;
    position: relative; left: 8px;
}
/* «Смотреть цену» / «Check price» длиннее «Купить» — переносим в 2 строки
   внутри той же пилюли (ширина 130px та же → правые края кнопок выровнены) */
.mwf-btn--check { font-size: 14px; font-weight: 500; line-height: 1.12; padding: 0 20px; text-align: center; }

/* промо-спойлер снизу (AJAX-раскрытие промокодов) — приглушённый тизер */
.mwf-promo {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; cursor: pointer;
    box-sizing: border-box;
    background: #fafbfc; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 12px 12px;
    font-size: 13px; font-weight: 500; color: #9aa1a9; transition: color .15s, background .15s;
}
.mwf-promo:hover { background: #fff; color: #6b7280; }
.mwf-promo__ic {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: #c9ccd1; color: #fff; font-size: 11px; font-weight: 700;
}
.mwf-promo::after { content: '\25BE'; font-size: 20px; color: #b8bcc2; margin-left: 3px; line-height: 1; }

/* ── Адаптив (мобайл): «на {магазин}» уезжает на 2-ю строку под цену; кнопка справа по центру ── */
@media (max-width: 480px) {
    .mwf-row   { grid-template-columns: 50px 1fr 100px; }
    /* середина в колонку: цена сверху, «на магазин» снизу, по центру по вертикали */
    .mwf-mid   {
        flex-direction: column; align-items: stretch; justify-content: center;
        gap: 6px; padding: 0 8px 0 10px;
    }
    .mwf-price { flex: 0 0 auto; font-size: 22px; }
    /* вся 2-я строка («на» + магазин + $) одним размером */
    .mwf-store { flex: 0 0 auto; font-size: 12px; }
    .mwf-na    { margin-right: 1px; font-size: 12px; }
    .mwf-usd   { margin-left: 4px; font-size: 12px; }
    .mwf-btn   { width: 88px; left: 0; font-size: 16px; }
    .mwf-btn--check { padding: 0 6px; font-size: 13px; }
}

/* ─── График истории цены (price-chart.js + uPlot) ─── */
.mwf-chart { padding: 10px 12px 12px; border-top: 1px solid #eee; }
.mwf-chart__sig { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mwf-chart__sig span {
	font-size: 12px; font-weight: 600; color: #c62828;
	background: #fdecea; border-radius: 4px; padding: 2px 8px;
}
.mwf-chart__plot { width: 100%; }
.mwf-chart__cap { margin-top: 6px; font-size: 11px; color: #888; text-align: center; }
.mwf-chart .u-legend { display: none; }