.header-1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Left (button), Center (logo), Right (icons) */
  align-items: center; /* Vertical alignment */
  padding: 0.2vh 2vw; /* Reduced vertical padding for a shorter header */
  height: 100px; /* Fixed height for the header */
  width: 100%;
  box-sizing: border-box; /* Include padding in width */
  background-color: #110e15; /* Explicitly set background color */
}

.colaps {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  justify-self: start; /* Aligns to the start of its grid cell */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Color of the SVG icon */
}

/* Style for the SVG inside colaps */
.colaps .icon-cart svg {
    width: 30px; /* Make SVG larger */
    height: 30px;
}

/* Ensure the logo is properly aligned and sized within the header */
.header-1 .logo {
    justify-self: center; /* Centers the logo in its grid cell */
    display: flex; /* To center image inside if needed */
    align-items: center;
    justify-content: center;
}

.header-1 .logo img {
    height: 100px !important; /* Target height */
    max-height: 100px;
    width: auto; /* Maintain aspect ratio */
    max-width: 60vw; /* Ensure it doesn't overflow horizontally */
    object-fit: contain;
}

/* Responsive adjustment for smaller screens */
@media only screen and (max-width: 768px) {
  .header-1 .logo img {
      height: 50px !important; /* Smaller logo on mobile to prevent layout break */
  }
}

/* ACTIONS RIGHT (Auth + Icon) */
.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.auth-btn {
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-login {
    color: #fff;
}

.btn-login:hover {
    color: #29b6f6;
}

.btn-signup {
    background-color: #29b6f6;
    color: #000;
}

.btn-signup:hover {
    background-color: #1a96d4;
}

.profile-link {
    display: flex; /* Ensure profile link is always flex for consistency */
}

.btn-profile {
    background-color: #29b6f6 !important; /* Force blue */
    color: #000;
}

.btn-profile:hover {
    background-color: #1a96d4 !important; /* Force darker blue on hover */
}

.icon-applications {
    display: flex;
    align-items: center;
    gap: 5px;
}

.icon-applications a {
    color: white; /* Default color for application icon text */
    text-decoration: none; /* Remove underline */
}

.icon-applications a.active {
    color: #29b6f6; /* Culoarea albastră deschisă pentru linkul activ */
}

@media (max-width: 768px) {
    .auth-buttons {
        display: none; /* Hide auth buttons on mobile, keep icon */
    }
}


/* Adjust general 'div' styles that might be affecting header elements */
.header-1 div {
  padding: 0; /* Reset padding that might be inherited from generic header-1 div rule */
}

/* If .side-nav is now a direct sibling of header-1 in HTML,
   its positioning (absolute) still needs to be accurate relative to the viewport.
   This should already be handled by its absolute positioning if top: 10vh is used.
*/