/*
Theme Name: قالب اسراء 2026
Theme URI: 
Author: x-design
Author URI: https://www.x-des.com
Description: قالب اسراء حجاب من اكس ديزاين
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esraahijab2026
Tags: عمود واحد، ألوان إضافية، custom-menu، شعار مخصص، (CSS) للمحرّر، الصور البارزة، محرِّر الموقع، أنماط محرر المكوّنات، rtl-language-support، مقالة مثبتة، threaded-comments، translation-ready، مكوّنات واسعة، تنسيقات مُحرر المكوّنات، تنوعات التنسيقات، توفّر إمكانية الوصول، مدونة، معرض أعمال، الأخبار
*/
/* تصميم و تطوير نبيل عيسى */
/**
 * pagination styles 
 */
/* reaset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* .wp-block-query-pagination-numbers a, */

.wp-block-query-pagination-numbers > .page-numbers:not(.dots),
.wp-block-query-pagination > a,
.wp-block-query-pagination > a.page-numbers {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--wp--preset--color--base-2);
  border-radius: 8px;

  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.wp-block-query-pagination-numbers .page-numbers.current {
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--secondary);
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination a:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base-2);
}

/** form input border-color **/
.wc-block-product-filter-price-slider .text input[type="text"] {
  border-color: var(--wp--preset--color--contrast-2);
}

/**-------------------------------------- 
 * alternate image fade in on hover 
 *---------------------------------------*/
*/ .wc-block-components-product-image {
  display: none !important;
}

/* Ensure the parent list item is a positioning context */
.wc-block-product {
  position: relative;
  /* Optional: Ensure a consistent height for the product card itself if needed */
  /* height: 400px; */
}

/* Style the BACK image: make it absolute, layer it, and hide it */
.wc-block-product img.img-back {
  position: absolute;
  aspect-ratio: 450/500;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Let the height be natural */
  opacity: 0; /* Hidden by default */
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  z-index: 1;
  display: block !important; /* Ensure it overrides the display:none if inherited */
  pointer-events: none;
}

/* On hover of the main product card, reveal the back image */
.wc-block-product:hover img.img-back {
  opacity: 1; /* Fade in */
  visibility: visible;
  z-index: 2; /* Bring to the front on hover */
}
:where(.wp-block-search__input) {
  border-color: var(--wp--preset--color--contrast-3);
}
/* header in and out */
/* Add this to your CSS file */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  transition: all 300ms ease-in-out;
}

.site-header .site-logo img {
  transition: all 300ms ease-in-out;
}

/* .site-header.headroom--not-top.headroom--unpinned {
  transform: translateY(-100%);
} */
.header-animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    will-change: transform, opacity;
}
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.header-animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown;
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.header-animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp;
}
header.wp-block-template-part {
  display: contents;
}

body.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height);
}
.site-header .site-logo img {
  height: 110px;
  object-fit: contain !important;
  width: auto;
}
.site-header.headroom--not-top.headroom--pinned {
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.site-header.headroom--not-top .site-logo img {
  height: 75px;
}
@media (max-width: 768px) {
  .site-header .site-logo img {
    height: 75px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .site-header.headroom--not-top {
    top: 0;
  }
  .site-header .site-logo img {
    height: 75px;
  }
}
body {
  padding-top: var(--window-padding-top);
}

/** styling wordpress mobile navigation**/
@media (max-width: 1000px) {
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    .wp-block-navigation__submenu-container {
    padding: 0 2rem 0 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    li {
    width: 100%;
    display: block;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    a {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid
      color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  }
}
/** change wordpress nav block collapse size **/
/* تغيير نقطة التوقف لعرض القائمة الكاملة (مثلاً، فوق 1000 بكسل) */
@media (min-width: 1000px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important; /* إخفاء زر الهامبرغر */
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: block !important; /* إظهار القائمة الكاملة */
  }
}

/* تحييد نقطة التوقف الافتراضية لووردبريس (حوالي 600 بكسل) */
@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex; /* التأكد من أن زر الهامبرغر مرئي تحت 1000px وفوق 600px */
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none; /* التأكد من أن القائمة الكاملة مخفية تحت 1000px وفوق 600px */
  }
}

/** contact form styles **/
.wpcf7 form .wpcf7-response-output {
  margin: 2em 0.5em 1em;
  padding: 0.2em 1em;
  border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
  border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
  width: 100%;

  flex-direction: column;
  display: flex;
}
/* Target all text-like fields and textareas in CF7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
  max-width: 100%;
  font-family: inherit;
  padding: 12px;
  display: block;
  border: 1px solid var(--wp--preset--color--contrast); /* Uses theme contrast color */
  background-color: var(
    --wp--preset--color--base
  ); /* Uses theme background color */
  color: var(--wp--preset--color--contrast); /* Uses theme text color */
  border-radius: 4px;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 input[type="url"]::placeholder,
.wpcf7 input[type="number"]::placeholder,
.wpcf7 input[type="date"]::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--wp--preset--color--contrast-2); /* Uses theme text color */
}

/* Add a focus state using theme colors */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--wp--preset--color--contrast-2);
  outline: none;
}

/* Style the submit button using theme.json button styles */
.wpcf7-submit {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 12px 24px;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s all;
}
.wpcf7-submit:active {
  transform: translateY(2px);
}
.wpcf7-submit:hover {
  background-color: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--base-2);
}

/* Base transition for smooth state changes */
.wpcf7 input,
.wpcf7 textarea {
  transition: all 0.2s ease-in-out;
}

/* Hover State - Applies when the mouse is over the field */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 textarea:focus {
  outline-color: var(--wp--preset--color--contrast-2);
  outline-width: 2px;
  border-color: var(
    --wp--preset--color--contrast-2
  ); /* Change to your theme's hover slug */
  background-color: var(--wp--preset--color--base-2); /* Optional subtle tint */
}
/* classic checkout and cart styles */

#customer_details .col-1,
#customer_details .col-2 {
  width: 100%;
}
.woocommerce-page table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
}
.checkout.woocommerce-checkout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:root .woocommerce-cart main .woocommerce,
:root .woocommerce-checkout main .woocommerce {
  max-width: 100%;
}
.woocommerce-review-order-heading-wrapper {
  position: sticky;
  top: 0;
}

.cart-grid {
  flex-direction: column;
  display: flex;
  gap: 1rem;
}
.cart-grid .woocommerce-cart-form {
  width: 100%;
}
.cart-grid .cart-collaterals {
  flex: 1;
}
.woocommerce .cart-grid.cart-collaterals .cart_totals,
.woocommerce-page .cart-grid .cart-collaterals .cart_totals {
  width: 100%;
}
.woocommerce-cart-form .cart-quantity {
  display: flex;
  gap: 2px;
}
.woocommerce-cart-form .cart-quantity input {
  appearance: none;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--wp--preset--color--contrast); /* Uses theme contrast color */
  background-color: var(
    --wp--preset--color--base
  ); /* Uses theme background color */
  color: var(--wp--preset--color--contrast); /* Uses theme text color */
  border-radius: 4px;
}
.woocommerce-cart-form .cart-quantity button {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 4px 12px;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s all;
}

@media screen and (min-width: 991px) {
  .checkout.woocommerce-checkout {
    flex-direction: row;
  }
  .cart-grid .woocommerce-cart-form {
    width: 60%;
  }
  .cart-grid {
    flex-direction: row;
  }
}

.ltr {
  direction: ltr;
}
/* make price single line */
.wc-block-components-product-price del {
  font-weight: normal;
}
.wc-block-components-product-price ins,
.wc-block-components-product-price del {
  display: block;
}
/* buy now button */
.wsb-button {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  width: auto;
  margin: 0.5rem 0;
  width: fit-content;
  transition: 0.2s all;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.wsb-button:active {
  transform: translateY(2px);
}
.wsb-button:hover {
  background-color: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--base-2);
}
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single .add_to_wishlist,
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single{
  padding: 8px;
  display: inline-flex;
  background: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 8px;
  transition: 0.5s all;
  text-decoration: none;
  cursor: pointer;

}

:root .yith-wcwl-add-to-wishlist-button{
  --added-to-wishlist-icon-color:var(--wp--preset--color--contrast);
  --add-to-wishlist-icon-color:var(--wp--preset--color--contrast);
}
:root .yith-wcwl-add-to-wishlist-button:hover {
  --added-to-wishlist-icon-color:var(--wp--preset--color--base);
  --add-to-wishlist-icon-color:var(--wp--preset--color--base);
}
:root .yith-wcwl-add-to-wishlist-button:is(button):not(.yith-wcwl-theme-button-style){
  border-radius: 0.5rem;
  /* background-color: #fff; */
  padding: 0.5rem;
  transition: 0.5s all;
  outline-color: var(--wp--preset--color--contrast-2);
}
:root .yith-wcwl-add-to-wishlist-button:is(button):not(.yith-wcwl-theme-button-style):hover{
background-color:var(--wp--preset--color--base);
--added-to-wishlist-icon-color:var(--wp--preset--color--contrast);
--add-to-wishlist-icon-color:var(--wp--preset--color--contrast);
}
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single .add_to_wishlist:hover,
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single.yith-wcwl-add-to-wishlist-button--anchor:hover{
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);    
}

:root .wishlist_table .product-add-to-cart a{
  padding: 8px;
  display: inline-block !important;
}

:root .woocommerce table.variations tr td select{
  padding-top: 0;
  padding-bottom: 0;
  outline-color: var(--wp--preset--color--contrast);
}

input, select,textarea{
  font-family: inherit;
  color: inherit;
}
.wc-block-components-product-image .yith-wcwl-add-to-wishlist-button .yith-wcwl-add-to-wishlist-button__label{
  display: none;
}
.wc-block-components-product-image .yith-wcwl-add-to-wishlist-button{
  top: 0;
  right: 6px;
  left: auto !important;
}
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button:is(button){
  border-radius: 12px;
}

/*------------------ bottom bar----------------- */

#bottom-bar {
  --bottom-bar-shadow: 0 -10px 10px color-mix(in srgb, transparent, var(
    --wp--preset--color--contrast
  )
  5%);
  font-family: "Arad";
  background-color: var(--wp--preset--color--custom-header);
  box-shadow: var(--bottom-bar-shadow);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: 0.5s transform, 0.5s visibility, 0.5s opacity;
  a {
    text-decoration: none;
    font-weight: medium;
    color: var(--wp--preset--color--contrast);
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
    background-color: transparent;
    transition: color 0.5s, background-color 0.5s, padding 0.5s, font-size 0.5s;
    &:focus-visible,
    &:hover {
      background-color: hsl(
        from var(--wp--preset--color--contrast-2) h s l / 5%
      );
      color: var(--wp--preset--color--contrast-2);
    }
    &:active {
      background-color: hsl(
        from var(--wp--preset--color--contrast-2) h s l / 10%
      );
    }
    /* @media (width >960px) {
      padding: 16px;
      font-size: 16px;
    } */
  }
  @media (width >1000px) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
  }
}
#bottom-bar-spacer{
  display: none;
  height: var(--bottom-bar-height,80px);
  @media (width <1000px) {
    display: block;
  }
}

:root #chaty-widget-0 .chaty-widget{
  @media (width <1000px) {
    bottom: 80px;
  }
}
/* styling wodpress comments  and reviews form */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  border: 1px solid color-mix(in srgb,currentColor 30%,transparent);
  background-color: var(--wp--preset--color--custom-header);
  border-radius: .33rem;
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus{
  outline-color: var(--wp--preset--color--contrast-2);
  outline-offset: -1px;
  /* border-color: var(--wp--preset--color--contrast-2); */
  background-color: var(--wp--preset--color--base-2);;
}