/* Купон в карточке товара — базовый компактный стиль:
   белая карточка (рамка и тень настраиваются), красная иконка «%»,
   код в поле с пунктирной рамкой, компактная кнопка «Копировать»
   (после копирования — «Скопировано»), строка с описанием и датой.
   Все параметры вынесены в CSS-переменные: переопределяются в «Своём CSS»
   без перекрытия правил. */

.couponcard-list {
    --couponcard-block-bg: #ffffff;
    --couponcard-block-radius: 12px;
    --couponcard-block-padding: 10px 16px;
    --couponcard-border-color: transparent;
    --couponcard-border-width: 1px;
    --couponcard-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    --couponcard-badge-size: 40px;
    --couponcard-badge-radius: 9px;
    --couponcard-gap: 10px;
    --couponcard-row-height: 40px;
    --couponcard-code-color: #0a0a0a;
    --couponcard-code-font-size: 18px;
    --couponcard-code-font-weight: 700;
    --couponcard-code-box-bg: transparent;
    --couponcard-code-box-radius: 10px;
    --couponcard-dash-color: #ff7500;
    --couponcard-dash-width: 1px;
    --couponcard-dash-style: dashed;
    --couponcard-btn-bg: #ff7500;
    --couponcard-btn-color: #ffffff;
    --couponcard-btn-radius: 10px;
    --couponcard-btn-font-size: 13px;
    --couponcard-btn-min-width: 143px;
    --couponcard-info-btn-size: 40px;
    --couponcard-info-btn-border-color: var(--couponcard-info-color);
    --couponcard-info-color: #727273;
    --couponcard-info-font-size: 13px;
    --couponcard-tooltip-btn-bg: #f2f3f5;
    --couponcard-tooltip-btn-color: #1c2126;

    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    font-family: inherit;
}

.couponcard {
    position: relative;
    padding: var(--couponcard-block-padding);
    background: var(--couponcard-block-bg);
    border: var(--couponcard-border-width) solid var(--couponcard-border-color);
    border-radius: var(--couponcard-block-radius);
    box-shadow: var(--couponcard-box-shadow);
}

.couponcard__main {
    display: flex;
    align-items: center;
    gap: var(--couponcard-gap);
}

/* Иконка слева от блока */
.couponcard__badge {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--couponcard-badge-size);
    height: var(--couponcard-badge-size);
    border-radius: var(--couponcard-badge-radius);
    overflow: hidden;
}

.couponcard__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Поле с кодом купона — пунктирная рамка; высота ряда
   (поле кода и кнопка «Копировать») — --couponcard-row-height */
.couponcard__code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: var(--couponcard-row-height);
    padding: 4px 10px;
    background: var(--couponcard-code-box-bg);
    border: var(--couponcard-dash-width) var(--couponcard-dash-style) var(--couponcard-dash-color);
    border-radius: var(--couponcard-code-box-radius);
}

.couponcard__code {
    font-size: var(--couponcard-code-font-size);
    font-weight: var(--couponcard-code-font-weight);
    letter-spacing: 0.02em;
    color: var(--couponcard-code-color);
    overflow-wrap: anywhere;
    text-align: center;
}

/* Кнопка «Копировать»: высота поля с кодом (--couponcard-row-height),
   ширина — не меньше --couponcard-btn-min-width, чтобы размер не менялся
   при замене текста на «Скопировано» */
.couponcard__copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: var(--couponcard-row-height);
    min-width: var(--couponcard-btn-min-width);
    padding: 5px 12px 6px;
    font: inherit;
    font-size: var(--couponcard-btn-font-size);
    font-weight: 600;
    /* WebKit (iOS Safari) смещает текст кнопки вниз при унаследованном
       line-height — фиксируется line-height:1 + сброс appearance */
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    color: var(--couponcard-btn-color);
    background: var(--couponcard-btn-bg);
    border: none;
    border-radius: var(--couponcard-btn-radius);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.couponcard__copy-btn:hover {
    opacity: 0.88;
}


.couponcard__copy-btn.is-copied {
    opacity: 0.92;
}

/* Строка с описанием и датой окончания — сетка ряда купона:
   описание слева (от иконки до конца поля с кодом), дата — по центру
   под кнопкой «Копировать» (по вертикали и горизонтали) */
.couponcard__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--couponcard-gap);
    margin-top: 8px;
    font-size: var(--couponcard-info-font-size);
    line-height: 1.4;
    color: var(--couponcard-info-color);
}

.couponcard--info-top .couponcard__info {
    margin-top: 0;
    margin-bottom: 8px;
}

.couponcard__info-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Без даты описание занимает всю строку, но не заезжает под «!»:
   заканчивается на правой границе кнопки «Копировать» */
.couponcard--has-info .couponcard__info--no-date .couponcard__info-text {
    margin-right: calc(var(--couponcard-gap) + var(--couponcard-info-btn-size));
}

.couponcard__info-date {
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    width: var(--couponcard-btn-min-width);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* Когда справа есть значок «!», дата смещается так, чтобы её центр
   совпадал с центром кнопки «Копировать» */
.couponcard--has-info .couponcard__info-date {
    width: calc(var(--couponcard-btn-min-width) + var(--couponcard-gap) + var(--couponcard-info-btn-size));
    padding-right: calc(var(--couponcard-gap) + var(--couponcard-info-btn-size));
}

/* Значок «!» рядом с кнопкой — блок с рамкой, по высоте ряда
   (иконка/поле кода/кнопка). Клик открывает окно с описанием. */
.couponcard__info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--couponcard-info-btn-size);
    height: var(--couponcard-info-btn-size);
    padding: 0;
    color: var(--couponcard-info-color);
    background: transparent;
    border: 1px solid var(--couponcard-info-btn-border-color);
    border-radius: var(--couponcard-btn-radius);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.couponcard__info-btn:hover {
    opacity: 0.7;
}

/* Окно с описанием — над блоком купона: прижато к правому краю,
   ширина по содержимому (длинный текст растягивается до ширины блока).
   Открывается кликом по «!» */
.couponcard__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 50;
    max-width: 100%;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #1c2126;
    background: #ffffff;
    border: 1px solid #e5e7e8;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.couponcard__tooltip p {
    margin: 0 0 8px;
}

.couponcard__tooltip p:last-child {
    margin-bottom: 0;
}

.couponcard__tooltip-expire {
    opacity: 0.6;
}

/* Кнопка-ссылка в окне описания — слева, ширина по содержимому */
.couponcard__tooltip-btn {
    display: inline-block;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 9px 16px;
    border: 1px solid #d6d9de;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--couponcard-tooltip-btn-color);
    background: var(--couponcard-tooltip-btn-bg);
    border-radius: 10px;
    transition: opacity 0.15s ease;
}

.couponcard__tooltip-btn:hover {
    opacity: 0.88;
    color: var(--couponcard-tooltip-btn-color);
}

.couponcard__tooltip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Узкие экраны: два собранных ряда — [иконка][код] / [кнопка][«!»],
   строка с комментарием и датой — колонкой */
@media (max-width: 480px) {
    .couponcard__main {
        flex-wrap: wrap;
    }

    .couponcard__code {
        overflow-wrap: anywhere;
    }

    /* Кнопка растягивается на всё, что осталось рядом со «!» */
    .couponcard--has-info .couponcard__copy-btn {
        flex: 1 1 calc(100% - var(--couponcard-gap) - var(--couponcard-info-btn-size));
    }

    .couponcard:not(.couponcard--has-info) .couponcard__copy-btn {
        flex: 1 1 100%;
    }

    .couponcard__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .couponcard--has-info .couponcard__info--no-date .couponcard__info-text {
        margin-right: 0;
    }

    .couponcard__info-date,
    .couponcard--has-info .couponcard__info-date {
        width: auto;
        padding-right: 0;
        margin-left: 0;
        align-self: center;
        text-align: center;
    }
}