/**
 * Header Download App banner – fixes truncated text & layout
 * Use with uni-view banner or plain HTML version.
 */

/* Banner container – full width at top, subtle gradient like reference */
.header-download-app.maxWidth,
.header-download-app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, #0f5c3a 15%, #0f5c3a 100%);
  background-color: #0f5c3a;
  box-sizing: border-box;
  gap: 12px;
}

/* Left group: close + logo + text */
.header-download-app__left,
.header-download-app > div:first-of-type {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* allow shrink so text can wrap if needed */
}

.header-download-app-close {
  flex-shrink: 0;
  margin-right: 8px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  text-shadow: 0 0 8px rgba(255,255,255,0.4);
  opacity: 0.95;
}

/* Fix truncated "Download now to ge" – allow text to show fully */
.header-download-app .download-text,
.header-download-app #typewriter,
.header-download-app .typewriter {
  min-width: 0;
  flex: 1;
  overflow: visible;
}

.header-download-app .typewriter .text,
.header-download-app .download-text .text {
  white-space: nowrap;
  overflow: visible;
  color: #c8e6c9; /* light yellow-green like reference */
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}

/* Optional: if you use a single line and want no truncation */
.header-download-app .typewriter .text.one-line {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* App logo – square with rounded corners like reference */
.header-download-app .gameLogo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 12px;
  object-fit: cover;
  background: transparent;
}

.header-download-app .gameLogo img,
.header-download-app .gameLogo > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Close icon */
.header-download-app .u-icon--right {
  flex-shrink: 0;
  cursor: pointer;
  margin-right: 8px;
  color: #fff;
}

/* Download button – white, pill-shaped, dark green text like reference */
.header-download-app .download-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  background: #fff;
  color: #0f5c3a;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-download-app .download-btn:hover {
  background: #f0f0f0;
}

/* When banner is visible, add top padding so content is not hidden under it */
body.has-download-banner {
  padding-top: 52px;
}

/* Navbar ko download banner ke neeche dikhao – fix "navbar button hide" */
body.has-download-banner .navbar-fixed,
body.has-download-banner .navbar .navbar-fixed,
body.has-download-banner [class*="navbar-fixed"] {
  top: 52px !important;
}