/*
Theme Name: Woostify Child
Theme URI: https://woostify.com
Template: woostify
Author: Woostify
Author URI: https://woostify.com/about
Description: Woostify is fast, lightweight, responsive and super flexible WooCommerce theme built with SEO, speed, and usability in mind. The theme works great with any of your favorite page builder likes Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, etc. Therefore, you can build any type of websites like shop, business agencies, corporate, portfolio, education, university portal, consulting, church, restaurant, medical and so on. Woostify is compatible with all well-coded plugins, including major ones like WooCommerce, OrbitFox, Yoast, BuddyPress, bbPress, etc. Learn more about the theme and ready to import demo sites at https://woostify.com
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,rtl-language-support,footer-widgets,sticky-post,theme-options
Version: 2.4.2.1751810217
Updated: 2025-07-06 13:56:57

*/

/* 🔍 ZITALYAAR Floating Mobile Voice Search Bar – Full CSS with S23 Fix */

#zitalyaar-mobile-search {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  max-width: 500px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  gap: 6px;
}

#zitalyaar-search-input {
  flex: 1 1 70%;
  min-width: 0;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 50px;
  outline: none;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

#zitalyaar-search-input.glow {
  animation: micGlow 1s infinite alternate;
  border: 2px solid #e91e63;
  background-color: #fff0f5;
}

@keyframes micGlow {
  0% { box-shadow: 0 0 5px #e91e63; }
  100% { box-shadow: 0 0 20px #e91e63; }
}

#zitalyaar-mobile-search button {
  flex: 0 0 15%;
  min-width: 44px;
  background-color: #555;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

#zitalyaar-mobile-search button:first-child {
  background-color: #2196f3;
}
#zitalyaar-mobile-search button:first-child:hover {
  background-color: #1e88e5;
  transform: scale(1.05);
}

#zitalyaar-mobile-search button:last-child {
  background-color: #e91e63;
}
#zitalyaar-mobile-search button:last-child:hover {
  background-color: #c2185b;
  transform: scale(1.1);
}

#zitalyaar-mobile-search button.listening {
  background-color: #d62828 !important;
  animation: pulse 1.3s infinite ease-in-out;
  transform: scale(1.1);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(214, 40, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}

#mic-icon.shake {
  animation: shake 0.3s infinite;
}
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@media (max-width: 400px) {
  #zitalyaar-search-input {
    font-size: 14px;
    padding: 10px 12px;
  }
  #zitalyaar-mobile-search button {
    font-size: 16px;
    padding: 8px;
  }
}