/* v517H — Useful Guide mobile/tablet topbar + floating chat lock
   Scope: Useful Guide pages only. This file intentionally overrides older floating/header rules
   only inside body.useful-guide-page and body.useful-article-page. */

/* Tablet/mobile header: do not allow the full desktop nav to crowd the logo. */
@media (max-width: 1120px){
  body.useful-guide-page .topbar .container.nav,
  body.useful-article-page .topbar .container.nav,
  body.useful-guide-page .topbar .nav,
  body.useful-article-page .topbar .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:68px !important;
    padding:12px 14px !important;
  }

  body.useful-guide-page .topbar .navlinks,
  body.useful-article-page .topbar .navlinks{
    display:none !important;
  }

  body.useful-guide-page .topbar .brand.brand-logo,
  body.useful-article-page .topbar .brand.brand-logo{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }

  body.useful-guide-page .topbar .brand-logo img,
  body.useful-guide-page .topbar .brand img,
  body.useful-guide-page .topbar img.logo-dark,
  body.useful-article-page .topbar .brand-logo img,
  body.useful-article-page .topbar .brand img,
  body.useful-article-page .topbar img.logo-dark{
    display:block !important;
    width:auto !important;
    height:40px !important;
    max-height:40px !important;
    max-width:min(246px,58vw) !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  body.useful-guide-page .topbar .mobile-only,
  body.useful-guide-page .topbar .btn.mobile-only,
  body.useful-article-page .topbar .mobile-only,
  body.useful-article-page .topbar .btn.mobile-only{
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:auto !important;
    min-height:38px !important;
    padding:9px 13px !important;
    font-size:12.5px !important;
    white-space:nowrap !important;
  }
}

@media (max-width: 520px){
  body.useful-guide-page .topbar .container.nav,
  body.useful-article-page .topbar .container.nav,
  body.useful-guide-page .topbar .nav,
  body.useful-article-page .topbar .nav{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body.useful-guide-page .topbar .brand-logo img,
  body.useful-guide-page .topbar .brand img,
  body.useful-guide-page .topbar img.logo-dark,
  body.useful-article-page .topbar .brand-logo img,
  body.useful-article-page .topbar .brand img,
  body.useful-article-page .topbar img.logo-dark{
    height:34px !important;
    max-height:34px !important;
    max-width:min(196px,50vw) !important;
  }

  body.useful-guide-page .topbar .mobile-only,
  body.useful-guide-page .topbar .btn.mobile-only,
  body.useful-article-page .topbar .mobile-only,
  body.useful-article-page .topbar .btn.mobile-only{
    min-height:36px !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }
}

/* Mobile floating controls: keep Need Help visible and keep quick-contact icons separated. */
@media (max-width: 760px){
  body.useful-guide-page,
  body.useful-article-page{
    padding-bottom:calc(142px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.useful-guide-page .vge-chatbot-root:not(.is-open),
  body.useful-article-page .vge-chatbot-root:not(.is-open){
    position:fixed !important;
    right:8px !important;
    left:auto !important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:10080 !important;
    transform:none !important;
  }

  body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher,
  body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher{
    width:auto !important;
    min-width:118px !important;
    max-width:132px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    font-size:12.4px !important;
    white-space:nowrap !important;
  }

  body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher span:last-child,
  body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher span:last-child{
    display:inline !important;
  }

  body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher-icon,
  body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher-icon{
    width:24px !important;
    min-width:24px !important;
    height:24px !important;
    min-height:24px !important;
    font-size:13px !important;
  }

  /* If the JS dock exists, keep the three quick icons in a row above Need Help. */
  body.useful-guide-page .vge-quick-contact-dock-v419G,
  body.useful-article-page .vge-quick-contact-dock-v419G{
    position:fixed !important;
    right:8px !important;
    left:auto !important;
    bottom:calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    width:auto !important;
    max-width:calc(100vw - 16px) !important;
    transform:none !important;
    z-index:10075 !important;
  }

  body.useful-guide-page .vge-quick-contact-item-v419G,
  body.useful-article-page .vge-quick-contact-item-v419G{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }

  body.useful-guide-page .vge-quick-contact-label-v419G,
  body.useful-article-page .vge-quick-contact-label-v419G{
    display:none !important;
  }
body.useful-guide-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-guide-page .vge-quick-contact-item-v419G > a.telegram-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.telegram-float{
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    top:auto !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
  }

  /* Fallback if JS has not wrapped quick-contact links into the dock yet. */
  body.useful-guide-page > a.whatsapp-float,
  body.useful-article-page > a.whatsapp-float{
    position:fixed !important;
    right:calc(8px + 96px) !important;
    bottom:calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 !important;
    z-index:10075 !important;
    border-radius:999px !important;
    transform:none !important;
  }
body.useful-guide-page > a.telegram-float,
  body.useful-article-page > a.telegram-float{
    position:fixed !important;
    right:8px !important;
    bottom:calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 !important;
    z-index:10075 !important;
    border-radius:999px !important;
    transform:none !important;
  }
body.useful-guide-page .whatsapp-text,
body.useful-guide-page .telegram-text,
body.useful-article-page .whatsapp-text,
body.useful-article-page .telegram-text{
    display:none !important;
  }

  body.useful-guide-page .whatsapp-icon,
body.useful-guide-page .telegram-icon,
body.useful-article-page .whatsapp-icon,
body.useful-article-page .telegram-icon{
    width:22px !important;
    min-width:22px !important;
    height:22px !important;
    min-height:22px !important;
    font-size:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media (max-width: 390px){
  body.useful-guide-page .topbar .brand-logo img,
  body.useful-guide-page .topbar .brand img,
  body.useful-guide-page .topbar img.logo-dark,
  body.useful-article-page .topbar .brand-logo img,
  body.useful-article-page .topbar .brand img,
  body.useful-article-page .topbar img.logo-dark{
    max-width:min(170px,47vw) !important;
  }

  body.useful-guide-page .topbar .mobile-only,
  body.useful-guide-page .topbar .btn.mobile-only,
  body.useful-article-page .topbar .mobile-only,
  body.useful-article-page .topbar .btn.mobile-only{
    padding:8px 9px !important;
    font-size:11.5px !important;
  }

  body.useful-guide-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher,
  body.useful-article-page .vge-chatbot-root:not(.is-open) .vge-chatbot-launcher{
    min-width:106px !important;
    max-width:116px !important;
    padding:0 9px !important;
    font-size:11.5px !important;
  }

  body.useful-guide-page .vge-quick-contact-dock-v419G,
  body.useful-article-page .vge-quick-contact-dock-v419G{
    gap:6px !important;
  }
body.useful-guide-page .vge-quick-contact-item-v419G,
body.useful-article-page .vge-quick-contact-item-v419G,
body.useful-guide-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-guide-page .vge-quick-contact-item-v419G > a.telegram-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.whatsapp-float,
body.useful-article-page .vge-quick-contact-item-v419G > a.telegram-float,
body.useful-guide-page > a.whatsapp-float,
body.useful-guide-page > a.telegram-float,
body.useful-article-page > a.whatsapp-float,
body.useful-article-page > a.telegram-float{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
  }

  body.useful-guide-page > a.whatsapp-float,
  body.useful-article-page > a.whatsapp-float{
    right:calc(8px + 84px) !important;
  }
}