.app-banner {
  position: fixed;
  text-align: center;
  top: 0; left: 0; right: 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  font-family: "Inter", Arial, sans-serif;
  z-index: 10000;
  animation: slideDown 0.4s ease;
}
.app-banner.hidden { display: none; }

.app-banner__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}
.app-banner__icon img {
      border-radius: 10px;
        width: 60px;
        height: 60px;
  animation: pulse 2s infinite;
}
.app-banner__content { flex:1; font-size:14px; color:#222; }
.app-banner__promo { 
  margin-top:4px; 
    color: #264f36;
      font-size: 14px;
      font-weight: 700;
      line-height: 17px;
}
.app-banner__close {
  background: transparent; border:none; font-size:20px; cursor:pointer; color:#888;
}
.app-banner__btn {

  background:#ffcc00; border:none; width:100%;
  padding:12px; font-weight:600; font-size:15px; cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: bounce 3s infinite;

      max-width: 350px;
      width: 100%;
      line-height: 1.2;
      padding: 10px 24px;
      font-size: 16px;
      font-weight: 600;
      background-color: #ffc836;
      border-radius: 10px;
      color: #333;
      justify-content: center;
      margin-bottom: 10px;
}
.app-banner__btn:hover { transform: scale(1.03); box-shadow:0 4px 10px rgba(0,0,0,0.12); }

@media(min-width:600px){
  .app-banner { display:flex; align-items:center; padding:12px 16px; }
  .app-banner__top { flex:1; align-items:center; padding:0; }
  .app-banner__btn { width:auto; border-radius:6px; padding:8px 14px; margin-left:12px; }
}

@keyframes slideDown { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }

.app-banner__title {
    color: #333;
      font-size: 15px;
      font-weight: 500;
      line-height: 17px;
}