/* Custom Header Styles */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

.preheader {
    position: relative;
    overflow: visible; /* Επιτρέπει στο dropdown να "ξεφύγει" */
}

.site-header {
    display: flex;
    justify-content: space-between; /* Spread the header content */
    align-items: center;
    width: 100%; /* Full width */
    margin: 0; /* Remove any margin */
    padding-top: 20px;
    padding-bottom: 20px;
    position: sticky;
    top: 0; /* Stick it to the top of the page */
    z-index: 1000; /* Ensure the header stays above other elements */
    background-color: white; /* Optional: Set background color to avoid transparency issues */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow for better visibility */
    transition: background-color 0.3s, transform 0.3s ease-in-out, padding 0.3s ease, height 0.3s ease;
    margin: auto; /* Center header within the page */
}

/* Ensuring the header is sticky on scroll */
.site-header.sticky {
    background-color: #fff; /* Ensure a solid background for visibility */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Optional: Make shadow more prominent when sticky */
}

/* Preheader and Category Header styling for animation */
.preheader, .category-header {
	font-family: 'comic sans ms', sans-serif !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
    position: sticky;
    top: 0; /* Stick preheader at the top */
    z-index: 10000; /* Ensure it stays above content */
    margin: auto; /* Center the header */
	text-align:center;
	background-color:black;
}

.preheader p {
    margin-bottom: 0px;
	color: white;
}

/* This class will be added to hide the elements on scroll */
.hidden-on-scroll {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute space between items */
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.site-icon img {
    max-width: 11rem !important;
    width: 11rem !important;
	transition: all 0.3s ease;
}

.site-header.shrink {
    padding-top: 5px;
    padding-bottom: 5px;
}

.site-header.shrink .site-icon img {
    max-width: 6rem !important;
    width: 6rem !important;
}

.header-search {   
    flex: 5; /* Allow search to take more space */
}

.header-search input {
	font-family: 'comic sans ms', sans-serif !important;
}

.search-field {
    width: 100%;
    padding: 8px 40px 8px 12px;
    font-size: 16px;
    border-radius: 0.3rem!important;
		margin-left: 0px!important;
}

.search-submit {
    position: absolute;
    right: 10px; /* Align button to the right inside input */
    top: 50%;
    transform: translateY(-50%);
    background: transparent!important;
    border: none;
    cursor: pointer;
    padding-right: 0px;
    padding-left: 0px;
}

.search-submit:hover {
    background: transparent; /* Ensure no background color on hover */
}

.search-icon {
    font-size: 18px;
    color: #666;
}

.search-form {
    position: static;
}

.header-cart {
    flex: 1; /* Cart takes less space */
    display: flex;
    justify-content: flex-start; /* Align cart to the right */
}

.header-cart a {
    font-size: 18px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.header-cart .cart-count {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    margin-left: 10px;
}

.container div {
	gap: 2rem;
}

.elementor-widget-image img {
	border-radius: 0.3rem!important;
} 

.e-con>.e-con-inner {
	gap: 0!important;
}

.e-con-inner div{
	padding-top: 0px!important;
	padding-bottom: 0px!important;
}
.elementor-element {
	padding: 0;
}

.elementor-25 .elementor-element.elementor-element-b94114b, .elementor-25 .elementor-element.elementor-element-77ca1bb {
	padding: 0px!important;
}

.elementor-25 .elementor-element.elementor-element-f9d7f5e ,.elementor-25 .elementor-element-0083abf {
	padding 0px!important;
}

.smart-slider .ss-slide {
    height: 500px !important; /* Change 500px to the height you want */
}

.header-user {
    font-size: 14px;
    position: relative;
}

.header-user .user-account {
    color: #333;
    text-decoration: none;
}

.header-user .user-account:hover {
    color: tan;
    text-decoration: none;
}

.header-user i.fas.fa-user {
    font-size: 24px;
}

.header-user .user-text {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
	gap: 0!important;
}

.header-user .account-label {
    font-size: 12px;
    color: #666;
}

.header-user .account-action {
    font-size: 14px;
    font-weight: bold;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 999;
    margin-top: 8px;
    overflow: hidden;
}

.user-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-dropdown ul li {
    border-bottom: 1px solid #eee;
}

.user-dropdown ul li:last-child {
    border-bottom: none;
}

.user-dropdown ul li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s;
}

.user-dropdown ul li a:hover {
    background: #f5f5f5;
}

.woocommerce div.product div.images {
    max-width: 500px; /* or any size you want */
    margin: 0 auto;
}

.custom-select-wrapper {
  color: black;
  position: relative;
  width: 200px;
  font-family: sans-serif;
  z-index: 1001;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  gap: 0px!important;
}

.custom-option {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.custom-option:hover {
  background-color: #f0f0f0;
}

.custom-select-wrapper.open .custom-options {
  display: flex;
}

.mobile-search {
	display: none;
}
/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
    .container div {
        gap: 0;
    }
    	
	 .preheader-translate {
		display: flex;
		flex-direction: row; /* ΣΕ ΜΙΑ ΓΡΑΜΜΗ */
		align-items: center;
		justify-content: center; /* Κέντρο */
		gap: 10px; /* Λίγο κενό ανάμεσα στις σημαίες */
	  }

	  .preheader-translate a {
		align-items: center;
		justify-content: center;
	  }

	  .preheader-translate a span {
		display: none; /* Κρύβει το όνομα χώρας */
	  }

	
    .preheader {
        font-size: 13px!important;
        position: relative; /* Fix the preheader at the top */
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        word-wrap: break-word;
        padding: 0!important;
        z-index: 1001; /* Ensure it stays above other elements */
    }

    /* Optionally adjust preheader padding on mobile */
    .preheader {
        padding: 10px 0; /* Reduce padding to fit better on small screens */
    }

    .site-header {
        position: sticky; /* Fallback to fixed position for mobile devices */
        top: 0; /* Ensure it sticks at the top */
        width: 100%; /* Full width */
        z-index: 1000; /* Ensure it stays above other elements */
        background-color: white; /* Ensure solid background */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        flex-wrap: nowrap; /* Prevent wrapping */
        display: flex;
        justify-content: space-between; /* Space out the elements */
    }

    .header-container {
        display: flex;
        justify-content: space-between; /* Distribute space between items */
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        flex-wrap: nowrap; /* Prevent wrapping */
    }
	
	.header-user {
		display: none!important;
	}
     /* Αρχικά κρύβουμε τη μπάρα αναζήτησης */
    .header-search {
        display: none;
        position: absolute;
        top: 100%; /* Βάζουμε την μπάρα ακριβώς κάτω από το header */
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 1000; /* Βεβαιωνόμαστε ότι θα είναι πάνω από άλλα στοιχεία */
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Προαιρετικό για σκιά */
		margin-left: 0px!important;
    }
    
    .mobile-search {
		display: block!important; 
		position: absolute;
        top: 100%; /* Βάζουμε την μπάρα ακριβώς κάτω από το header */
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 1000; /* Βεβαιωνόμαστε ότι θα είναι πάνω από άλλα στοιχεία */
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Προαιρετικό για σκιά */
		margin-left: 0px!important;
	}
	
    .burger-menu {
		order: 1;
    }
    /* Εμφάνιση της μπάρας αναζήτησης όταν είναι ενεργή */
    .header-search.active {
        display: block;
    }
	
    .search-field {
        font-size: 14px; /* Adjust font size */
        padding: 8px 30px 8px 10px; /* Adjust padding for better fit */
    }

    /**.site-icon, .header-cart {
        flex: 0 0 auto; /* Prevent wrapping and allow items to stay on the same line */
    /*}*/
	.site-icon {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.header-cart {
		position: absolute;
		right: 5%;
	}
    .site-icon img,.site-header.shrink .site-icon img {
        width: 5rem!important;
    }
	.header-search-icon {
		display:none;
	}
    /* Optional: Adjust header layout for very small screens (e.g., mobile) */
    .site-header {
        flex-direction: row; /* Ensure header content stays in a row */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-container {
        flex-direction: row;
        align-items: center; /* Align content on one line */
        width: 100%;
    }

    .site-icon {
        flex: 0 0 80px; /* Adjust icon size to fit better */
    }

    .header-cart {
        flex: 0 0 auto; /* Keep cart size as it is */
    }
}