/**
 * Successor card variant for multiwidget — «Снято → Замена» split layout.
 *
 * Применяется когда товар ali_unavailable=1 и есть successor_slug/alternative_slug.
 * Расширяет .mcp-product → .mcp-product--successor.
 *
 * Подключается через wp_enqueue_style('mcp-successor') как зависимость от mcp-aliexpress.
 *
 * @package MyChooz_Partners
 * @since v3.6
 */

/* ============================================================
   PC: 200px (OLD) | 0 (arrow) | 200px (NEW) | 162px (CTA)
   Высота карточки 92px (на 3px выше обычной 89px — под полоску заголовка).
   ============================================================ */
.mcp-widget .mcp-product.mcp-product--successor {
    grid-template-columns: 200px 0 200px 162px !important;
    gap: 0;
    height: 92px !important;
}

.mcp-succ-side {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 0 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* Полоска-заголовок (название модели) — absolute на всю ширину 200px вверху, 12px */
.mcp-succ-name {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    line-height: 12px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    z-index: 1;
    letter-spacing: 0;
    border-bottom-right-radius: 6px;
}

/* Картинка 80×80 (квадрат) */
.mcp-succ-thumb {
    width: 80px;
    height: 80px;
    background: #f1f5f9;
    overflow: hidden;
}
.mcp-succ-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Текстовая зона справа от картинки — статус + цена по центру вертикали */
.mcp-succ-info {
    min-width: 0;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}

.mcp-succ-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
    margin: 0;
}

.mcp-succ-price {
    font-size: 18px;
    font-weight: 800;
    color: #E53E3E;
    line-height: 1;
    margin: 0;
}

/* На PC label+price лежат прямо в info (без обёртки .mcp-succ-bottom) */
.mcp-succ-bottom { display: contents; }

/* LEFT — снято: серый фон, бледная картинка, серая цена + 1px разделитель */
.mcp-succ-old {
    background: #f7f8fa;
    border-right: 1px solid #e5e7eb;
}
.mcp-succ-old .mcp-succ-thumb img { opacity: 0.5; filter: grayscale(0.65); }
.mcp-succ-old .mcp-succ-name { background: #e2e8f0; color: #475569; }
.mcp-succ-old .mcp-succ-label { color: #94a3b8; }
.mcp-succ-old .mcp-succ-price { color: #94a3b8; }

/* RIGHT — замена: зелёный градиент-намёк, тот же градиент в CTA */
.mcp-succ-new,
.mcp-widget .mcp-product--successor .mcp-product-cta {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
}
.mcp-succ-new .mcp-succ-name { background: #a7f3d0; color: #065f46; }
.mcp-succ-new .mcp-succ-label { color: #065f46; }

/* Стрелка-кружок на стыке (PC: сдвиг -24px на сторону «Снято») */
.mcp-succ-arrow {
    width: 0;
    align-self: stretch;
    padding: 0; border: 0;
    background: transparent;
    color: transparent; font-size: 0;
    position: relative; z-index: 5;
    overflow: visible;
}
.mcp-succ-arrow::before {
    content: '→';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(calc(-50% - 24px), -50%);
    width: 35px; height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    opacity: 0.5;
}

/* ============================================================
   Mobile (container query @ 500px) — компактнее, под envelope 326×124.
   ============================================================ */
@container mcp-widget (max-width: 500px) {

    .mcp-widget .mcp-product.mcp-product--successor {
        grid-template-columns: 1fr 0 1fr !important;
        grid-template-rows: 124px !important;
        height: 124px !important;
        padding: 0 !important;
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        position: relative;
    }

    /* Каждая сторона: 3 строки grid — image (75) | name (1fr) | button (36) */
    .mcp-succ-side {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 75px 1fr 36px !important;
        padding: 0 !important;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: #fff;
    }

    /* display:contents — выкидываем info из layout, name+bottom становятся прямыми grid items */
    .mcp-succ-info { display: contents !important; }

    /* Картинка 75×75 центр */
    .mcp-succ-thumb {
        width: 75px !important;
        height: 75px !important;
        margin: 0 auto !important;
        border-radius: 4px;
    }

    /* Name plain text в row 2 — БЕЗ фона и подложки */
    .mcp-succ-name {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
        padding: 0 8px !important;
        color: #1a202c !important;
        letter-spacing: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .mcp-succ-old .mcp-succ-name { color: #94a3b8 !important; }
    .mcp-succ-new .mcp-succ-name { color: #1a202c !important; }

    /* Кнопка-чип в row 3 — раздельная, со скруглением, под товаром */
    .mcp-succ-bottom {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 3px !important;
        width: calc(100% - 16px) !important;
        height: 28px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        margin: 0 auto 4px auto !important;
        align-self: end !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .mcp-succ-bottom .mcp-succ-label,
    .mcp-succ-bottom .mcp-succ-price {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
    .mcp-succ-bottom::after {
        content: '🛒';
        font-size: 11px;
        flex-shrink: 0;
    }

    /* OLD кнопка — бледный мягкий акцент */
    .mcp-succ-old .mcp-succ-bottom {
        background: #f1f5f9 !important;
        color: #94a3b8 !important;
        border: 1px solid #e2e8f0;
    }
    .mcp-succ-old .mcp-succ-bottom .mcp-succ-label { color: #94a3b8 !important; font-size: 10px !important; font-weight: 600 !important; }
    .mcp-succ-old .mcp-succ-bottom .mcp-succ-price { color: #94a3b8 !important; font-size: 11px !important; font-weight: 700 !important; }
    .mcp-succ-old .mcp-succ-bottom::after { opacity: 0.4; }

    /* NEW кнопка — фирменный красный главный CTA */
    .mcp-succ-new .mcp-succ-bottom {
        background: #cf2e2e !important;
        color: #fff !important;
    }
    .mcp-succ-new .mcp-succ-bottom .mcp-succ-label { color: #fff !important; font-size: 10px !important; }
    .mcp-succ-new .mcp-succ-bottom .mcp-succ-price { color: #fff !important; font-size: 12px !important; font-weight: 800 !important; }
    .mcp-succ-new .mcp-succ-bottom::after { filter: brightness(0) invert(1); }

    /* На мобиле зелёный градиент убран и реальная .mcp-product-cta скрыта
       (клик ловит весь <a> вокруг карточки) */
    .mcp-succ-new {
        background: #fff !important;
        padding-bottom: 0 !important;
    }
    .mcp-widget .mcp-product--successor .mcp-product-cta {
        display: none !important;
    }

    /* Стрелка-кружок на мобиле: по центру вертикали карточки, без сдвига */
    .mcp-succ-arrow {
        width: 0;
        height: 100%;
        align-self: stretch;
        position: relative; z-index: 5; overflow: visible;
    }
    .mcp-succ-arrow::before {
        content: '→';
        top: 50% !important;
        width: 30px !important; height: 30px !important;
        font-size: 15px !important;
        transform: translate(-50%, -50%) !important;
    }
}