/*
Theme Name: XECOM
Theme URI: https://www.xecomtheme.com
Author: XECOM TEAM
Author URI: https://www.xecomtheme.com
Description: fast and easy woocommerce theme.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-header, custom-background, custom-menu, etc.
Text Domain: xecom
*/


/* In your global CSS file (e.g., styles.css) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hide scrollbar for WebKit-based browsers (Chrome, Safari) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/*:root {*/
    
  /*Header bg*/
/*  --header-color:rgb(255, 255, 255);*/
  /*Headings color*/
/*  --heading-color: black;*/
  /*Text color*/
/*  --primary-color: rgb(0, 0, 0);*/
  /*Rating color*/
/*  --svg-icons: #ffc107;*/
  /*Top theme line color*/
/*  --Bold_Border-bg: #fabb00;*/
  /*FOOTER BACKGROUND*/
/*  --footer-color: #FAFAFA;*/
  /*Second text*/
/*  --white-text: white;*/
  /*BORDER COLOR*/
/*  --Color_Gray: #f4f4f4;*/
  /*Color Change Sle*/
/*  --background-color: #fffff;*/

/*}*/




body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--body-bg) !important;
  color: var(--primary-color);
}
.header-color{
  background-color: var(--header-color);
}
.heading_color {
  color: var(--heading-color) !important;
}

.bg-hilight {
  background-color: var(--background-color) !important;
  color: var(--body-bg);
}

.Bold_Border-bg {
  color: var(--Bold_Border-bg) !important;
}

.footer-color {
  background-color: var(--footer-color) !important;
  color: var(--primary-color) !important;
}

.Hover_Color:hover {
  color: var(--background-color) !important;
}

.Hover_ColorOutline:hover {
  outline-color: var(--background-color) !important;
}
.icon-color{
  background-color: #FAFAFA;
}
.poromotion_Color{
  background-color: var(--poromotion_bg) !important;
  color: white !important;
}
.Outline_Color {
outline:none !important;
}
.Outline_Color:hover {
border:1px solid !important;
border-color: var(--background-color) !important;
}

.color_text-white {
  color: var(--white-text);
}

.secondary-color {
  background-color: var(--Color_Gray);
}

.secondary-color-2 {
  color: var(--background-color);
}

.secondary-color-outline {
  outline-color: var(--background-color);
}

.Bold_Border-bg {
  border-color: var(--Bold_Border-bg);
  color: var var(--primary-color) !important;
}

.Bold_Border-bg_BackGround {
  background-color: var(--Bold_Border-bg);
  /* color:var var(--primary-color) !important; */
}

.Gray-Color {
  color: var(--Color_Gray) !important;
}

.secondary-button:hover {
  background-color: var(--white-text) !important;
  color: var(--background-color) !important;
}


/*CSS For image hover effect on single product page*/
.My_Component * {
  box-sizing: border-box;
}
.img-zoom-result {
  position: relative;
  overflow: hidden;
}

.img-zoom-result img {
  transition: transform 0.3s ease; /* Smooth zoom effect */
  height: 100%;
  object-fit: cover;
}

.img-zoom-result.zoom img {
  transform: scale(2); /* Adjust zoom level as needed */
  transform-origin: top left; /* Adjust origin for zoom effect */
}


.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@keyframes bounceX {

  0%,
  100% {
    transform: translateX(0) !important;
  }

  50% {
    transform: translateX(5%) !important;
  }
}

.bounce-x {
  animation: bounceX 1s ease-in-out infinite;
}

#myresult img{
    width: -webkit-fill-available;
    height: 100% !important;
}
#myresult2 img{
    width: -webkit-fill-available;
    height: 100% !important;
}

.img-zoom-result.zoom::after {
  background-position: var(--bg-pos-x) var(--bg-pos-y) !important;
}

/*CSS For header menu veritical alignment*/
#menu-main-menu, #menu-header-menu {
  display: flex;
  flex-direction: row;
}

#menu-main-menu li, #menu-header-menu li {
  margin-right: 20px;
}

@media(max-width:768px) {
  #menu-main-menu, #menu-header-menu {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
  }

  #menu-main-menu li, #menu-header-menu li {
    margin-right: 10px;
  }
}


.search-results-page {
  margin-top: 50px;
}

.custom-logo {
  width: 70% !important;
}
.Html_Theme_border{
    border-color: var(--Color_Gray) !important;
}
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.woocommerce {
  width: 75% !important;
  margin: 7rem auto !important;
  padding-top: 0 !important;
}

@media(max-width:1278px) {

  .wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart,
  .woocommerce {
    width: 95% !important;
  }
}

.wc-block-cart__submit-container,
.wc-block-components-checkout-place-order-button {
  background-color: var(--background-color) !important;
  color:var(--white-text) !important;
  border-radius: 5px !important;
}

.wc-block-checkout__actions_row a:hover {
  color: var(--background-color) !important;
  text-decoration: underline !important;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.woocommerce-Input {
  outline: 1px solid !important;
  border-radius: 5px !important;
  padding: 4px !important;
}

.button,
.wp-block-button__link {
  text-align: center !important;
  width: 90% !important;
  margin: auto !important;
  background: var(--background-color) !important;
  color: var(--white-text) !important;
  margin-top: 10px !important;
  border-radius: 2px !important;
}

.button:hover,
.wp-block-button__link:hover {
  outline: 1px solid var(--background-color) !important;
  background: var(--white-text) !important;
  color: var(--background-color) !important;
}

.product,
.wc-block-grid__product {
  text-align: center !important;
  border: 1px solid var(--Color_Gray) !important;
  border-radius: 2px !important;
  padding-bottom: 20px !important;
}

.product:hover,
.wc-block-grid__product:hover {
  border: 2px solid var(--background-color) !important;
}

.onsale,
.wc-block-grid__product-onsale {
  display: none !important;
}


@media (min-width: 1024px) {
  .lg\:Html_Theme_flex-row {
      flex-direction: row;
  }
}
/* General styles */
.custom-logo {
  margin: auto;
}

/* Media query for screens 1024px and wider */
@media (min-width: 1024px) {
  .custom-logo {
    margin: 0;
  }
}

.Html_Theme_flex-col {
  flex-direction: column;
}
/* Default margin for mobile devices */
.Header_Margin {
  margin-bottom: 17%;
}

/* For tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .Header_Margin {
    margin-bottom: 5%;
  }
}

@media (min-width: 1024px) {

  .Header_Margin {
    margin-bottom: 17%;
  }
}
.svg_icon_color{
  fill: var(--svg-icons) !important;
}
.Header_Footer_text{
    color: var(--Header_Footer_text) !important;
}


.single_add_to_cart_button, .wc-buy-now-btn, .checkout-button, .button{
    border: 1px solid !important;
    background-color: var(--background-color) !important;
    padding: 10px 0px !important;
    border-radius: 5px !important;
    font-weight: 700;
    
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce .form-row select {
    border: 1px solid !important;
    border-color: var(--Color_Gray) !important; 
    padding: 5px 10px !important;
    border-radius: 3px !important;
}
/* Target all WooCommerce input text fields */
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    border-color: var(--background-color) !important; /* Change border color to red when active */
}
.coupon{
    display: flex !important;
}
.coupon input{
    margin-right: 20px !important;
    border: 1px solid !important;
    border-color: var(--Color_Gray) !important;
    width: 150px !important;
    height: 37px !important;
    margin-top: 10px !important;
}

.cart_item .product-thumbnail{
    width: 10% !important;
}
#place_order, .return-to-shop .wc-backward, .checkout-button, .button{
    width: 100% !important;
    padding: 10px 0px !important;
    
}
/*.archive-add-to-cart-button{*/
/*    margin: 10px 0px !important;*/
/*}*/
.archive-add-to-cart-button {
    display: flex;
    flex-direction: column !important;
    gap: 5px !important;
    width: 90% !important;
    margin: auto !important;
}
.archive-add-to-cart-button .add_to_cart_button {
    flex: 1;
    padding: 7px 0px !important;
}
.archive-add-to-cart-button .added_to_cart{
    width: 100%; /* Ensure the added_to_cart link takes full width */
    text-align: center;
    padding: 7px 0px;
    box-sizing: border-box;
}
.archive-add-to-cart-button .archive-view-product-button{
  width: 100% !important;
  padding: 7px 0px !important;
  font-weight: 700 !important;
  font-size:medium !important;
  margin-top: 10px !important;
}
.coupon button{
    border: 1px solid !important;
    background-color: var(--background-color) !important;
    padding: 10px 30px !important;
    border-radius: 5px !important;
    font-weight: 700;
}
.qty{
    border: 1px solid !important;
    border-color:var(--Color_Gray) !important;
    padding: 5px !important;
    width: 10% !important;
    margin-top: 10px !important;
    border-radius: 3px !important;
}
.custom-cart-container .qty{
    width: 20% !important;
}
/*.custom-checkout-container .woocommerce-notices-wrapper{*/
/*    display:none !important;*/
/*}*/
.woocommerce-checkout-review-order-table:hover{
    border-color: var(--background-color) !important;
}
/*Cart page css*/
.product-name a, .woocommerce-Price-amount{
    color: var(--background-color) !important;
}

/*Woocommerce notice editing*/
.woocommerce-message{
    display: flex !important;
    flex-direction: column-reverse !important;
}
.woocommerce-notice-div{
    width: 75% !important;
    margin: auto !important;
}
@media(max-width:768px){
    .woocommerce-notice-div{
    width: 93% !important;
}
}

.custom-quantity-value{
    display: inline-block !important;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.cart .single_add_to_cart_button {
    display: inline-block !important;
    width: 81% !important;
}

@media(max-width: 1344px) {
    .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .cart .single_add_to_cart_button {
        width: 73% !important;
    }
}

@media(max-width: 330px) {
    .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .cart .single_add_to_cart_button {
        width: 67% !important;
    }
}

@media only screen and (max-width: 768px) {
    .Html_Theme_Gap_Product {
        margin-bottom: 15% !important;
    }
}

.woocommerce-variation-add-to-cart .wc-buy-now-btn,
.cart .wc-buy-now-btn {
    width: 100% !important;
}

.custom-quantity-value {
    margin-top: 15px !important; /* custom quantity button on single product.php CSS */
}

/* When screen width is greater than 1022px */
@media only screen and (min-width: 1023px) {
    #myresult2, #myresult2-gallery{
        display: none;
    }
    
    .Margin_Icon_Diiv {
        margin: 6rem auto !important;
    }
    
    .Html_Theme_Gap_Product {
        margin-bottom: 5%;
        gap: 2.5% 2% !important;
    }
    

}

/* When screen width is less than or equal to 1022px */
@media (max-width: 1022px) {
    #myresult, #myresult-gallery{
        display: none;
    }
    
    .Margin_Icon_Diiv {
        margin: 25% auto 15% auto !important;
    }
    
    .Html_Theme_Gap_Product {
        margin-bottom: 5%;
        gap: 1% 2% !important;
    }
    .My_Search_Result_good{
    margin-bottom:18% !important;
}
.Footer_Logo_Html{
    width:45% !important; 
    margin:auto !important;
}
}

.Image_down {
    display: flex;
    flex-direction: column;
}

.Image_Up {
    display: flex;
    flex-direction: column-reverse;
}
@media (min-width: 1024px) {
  .Product_width {
    width: 83% !important;
  }
}

/*.Template_Image_Div_Unidue{*/
/*  height: 175px;*/
/*  overflow: hidden;*/
/*}*/

.Template_Image_Div_Unidue img ,  .Template_Image_Div_Unidue2 img, .Template_Image_Div_Unique_Style_Four img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/*@media (max-width: 639px) { */
/*  .Template_Image_Div_Unidue {*/
/*    height: 263px; */
/*  }*/
  
/*  .Template_Image_Div_Unidue2 {*/
/*    height: 220px; */
/*  }*/
/*}*/

@media (max-width: 640px) { 
  .Template_Image_Div_Unidue {
    height: 189px !important; 
  }
     .Template_Image_Div_Unidue2 ,.Template_Image_Div_Unique_Style_Four {
       height: 215px !important ;
   }
  
}
   .Template_Image_Div_Unidue2  {
    height: 240px;
   }
   .Template_Image_Div_Unique_Style_Four  {
    height: 270px;
   }
  .Template_Image_Div_Unidue {
    height: 269px;
  }

.Sales_And_Discounts_Unique{
  display: flex;
}

@media (max-width: 1027px) {
 .Sales_And_Discounts_Unique{
    display: none !important;
  }
}
.custom-page-title {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}
/*for regular price color*/
#regular-price .woocommerce-Price-amount{
  color: gray !important;
}

/*wocommerece notices css*/
.woocommerce-info, .woocommerce-message, #payment{
    background-color: var(--Bold_Border-bg) !important;
    border-top-color: var(--background-color) !important;
}
.woocommerce-info::before, .woocommerce-message::before {
    color: var(--background-color) !important;
}
.payment_box{
    background-color: #dcd7e340 !important;
}
.payment_box::before{
    border: 1em solid #dcd7e340 !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    position: absolute !important;
    top: -.75em !important;
    left: 0 !important;
    margin: -1em 0 0 2em !important;
}
.Header_Second_LI_UNIQUE{
    display:flex;
    width:80%;
    border-left:1px solid #E8E8E8;
    padding:auto 0 !important;
}
.Header_First_LI_UNIQUE{
    width:20% !important ;
}
.Header_PROMOTION_LI_UNIQUE{
flex-direction:row !important;
align-items:center !important;
gap:1% !important;
}
.Sales_And_Discounts_Unique{
    justify-content:end !important;
}
.Header_MAin{
    padding:15px 13% !important;
    align-items:center !important;
}
@media only screen and (max-width:700px){
    .Header_MAin{
        padding: 7px 5% !important;
    }
        .Header_First_LI_UNIQUE{
    width:55% !important ;
    }
}
.Sticky_Product_icon{
    width:3% !important;
}
#myresult {
    text-align: center;
    margin-bottom: 20px;
}

#myresult, #myresult2 {
    width: 100%; /* Adjust as needed */
    height: 500px; /* Adjust as needed */
    overflow: hidden; /* Hide overflow to maintain container size */
    position: relative; /* Position relative for z-index if needed */
}
.HEIGHT_OVERFLOW_SCROLL{
    height:87vh;
}
@media(max-width: 768px){
    #myresult, #myresult2 {
    height: 600px; /* Adjust as needed */
}
.HEIGHT_OVERFLOW_SCROLL{
    height:auto !important;
}
}
/* Make the image cover the container without resizing it */
#currentImage, #currentImage2 {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    object-fit: cover; /* Ensure the image covers the container */
    object-position: center; /* Center the image */
}
.product-gallery-images {
    display: flex;
    flex-wrap:wrap;
    margin-top:1% !important;
    gap: 10px;
    justify-content: center;
}

.product-gallery-images .gallery-image {
    width: 100px;
    cursor: pointer;
    border: 2px solid #ccc;
    transition: border-color 0.3s ease;
}

.product-gallery-images .gallery-image:hover {
    border-color: #000;  /* Highlight the image on hover */
}
.product-gallery-images img {
    width: 100%; /* Make the image take full width */
    height: 100%; /* Make the image take full height */
    object-fit: cover; /* Ensure the image covers the entire div */
    display: block;
}

   @media (min-width: 768px) {
	
	.Html_Theme_w-full {
	position:sticky;
	top:0px;
}
		
}
	
 /* toufik dev */  
 
 /* Ensure quantity and add to cart button are on the same line */
#Alone_Image_Own_Order div form {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center align items vertically */
    justify-content: space-between; /* Space between elements */
}

/* Optional: Adjust width of quantity input and button */
#Alone_Image_Own_Order div form .quantity {
    margin-right: 10px; /* Add some space between quantity and button */
}

/* Optional: Adjust button width for better mobile experience */
#Alone_Image_Own_Order div form .button {
    flex-grow: 1; /* Make button grow to fill space */
}

   
   @media only screen and (max-width: 767px) {
    header {
        direction: ltr !important;
    }
}

/* TOUFIK CODES */    
#Alone_Image_Own_Order .lg\:Html_Theme_block span {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* General input style */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select {
    border: 2px solid #d50000 !important;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* On focus */
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    border-color: #b83375 !important;
    box-shadow: 0 0 0 2px rgba(184, 51, 117, 0.3);
    outline: none;
}

/* Headings */
.woocommerce h3,
.order-review-heading {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
}

/* Coupon and order comments */
#coupon_code,
#order_comments {
    width: 100%;
}

/* Labels for better spacing */
.woocommerce form .form-row label {
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    display: inline-block;
}

/* Section background */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    background: #fbfbfb;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.cart_item .product-name img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.wc_payment_methods .wc_payment_method .payment_box {
    background-color: rgba(255, 255, 255, 0.25) !important;
    filter: brightness(1.33);
	font-weight:700;
	font-size:17px;
}

#payment ul {
    background-color: #f7f6f7;
}

#payment .place-order {
    background-color: #f7f6f7;
}

.wc_payment_method .payment_box p {
    color: #050000;
}

#payment .wc_payment_methods li {
    background-color: #f7f6f7;
}

.wc_payment_methods .wc_payment_method .payment_box {
    background-color: #f7f6f7 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #ffffff;
}

.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
    color: #ffffff;
}
.woocommerce-message {
    color: #ffffff !important;
}


/* Change the background color of the "Visit Cart" button */
.woocommerce-message .button.wc-forward {
    background-color: #ffffff !important; /* Change to your desired color */
    color: #000000 !important; /* Change text color if needed */
}
.Html_Theme_flex .Html_Theme_aligh-items-center .Header_MAin {
    display: none;
}

/* General styling for all devices */
#myresult-gallery .gallery-image {
    border-width: 1px !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* Optional: Media query for smaller screens (mobile) */
@media only screen and (max-width: 768px) {
#Alone_Image_Own_Order .Html_Theme_w-full .gallery-image{align-content
	border-width: 1px !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }
}#Alone_Image_Own_Order .Html_Theme_text-xl bdi {
    font-size: 33px;
}


#regular-price  {
    font-size: 30px;
    color: #727272;
    text-decoration: line-through;
    filter: brightness(1.3);
}



#Alone_Image_Own_Order .aligh-items-center .Html_Theme_flex h1 {
    font-size: 15px;
    font-weight: 700;
}