@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//musclesfrenzy.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.4") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//musclesfrenzy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 14px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgb(255, 255, 255);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(0,0,0);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: rgb(0,0,0);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(0,0,0);
	--btn-accented-bgcolor-hover: rgb(0,0,0);
	--wd-form-brd-width: 2px;
	--notices-success-bg: rgb(0,0,0);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(34,107,216);
	--wd-link-color-hover: rgb(38,88,239);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-attachment: scroll;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 500px;
	--wd-popup-padding: 31px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(0,0,0);
	background-image: url(https://musclesfrenzy.com/wp-content/uploads/2025/07/heador-backgrount.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
html .product-image-summary-wrap .product_title, html .wd-single-title .product_title {
	font-weight: 600;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 8px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.wd-page-title {
background-color: #0a0a0a;
}

<!-- START: MF Chat Popup (paste whole block) -->
<style>
/* Chat bubble + modal styles - modern, minimal, responsive */
.mf-chat-bubble {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 999999;
  display: flex;
  gap:10px;
  align-items:center;
  background: linear-gradient(180deg,#0b7f6e,#096c59);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  box-shadow: 0 14px 40px rgba(2,6,23,0.35);
  cursor: pointer;
  font-weight:700;
  font-family: system-ui,-apple-system, "Segoe UI", Roboto, Arial;
  transform-origin: right bottom;
  transition: transform .22s ease, opacity .22s ease;
}
.mf-chat-bubble img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.12); }

/* small dot or badge */
.mf-chat-badge { background:#fff;color:#0b7f6e;padding:4px 8px;border-radius:999px;font-weight:800;font-size:13px; }

/* modal backdrop */
.mf-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(6px) saturate(1.05);
  background: rgba(3,7,18,0.28);
  padding: 18px;
  box-sizing: border-box;
}

/* modal card */
.mf-chat-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(4,10,20,0.35);
  overflow: hidden;
  max-height: calc(100vh - 84px);
  display:flex;
  flex-direction:column;
}

/* header */
.mf-chat-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(90deg,#0b7f6e,#0a6c5d);
  color:#fff;
}
.mf-chat-header .title { font-weight:800; font-size:16px; }
.mf-chat-close { margin-left:auto; background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer }

/* body */
.mf-chat-body {
  padding:14px 16px 18px 16px;
  overflow:auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#102027;
  font-size:14px;
  line-height:1.5;
}

/* FAQs list */
.mf-faq { display:grid; gap:8px; margin-bottom:12px; }
.mf-faq-item { border-left:3px solid #0b7f6e; background:#f7fffb; padding:8px 10px; border-radius:6px; }
.mf-faq-item strong { display:block; font-weight:700; margin-bottom:4px; color:#08332b; }

/* plan box */
.mf-plan {
  display:flex; gap:12px; align-items:center;
  border-radius:8px; padding:10px; border:1px solid rgba(11,127,110,0.12);
  background: linear-gradient(180deg,#fff,#fbfffd);
  margin-bottom:12px;
}
.mf-plan .price { font-weight:900; color:#0b7f6e; font-size:18px; margin-left:auto; }

/* form */
.mf-form { display:grid; gap:10px; }
.mf-form input, .mf-form textarea, .mf-form select {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e6eef0; font-size:14px; box-sizing:border-box;
}
.mf-form textarea { min-height:90px; resize:vertical; }
.mf-form .row { display:flex; gap:8px; }
.mf-form .row .col { flex:1; }

/* actions */
.mf-actions { display:flex; gap:10px; margin-top:8px; }
.mf-btn {
  flex:1; padding:10px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:800; font-size:14px;
}
.mf-btn.ghost { background:transparent; border:1px solid #cfdfe0; color:#20343b; }
.mf-btn.primary { background:#0b7f6e; color:#fff; box-shadow: 0 8px 18px rgba(11,127,110,0.14); }

/* small helper */
.mf-note { font-size:13px; color:#475569; margin-top:8px; }

/* responsive: keep gap around modal on mobile so it doesn't cover entire screen */
@media (max-width:640px) {
  .mf-chat-bubble { right: 12px; bottom: 12px; padding:9px 12px; }
  .mf-chat-card { max-width: calc(100% - 28px); border-radius: 12px; max-height: calc(100vh - 56px); }
  .mf-chat-body { padding:12px; }
}

/* subtle entrance */
.mf-chat-bubble.show { transform: scale(1); opacity:1; }
.mf-chat-bubble.hidden { transform: scale(.88); opacity:0; pointer-events:none; }

/* small accessibility */
.mf-hidden { display:none !important; }
</style>

<!-- bubble -->
<div id="mfChatBubble" class="mf-chat-bubble hidden" role="button" aria-label="Need any help? Open chat" tabindex="0">
  <img src="https://musclesfrenzy.com/wp-content/uploads/2025/01/chat-agent.png" alt="help" onerror="this.style.display='none'">
  <span style="font-size:14px">Need any help?</span>
  <span class="mf-chat-badge">Chat</span>
</div>

<!-- modal -->
<div id="mfChatBackdrop" class="mf-chat-backdrop" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="mf-chat-card" role="document">
    <div class="mf-chat-header">
      <div style="display:flex;gap:10px;align-items:center">
        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M21 11.5a8.5 8.5 0 10-2.4 5.8L21 21l-1.8-5.9A8.5 8.5 0 0021 11.5z" stroke="#fff" stroke-width="1.2"/></svg>
        <div class="title">How can we help?</div>
      </div>
      <button class="mf-chat-close" id="mfCloseBtn" aria-label="Close chat">✕</button>
    </div>

    <div class="mf-chat-body">
      <!-- FAQs -->
      <div class="mf-faq" aria-hidden="false">
        <div class="mf-faq-item"><strong>Are your products genuine?</strong> Yes — factory sealed and sourced from authorized importers.</div>
        <div class="mf-faq-item"><strong>Delivery time?</strong> Metro cities 2–4 days, other areas 4–6 days.</div>
        <div class="mf-faq-item"><strong>Payment options?</strong> Prepaid (free shipping) & COD (₹300 + 25% advance).</div>
      </div>

      <!-- paid plan -->
      <div class="mf-plan" aria-hidden="false">
        <div>
          <div style="font-weight:800;color:#07121a">Custom Cycle Plan</div>
          <div style="font-size:13px;color:#475569">Personalized plan + follow-up</div>
        </div>
        <div class="price">₹2000</div>
      </div>

      <!-- quick links -->
      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px">
        <button class="mf-btn ghost" type="button" data-quick="cycle">Buy Custom Plan</button>
        <button class="mf-btn ghost" type="button" data-quick="track">Track Order</button>
        <button class="mf-btn ghost" type="button" data-quick="product">Product Help</button>
      </div>

      <!-- form -->
      <form id="mfChatForm" class="mf-form" aria-label="Help form">
        <div style="display:flex;gap:8px">
          <input type="text" id="mf_name" name="name" placeholder="Your name" required>
          <input type="tel" id="mf_mobile" name="mobile" placeholder="Mobile (10 digits)" inputmode="numeric" pattern="[0-9]{10}">
        </div>

        <select id="mf_topic" name="topic" aria-label="Topic">
          <option value="">Select topic (optional)</option>
          <option value="Buy Custom Plan - ₹2000">Buy Custom Cycle Plan - ₹2000</option>
          <option value="Product Inquiry">Product Inquiry</option>
          <option value="Order Tracking">Order Tracking</option>
          <option value="Other">Other</option>
        </select>

        <textarea id="mf_details" name="details" placeholder="Tell us briefly how we can help..." required></textarea>

        <div class="mf-note">By clicking Chat Now you will be redirected to WhatsApp to continue the conversation.</div>

        <div class="mf-actions">
          <button type="button" class="mf-btn ghost" id="mfCancel">Cancel</button>
          <button type="button" class="mf-btn primary" id="mfChatNow">Chat Now</button>
        </div>
      </form>

    </div>
  </div>
</div>

<script>
(function(){
  // CONFIG: change WhatsApp number here (no +, use country code; e.g. 917838763141)
  var WA_NUMBER = '917838763141';

  // elements
  var bubble = document.getElementById('mfChatBubble');
  var backdrop = document.getElementById('mfChatBackdrop');
  var closeBtn = document.getElementById('mfCloseBtn');
  var cancelBtn = document.getElementById('mfCancel');
  var chatNow = document.getElementById('mfChatNow');
  var form = document.getElementById('mfChatForm');
  var quickButtons = document.querySelectorAll('.mf-btn.ghost[data-quick]');

  // show bubble after 2.5s
  setTimeout(function(){
    bubble.classList.remove('hidden');
    bubble.classList.add('show');
  }, 2500);

  // open modal on bubble click or Enter
  function openModal(){
    backdrop.style.display = 'flex';
    backdrop.setAttribute('aria-hidden','false');
    // trap focus optionally
    var first = form.querySelector('input, select, textarea, button');
    if(first) first.focus();
  }
  bubble.addEventListener('click', openModal);
  bubble.addEventListener('keydown', function(e){ if(e.key === 'Enter') openModal(); });

  // close handlers
  function closeModal(){
    backdrop.style.display = 'none';
    backdrop.setAttribute('aria-hidden','true');
  }
  closeBtn.addEventListener('click', closeModal);
  cancelBtn.addEventListener('click', closeModal);
  backdrop.addEventListener('click', function(e){
    if(e.target === backdrop) closeModal();
  });

  // quick buttons set form values
  quickButtons.forEach(function(btn){
    btn.addEventListener('click', function(){
      var q = btn.getAttribute('data-quick');
      if(q === 'cycle'){
        document.getElementById('mf_topic').value = 'Buy Custom Plan - ₹2000';
        document.getElementById('mf_details').value = 'I want the Custom Cycle Plan (₹2000). Please guide.';
        openModal();
      } else if(q === 'track'){
        document.getElementById('mf_topic').value = 'Order Tracking';
        document.getElementById('mf_details').value = 'Please help me track my order. Order no: ';
        openModal();
      } else if(q === 'product'){
        document.getElementById('mf_topic').value = 'Product Inquiry';
        document.getElementById('mf_details').value = 'I need help choosing a product for: ';
        openModal();
      }
    });
  });

  // Validate mobile: allow 10 digits (Indian)
  function validMobile(m){
    if(!m) return false;
    var digits = m.replace(/\D/g,'');
    return digits.length === 10;
  }

  // Build whatsapp message and redirect
  chatNow.addEventListener('click', function(){
    var name = (document.getElementById('mf_name').value || '').trim();
    var mobile = (document.getElementById('mf_mobile').value || '').trim();
    var topic = (document.getElementById('mf_topic').value || '').trim();
    var details = (document.getElementById('mf_details').value || '').trim();

    if(!name){ alert('Please enter your name'); document.getElementById('mf_name').focus(); return; }
    if(!mobile){ alert('Please enter mobile number'); document.getElementById('mf_mobile').focus(); return; }
    if(!validMobile(mobile)){ alert('Please enter a valid 10-digit mobile number'); document.getElementById('mf_mobile').focus(); return; }
    if(!details){ alert('Please provide brief details'); document.getElementById('mf_details').focus(); return; }

    // prepare message
    var msg = 'Hello MusclesFrenzy team,%0A';
    msg += '*Name*: ' + encodeURIComponent(name) + '%0A';
    msg += '*Mobile*: ' + encodeURIComponent(mobile) + '%0A';
    if(topic) msg += '*Topic*: ' + encodeURIComponent(topic) + '%0A';
    msg += '*Details*: ' + encodeURIComponent(details) + '%0A%0A';
    msg += 'Source: Website Chat Popup';

    // open WhatsApp chat in new tab
    var waLink = 'https://wa.me/' + WA_NUMBER + '?text=' + msg;
    window.open(waLink, '_blank');

    // close modal
    closeModal();
  });

  // accessibility: close on Escape
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeModal();
  });

  // prevent bubble overlapping site bottom-right controls: small offset if element detected
  // attempt to detect common bottom menu by checking elements near bottom-right
  setTimeout(function(){
    var br = document.elementFromPoint(window.innerWidth - 30, window.innerHeight - 10);
    if(br && br !== bubble){
      // nudge bubble a bit left/up
      bubble.style.right = '80px';
    }
  }, 1200);

})();
</script>
<!-- END: MF Chat Popup -->
