@keyframes cbogo-slide-in {
from { opacity: 0; transform: translateY(-10px) scale(.97); }
to   { opacity: 1; transform: none; }
}
@keyframes cbogo-shine {
0%       { left: -80%; }
50%, 100%{ left: 130%; }
}
@keyframes cbogo-float {
0%, 100%{ transform: translateY(0) rotate(0deg) scale(1); }
33%     { transform: translateY(-7px) rotate(120deg) scale(1.2); }
66%     { transform: translateY(3px) rotate(240deg) scale(.8); }
}
@keyframes cbogo-pop {
from { transform: scale(0) rotate(-20deg); }
to   { transform: scale(1) rotate(0); }
}
@keyframes cbogo-badge-in {
from { opacity: 0; transform: scale(.6); }
to   { opacity: 1; transform: scale(1); }
} .cbogo-free-price {
color: #e53e3e;
font-weight: 700;
}
.cbogo-original-price {
color: #aaa;
font-weight: 400;
margin-left: 4px;
font-size: .9em;
} .cbogo-mini-total {
display: flex;
justify-content: space-between;
align-items: center;
}
.cbogo-subtotal-new {
color: #e53e3e;
font-weight: 700;
font-size: 1.05em;
}
.cbogo-subtotal-old {
color: #aaa;
font-weight: 400;
font-size: .88em;
margin-left: 6px;
} .cbogo-teaser-notice {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1e1b4b, #312e81);
color: #fff;
padding: 14px 20px;
border-radius: 12px;
margin-bottom: 20px;
font-size: .88rem;
line-height: 1.6;
box-shadow: 0 4px 20px rgba(99,102,241,.3);
}
.cbogo-teaser-icon { font-size: 1.4rem; flex-shrink: 0; }
.cbogo-teaser-body strong { color: #e9d5ff; margin-right: 6px; }
.cbogo-teaser-pill {
display: inline-block;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.2);
border-radius: 20px;
padding: 2px 10px;
margin: 2px 2px 0;
font-size: .78rem;
font-weight: 700;
color: #fef9c3;
} .cbogo-hurray-wrap   { margin: 16px 0 24px; }
.cbogo-hurray-empty  { display: none; }
.cbogo-hurray-card {
position: relative;
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 40%, #b91c1c 100%);
border-radius: 16px;
padding: 22px 24px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(185,28,28,.4), inset 0 1px 0 rgba(255,255,255,.12);
animation: cbogo-slide-in .45s cubic-bezier(.22,1,.36,1) both;
}
.cbogo-hurray-card::before {
content: "";
position: absolute; top: 0; left: -80%;
width: 60%; height: 100%;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
animation: cbogo-shine 2.8s ease-in-out .5s infinite;
pointer-events: none;
}
.cbogo-hurray-card::after {
content: "";
position: absolute; top: -40px; right: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(252,165,165,.25), transparent 70%);
pointer-events: none;
} .cbogo-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cbogo-confetti-dot {
position: absolute; width: 8px; height: 8px; border-radius: 50%;
animation: cbogo-float 3s ease-in-out infinite;
}
.cbogo-confetti-dot--1  { top:10%; left:8%;  background:#fbbf24; animation-delay:0s;   animation-duration:2.8s; }
.cbogo-confetti-dot--2  { top:20%; left:20%; background:#34d399; animation-delay:.3s;  animation-duration:3.2s; }
.cbogo-confetti-dot--3  { top:5%;  left:35%; background:#f9a8d4; animation-delay:.6s;  animation-duration:2.5s; }
.cbogo-confetti-dot--4  { top:15%; left:50%; background:#fde68a; animation-delay:.2s;  animation-duration:3.5s; }
.cbogo-confetti-dot--5  { top:8%;  left:65%; background:#a78bfa; animation-delay:.9s;  animation-duration:2.9s; }
.cbogo-confetti-dot--6  { top:25%; left:78%; background:#6ee7b7; animation-delay:.4s;  animation-duration:3.1s; }
.cbogo-confetti-dot--7  { top:70%; left:12%; background:#fca5a5; animation-delay:.7s;  animation-duration:2.7s; }
.cbogo-confetti-dot--8  { top:80%; left:28%; background:#93c5fd; animation-delay:.1s;  animation-duration:3.4s; }
.cbogo-confetti-dot--9  { top:75%; left:45%; background:#fbbf24; animation-delay:.5s;  animation-duration:2.6s; }
.cbogo-confetti-dot--10 { top:85%; left:60%; background:#f9a8d4; animation-delay:.8s;  animation-duration:3.0s; }
.cbogo-confetti-dot--11 { top:65%; left:72%; background:#34d399; animation-delay:.2s;  animation-duration:3.3s; }
.cbogo-confetti-dot--12 { top:90%; left:88%; background:#a78bfa; animation-delay:.6s;  animation-duration:2.4s; }
.cbogo-hurray-icon {
font-size: 3rem; flex-shrink: 0; position: relative; z-index: 1;
animation: cbogo-pop .5s cubic-bezier(.34,1.56,.64,1) .2s both;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.cbogo-hurray-text    { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cbogo-hurray-headline {
font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 4px;
letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cbogo-hurray-sub  { font-size: .88rem; color: #fecaca; margin-bottom: 10px; line-height: 1.5; }
.cbogo-hurray-sub strong { color: #fef9c3; font-weight: 800; }
.cbogo-hurray-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cbogo-hurray-pill {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.2);
border-radius: 20px; padding: 3px 12px;
font-size: .78rem; font-weight: 600; color: #fef9c3;
}
.cbogo-hurray-badge {
flex-shrink: 0; position: relative; z-index: 1;
background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.25);
border-radius: 14px; padding: 12px 18px; text-align: center; min-width: 100px;
animation: cbogo-badge-in .5s cubic-bezier(.22,1,.36,1) .35s both;
}
.cbogo-hurray-badge-label {
font-size: .62rem; font-weight: 800; color: #fca5a5;
letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px;
}
.cbogo-hurray-badge-amount {
font-size: 1.4rem; font-weight: 900; color: #fef9c3;
text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@media (max-width: 600px) {
.cbogo-hurray-card { flex-direction: column; text-align: center; gap: 14px; padding: 20px 18px; }
.cbogo-hurray-pills { justify-content: center; }
.cbogo-hurray-badge { width: 100%; }
} .cbogo-mini-notice-wrap { margin: 0 0 14px; padding: 0 2px; } .cbogo-mini-hurray {
background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
border-radius: 12px;
padding: 14px 16px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 24px rgba(185,28,28,.45), inset 0 1px 0 rgba(255,255,255,.1);
animation: cbogo-slide-in .35s cubic-bezier(.22,1,.36,1) both;
}
.cbogo-mini-hurray::before {
content: "";
position: absolute; top: 0; left: -80%;
width: 55%; height: 100%;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%);
animation: cbogo-shine 3s ease-in-out 1s infinite;
pointer-events: none;
}
.cbogo-mini-hurray::after {
content: "";
position: absolute; top: -30px; right: -30px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(252,165,165,.2), transparent 70%);
pointer-events: none;
} .cbogo-mini-hurray .cbogo-confetti-dot--1 { top:8%;  left:10%; background:#fbbf24; animation-delay:0s;  animation-duration:2.6s; }
.cbogo-mini-hurray .cbogo-confetti-dot--2 { top:15%; left:30%; background:#34d399; animation-delay:.4s; animation-duration:3.0s; }
.cbogo-mini-hurray .cbogo-confetti-dot--3 { top:5%;  left:55%; background:#f9a8d4; animation-delay:.2s; animation-duration:2.8s; }
.cbogo-mini-hurray .cbogo-confetti-dot--4 { top:20%; left:75%; background:#fde68a; animation-delay:.6s; animation-duration:3.2s; }
.cbogo-mini-hurray .cbogo-confetti-dot--5 { top:75%; left:15%; background:#a78bfa; animation-delay:.3s; animation-duration:2.5s; }
.cbogo-mini-hurray .cbogo-confetti-dot--6 { top:80%; left:45%; background:#6ee7b7; animation-delay:.7s; animation-duration:3.1s; }
.cbogo-mini-hurray .cbogo-confetti-dot--7 { top:70%; left:68%; background:#fca5a5; animation-delay:.1s; animation-duration:2.9s; }
.cbogo-mini-hurray .cbogo-confetti-dot--8 { top:85%; left:85%; background:#93c5fd; animation-delay:.5s; animation-duration:2.7s; }
.cbogo-mini-top {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px; position: relative; z-index: 1;
}
.cbogo-mini-emoji {
font-size: 1.8rem; flex-shrink: 0;
animation: cbogo-pop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.cbogo-mini-text { flex: 1; min-width: 0; }
.cbogo-mini-text strong {
display: block; color: #fff;
font-size: .87rem; font-weight: 800;
margin-bottom: 2px; line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cbogo-mini-sub { font-size: .76rem; color: #fecaca; line-height: 1.4; }
.cbogo-mini-sub em { color: #fef9c3; font-style: normal; font-weight: 700; }
.cbogo-mini-badge {
flex-shrink: 0;
background: rgba(0,0,0,.28);
border: 1.5px solid rgba(255,255,255,.28);
border-radius: 10px;
padding: 6px 11px;
font-size: 1rem; font-weight: 900; color: #fef9c3;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,.3);
animation: cbogo-badge-in .45s cubic-bezier(.22,1,.36,1) .25s both;
}
.cbogo-mini-pills {
display: flex; flex-wrap: wrap; gap: 5px;
position: relative; z-index: 1;
}
.cbogo-mini-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.2);
border-radius: 20px; padding: 2px 10px;
font-size: .73rem; font-weight: 600; color: #fef9c3;
} .cbogo-mini-teaser {
display: flex; align-items: flex-start; gap: 8px;
background: linear-gradient(135deg, #1e1b4b, #312e81);
border-radius: 10px; padding: 12px 14px;
font-size: .82rem; color: #fff; line-height: 1.5;
box-shadow: 0 3px 14px rgba(99,102,241,.25);
}
.cbogo-mini-teaser > span { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.cbogo-mini-teaser-body strong { color: #e9d5ff; display: block; margin-bottom: 5px; }
.cbogo-mini-teaser-pill {
display: inline-block;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
border-radius: 20px; padding: 2px 9px; margin: 2px 2px 0;
font-size: .72rem; font-weight: 700; color: #fef9c3;
} .cbogo-subtotal-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbogo-subtotal-new  { color: #e53e3e !important; font-weight: 700 !important; }
.cbogo-subtotal-old  { color: #aaa !important; font-size: .88em; font-weight: 400 !important; text-decoration: line-through !important; } .cbogo-item-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: #e53e3e;
color: #fff;
padding: 5px 12px;
margin-top: 7px;
font-size: 12px;
font-weight: 600;
border-radius: 3px;
}