@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/familjen-grotesk');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

*{
  font-family: 'Roboto', sans-serif;  
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HEADER */

.navbar{
  padding: 0.5rem;
}
.container-upper{
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo{
  cursor: pointer;
}

.search-bar {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.search-bar i{
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  pointer-events: none;
}

#search-input{
  width: 13rem;
  height: 2rem;
  padding-left: 2rem;
  border: none;
  border-bottom: 1px solid #555;
}

#search-input:focus{
  font-family: "Roboto" sans-serif;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
  outline: none;
}

.menu-phone, .offcanvas{
  display: none;
}

/* OFFCANVAS */

.offcanvas{
  position: fixed;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  padding-left: 1rem;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
  z-index: 999;
}

.offcanvas.active{
  left: 0;
}

.offcanvas-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
}

.offcanvas-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

.offcanvas-content .search-bar {
  width: 100%;
}

.offcanvas-content .links ul {
  flex-direction: column;
}

.offcanvas-content .links ul li a {
  display: block;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  color: #333;
  text-decoration: none;
}

.offcanvas-content .links ul li a:hover {
  background-color: #f5f5f5;
}

.overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.5); /* fond semi-transparent */ 
  display: none; 
  z-index: 998; 
} 

.overlay.active { 
  display: block; 
}

/* LINKS */

.link-container{
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.links{
  width: 85%;
  display: flex;
}

.links ul{
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  row-gap: 1rem;
  padding-left: 1rem;
  list-style: none;
}

.links ul li {
  position: relative;
  display: inline-block;
  margin-right: 1rem;
}

.links ul li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 15rem;
  z-index: 99;
}

.links ul li .dropdown li {
  display: block;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #f3f2f2;
}

.links ul li:hover .dropdown {
  display: block; 
}

.links ul li a{
  text-decoration: none;
  color: #555;
}

.user-tool{
  width: 15%;
  display: flex;
  justify-content: end;
  gap: 1rem;
}

.user-tool a {
  font-size: 1.5rem;
  color: #555;
}

.user-cart{
  position: relative;
  display: inline-block;
}

.user-cart a{
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
}

.cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 10px;
  min-width: 10px;
  height: 18px;
  border-radius: 50%;
  padding: 0 5px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-preview{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 20rem;
  padding: 1rem;
  z-index: 99;
}

.cart-preview h4{
  text-align: center;
  color: #555;
}

.cart-preview ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-preview ul li{
  border-bottom: 1px solid #fff;
  padding: .5rem;
  background-color: #555;
  color: #fff;
}

.cart-preview ul li:last-child {
   border-bottom: none; 
}


.user-cart:hover .cart-preview {
  display: block;
}

.cart-preview p{
  color: #555;
}

.user-account{
  position: relative;
  display: inline-block;
}


.user-info{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 15rem;
  padding: 1rem;
  z-index: 99;
}


.user-info .profile{
  background-color: #fafafa;
  box-shadow: 0 0 2rem #babbbc;
  animation: show-profile .5s forwards ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .2rem;
}

@keyframes show-profile {
  0%{width:0;}
  100%{width:100%;}
}

.photo{
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  border: 5px solid #fafafa;
  background-color: #fafafa;
  box-shadow: 0 0 0.5rem #babbbc;
  animation: rotate-photo .5s forwards ease-in-out;
  text-align: center;
}

@keyframes rotate-photo {
  from{
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.text{
  padding: .5rem;
}

.text h3, .text h4{
  letter-spacing: .5px;
  font-weight: 300;
  white-space: nowrap;
  font-family: "Raleway", sans-serif;
}

.user-info form{
  margin-top: .5rem;
}

.user-info form button{
  width: 100%;
  padding: .5rem;
  border: none;
  background-color: #ff4c4c;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color .3s ease-in-out;
}

.user-account:hover .user-info {
  display: block;
}

@media screen and (max-width: 768px) {
  .menu-phone{
    display: flex;
  }

  .container-upper .search-bar, .link-container{
    display: none;
  }

  .offcanvas{
    display: block;
  }
}
/* END HEADER */

/* FOOTER */

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 1rem 0;
}

/* END FOOTER */