/* Radar Gift Promo — "Пеньюар в подарок при первом заказе"
   Ревизия 2026-08-07: правки Валерия — один крестик по центру, картинка без
   сдавливания, лёгкая info-card вместо тяжёлого белого футера, тёмный текст
   (розовый только как акцент), отдельная компактная mobile-компоновка. */

.radar-gp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 15, 0.45);
    z-index: 2147483000;
    display: none;
}
.radar-gp-overlay.is-open { display: block; }

/* ---------- Desktop popup ---------- */
.radar-gp-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 720px;
    /* Раньше max-height:50vh конфликтовал с aspect-ratio картинки и сжимал
       её, из-за чего белый футер наезжал на баннер. Теперь высота попапа
       определяется содержимым (картинка в естественных пропорциях + info),
       92vh — только защитный потолок на случай очень низкого окна. */
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 2147483001;
    display: none;
}
.radar-gp-popup.is-open { display: block; }

.radar-gp-popup__media {
    position: relative;
    width: 100%;
    aspect-ratio: 820 / 458; /* естественное соотношение баннера — без принудительного сжатия */
    overflow: hidden;
}
.radar-gp-popup__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Лёгкая info-card ПОД картинкой (не перекрывает баннер) — заменяет
   прежний сплошной белый футер. */
.radar-gp-popup__info {
    padding: 20px 24px 22px;
    background: #FFFDFC;
}
.radar-gp-popup__info-heading {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #2B2320;
}
.radar-gp-popup__info-body {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #5A5049; /* тёмный, читаемый — не розовый */
}
.radar-gp-popup__cta {
    display: inline-block;
    background: #E6007A; /* розовый — только как акцент на кнопке */
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.radar-gp-popup__cta:hover,
.radar-gp-popup__cta:focus-visible {
    background: #C40068;
}

/* Единственная кнопка закрытия — круг в правом верхнем углу самого попапа,
   SVG-крестик идеально центрирован flex'ом (не зависит от метрик шрифта). */
.radar-gp-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(20, 15, 15, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.radar-gp-popup__close svg { display: block; }
.radar-gp-popup__close:hover { background: rgba(20, 15, 15, 0.75); }
.radar-gp-popup__close:focus-visible {
    outline: 3px solid #E6007A;
    outline-offset: 2px;
}

/* ---------- Desktop chip (после закрытия) ---------- */
.radar-gp-chip {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147482900; /* ниже попапа, но выше обычного контента */
    background: #E6007A;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    display: none;
}
.radar-gp-chip.is-visible { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Mobile bottom sheet — отдельная компактная компоновка,
   не уменьшенный desktop: картинка ниже, короткий текст, CTA всегда виден ---------- */
.radar-gp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483001;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    /* 2026-08-07, правка после репорта "срезан верх баннера": картинка
       ОБЯЗАТЕЛЬНО целиком, без кропа (см. .radar-gp-sheet__media ниже).
       Вместо обрезки картинки — сама шторка выше (60vh) и с overflow-y:auto
       как защитой (не обрежет невидимо, в худшем случае появится скролл). */
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: none;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
}
.radar-gp-sheet.is-open {
    display: block;
    transform: translateY(0);
}
.radar-gp-sheet__handle {
    /* Минимальный отступ сверху — "поднимает" картинку выше, вместо кропа. */
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: #ddd;
    margin: 6px auto 0;
}
.radar-gp-sheet__media {
    width: 100%;
    aspect-ratio: 400 / 223; /* картинка ПОЛНОСТЬЮ, в реальных пропорциях — не обрезается */
    overflow: hidden;
}
.radar-gp-sheet__media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* заполняет свою (не обрезанную) область, кроп исключён самим aspect-ratio */
    display: block;
}
.radar-gp-sheet__info {
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.radar-gp-sheet__info-body {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #5A5049;
}
.radar-gp-sheet__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #E6007A;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 999px;
    text-decoration: none;
    min-height: 44px;
    box-sizing: border-box;
}

.radar-gp-sheet__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(20, 15, 15, 0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.radar-gp-sheet__close svg { display: block; }

/* ---------- Mobile chip (над bottom nav So Xtore, .bar-tab: bottom:0;height:50px;z-index:10) ---------- */
.radar-gp-chip--mobile {
    right: 12px;
    bottom: calc(50px + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 2147482900; /* выше .bar-tab (z-index:10), ниже sheet/overlay */
    font-size: 13px;
    padding: 10px 14px;
}

/* ---------- Cart reminder (checkout/cart_list.twig, инъекция через view/after) ---------- */
.radar-gift-reminder {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
}
.radar-gift-reminder--promise {
    background: #FCE8F3;
    color: #A30058;
}
.radar-gift-reminder--added {
    background: #E8F7EE;
    color: #1B7A3C;
}

@media (prefers-reduced-motion: reduce) {
    .radar-gp-sheet { transition: none; }
}