.upsell-overlay {
position: fixed;
inset: 0;
z-index: 100; 
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(17, 24, 39, 0.62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}

.upsell-overlay.is-open {
display: flex;
animation: upsell-fade 0.22s ease-out;
}

@keyframes upsell-fade {
from { opacity: 0; }
to { opacity: 1; }
}

.upsell-card {
position: relative;
width: 100%;
max-width: 430px;

max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
overflow-y: auto;
scrollbar-width: none; 
-ms-overflow-style: none; 
-webkit-overflow-scrolling: touch;
background: #ffffff;
border-radius: 20px;
padding: 18px 16px 16px;
box-shadow: 0 20px 50px rgba(17, 24, 39, 0.38), 0 4px 14px rgba(17, 24, 39, 0.18);
font-family: 'Nunito', sans-serif;
color: #2c3a44;
}

.upsell-card::-webkit-scrollbar {
display: none; 
}

.upsell-overlay.is-open .upsell-card {
animation: upsell-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes upsell-pop {
from {
opacity: 0;
transform: translateY(22px) scale(0.96);
}
to {
opacity: 1;
transform: none;
}
}

.upsell-close {
position: absolute;
top: 9px;
right: 9px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: #f2f2f2;
color: #666666;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}

.upsell-close:hover {
background: #e5e5e5;
color: #333333;
}

.upsell-tag {
margin: 0 0 6px;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.24em;
color: #9aa5ad;
}

.upsell-badge-wrap {
text-align: center;
}

.upsell-badge {
display: inline-block;
background: #00b752;
color: #ffffff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 999px;
box-shadow: 0 5px 14px rgba(0, 183, 82, 0.32);
}

.upsell-titulo {
margin: 8px 0 6px;
text-align: center;
font-family: 'Fredoka', sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.22;
color: #1b2a32;
}

.upsell-destaque {
color: #ff6b4a;
white-space: nowrap;
}

.upsell-sub {
margin: 0;
text-align: center;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
color: #5b6b76;
}

.upsell-lista {
margin: 10px 0 0;
padding: 0;
list-style: none;
}

.upsell-lista li {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 4px;
padding: 5px 10px;
background: #f5fbf7;
border: 1px solid #e3f3e9;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
line-height: 1.35;
color: #2c3a44;
}

.upsell-lista li:last-child {
margin-bottom: 0;
}

.upsell-lista li span {
flex-shrink: 0;
font-size: 13px;
line-height: 1.35;
}

.upsell-preco {
margin-top: 12px;
padding: 10px 10px 12px;
background: #eafaf1;
border: 1px solid #cdeedc;
border-radius: 14px;
text-align: center;
}

.upsell-economia {
display: inline-block;
margin-bottom: 8px;
background: #d7f5e4;
color: #0e7a3b;
font-size: 11.5px;
font-weight: 800;
padding: 4px 12px;
border-radius: 999px;
}

.upsell-preco-card {
background: #1b2a32;
border-radius: 12px;
padding: 12px 12px 10px;
color: #ffffff;
}

.upsell-de-para {
margin: 0;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.88);
}

.upsell-de-para s {
color: #ffb4a3;
text-decoration-thickness: 2px;
}

.upsell-preco-valor {
margin: 1px 0 2px;
font-family: 'Fredoka', sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 1.05;
color: #ff6b4a;
text-shadow: 0 2px 12px rgba(255, 107, 74, 0.32);
}

.upsell-preco-legenda {
margin: 0;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}

.upsell-cta {
display: block;
margin-top: 11px;
padding: 12px 12px;
background: #00b752;
color: #ffffff;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.03em;
text-align: center;
text-decoration: none;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 183, 82, 0.36);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.upsell-cta:hover {
background: #00c853;
transform: scale(1.015);
box-shadow: 0 10px 24px rgba(0, 183, 82, 0.42);
}

.upsell-recusar {
display: block;
margin-top: 8px;
padding: 9px 10px;
background: #ffd93d;
color: #6b4d00;
font-size: 12px;
font-weight: 800;
text-align: center;
text-decoration: none;
border-radius: 10px;
transition: background 0.15s ease, color 0.15s ease;
}

.upsell-recusar:hover {
background: #ffc700;
color: #4d3800;
}

body.upsell-scroll-lock {
overflow: hidden;
}

@media (max-width: 640px) {
.upsell-overlay {
padding: 12px;
align-items: flex-end; 
}

.upsell-card {
max-width: none;
border-radius: 18px 18px 14px 14px;
padding: 16px 14px 14px;
}

.upsell-titulo {
font-size: 19px;
}

.upsell-sub {
font-size: 12px;
}

.upsell-lista li {
font-size: 12px;
padding: 4px 9px;
margin-bottom: 3px;
}

.upsell-preco-valor {
font-size: 34px;
}

.upsell-cta {
font-size: 13.5px;
padding: 11px 10px;
}
}

@media (prefers-reduced-motion: reduce) {
.upsell-overlay.is-open,
.upsell-overlay.is-open .upsell-card {
animation: none;
}
}