.right-banner { position: fixed; top: 85%; right: 0px; transform: translateY(-50%) translateX(120%); width: 240px; background: white; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px; z-index: 9999; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; border: 1px solid rgb(233, 236, 239); overflow: hidden; }
.right-banner.show { transform: translateY(-50%) translateX(0px); }
.banner-with-local-bg { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) center center / cover, url("/images/happy-halloween.png"); }
.banner-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; color: white; position: relative; z-index: 1; }
.banner-header h3 { margin: 0px; font-size: 16px; font-weight: 600; }
.close-btn { background: rgba(255, 0, 0, 0.5); border: none; color: white; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 18px; font-weight: bold; transition: all 0.2s ease 0s; position: relative; z-index: 2; }
.close-btn:hover { background: rgba(255, 0, 0, 0.6); transform: scale(1.1); }
.banner-content { padding: 8px 20px; height: 80px; overflow-y: auto; position: relative; z-index: 1; }
.banner-content p { margin: 0px 0px 12px; color: rgb(255, 0, 0); font-size: 16px; }
.banner-footer { padding: 8px 20px; text-align: center; position: relative; z-index: 1; }
.banner-action-btn { background: rgb(255, 215, 0); color: rgb(51, 51, 51); border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; transition: all 0.2s ease 0s; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
.banner-action-btn:hover { background: rgb(255, 196, 0); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 8px; }
@media (max-width: 640px) {
  .right-banner { width: calc(-40px + 100vw); right: 20px; left: 20px; height: auto; }
  .banner-content { height: 80px !important; }
}