.header {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}

.header-top {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

.Finland-flag-icon {
  height: 12px;
  width: auto;
  border-radius: 12%;
}

.header-mid {
  padding-left: 20px;
  padding-right: 20px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  margin: auto;
  position: relative;
}

.header-search-input {
  height: 30px;
  width: 100%;
  border: none;
  border-radius: 0 100px 100px 0 ;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}

.header-search-icon {
  height: 18px;
  width: auto;
  padding-right: 5px;
  cursor: pointer;
}

.header-search-div, .header-search-div-mobile {
  border: 1px solid black;
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.header-search-div {
  width: 400px;
}

@media screen and (min-width: 1000px) {
  .header-search-div {
    position: absolute; /* Aseta hakukentän säilö absoluuttisesti, jotta se voidaan keskittää */
    left: 50%;
    transform: translateX(-50%); /* Siirrä hakukenttä takaisin keskelle */
  }
}

.header-left-group {
  display: flex;
  align-items: center;
}

.header-left-group .header-icons {
  padding-right: 20px;
}

@media screen and (max-width: 899px) {
  .header-left-group,
  .header-search-div {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .header-standalone {
    display: none;
  }
  .header-bottom {
    display: none;
  }
}

.header-icons {
  height: 29px;
  width: auto;
  cursor: pointer;
}

.header-logo {
  height: auto;
  width: 200px;
  transform: translateY(3px);
}

.header-bottom {
  padding-left: 17px;
  padding-right: 17px;
  padding-bottom: 13px;
}

/* Ostoskorikuvakkeen säilö */
#shopping-basket-container {
  position: relative;
  display: inline-block;
}

/* Punainen pallo ostoskorikuvakkeen päällä */
#cart-count {
  position: absolute;
  top: -10px; /* Säädä tarvittaessa */
  right: -10px; /* Säädä tarvittaessa */
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 20px; /* Säädä pallon kokoa tarvittaessa */
  height: 20px; /* Säädä pallon kokoa tarvittaessa */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* Säädä tekstikokoa tarvittaessa */
  font-weight: bold;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: -250px; /* Alkuperäinen sijainti piilossa vasemman reunan ulkopuolella */
  width: 250px;
  height: 100%;
  background-color: white;
  overflow-x: hidden;
  transition: left 0.3s ease; /* Animaatio liukumiseen */
  z-index: 1001;
  padding: 20px;
  font-size: 19px;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  padding: 10px;
}

.nav-menu ul li a {
  color: black;
  text-decoration: none;
  display: block;
  transition: color 0.3s ease; /* Animaatio väriin */
}

.nav-menu ul li a:hover {
  color: #006fff;
}

.nav-menu.show {
  left: 0; /* Näkyvä sijainti */
}

.close-menu {
  height: 60px;
  color: white;
  cursor: pointer;
  padding: 15px;
  position: absolute;
  top: 0;
  right: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown päälinkki (esim. "Kategoriat") */
.dropdown-toggle {
  cursor: pointer;
  position: relative;
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 19px;
}

/* Dropdown-nuoli päälinkin vieressä */
.dropdown-toggle::after {
  content: "▼";  /* Nuoli alas */
  font-size: 12px;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

/* Dropdown-valikon yleiset asetukset */
.dropdown-menu {
  list-style: none;
  padding-left: 20px;  /* Sisennys alavalikolle */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.dropdown-menu li:first-child {
  padding: 8px 0 0 0 !important;
}

/* Dropdown-valikon animaatio ja näkyvyys */
.dropdown-menu.show {
  max-height: 300px; /* Aseta maksimi, jotta kaikki kohdat näkyvät */
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* Alavalikon kohteiden tyylit */
.dropdown-menu li {
  padding: 3px 0 0 0 !important;
}

.dropdown-menu li a {
  color: black;
  text-decoration: none;
  padding-left: 10px; /* Lisää sisennys selkeyden vuoksi */
  display: block;
  font-size: 16px;
  transition: color 0.3s ease;
}

.dropdown-menu li a:hover {
  color: #006fff; /* Hover-väri */
}


/* ################## */
/* ##### FOOTER ##### */
/* ################## */

footer {
  background-color: #ebebeb; /* Harmaa tausta */
  padding: 30px;
  text-align: left;
  color: black;
  width: 100%;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-links a {
  color: black;
}

.footer-links {
  display: flex;
  flex-direction: column; /* Jokainen linkki omalle rivilleen */
  align-items: flex-start; /* Vie linkit vasempaan reunaan */
  margin-top: 20px;
  line-height: 25px;
}

.footer-social-media {
  margin: 20px 0 15px 0;
  text-decoration: none;
}

.footer-payment-methods {
  margin: 15px 0 25px 0;
  display: flex;
  flex-wrap: wrap; /* Tällöin elementit siirtyvät seuraavalle riville tarvittaessa */
  justify-content: left; /* Keskittää elementit horisontaalisesti */
}

.footer-social-icon {
  height: 30px;
  margin: 10px 20px 10px 0;
  transition: filter 0.3s ease;
  cursor: pointer;
}
.footer-social-icon:hover {
  filter: invert(30%) sepia(67%) saturate(2373%) hue-rotate(202deg) brightness(97%) contrast(117%);
}

.social-link {
  text-decoration: none;
  color: white;
  cursor: default;
}

.payment-method-div {
  padding: 4px 2px 4px 2px;
  background-color: white;
  margin: 4px 8px 4px 0;
  width: 55px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid #7e7e7e;
  align-items: center;
  display: flex; /* Käytetään flexboxia keskittämiseen */
  justify-content: center; /* Keskittää sisällön vaakasuunnassa */
}

/* CART NOTIFICATION */
.cart-notification {
  position: absolute;
  top: 60px;
  right: 7px;
  width: 300px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 10px;
  animation: fadeIn 0.3s ease-in-out;
}

.cart-notification .product-info {
  display: flex;
  gap: 10px;
  align-items: left;
  flex-direction: row;
}

.cart-notification .product-info div {
  display: flex;
  flex-direction: column; /* Teksti pystysuunnassa */
  justify-content: center; /* Kohdista teksti keskelle kuvan suhteen */
  flex: 1;
}

.cart-notification .product-info p, .cart-notification .product-info h4{
  margin: 0;
  text-align: left;
}

.cart-notification .product-info div p {
  font-size: 14px;
}

.cart-notification .cart-notification-procut-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 5px;
  flex: 0;
}

.cart-notification .cart-summary {
  margin-top: 10px;
}

.cart-notification .cart-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}


.cart-notification .jatkashop {
  color:#7e7e7e;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  transform: translateY(4px);
}

.cart-notification .siirryostkor {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.cart-notification-close-x {
  position: absolute;
  top: 9px;
  right: 12px;
  height: 20px;
  filter: invert(53%) sepia(0%) saturate(95%) hue-rotate(226deg) brightness(93%) contrast(87%);
  cursor: pointer;
}

.cart-notification .siirryostkor:hover {
  background-color: #0056b3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}