/*
Theme Name:   Xstore child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

/*Try it functionality styles*/

html, body {
    margin: 0;
    padding: 0;
}

footer {
    margin-bottom: 0;
}

.site-footer {
    padding-bottom: 0;
}

#try-it-button{
	margin-bottom:10px
}
/* Modal styling */

.try-it-modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* Modal content */
.try-it-modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
}

/* Close button positioning */
.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

/* Flex container to align fields and image side by side */
.try-it-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Form fields container */
.form-fields {
  flex: 1;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Skin tone and nail shape boxes inside form fields */
.skin-tone-box, .nail-shape-box {
  /*display: flex;*/
  align-items: center;
  justify-content: space-between;
}

/* Select box styling */
select {
  padding: 0 8px;
  font-size: 16px;
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
}

/* Image display container */
.image-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #ddd;
}

/* Image styling */
.try-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

/* Loader styling */
.loader {
  display: none; /* Hide loader by default */
}

.loader img {
  width: 50px;
  height: 50px;
}

button#proceed-button,
button#close
{
    border: 2px solid var(--et_btn-bg-color-hover);
}
.try-it-modal-content h4{
	text-align: center;
	margin-bottom: 15px
}

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

html[lang="ar"] body {
direction: rtl;
text-align: right;
font-family: 'Tajawal', sans-serif;
}


html[lang="ar"] .elementor-element.elementor-element-55e00960.elementor-align-right.elementor-mobile-align-center.elementor-widget.elementor-widget-button {
    text-align: left;
}

html[lang="ar"] .elementor-element.elementor-element-28ba5987.elementor-align-left.elementor-mobile-align-center.elementor-widget.elementor-widget-button, 
html[lang="ar"] .elementor-element.elementor-element-08ad070.elementor-align-left.elementor-widget.elementor-widget-etheme_advanced_headline, html[lang="ar"] .elementor-element.elementor-element-94e0b88.elementor-align-left.elementor-widget.elementor-widget-etheme_advanced_headline, 
html[lang="ar"] .elementor-element.elementor-element-525a71a.elementor-align-left.elementor-widget.elementor-widget-etheme_advanced_headline, 
html[lang="ar"] .elementor-element.elementor-element-e489d08.elementor-widget.elementor-widget-text-editor
html[lang="ar"] .elementor-element.elementor-element-5ffb032.elementor-align-left.elementor-widget.elementor-widget-etheme_advanced_headline,
html[lang="ar"] .elementor-element.elementor-element-5ffb032.elementor-align-left.elementor-widget.elementor-widget-etheme_advanced_headline{
    text-align: right;
}  

.mobile-menu .pll-parent-menu-item a{
pointer-events:auto !important;
}

.mobile-menu .pll-parent-menu-item{
z-index:9999;
}