/*
Theme Name: Dar Sfifa Theme
Theme URI: https://darsfifa.ma
Author: Elmanoug Youssef
Author URI: https://upmedia.ma
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: darsfifa
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


body {
    /* background-color: #C79D63; */
    background-color: white;
}

/* notice bar styling */
.notice-bar {
    height: 30px;
    width: 100%;
    background-color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.notice-bar-text {
    /* color: wheat; */
    color: #fffffff7;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}


/* header image styling */
/* .header-img {
  height: 85vh;
} */

.menu ul {
  display: flex;
  /* width: 128%; */
  width: 100%;
  border: solid;
  justify-content: space-between;
}

.menu ul li {
  list-style: none;
}

.menu ul li * {
  color: slateblue;
  text-decoration: none;
}




/* the card styling */
.card-body.p-4 {
    height: 171px;
    overflow: hidden;
  }




/* new arrivals */
div.new-arrival-custom-class .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    color: white;
    background: violet;
}










/* styling of the products of archive-product____________________ */
/* the product cart container */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
  float: left;
  margin: 0 3.8% 2.992em 0;
    margin-left: 0px;
  padding: 0;
  position: relative;
  /* width: 22.05%; */
  margin-left: 0;
  border: solid 1px #2125290a;
  padding: 3px;
  border-radius: 10px;
  /* width: 25%; */
  width: 28.8%;
  box-shadow: 1px 1px 9px -8px black;
}
.woocommerce-page ul.products li.product, 
.woocommerce ul.products li.product {
  /* width: 28.8%; */
}

/* the product image */
.woocommerce img, .woocommerce-page img {
  height: auto;
  max-width: 100%;
  border-radius: 6px;
}

/* the promotion notice square */
/* .woocommerce ul.products li.product .onsale */
.promo-label {
  top: 4px;
  left: auto;
  margin: 0.5em -.5em 0 0;
}
/* .woocommerce span.onsale  archive product promo label */
.promo-label {
  min-width: 3.236em;
  position: absolute;
  text-align: center;
  background-color: #b3af54;
  color: #fff;
  font-size: .857em;
  font-weight: 700;
  z-index: 9;
  padding: 3px 14px;
  width: fit-content;
} 

/* product page promo laber */
.promo-single-notice {
  font-weight: 700;
  position: absolute;
  text-align: center;
  top: 1.5em;
  margin: 0;
  background-color: #b3af54;
  color: #fff;
  font-size: .857em;
  z-index: 9;
  padding: 2px 20px;
  height: 35px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* the product title */
.woocommerce-loop-product__title {
  color: #977544;
  font-weight: bold;
  /* background: turquoise; */
}

/* the short product discreption (the_excerpt) */
 p {
 /* height: 44px;
  overflow: hidden;
  margin-bottom: 0; */
  opacity: 0.6;
  color: black;
} 

/* the add to cart button */
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
  background: #8e551e;
  color: white;
  width: 100%;
  text-align: center;
  box-shadow: 1px 1px 3px -2px black;
  border: solid 1px #00000026;
}









  /* checkout form styling */

/*display/hidding the vontact information*/
#contact-fields {
  display: none;
}


/* styling the custom logo */
.custom-logo {
  width: 90px;
  height: auto;
}

/* new arrivals styling */
.new-arrivals {
  background-color: #9f109f;
}





/* ------------------------------------- registration form styling/login form --------------------------------------- */

/* the form background for both forms */
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  /* border: 1px solid #cfc8d8; */
  border: 1px solid #cfc8d824;
  padding: 20px;
  text-align: left;
  border-radius: 5px;
  background: #eed9c994;
}

/* the form margin top */
#customer_login {
  margin-top: 40px;
}

/* se connecter button */
.woocommerce-button.button.woocommerce-form-login__submit {
  background: darkblue;
  border-radius: 20px;
  color: whitesmoke;
}

/* s'inscrire button */
.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit {
  background: darkblue;
  color: white;
  border-radius: 20px;
}

/* ---------------------------------------------------------------------------- */



/* -------------------- pass word oblier ------------------------------- */
/* margin of reset password page */
.woocommerce-ResetPassword.lost_reset_password {
  margin-top: 40px;
}
/* reset password btn */
.reset-pass-btn {
background-color: darkblue;
  color: white;
  border-radius: 20px;
}


/* ----------- mot de pass perdu ------------ */

.woocommerce-ResetPassword.lost_reset_password {
  padding: 32px;
  border: solid 1px #dcdcdc82;
  border-radius: 6px;
  background-color: #eed9c994;
}

/* the button styling */
.woocommerce-Button.reset-pass-btn.button {
  background: darkblue;
    background-color: darkblue;
    background-image: none;
  color: white;
}


 
/* styling the front page one product wrapper for the grid */
.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {
  /* max-width: 30.75%; */
  max-width: 28.8%;
}




/* the add coupon code btn styling in cart page */
.wc-block-components-totals-coupon-link {
  background: darkviolet;
  padding: 6px 15px;
  border-radius: 5px;
  color: white;
  font-size: 13px;
}
/* the checkout btn styling in cart page */
.wc-block-components-button__text {
  /* background: darkviolet; */
  background-color: green;
  color: white;
  text-decoration: none;
  padding: 11px 39px;
  border-radius: 7px;
  box-shadow: 1px 1px 6px -2px gray;
  font-weight: bold;
  font-size: 17px;
}



















/* checkout form styling fields */
.woocommerce-billing-fields {
  padding: 62px;
  background-color: #eee;
  width: 100%;
  border-radius: 4px;
  border: solid 2px #bfbfbf1c;
}
/* styling the inputs of the form */
#billing_address_1, 
#billing_city, 
#billing_phone, 
#billing_first_name {
  width: 100%;
  height: 3em;
  border-radius: 4px;
  border: solid 1px #cacaca;
  box-shadow: 1px 1px 1px -2px black;
  padding-left: 0.4em;
}


/* #billing_first_name_field {
  border: solid;
  width: 100%;
} */
/* the second section in checkout page */
.shop_table.woocommerce-checkout-review-order-table * {
  font-size: 14px;
  font-family: serif;
  color: gray;
}
/* the checkout order button */
#place_order {
  background: black;
  width: 100%;
}







/* ----------- footer links styling ----------- */ 
.footer-logo .custom-logo {
  /* border: solid blanchedalmond; */
  margin-top: 8px;
}

.footer-links .menu ul {
  display: flex;
  /* border: solid white; */
  justify-content: unset;
  flex-direction: column;
  height: 126px;
  flex-wrap: wrap;
  width: 250px;
  margin: 14px 0 0 -7px;
}

.footer-links .menu ul li {
  list-style: none;
}

.footer-links .menu ul li * {
  color: wheat;
  text-decoration: none;
}


/* contact info section */
.contact-section {
  display: flex;
  flex-direction: column;
}
.contact-section * {
  color: wheat;
}