@charset "utf-8";
/* CSS Document */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(90deg, #00aaff, #006994); 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #FFF;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 1.6rem;
  animation: smoothSlideFade 10s ease-in-out infinite;
}

.logo a { 
  color: #FFFFFF; 
  text-decoration: none; 
  transition: all 0.3s; 
}

.logo a:hover { 
  transform: scale(1.1); 
  color: #EEEEEE; 
}

@keyframes smoothSlideFade {
  0% { opacity: 0; transform: translateX(50px) translateX(-50%); }
  10% { opacity: 1; transform: translateX(-50%); }
  90% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 1; transform: translateX(-50%); }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.header-right .menu-icon,
.header-right .search-icon {
  position: static;
  transform: none;
}

.search-icon {
  cursor: pointer;
  font-size: 1.4rem;
  color: #FFFFFF;
  transition: all 0.3s;
}

.search-icon:hover {
  transform: scale(1.2);
  color: #EEEEEE;
}

.menu-icon {
  cursor: pointer;
  font-size: 1.4rem;
  color: #FFFFFF;
  transition: all 0.3s;
}

.menu-icon:hover {
  transform: scale(1.2);
  color: #EEEEEE;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.header-left .cart-icon,
.header-left .login-wrapper {
  position: static;
  transform: none;
}

.header-right i,
.header-left i {
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s;
}

.header-right i:hover,
.header-left i:hover {
  transform: scale(1.3) rotate(10deg);
  color: #FFD700;
}

#cart-count { 
  position: absolute; 
  top: -8px; 
  right: -10px; 
  background: #FFA500; 
  color: #fff; 
  border-radius: 50%; 
  padding: 3px 7px; 
  font-size: 0.8rem; 
  animation: pulse 1.5s infinite; 
}

@keyframes pulse { 
  0%,100% {transform:scale(1);} 
  50% {transform:scale(1.2);} 
}

.news-ticker {
  position: fixed;
  top: 90px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #eef5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  overflow: hidden;
}

.ticker-wrapper { display: flex; flex-direction: column; align-items: center; }

.ticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
  cursor: pointer;
  text-decoration: none;
  color: #FFD700;
}

.ticker-item.active {
  opacity: 1;
  transform: translateY(0);
}

.ticker-image img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.ticker-text { font-size: 1rem; text-align: center; font-weight: 600; color: #000; }

@media (max-width: 768px) {
  .header { padding: 0 10px; height: 90px; }
  .logo a { font-size: 1.3rem; }
  .header-right i, .header-left i { font-size: 1.2rem; }
  .news-ticker { height: 90px; top: 90px; }
  .ticker-image img { width: 50px; height: 50px; }
}