/* variables from theme configuration */
:root {
    --am_logo_link: 1;
--am_bg: #f1f5f9;
--am_bg_size: auto;
--am_bg_size_px: auto;
--am_bg_attachment: scroll;
--am_bg_repeat: no-repeat;
--am_color: #f1f5f9;
--am_link_color: #0079d1;
--am_btn_color: #000000;
--am_text_color: #212121;
--am_color_c: #0e0a06;
--am_color_d: #bfc3c7;
--am_logo_align: center;
--am_logo_width: 100%;
--am_logo_width_px: 100%;
--am_max_width: 1200;
--am_max_width_px: 1200px;
--am_font_size: 18;
--am_font_size_px: 18px;
--am_font_family: Arial;
--am_drop_shadow: 1;
--am_content_shadow: 0px 0px 5px #00000022;;
--am_border_radius: 16;
--am_border_radius_px: 16px;
--am_login_layout: layout-login-sidebar.phtml;
--am_login_bg: white;
--am_login_bg_color: #FFFFFF;
--am_login_shadow: 0px 0px 5px #00000022;;
--am_login_legend_bg: #f1f5f9;
--am_login_legend_padding_top: 1em;
--am_login_form_bg_color: #f1f5f9;
--am_login_header_display: block;
--am_login_type: am-page-login-no-label;
--am_header_bg_color: #f1f5f9;
--am_header_bg_size: cover;
--am_header_bg_size_px: cover;
--am_header_bg_repeat: no-repeat;
--am_header_bg: #f1f5f9;
--am_menu_color: #F26822;
--am_menu_dashboard: icon;
--am_dashboard_layout: one-col;
--am_identity_align: left;
--am_identity_type: login;
--am_page_bg_color: #FFFFFF;
--am_page_bg: #FFFFFF;
--am_header_menu_link_color: #000000;
--am_header_menu_link2_color: #000000;
--am_header_menu_bg_color: #f1f5f9;
--am_footer_bg: #f1f5f9;
--am_footer_bg_color: #f1f5f9;
--am_footer_text_color: #0d0d0d;
--am_footer_link_color: #0d0d0d;
--am_sm_size: 18;
--am_sm_size_px: 18px;
--am_sm_color: #0d0d0d;
--am_header_logo: 9;
--am_home_url: https://members.fawadtools.com/member;
--am_footer: Fawad Tools - SEO & Amazon Tools Hub
<div id="custom_chat" style="position: fixed; right: 20px; bottom: 15px; z-index: 2147483001;">
<a href="https://m.me/fawadtools" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;">
<div style="background-color: #0084FF; align-items: center; border-radius: 60px; display: flex; height: 44px; padding: 0px 16px; position: absolute; width: fit-content; right: 0px;">
<div style="margin-left: -2px; margin-right: 6px;">
<div style="display: flex; align-items: center;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 11.5037C22.9991 17.6066 18.393 22.0743 11.9998 22.0743C10.9345 22.0743 9.91972 21.9794 8.96771 21.7469C8.17611 21.5538 7.34969 21.5736 6.57781 21.8368L2.90954 22.9625C2.31871 23.1643 1.7453 22.5902 1.9456 21.9766L2.67394 19.566C2.94666 18.7301 2.84078 17.8129 2.38288 17.066C1.4139 15.4844 1.00046 13.5951 1 11.5037V11.5028V11.5018C1.00092 5.39938 5.607 1.00366 11.9998 1.00366C18.393 1.00366 22.9991 5.39938 23 11.5018V11.5028V11.5037Z" fill="white"></path>
</svg>
</div>
</div>
<div style="color: white; display: flex; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; font-size: 17px; font-style: normal; font-weight: 600; line-height: 22px; user-select: none; white-space: nowrap;">
Help
</div>
</div>
</a>
</div>
</div>
</div>
<script>
    var url = 'https://members.fawadtools.com/whatsapp/whatsappwidget.js';
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var options = {
        "enabled": true,
        "chatButtonSetting": {
            "backgroundColor": "#25D366",
            "ctaText": "",
            "borderRadius": "25",
            "marginLeft": "0",
            "marginBottom": "80",
            "marginRight": "50",
            "position": "right"
        },
        "brandSetting": {
            "brandName": "Fawad Tools",
            "brandSubTitle": "Typically replies within few minutes",
            "brandImg": "https://i.imgur.com/OIg4wwh.jpg",
            "welcomeText": "Hey there, how can I assist today?👋 \n\nFeel free to drop your queries, and I'll ensure you have a smooth experience with us. 🌟",
            "messageText": "",
            "backgroundColor": "#0a5f54",
            "box-shadow": "none",
            "ctaText": "Start Chat",
            "borderRadius": "25",
            "autoShow": false,
            "phoneNumber": "https://fawadtools.com/whatsapp" // Replace with your WhatsApp link
        }
    };
    s.onload = function() { CreateWhatsappChatWidget(options); };
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
</script>;
--am_login_sidebar: <p style="text-align: center;"><a href="https://www.facebook.com/fawadtools" target="_blank"><img alt="" src="https://i.imgur.com/LXzS2MF.png" style="width: 220px; height: 69px;" /></a></p>
&nbsp;

<hr />
<p style="text-align: center;"><span style="font-size:18px;">Helpdesk (WhatsApp Support Only)</span></p>

<p style="text-align: center;"><span style="font-size:18px;"><a href="https://fawadtools.com/whatsapp/" target="_blank"><img alt="" src="https://i.imgur.com/X8B6OSO.png" style="width: 220px; height: 67px;" /></a></span></p>;
--am_body_finish_in: <help-hint data-feedback="https://forms.gle/ZXyHz4AiLwYVCcJ97"></help-hint>

<script>
class HelpHint extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    const domain = window.location.hostname;
    const videoHref = `https://${domain}/page/Video+Guide+Section`;
    const feedbackHref = this.getAttribute('data-feedback') || '#';

    const tpl = document.createElement('template');
    tpl.innerHTML = `
      <style>
        :host {
          position: fixed;
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 100000;
          font-family: system-ui, sans-serif;
        }
        .wrap { position: relative; }

        /* Adaptive help tab */
        .tab {
          display: flex;
          align-items: center;
          gap: 8px;
          background: var(--tab-bg, #0b1220);
          color: var(--tab-color, #fff);
          padding: 8px 10px;
          border-radius: 999px;
          border: 1px solid var(--tab-border, rgba(255,255,255,.1));
          box-shadow: 0 0 0 2px var(--tab-border, transparent),
                      0 8px 18px rgba(0,0,0,.25);
          cursor: pointer;
          transition: background .25s, box-shadow .25s;
        }
        .tab:hover {
          box-shadow: 0 0 0 2px var(--tab-border, transparent),
                      0 12px 24px rgba(0,0,0,.35);
          transform: translateX(-2px);
        }

        .lifebuoy {
          position: relative;
          width: 26px;
          height: 26px;
        }
        .lifebuoy svg {
          width: 100%;
          height: 100%;
          filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
        }
        .qm {
          position: absolute;
          bottom: -2px;
          right: -2px;
          width: 13px;
          height: 13px;
          background: #fff;
          color: #0b1220;
          font-size: 10px;
          font-weight: 900;
          display: grid;
          place-items: center;
          border-radius: 50%;
          box-shadow: 0 1px 3px rgba(0,0,0,.4);
        }

        /* Slide-out panel */
        .panel {
          position: absolute;
          right: 48px;
          top: 50%;
          transform: translateY(-50%) scale(.97);
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s, transform .25s;
          width: 220px;
        }
        :host(:hover) .panel,
        :host(.open) .panel {
          opacity: 1;
          transform: translateY(-50%) scale(1);
          pointer-events: auto;
        }
        .card {
          background: var(--panel-bg, rgba(255,255,255,.85));
          backdrop-filter: blur(12px);
          border: 1px solid rgba(0,0,0,.1);
          border-radius: 16px;
          padding: 14px;
          box-shadow: 0 8px 24px rgba(0,0,0,.25);
        }
        .action {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px;
          margin-bottom: 10px;
          border-radius: 10px;
          text-decoration: none;
          color: white;
          background: linear-gradient(135deg,#5B8CFF 0%,#6EE7F9 100%);
          transition: transform .2s;
        }
        .action:last-child { background: linear-gradient(135deg,#22C55E 0%,#A3E635 100%); }
        .action:hover { transform: translateY(-2px); }
        .icon { width: 24px; height: 24px; fill: white; }
      </style>

      <div class="wrap">
        <div class="tab" id="tab">
          <div class="lifebuoy">
            <svg viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="9" fill="url(#grad)" stroke="#fff" stroke-width="1.5"/>
              <circle cx="12" cy="12" r="4.2" fill="var(--hole-fill,#0b1220)"/>
              <defs>
                <radialGradient id="grad" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stop-color="#3b82f6"/>
                  <stop offset="100%" stop-color="#1d4ed8"/>
                </radialGradient>
              </defs>
            </svg>
            <span class="qm">?</span>
          </div>
          <span>Help</span>
        </div>

        <div class="panel" id="panel">
          <div class="card">
            <a class="action" href="${videoHref}" target="_blank">
              <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h10a2 2 0 0 1 2 2v1.6l3.2-2a1 1 0 0 1 1.6.8v6.2a1 1 0 0 1-1.6.8L16 14.2V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z"/></svg>
              Video Guides
            </a>
            <a class="action" href="${feedbackHref}" target="_blank">
              <svg class="icon" viewBox="0 0 24 24"><path d="M20 3H4a2 2 0 0 0-2 2v11.5A2.5 2.5 0 0 0 4.5 19H7l3.8 3.2a1 1 0 0 0 1.6-.8V19H20a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM6 8h12v2H6V8Zm0 4h8v2H6v-2Z"/></svg>
              Feedback
            </a>
          </div>
        </div>
      </div>
    `;

    this.shadowRoot.appendChild(tpl.content.cloneNode(true));

    // auto-detect page background brightness
    try {
      const bg = getComputedStyle(document.body).backgroundColor;
      const rgb = bg.match(/\d+/g)?.map(Number) || [255,255,255];
      const [r,g,b] = rgb;
      const luminance = (0.2126*r + 0.7152*g + 0.0722*b)/255;
      const root = this.shadowRoot.host;
      if (luminance < 0.35) {
        root.style.setProperty('--tab-bg','#f9fafb');
        root.style.setProperty('--tab-color','#0b1220');
        root.style.setProperty('--tab-border','rgba(0,0,0,.2)');
        root.style.setProperty('--hole-fill','#fff');
        root.style.setProperty('--panel-bg','rgba(31,41,55,.92)');
      }
    } catch(_) {}
  }
}
customElements.define('help-hint', HelpHint);
</script>;
--am_header_path: 6479b08fe4e77.png;
--am_link_color_a99: #0079d199;

}
/* end: variables from theme configuration */

body, html {
    font-size: var(--am_font_size_px);
    background: none;
}

html {
    background: var(--am_bg);
    background-size: var(--am_bg_size);
    background-attachment: var(--am_bg_attachment);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.am-layout {
    flex: 1;
}

.am-footer {
    height: auto;
    background: var(--am_footer_bg);
}

.am-common {
    font-family: var(--am_font_family), san-serif;
    color: var(--am_text_color);
}

.am-common legend {
    color: var(--am_text_color);
}

.am-common a {
    color: var(--am_link_color);
    text-decoration-color: var(--am_link_color_a99);
}

.ajax-link, .local-link, .local {
    text-decoration-color: var(--am_link_color_a99);
}

.am-layout {
    min-height: initial;
    margin: 0;
    background: none;
}

.am-header {
    background: var(--am_header_bg);
    background-size: var(--am_header_bg_size);
}

.am-header .am-header-content-wrapper {
    border: none;
    background: none;
}

.am-header-line {
    border:none;
    background: none;
}

.am-footer .am-footer-content-wrapper {
    background: none;
    color: inherit;
    height: auto;
}

.am-footer-content-content {
    padding: 1em 0;
}

.am-footer-text {
    text-align: center;
}

.am-footer .am-footer-content .am-footer-sm a {
    color: var(--am_sm_color);
    font-size: var(--am_sm_size_px);
}

.am-body {
    background: none;
}

.am-body .am-body-content-wrapper {
    border: none;
    padding-bottom: 1em;
    margin-bottom: 50px;
    box-shadow: var(--am_content_shadow);
    border-radius: var(--am_border_radius_px);
    background: var(--am_page_bg);
}

.am-body-content {
    min-height: 300px;
}

.am-header-content-wrapper {
    padding: 0;
}

.am-header-content-content {
    display: none;
}

.am-header .am-header-content .am-header-content-logo {
    float: none;
    margin: 0;
}

.am-header .am-header-content .am-header-logo-wrapper {
    text-align: var(--am_logo_align);
}

.am-main {
    max-width: var(--am_max_width_px);
}

.am-header-content img {
    width: var(--am_logo_width);
}

.am-footer-actions {
    display:none;
}

.am-footer .am-footer-content-wrapper {
    color: var(--am_footer_text_color);
    font-size:.8rem;
}

.am-footer a,
.am-footer a:hover,
.am-footer a:visited,
.am-footer a:active {
    color: var(--am_footer_link_color)
}

.am-user-identity-block {
    float: var(--am_identity_align);
}

.am-page-login .am-header {
    display: var(--am_login_header_display);
}

.am-page-login .am-auth-form legend {
    background: var(--am_login_legend_bg);
    padding-top: var(--am_login_legend_padding_top);
}

.am-page-login .am-auth-form div.am-row {
    background: var(--am_login_form_bg_color);
}

.am-page-login .am-body-content-wrapper {
    background: var(--am_login_bg_color);
    box-shadow: var(--am_login_shadow);
}

.am-auth-form form {
    border: none;
    overflow: hidden;
    box-shadow: 0px 0px 5px #00000022;
}

.am-auth-form form legend {
    border: none;
    background: #f9f9f9;
    padding: 1em 1em 1.5em;
}

.am-auth-form div.am-row div.element,
.am-auth-form div.am-row div.am-element-title {
    padding-right: 2em;
    padding-left: 2em;
}

@media all and (min-width:500px) {

    .am-auth-form div.am-row div.am-element-title {
        padding-right: .5em;
    }
    .am-auth-form div.am-row div.am-element {
        padding-left: .5em;
    }
}

.am-popup {
    border-color: var(--am_color_d);
}

.am-popup .am-popup-header {
    background: var(--am_color);
    color: var(--am_color_c);
}

.am-popup .am-popup-close-icon:after {
    color: var(--am_color_c);
}

.am-fb-login-button-wrapper.am-fb-login-form-after:before,
.am-fb-login-button-wrapper.am-fb-login-form-before:after {
    background: var(--am_color);
}

.am-popup .am-fb-login-button-wrapper.am-fb-login-form-after::before,
.am-popup .am-fb-login-button-wrapper.am-fb-login-form-before::after {
    background: white;
}

.am-signup-link {
    color: var(--am_color_c);
}

.am-login-layout-with-sidebar {
    max-width: 800px;
    margin: 2em auto 0;
}

.am-login-layout-with-sidebar .am-login-form-wrapper,
.am-login-layout-with-sidebar .am-sendpass-form-wrapper {
    margin-top: 0;
}

.am-signup-link {
    max-width: 450px;
    margin: 1em auto 0;
}

@media all and (min-width: 800px) {
    .am-login-layout-with-sidebar .am-login-layout-with-sidebar_form {
        float: left;
        width: 65%;
    }
    .am-login-layout-with-sidebar .am-login-layout-with-sidebar_sidebar {
        display: block;
        width: 35%;
        float: right;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .am-login-layout-with-sidebar .am-auth-form {
        margin: 0;
    }
    .am-login-layout-with-sidebar .am-signup-link {
        margin: 1em 0 0;
    }
}
.am-login-layout-with-sidebar .am-login-layout-with-sidebar_sidebar {
    border-radius: 3px;
    padding: 1em 2em;
    max-width: 450px;
    box-sizing: border-box;
    box-shadow: 0 0 5px #00000022;
    background: #f9f9f9;
    color: #555;
}
.am-login-layout-with-sidebar_clear {
    clear: both;
}

@media all and (max-width: 799px) {
    .am-login-layout-with-sidebar .am-login-layout-with-sidebar_sidebar {
        margin: 2em auto 0;
    }
}

ul.am-tabs li.active,
ul.am-tabs li.normal:hover {
    background: var(--am_menu_color);
}

ul.am-tabs li.active > a,
ul.am-tabs li.normal > a:hover {
    border-color: var(--am_menu_color);
}

.am-page-login-no-label .am-auth-form,
.am-page-login-no-label .am-signup-link,
.am-page-login-no-label .am-fb-login-button-wrapper {
    max-width:350px;
}

.am-page-login-no-label .am-auth-form div.am-row div.am-element-title {
    display: none;
}

.am-page-login-no-label .am-auth-form div.am-row div.am-element {
    margin:0;
    padding:.6em 2em;
}

.am-page-login-no-label .am-auth-form div.am-row div.am-element input[type=submit],
.am-page-login-no-label .am-auth-form div.am-row div.am-element input[type=submit]:active,
.am-page-login-no-label .am-auth-form div.am-row div.am-element input[type=submit]:hover,
.am-page-login-no-label .am-auth-form div.am-row div.am-element input[type=submit]:disabled {
    width: 100%;
}

.am-page-login-no-label .am-auth-form .am-form-login-switch-wrapper {
    text-align: center;
    display: block;
    padding: 1.2em 2em .6em;
}

.am-page-login-no-label .am-auth-form .am-form-login-switch-wrapper  .am-form-login-switch {
    margin:0;
}

@media all and (max-width: 799px) {
    .am-page-login-no-label .am-login-layout-with-sidebar .am-login-layout-with-sidebar_sidebar {
        max-width:350px;
        margin: 2em auto 0;
    }
}

.am-body-content input,
.am-body-content textarea,
.am-body-content select,
.am-body-content button,
.am-popup input,
.am-popup textarea,
.am-popup select,
.am-popup button {
    font-family: var(--am_font_family), san-serif;
}

.am-body-content a.button,
.am-body-content button,
.am-body-content input[type="button"],
.am-body-content input[type="submit"],
.am-popup a.button,
.am-popup button,
.am-popup input[type="button"],
.am-popup input[type="submit"],
.am-body-content a.button:hover,
.am-body-content button:hover,
.am-body-content input[type="button"]:hover,
.am-body-content input[type="submit"]:hover,
.am-popup a.button:hover,
.am-popup button:hover,
.am-popup input[type="button"]:hover,
.am-popup input[type="submit"]:hover {
    color: white;
    background: var(--am_btn_color);
    border-color: var(--am_btn_color);
}

.am-body-content input[type=submit]:disabled,
.am-body-content input[type=submit]:disabled:hover,
.am-body-content input[type=button]:disabled,
.am-body-content input[type=button]:disabled:hover,
.am-body-content button:disabled,
.am-body-content button:disabled:hover,
.am-popup input[type=submit]:disabled,
.am-popup input[type=submit]:disabled:hover,
.am-popup input[type=button]:disabled,
.am-popup input[type=button]:disabled:hover
.am-popup button:disabled,
.am-popup button:disabled:hover {
    background: #f1f1f1;
    color: #ccc;
    border-color: #ced4da;
}

.input-file .input-file-button,
.input-file.hover .input-file-button {
    color: white;
    background: var(--am_btn_color);
    border: none;
    text-shadow: none;
}
.input-file.hover {
    border-color: var(--am_btn_color);
}

ul.am-header-menu a {
    color: var(--am_header_menu_link_color);
}

ul.am-header-menu ul a {
    color: var(--am_header_menu_link2_color);
}

ul.am-header-menu > li > a::after {
    background: var(--am_header_menu_link_color);
    opacity: .4;
}

ul.am-header-menu li ul {
    background: var(--am_header_menu_bg_color);
}

.am-grid-wrap .filter-button input[type=submit] {
    border-color: #ced4da;
}