.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-type-html{padding-bottom:0px;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-button[type="submit"]{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-27 .elementor-element.elementor-element-4b42ee6{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}/* Start custom CSS for form, class: .elementor-element-4b42ee6 */<div class="customer-info-form">	  <script>
		  !function(f,b,e,v,n,t,s)
		  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
		  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
		  n.queue=[];t=b.createElement(e);t.async=!0;
		  t.src=v;s=b.getElementsByTagName(e)[0];
		  s.parentNode.insertBefore(t,s)}(window, document,'script',
		  'https://connect.facebook.net/en_US/fbevents.js');
		  fbq('init', '1267467473442272');
      fbq('track', 'PageView');
      fbq('track', 'ViewContent');
	  </script>
	  <noscript><img height='1' width='1' style='display:none'
	  src='https://www.facebook.com/tr?id=1267467473442272&ev=PageView&noscript=1'
	  /></noscript>			
			  <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
  <!-- Add this script after including jQuery -->
		  <script>
	// Function to send order data via AJAX
	function sendOrderData(name, phone, productTitle, productPrice, productId) {
	  // Create a new FormData object
	  const formData = new FormData();
	  formData.append('name', name);
	  formData.append('phone', phone);
	  formData.append('productTitle', productTitle);
	  formData.append('productPrice', productPrice);
	  formData.append('productId', productId);
  
	  // Create an AJAX request
	  const xhr = new XMLHttpRequest();
	  xhr.open('POST', 'https://magaztk.com/wp-content/plugins/codwoo4.2/abondoned_script.php'); // Replace with the actual path to abondoned_script.php
  
	  // Handle the response
	  xhr.onload = function () {
		if (xhr.status === 200) {
		  // The order was created successfully
		  console.log('Order created successfully.');
		} else {
		  // There was an error creating the order
		  console.log('Error creating order: ' + xhr.status);
		}
	  };
  
	  // Send the form data
	  xhr.send(formData);
	}
  
	// Function to handle phone input blur event
	function phoneInputBlur() {
		var orderDelay = 20000;
            orderDelay = 30000; 
        	
	  var phoneInput = document.getElementById('phone');
    // Get the values of name, phone, product title, product price, and product ID from the form
    const name = $("#name").val();
    const phone = $("#phone").val();
    const productTitle = "Breatify للتخلص من رائحة الفم الكريهة";
    const productPrice = "90";
    const productId = "3642";
	var regEx = /^[\+]?[(]?[0-9\u0660-\u0669\u06F0-\u06F9]{3}[)]?[-\s\u0660-\u0669\u06F0-\u06F9\.\d]?[0-9\u0660-\u0669\u06F0-\u06F9]{3}[-\s\u0660-\u0669\u06F0-\u06F9\.\d]?[0-9\u0660-\u0669\u06F0-\u06F9]{4,6}$/;
    // Log the data to the console
    console.log("Name:", name);
    console.log("Phone:", phone);
    console.log("Product Title:", productTitle);
    console.log("Product Price:", productPrice);
    console.log("Product ID:", productId);

    // Check if the phone input is set and wait 10 seconds before sending the data
	
    if (regEx.test(phoneInput.value) && phone.trim() !== "" && name.trim() !== "") {
      setTimeout(function () {
        sendOrderData(name, phone, productTitle, productPrice, productId);
      }, orderDelay); // 10 seconds delay
    }
  }

  // Attach the phoneInputBlur function to the phone input's onblur event
  $(document).ready(function () {
    $("#phone").on("blur", phoneInputBlur);
  });
</script>
  		<form method="post" action="" id="productForm" class="target-elements">
    <p style="text-align: center; font-size:20px; font-family: 'Cairo', sans-serif;"><b> 
	   للطلب المرجو ملء الإستمارة	</b></p>
          <style>
      label[for="name"]::before {
        content: "\1F464"; /* Unicode character for person icon */
        margin-right: 5px;
      }
      label[for="phone"]::before {
        content: "\260E"; /* Unicode character for phone icon */
        margin-right: 5px;
      }
      label[for="address"]::before {
        content: "\1F3E0"; /* Unicode character for house icon */
        margin-right: 5px;
      }
      label[for="city"]::before {
        content: "\1F4CD"; /* Unicode character for cityscape icon */
        margin-right: 5px;
      }
    
/* Style for the container holding the variation boxes */
.variation-boxes {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}


/* Style for each individual variation box */
.variation-box {
    cursor: pointer;
    padding: 5px;
	border-color: #0ea5e9; /* Use a green border color on the top side */
border-style: solid;
    border-width: 1px;
border-radius: 5px;
    background-color: #fff;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 50px; /* Adjust the width of each box as needed */
    text-align: center;
}

/* Style when hovering over a variation box */
.variation-box:hover {
    background-color: #f0f0f0; /* Change to the desired hover background color */
    transform: scale(1.05); /* Add a slight zoom effect on hover */
}

/* Style for the variation name */
.variation-name {
    font-weight: bold;
}

/* Style for the variation price */
.variation-price {
    color: #008001; /* Change to the desired text color for the price */
}

.first-attribute-container {
    display: contents;
  
}

.second-attribute-container {
    display: flex;
    gap: 10px;
    
}

    </style>
              <div id="variation-options">
            <label>
                إختر النوع            </label>
            <p id="variation-error" style="color:red; display:none;margin: 12px 0 0 0;">❌ اختر النوع من فضلك</p>
            <div class="variation-boxes" style="margin-bottom: 15px;">
                <div class="first-attribute-container"><div class="variation-box" data-attribute-value="l"><span class="variation-name">l</span></div><div class="variation-box" data-attribute-value="m"><span class="variation-name">m</span></div><div class="variation-box" data-attribute-value="s"><span class="variation-name">s</span></div><div class="variation-box selected" data-attribute-value="xl"><span class="variation-name">xl</span></div></div><div class="second-attribute-container"></div><input type="hidden" class="variation-pair" data-first-attribute-value="l" data-second-attribute-value="" data-variation-id="4664"><input type="hidden" class="variation-pair" data-first-attribute-value="m" data-second-attribute-value="" data-variation-id="4665"><input type="hidden" class="variation-pair" data-first-attribute-value="s" data-second-attribute-value="" data-variation-id="4666"><input type="hidden" class="variation-pair" data-first-attribute-value="xl" data-second-attribute-value="" data-variation-id="4667">
                <script>
                document.addEventListener('DOMContentLoaded', function () {
                  var firstAttributeBoxes = document.querySelectorAll('.first-attribute-container .variation-box');
                  var secondAttributeBoxes = document.querySelectorAll('.second-attribute-container .variation-box');

                  firstAttributeBoxes.forEach(function (box) {
                    box.addEventListener('click', function () {
                      // Remove the 'selected' class from all boxes in the same container
                      firstAttributeBoxes.forEach(function (otherBox) {
                        otherBox.classList.remove('selected');
                      });

                      // Add the 'selected' class to the clicked box
                      box.classList.add('selected');

                      // Check if a pair of attribute values is selected
                      updateSelectedVariation();
                    });
                  });

                  secondAttributeBoxes.forEach(function (box) {
                    box.addEventListener('click', function () {
                      // Remove the 'selected' class from all boxes in the same container
                      secondAttributeBoxes.forEach(function (otherBox) {
                        otherBox.classList.remove('selected');
                      });

                      // Add the 'selected' class to the clicked box
                      box.classList.add('selected');

                      // Check if a pair of attribute values is selected
                      updateSelectedVariation();
                    });
                  });

                  function updateSelectedVariation() {
                    var selectedFirstAttributeBox = document.querySelector('.first-attribute-container .variation-box.selected');
                    var selectedSecondAttributeBox = document.querySelector('.second-attribute-container .variation-box.selected');
                    var selectedVariationPair;
                    // If one or both attributes are selected, hide the error message
    if (selectedFirstAttributeBox || selectedSecondAttributeBox) {
        document.getElementById('variation-error').style.display = 'none';
    }

                    if (selectedFirstAttributeBox && selectedSecondAttributeBox) {
                      // If both attribute boxes are selected, find the corresponding variation pair
                      selectedVariationPair = document.querySelector('.variation-pair[data-first-attribute-value="' + selectedFirstAttributeBox.getAttribute('data-attribute-value') + '"][data-second-attribute-value="' + selectedSecondAttributeBox.getAttribute('data-attribute-value') + '"]');
                    } else if (selectedFirstAttributeBox) {
                      // If only the first attribute box is selected, find the corresponding variation pair
                      selectedVariationPair = document.querySelector('.variation-pair[data-first-attribute-value="' + selectedFirstAttributeBox.getAttribute('data-attribute-value') + '"]');
                    } else if (selectedSecondAttributeBox) {
                      // If only the second attribute box is selected, find the corresponding variation pair
                      selectedVariationPair = document.querySelector('.variation-pair[data-second-attribute-value="' + selectedSecondAttributeBox.getAttribute('data-attribute-value') + '"]');
                    }

                    if (selectedVariationPair) {
                      // If a variation pair is found, update the selected variation ID and price
                      var productVariationInput = document.getElementById('product_variation');
                      productVariationInput.value = selectedVariationPair.getAttribute('data-variation-id');
                      updatePrice(getQuantityValue());
                    }
                  }
                  document.getElementById('productForm').addEventListener('submit', function(event) {
                    var selectedFirstAttributeBox = document.querySelector('.first-attribute-container .variation-box.selected');
                    var selectedSecondAttributeBox = document.querySelector('.second-attribute-container .variation-box.selected');

                    // If neither variation is selected, prevent form submission and show the error message
                    if (!selectedFirstAttributeBox && !selectedSecondAttributeBox) {
                      event.preventDefault();
                      document.getElementById('variation-error').style.display = 'block';
                    }
                  });
                });
                </script>
            </div>
        </div>

        <input type="hidden" id="product_variation" name="product_variation" value="4667">

        <script>
        document.addEventListener('DOMContentLoaded', function () {
          var firstAttributeBoxes = document.querySelectorAll('.first-attribute-container .variation-box');
          var secondAttributeBoxes = document.querySelectorAll('.second-attribute-container .variation-box');

          firstAttributeBoxes.forEach(function (box) {
            box.addEventListener('click', function () {
              // Remove the 'selected' class from all boxes in the same container
              firstAttributeBoxes.forEach(function (otherBox) {
                otherBox.classList.remove('selected');
              });

              // Add the 'selected' class to the clicked box
              box.classList.add('selected');

              // Check if a pair of attribute values is selected
              updateSelectedVariation();
            });
          });

          secondAttributeBoxes.forEach(function (box) {
            box.addEventListener('click', function () {
              // Remove the 'selected' class from all boxes in the same container
              secondAttributeBoxes.forEach(function (otherBox) {
                otherBox.classList.remove('selected');
              });

              // Add the 'selected' class to the clicked box
              box.classList.add('selected');

              // Check if a pair of attribute values is selected
              updateSelectedVariation();
            });
          });

          function updateSelectedVariation() {
            var selectedFirstAttributeBox = document.querySelector('.first-attribute-container .variation-box.selected');
            var selectedSecondAttributeBox = document.querySelector('.second-attribute-container .variation-box.selected');
            var selectedVariationPair;

            if (selectedFirstAttributeBox && selectedSecondAttributeBox) {
              // If both attribute boxes are selected, find the corresponding variation pair
              selectedVariationPair = document.querySelector('.variation-pair[data-first-attribute-value="' + selectedFirstAttributeBox.getAttribute('data-attribute-value') + '"][data-second-attribute-value="' + selectedSecondAttributeBox.getAttribute('data-attribute-value') + '"]');
            } else if (selectedFirstAttributeBox) {
              // If only the first attribute box is selected, find the corresponding variation pair
              selectedVariationPair = document.querySelector('.variation-pair[data-first-attribute-value="' + selectedFirstAttributeBox.getAttribute('data-attribute-value') + '"]');
            } else if (selectedSecondAttributeBox) {
              // If only the second attribute box is selected, find the corresponding variation pair
              selectedVariationPair = document.querySelector('.variation-pair[data-second-attribute-value="' + selectedSecondAttributeBox.getAttribute('data-attribute-value') + '"]');
            }

            if (selectedVariationPair) {
              // If a variation pair is found, update the selected variation ID and price
              var productVariationInput = document.getElementById('product_variation');
              productVariationInput.value = selectedVariationPair.getAttribute('data-variation-id');
              updatePrice(getQuantityValue());
            }
          }
        });
        </script>
        <style>
            .variation-box.selected {
                border-width: 3px; 
		  
      background-color: rgba(14,165,233, 0.2);
            }
            </style>
<style>




#name, #phone, #address, #city, select#city {
    padding-right: 45px;
    padding-left: 15px;
    text-align: right;
    direction: rtl;
    background-size: 20px;
    border-radius: 5px;
    height: 3.1rem;
    width: 100%;
    border: 1px solid #ccc; /* Add consistent border */
    -webkit-appearance: none; /* Remove default select styling */
    -moz-appearance: none;
    appearance: none;
}

select#city {
    background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' viewBox='0 0 46.05 50.86' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-171.3 -284.5)'><rect x='171.3' y='284.5' width='44.82' height='50.86' ry='0' fill='%23e1e1e1'/><rect x='216.1' y='284.5' width='1.229' height='50.86' fill='%230ea5e9'/><g transform='matrix(.8547 0 0 .8547 184 299.8)' fill='%231a1a1a'><path d='m12 2c-4.2 0-8 3.22-8 8.2 0 3.18 2.45 6.92 7.34 11.23 0.38 0.33 0.95 0.33 1.33 0 4.88-4.31 7.33-8.05 7.33-11.23 0-4.98-3.8-8.2-8-8.2zm0 10c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z' fill='%230ea5e9'/></g></g></svg>") no-repeat calc(100%) center;
    cursor: pointer;
}

#name {
    background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' viewBox='0 0 46.05 50.86' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-171.3 -284.5)'><rect x='171.3' y='284.5' width='44.82' height='50.86' ry='0' fill='%23e1e1e1'/><rect x='216.1' y='284.5' width='1.229' height='50.86' fill='%230ea5e9'/><path d='m194.3 309.9c2.111 0 3.82-1.71 3.82-3.82s-1.71-3.82-3.82-3.82-3.82 1.71-3.82 3.82 1.71 3.82 3.82 3.82zm0 1.91c-2.55 0-7.641 1.28-7.641 3.82v0.9551c0 0.5253 0.4298 0.9551 0.9551 0.9551h13.37c0.5253 0 0.9551-0.4298 0.9551-0.9551v-0.9551c0-2.541-5.091-3.82-7.641-3.82z' fill='%230ea5e9'/></g></svg>") no-repeat;
    background-position: calc(100% ) center;
}
#phone {
    background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' viewBox='0 0 46.05 50.86' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-171.3 -284.5)'><rect x='171.3' y='284.5' width='44.82' height='50.86' ry='0' fill='%23e1e1e1'/><rect x='216.1' y='284.5' width='1.229' height='50.86' fill='%230ea5e9'/><path d='m200.6 312.8-2.233-0.2549c-0.5362-0.0615-1.064 0.123-1.441 0.501l-1.617 1.617c-2.487-1.266-4.527-3.296-5.792-5.792l1.626-1.626c0.378-0.378 0.5625-0.9053 0.501-1.441l-0.2549-2.215c-0.1055-0.8878-0.8526-1.556-1.749-1.556h-1.521c-0.9932 0-1.819 0.8262-1.758 1.819 0.4658 7.506 6.469 13.5 13.97 13.97 0.9932 0.0615 1.819-0.7647 1.819-1.758v-1.521c9e-3 -0.8877-0.6592-1.635-1.547-1.74z' fill='%230ea5e9'/></g></svg>") no-repeat 10px center;
    background-position: calc(100%) center;
    margin-bottom: 1rem;

  }

#address {
    background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' viewBox='0 0 46.05 50.86' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-171.3 -284.5)'><rect x='171.3' y='284.5' width='44.82' height='50.86' ry='0' fill='%23e1e1e1'/><rect x='216.1' y='284.5' width='1.229' height='50.86' fill='%230ea5e9'/><g transform='matrix(.8547 0 0 .8547 184 299.8)' fill='%231a1a1a'><path d='m12 2c-4.2 0-8 3.22-8 8.2 0 3.18 2.45 6.92 7.34 11.23 0.38 0.33 0.95 0.33 1.33 0 4.88-4.31 7.33-8.05 7.33-11.23 0-4.98-3.8-8.2-8-8.2zm0 10c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z' fill='%230ea5e9'/></g></g></svg>") no-repeat 10px center;
    background-position: calc(100%) center;
    margin-bottom: 1rem;
  }

#city {
  background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' viewBox='0 0 46.05 50.86' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-171.3 -284.5)'><rect x='171.3' y='284.5' width='44.82' height='50.86' ry='0' fill='%23e1e1e1'/><rect x='216.1' y='284.5' width='1.229' height='50.86' fill='%230ea5e9'/><g transform='matrix(.8547 0 0 .8547 184 299.8)' fill='%231a1a1a'><path d='m12 2c-4.2 0-8 3.22-8 8.2 0 3.18 2.45 6.92 7.34 11.23 0.38 0.33 0.95 0.33 1.33 0 4.88-4.31 7.33-8.05 7.33-11.23 0-4.98-3.8-8.2-8-8.2zm0 10c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z' fill='%230ea5e9'/></g></g></svg>") no-repeat calc(100%) center;
  background-position: calc(100%) center;

  }

  .form-grid {
    display: grid;
    gap: 15px;
    width: 100%;
}

/* Mobile first - 1 column */
.form-grid {
    grid-template-columns: 1fr;
}

/* Desktop - 2 columns */
@media screen and (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

  </style>
        <div class="form-grid">

        <input type="text" id="name" name="name" placeholder="الاسم الكامل:" required="">
        
<p id="phone-error" style="color:red; display:none;margin: 12px 0 0 0;">❌ رقم الهاتف غير صحيح</p>
<input type="text" id="phone" name="phone" placeholder="رقم الهاتف:" oninput="validatePhone(event)" required="">

</div>

        <label for="address" hidden="" style="display: none;">
          العنوان:        </label>
		  
        
		  
        <input type="text" id="address" name="address" placeholder=" العنوان:" style="display: none;">

            <label for="city" hidden="" style="display: none;">
    المدينة:    </label>
    <select id="city" name="city" onchange="updatePrice(getQuantityValue(), this)" style="display: none;">
    <option value="">إختر مدينتك :</option>
	            <option value="mrrakech|40">Mrrakech - التوصيل: 40</option>
            <option value="city|29">City - التوصيل: 29</option>
    	</select>
              

   <!-- Upsell area (initially hidden) -->
  <div id="upsell-area" style="display: none;">
  <h3 style="text-align: center; font-weight: bold;">أحصل على تخفيض %10 في هذا المنتج </h3>
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div style="flex: 1;">
  <h4>Breatify للتخلص من رائحة الفم الكريهة</h4>
  <b>الثمن :</b> <span style="color: green; font-weight: bold;">600</span> <b>درهم</b>
  <br><label for="upsell">هل تريد إضافة هذا المنتج كذلك ؟</label> <br>
	<br>
  <input type="radio" id="upsell-yes" name="upsell" value="yes" onclick="updatePrice(getQuantityValue())">
  <label for="upsell-yes">نعم </label>
  <input type="radio" id="upsell-no" name="upsell" value="no" onclick="updatePrice(getQuantityValue())" checked="">      <label for="upsell-no">لا</label>
</div>
<div style="flex: 1; text-align: right;">
  <img decoding="async" width="450" height="450" src="https://magaztk.com/wp-content/uploads/2023/08/imagel811-450x450.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://magaztk.com/wp-content/uploads/2023/08/imagel811-450x450.jpg 450w, https://magaztk.com/wp-content/uploads/2023/08/imagel811-100x100.jpg 100w, https://magaztk.com/wp-content/uploads/2023/08/imagel811-150x150.jpg 150w" sizes="(max-width: 450px) 100vw, 450px"></div>
</div>
</div>

      <style>
        #upsell-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 0 auto;
  animation: fade-in 1s ease-out;

}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#upsell-area > div {
  flex: 1 1 300px;
  margin: 10px;
  text-align: center;
}

#upsell-area img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 25px;
}

#upsell-area h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #333;
}

#upsell-area p {
  margin: 0;
  font-size: 1rem;
  color: #555;
	margin-bottom: 10px;
}

#upsell-area label {
  display: initial;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
  border: none;
  background: none;

}

#upsell-area input[type="radio"] {
  margin-right: 10px;
	margin-top: 20px;
}

#upsell-area input[type="radio"]:checked + label {
  font-weight: bold;
}

#upsell-area h3 {
  color: green;
  font-size: 1.5rem;
  margin-bottom: 20px;
}



      </style>

<span id="price" style="display: none;">المبلغ : 100     درهم</span>

<script>
    // Function to validate phone number
var validatePhoneTimeout;

function validatePhone(event) {
	  clearTimeout(validatePhoneTimeout); // Clear previous timeout
  
	  validatePhoneTimeout = setTimeout(function() {
		  var phoneInput = document.getElementById('phone');
		  var phoneError = document.getElementById('phone-error');
		  var submitButton = event.target.form.querySelector('#submit-button');
		  // Regular Expression for numeric validation
		  var regEx = /^[\+]?[(]?[0-9\u0660-\u0669\u06F0-\u06F9]{3}[)]?[-\s\u0660-\u0669\u06F0-\u06F9\.\d]?[0-9\u0660-\u0669\u06F0-\u06F9]{3}[-\s\u0660-\u0669\u06F0-\u06F9\.\d]?[0-9\u0660-\u0669\u06F0-\u06F9]{4,6}$/;
		  // Store the original background color of the button
		  var originalColor = submitButton.style.background;
  
		  if (!regEx.test(phoneInput.value) && phoneInput.value !== '') {
			  phoneError.style.display = 'block';
  
			  // Disable submit button if the phone number is not valid
			  submitButton.disabled = true;
			  submitButton.style.backgroundColor = 'grey';
			  submitButton.style.cursor = 'not-allowed';
			  // Hide upsell area if the phone number is not valid
			  document.getElementById('upsell-area').style.display = 'none';
		  } else {
			  // Enable submit button if the phone number is valid
			  submitButton.disabled = false;
			  // Restore the original background color of the button
			  submitButton.style.background = originalColor;
			  phoneError.style.display = 'none';
			  submitButton.style.cursor = 'pointer';
			  // Show upsell area if the phone number is valid
			  // Wait 3 seconds and then show upsell area if the phone number is valid
			  setTimeout(function () {
				  document.getElementById('upsell-area').style.display = 'block';
			  }, 2000);
		  }
	  }, 1000);
  }
  




</script>





<script>
  
    // Function to toggle upsell area visibility
    /*function toggleUpsellArea() {
      var phoneInput = document.getElementById('phone');
      var upsellArea = document.getElementById('upsell-area');

      if (phoneInput && upsellArea) {
        if (phoneInput.value) {
          upsellArea.style.display = 'block';
        } else {
          upsellArea.style.display = 'none';
        }
      }
    }*/
    function getQuantityValue() {
  var quantityInputs = document.getElementsByName('quantity');
  for (var i = 0; i < quantityInputs.length; i++) {
    if (quantityInputs[i].checked) {
      return quantityInputs[i].value;
    }
  }
  return '1';
}


  </script>

<script>

	    function updatePrice(quantity) {
  var product_price = 90;
   quantity = 1;

  // Retrieve the selected variation price for variable products
var selectedVariationPrice = 0;
var selectedVariation = document.getElementById('product_variation');
if (selectedVariation && selectedVariation.value) {
  var selectedVariationId = selectedVariation.value;
  // Loop through the available variations to find the selected one
      if ('4664' === selectedVariationId) {
      selectedVariationPrice = parseFloat(90);
    }
      if ('4665' === selectedVariationId) {
      selectedVariationPrice = parseFloat(90);
    }
      if ('4666' === selectedVariationId) {
      selectedVariationPrice = parseFloat(90);
    }
      if ('4667' === selectedVariationId) {
      selectedVariationPrice = parseFloat(100);
    }
  	product_price = selectedVariationPrice;
}
 
	if (quantity == 1) {
	  var updated_price = product_price;
	} else if (quantity == 2) {
	  var updated_price = product_price * 2 * (1 - reduction_2x/100);
	  updated_price = Math.round(updated_price * 100) / 100;
	} else if (quantity == 3) {
	  var updated_price = product_price * 3 * (1 - reduction_3x/100);
	  updated_price = Math.round(updated_price * 100) / 100;
	}
	
	else if (quantity == 4) {
	  
	  var updated_price = product_price * 4 * (1 - reduction_4x/100);
	  updated_price = Math.round(updated_price * 100) / 100;
	  
	}
	
	
	else if (quantity == 5) {
	  
	  var updated_price = product_price * 5 * (1 - reduction_5x/100);
	  updated_price = Math.round(updated_price * 100) / 100;
	  
	}
	
	
	else if (quantity == 6) {
	  
	  var updated_price = product_price * 6 * (1 - reduction_6x/100);
	  updated_price = Math.round(updated_price * 100) / 100;
	  
	}

  // Check if upsell is selected
  var upsellInput = document.querySelector('input[name="upsell"]:checked');
  var upsell_price = 0;

      upsell_price = 600;
  
  if (upsellInput && upsellInput.value === 'yes') {
    updated_price += upsell_price;
  }

      var selectedOption = city.options[city.selectedIndex].value;
    if (selectedOption) {
      var cityParts = selectedOption.split('|');
      var selectedCity = cityParts[0];
      var shippingFee = parseFloat(cityParts[1]);
    } else {
      var shippingFee = 0; // Set a default shipping fee when no city is selected
    }
  
  // Add shipping fee to the price
  updated_price += shippingFee;

  updated_price = updated_price.toLocaleString('en-US', {maximumFractionDigits: 0}).replace(',', '');

  document.getElementById("price").innerHTML = "المبلغ" + " : " +  updated_price + "    "+" درهم";
  var productName = "Breatify للتخلص من رائحة الفم الكريهة"; // Replace with your PHP code to get the product name
    var totalQuantity = quantity; // The total quantity selected by the user
    var totalPrice = updated_price; // The total price calculated by your script

    // Update order summary details
    document.getElementById('summary-shipping-fee').textContent = shippingFee;

    document.querySelector('.summary-product-title').textContent =  productName;
    document.getElementById('summary-quantity').textContent = "x " + totalQuantity;
    document.getElementById('summary-price').textContent = product_price;
    document.getElementById('summary-total-price').textContent = totalPrice;

    // Update the upsell information if present
    var upsellProduct = document.getElementById('upsell-yes').checked ? "Breatify للتخلص من رائحة الفم الكريهة" : "None";
    document.getElementById('summary-upsell').textContent = upsell_price;
    document.getElementById('summary-upsell-row').style.display = document.getElementById('upsell-yes').checked ? "" : "none";

  }
	
	
	
	// Add this function to toggle the visibility of the order summary
function toggleOrderSummary() {
    var summary = document.getElementById('order-summary');
    var button = document.getElementById('toggle-summary');
    if (summary.style.display === 'none') {
        summary.style.display = 'block';
        button.textContent = 'Hide Order Summary';
    } else {
        summary.style.display = 'none';
        button.textContent = 'Show Order Summary';
    }
}

// Initialize the summary on page load
document.addEventListener('DOMContentLoaded', function() {
    updatePrice(getQuantityValue());
});

    // Retrieve the selected variation price for variable products

	
	

</script>



      <script>
      const upsellYes = document.getElementById('upsell-yes');
      const upsellNo = document.getElementById('upsell-no');
      const upsellArea = document.getElementById('upsell-area');

    upsellNo.addEventListener('change', () => {
    if (upsellNo.checked) {
      upsellArea.style.display = 'none';

}
    
  });
    </script>


      <script>
        document.getElementById('price').style.display = 'none';
      </script>
<div style="padding-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 4px ;justify-content: space-between;
  cursor: pointer;
  " onclick="toggleTable()">

   <span style="
    display: flex;
    gap: 4px;
    align-items: center;
">
<svg style="opacity: 0.8;" xmlns="http://www.w3.org/2000/svg" width="24" height="40" viewBox="0 0 24 8" fill="#0ea5e9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart">
  <circle cx="8" cy="21" r="1"></circle>
  <circle cx="19" cy="21" r="1"></circle>
  <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
</svg>



<span style="font-size:20px; margin-top:15px;font-weight:bold;">ملخص الطلب</span>
</span>

<svg class="rotate-svg rotate-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>

</div>

<!-- Order Summary Section -->
<div id="order-summary" class="order-summary" style="display: block;">
<hr style="border: none; border-top: 2px solid #0ea5e9; color: #000; overflow: visible; width: 100%;margin-top: 10px;">

    <table style="
    width: 100%">
        <tbody>
            <tr>
                <td style="text-align: start;" class="summary-product-title">Breatify للتخلص من رائحة الفم الكريهة</td>
                <td>
                    
                    <span id="summary-price">100</span>
                    <span>د.م.</span>
                    <span style="font-weight : bold; color : white; background-color : #0ea5e9; border-radius : 5px; padding: 0 6px;" id="summary-quantity">x 1</span>
                </td>
            </tr>

            
            <tr>
    <td style="text-align: start;">التوصيل </td>
    <td id="summary-shipping-fee">0</td>
</tr>
            <tr id="summary-upsell-row" style="display: none;">
                <td>المنتج المخفض</td>
                <td id="summary-upsell">600</td>
            </tr>
            <tr class="full-price">
                <td style="text-align: start;">المبلغ الإجمالي </td>
                <td style="color : #0ea5e9; font-weight:bold; font-size : 20px;"><span id="summary-total-price">100</span> د.م.              </td>   
                       </tr>
        </tbody>
    </table>
    <hr style="border: none; border-top: 2px solid #0ea5e9; color: #000; overflow: visible; width: 100%;">

</div>
<script>
function toggleTable() {
    var summaryTable = document.getElementById("order-summary");
    var svg = document.querySelector(".rotate-svg");
    if (summaryTable.style.display === "none") {
        summaryTable.style.display = "block";
        svg.classList.remove("rotate-180");
        svg.classList.add("rotate-0");
      } else {
        summaryTable.style.display = "none";
        svg.classList.remove("rotate-0");
        svg.classList.add("rotate-180");
    }
}
</script>


		  <style>
#order-summary table, 
#order-summary td, 
#order-summary tr {
    border: none !important;
    
}
#order-summary td, 
#order-summary tr {
    padding: 5px 0 !important;
}
.rotate-svg {
    transition: transform 0.3s ease-in-out;
}

.rotate-0 {
    transform: rotate(0deg);
}
.rotate-180 {
    transform: rotate(180deg);
}
			  .toggle-summary-btn {
    display: block;
    background-color: #f9f9f9;
    color: #404040;
    padding: 10px 20px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    text-align: center;
}

.order-summary-codplugin {
    background: #f0f9ff;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    color: #404040;
}

.order-summary-codplugin table {
    width: 100%;
}

.order-summary-codplugin td {
    padding: 5px 10px;
}

.summary-product-title {
    
}
.summary-total-price{
    font-weight: bold;
    
}

.full-price {
   
    
}

/* RTL support */
body {
    direction: rtl;
}

		  </style>

            <input style="margin-bottom : 10px;" type="submit" id="submit-button" value="للطلب اضغط هنا">
		  
     
		  
		  
		  


<script>
// Function to detect if the user agent is iOS
function isIOS() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}

// Function to replace SVG with IMG when on iOS
function replaceWithImg(iconId, imgPath) {
  const iconElement = document.getElementById(iconId);
  const svgElement = iconElement.querySelector('svg');
  
  if (isIOS() && svgElement) {
    const img = document.createElement('img');
    img.src = imgPath;
    img.alt = 'icon';
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'contain';

    iconElement.removeChild(svgElement);
    iconElement.appendChild(img);
  }
}

// Load the icons based on the platform
document.addEventListener('DOMContentLoaded', function() {
  replaceWithImg('icon1', 'https://magaztk.com/wp-content/plugins/codwoo4.2/payment.svg');
  replaceWithImg('icon2', 'https://magaztk.com/wp-content/plugins/codwoo4.2/store.svg');
  replaceWithImg('icon3', 'https://magaztk.com/wp-content/plugins/codwoo4.2/protect.svg');
  replaceWithImg('icon4', 'https://magaztk.com/wp-content/plugins/codwoo4.2/message.svg');
  // Replace the other icons by calling the replaceWithImg function with respective paths
});
</script>

          <div class="icons-section">
            <div class="icon-text">
              <div class="icon-style" id="icon1">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 545.11 364.63" style="enable-background:new 0 0 545.11 364.63;" xml:space="preserve">
                      <style type="text/css">
                        .st0{fill:#0ea5e9;}
                        .st1{fill:none;stroke:#324561;stroke-width:22.3793;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                      </style>
                      <g id="Layer_1">
                      </g>
                      <g id="Layer_2">
                        <g>
                          <path class="st0" d="M497.32,267.12H173.57c-20.89,0-37.83-16.94-37.83-37.83V44.49c0-20.89,16.94-37.83,37.83-37.83h323.75
                            c20.89,0,37.83,16.94,37.83,37.83v184.79C535.15,250.18,518.21,267.12,497.32,267.12z"></path>
                          <line class="st1" x1="169.57" y1="85.72" x2="498.65" y2="85.72"></line>
                          <path class="st1" d="M25.39,96.63c0,0,40.74-33.47,54.81-44.62s61.6-6.79,61.6-6.79"></path>
                          <path class="st1" d="M135.73,219.1c0,0,118.48-57.71,137.75-67.23c30.31-14.98,79.27,18.37,40.86,59.23
                            c-22.92,24.37-103.79,81.1-121.98,94.19s-26.34,28.03-69.63,30.21s-101.59,1.46-101.59,1.46"></path>
                          <path class="st1" d="M384.55,262.39c2.18,29.83-10.19,70.93-41.47,70.93c-24.74,0-32.74-20.37-32.74-20.37
                            c0,17.1-17.46,33.83-34.92,33.83c-17.46,0-31.65-15.28-31.65-32.74c-5.09,26.19-26.92,27.19-34.92,26.92
                            c-10.55-0.36-26.05-9.7-26.05-28.13"></path>
                        </g>
                      </g>
                </svg>

              </div>
              <div class="text-style"> الدفع عند الاستلام</div>
            </div>

            <div class="icon-text">
              <div class="icon-style" id="icon2">
              <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 545.11 365.82" style="enable-background:new 0 0 545.11 365.82;" xml:space="preserve">
              <style type="text/css">
.st0{fill:#0ea5e9;}
				  .st1{fill:none;stroke:#324561;stroke-width:23.175;stroke-linecap:round;stroke-miterlimit:10;}
              </style>
              <g>
                <path class="st0" d="M468.54,355.1H76.57c-26.56,0-48.09-21.53-48.09-48.09V58.82c0-26.56,21.53-48.09,48.09-48.09h391.97
                  c26.56,0,48.09,21.53,48.09,48.09v248.19C516.63,333.57,495.1,355.1,468.54,355.1z"></path>
                <path class="st1" d="M455.53,67.18l-153.1,137.48c-17.84,16.02-44.88,16.04-62.74,0.04L84.87,66.06"></path>
              </g>
              </svg>

              </div>
              <div class="text-style"> توصيل مجاني</div>
            </div>

            <div class="icon-text">
              <div class="icon-style" id="icon3">
              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 561.02 609.36" style="enable-background:new 0 0 561.02 609.36;" xml:space="preserve">
              <style type="text/css">
.st0{fill:#0ea5e9;}
				  .st1{fill:none;stroke:#324561;stroke-width:27.3807;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
              </style>
              <g>
                <path class="st0" d="M461.23,24.82c35.71,0,64.66,28.95,64.66,64.66v235.91l0,0c-8.95,122.38-154.52,240.29-242.11,260.38
                  c-2.89,0.66-5.86,0.57-8.72-0.23C178.77,558.47,42.7,448.06,33.73,325.39c-0.48-5.89-0.68-11.84-0.68-17.87V89.48
                  c0-35.71,28.95-64.66,64.66-64.66H461.23z"></path>
                <polyline class="st1" points="168.46,281.93 267.98,350.12 390.49,171.31 	"></polyline>
              </g>
              </svg>

              </div>
              <div class="text-style"> ضمانة 100%</div>
            </div>

            <div class="icon-text">
              <div class="icon-style" id="icon4">
              <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 545.11 468.94" style="enable-background:new 0 0 545.11 468.94;" xml:space="preserve">
                <style type="text/css">
.st0{fill:#0ea5e9;}
					.st1{fill:none;stroke:#324561;stroke-width:17.2889;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                  .st2{fill:none;stroke:#324561;stroke-width:17.1183;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                  .st3{fill:none;stroke:#324561;stroke-width:18.5978;stroke-miterlimit:10;}
                </style>
                <g>
                  <path class="st0" d="M430.58,424.91H121.19c-29.23,0-52.92-23.69-52.92-52.92V105.16H483.5v266.83
                    C483.5,401.22,459.81,424.91,430.58,424.91z"></path>
                  <path class="st0" d="M450.57,163.63H94.54c-36.59,0-66.25-29.66-66.25-66.24V62.48c0-16.08,13.03-29.11,29.11-29.11H487.7
                    c16.08,0,29.11,13.03,29.11,29.11v34.91C516.81,133.97,487.15,163.63,450.57,163.63z"></path>
                  <g>
                    <path class="st1" d="M154.62,96.52v10.12c0,32.98-26.41,59.71-58.99,59.71h0c-32.58,0-58.99-26.73-58.99-59.71V96.28"></path>
                    <path class="st1" d="M272.59,96.52v10.12c0,32.98-26.41,59.71-58.99,59.71h0c-32.58,0-58.99-26.73-58.99-59.71V96.28"></path>
                    <path class="st1" d="M390.57,96.52v10.12c0,32.98-26.41,59.71-58.99,59.71h0c-32.58,0-58.99-26.73-58.99-59.71V96.28"></path>
                    <path class="st1" d="M508.55,96.52v10.12c0,32.98-26.41,59.71-58.99,59.71h0c-32.58,0-58.99-26.73-58.99-59.71V96.28"></path>
                  </g>
                  <path class="st2" d="M133.4,433.42V263.04c0-12.93,10.83-23.42,24.18-23.42h68.59c13.35,0,24.18,10.48,24.18,23.42v170.38"></path>
                  <path class="st3" d="M404.8,239.62h-75.62c-4.91,0-8.88,3.98-8.88,8.88v75.62c0,4.91,3.98,8.88,8.88,8.88h75.62
                    c4.91,0,8.88-3.98,8.88-8.88v-75.62C413.68,243.6,409.7,239.62,404.8,239.62z"></path>
                </g>
                </svg>

              </div>
              <div class="text-style"> خدمة العملاء</div>
            </div>

      </div>

      <style>
@media only screen and (max-width: 600px) {
.icons-section {
    display: grid !important;
	grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
    margin: 26px 12px 16px 12px;
	
}
}
.icons-section {
    display: flex ;
    justify-content: space-between;	
	margin: 26px 18px 16px 18px;
    
	
}
.icon-text {
   display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}
.icon-style {
        width: 3.8rem;
    height: 100%;
    display: flex;
}
.text-style {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
</style>



        		
		
		</form>
		</div>/* End custom CSS */