/* Cashback offer (components/payment/cashback_offer.php) on the product checkout and the cart.
 * --cbo is the ink colour as an RGB triplet (the product page's --mk-fg, white on the dark cart, near-black
 * on the light cart); --cbo-acc / --cbo-on are the filled button and its text. Monochrome only. */

.cbo { --cbo: var(--mk-fg, 255 255 255); --cbo-acc: var(--mk-acc, 255 255 255); --cbo-on: var(--mk-on-acc, 8 7 6); position: relative; display: flex; flex-direction: column; gap: 10px; }
html[data-theme="light"] body.home-bw-theme:not(.mkt-v5) .cbo { --cbo: 8 7 6; --cbo-acc: 8 7 6; --cbo-on: 255 255 255; }
.cbo.is-on { margin-top: 14px; }
.cbo > [hidden] { display: none !important; }
.cbo__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cbo__offer {
    position: relative; display: flex; gap: 12px; padding: 14px; overflow: hidden; border-radius: 14px;
    border: 1px solid rgb(var(--cbo) / 0.22); background: linear-gradient(135deg, rgb(var(--cbo) / 0.08), rgb(var(--cbo) / 0.02));
    animation: cbo-in .32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* One sheen across the card when it appears. */
.cbo__offer::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 35%, rgb(var(--cbo) / 0.1) 50%, transparent 65%);
    animation: cbo-sheen 1.2s .2s ease both;
}
html[dir="rtl"] .cbo__offer::after { animation-name: cbo-sheen-rtl; }
.cbo__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgb(var(--cbo) / 0.1); color: rgb(var(--cbo)); font-size: 16px; }
.cbo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cbo__title { margin: 0; color: rgb(var(--cbo)); font-size: 14px; font-weight: 700; line-height: 1.35; }
.cbo__text { margin: 0; color: rgb(var(--cbo) / 0.72); font-size: 13px; line-height: 1.5; }
.cbo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.cbo button { font: inherit; cursor: pointer; }
.cbo__use {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
    background: rgb(var(--cbo-acc)); color: rgb(var(--cbo-on)); font-size: 13px; font-weight: 700; transition: transform .2s ease;
}
.cbo__use i { font-size: 11px; }
.cbo__use:hover { transform: translateY(-1px); }
.cbo__use:active { transform: scale(0.98); }
.cbo__skip, .cbo__remove {
    height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(var(--cbo) / 0.18); background: transparent;
    color: rgb(var(--cbo) / 0.82); font-size: 13px; font-weight: 600; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.cbo__skip:hover, .cbo__remove:hover { background: rgb(var(--cbo) / 0.07); border-color: rgb(var(--cbo) / 0.32); color: rgb(var(--cbo)); }

.cbo__applied {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 4px 4px 14px;
    border-radius: 12px; border: 1px solid rgb(var(--cbo) / 0.3); background: rgb(var(--cbo) / 0.06);
    animation: cbo-in .28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[dir="rtl"] .cbo__applied { padding: 4px 14px 4px 4px; }
.cbo__chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: rgb(var(--cbo)); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cbo__chip i { font-size: 13px; }
.cbo__remove { flex: none; height: 36px; }

.cbo__reuse {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none;
    color: rgb(var(--cbo) / 0.72); font-size: 13px; font-weight: 600; transition: color .2s ease;
}
.cbo__reuse:hover { color: rgb(var(--cbo)); }
.cbo__msg { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgb(var(--cbo) / 0.78); }
.cbo button:focus-visible { outline: 2px solid rgb(var(--cbo) / 0.7); outline-offset: 2px; }

@keyframes cbo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cbo-sheen { to { transform: translateX(100%); } }
@keyframes cbo-sheen-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
    .cbo__offer, .cbo__applied { animation: none; }
    .cbo__offer::after { display: none; }
    .cbo button { transition: none; }
}