/* BuddySocial v10.64 - CLEAN MOBILE/TABLET/PWA MENU
   Only <= 1100px. Desktop stays unchanged. */

@media (max-width:1100px){
  body .retro-nav{
    position:relative !important;
    z-index:950 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:linear-gradient(180deg,#2f78b0,#28699f) !important;
    border:0 !important;
  }

  body .retro-nav .retro-navin{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  body .retro-nav .nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
    border:1px solid #1f5c8b !important;
    border-radius:10px !important;
    background:linear-gradient(180deg,#4b91c8,#3478b0) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.25) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 6px rgba(0,0,0,.12) !important;
  }
  body .retro-nav .nav-toggle::after{content:'▾' !important;color:#fff !important;font-size:16px !important;}
  body .retro-nav .nav-toggle[aria-expanded="true"]::after{content:'▴' !important;}

  body .retro-nav #main-nav-links{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:calc(100dvh - 150px) !important;
    margin:7px 0 0 !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    border:1px solid #1f5c8b !important;
    border-radius:11px !important;
    background:#28699f !important;
    box-shadow:0 8px 24px rgba(20,50,75,.20) !important;
  }

  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 8px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  body .retro-nav #main-nav-links .mobile-nav-section-title{
    grid-column:1/-1 !important;
    display:flex !important;
    align-items:center !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:8px !important;
    background:#3f84bc !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.05em !important;
    text-transform:uppercase !important;
    text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  body .retro-nav #main-nav-links .nav-more > summary,
  body .retro-nav #main-nav-links .nav-more-menu > a,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a,
  body .retro-nav #main-nav-links .nav-status-control,
  body .retro-nav #main-nav-links .nav-sound-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 10px !important;
    box-sizing:border-box !important;
    border:1px solid #6ba6d0 !important;
    border-radius:8px !important;
    background:linear-gradient(180deg,#4a8dc2,#3477ae) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-decoration:none !important;
    text-align:left !important;
    text-shadow:0 1px 1px rgba(0,0,0,.20) !important;
    box-shadow:none !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a *,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link *,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link *,
  body .retro-nav #main-nav-links .nav-more > summary *,
  body .retro-nav #main-nav-links .nav-more-menu > a *,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a *,
  body .retro-nav #main-nav-links .nav-status-control *,
  body .retro-nav #main-nav-links .nav-sound-toggle *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a.active,
  body .retro-nav #main-nav-links .nav-primary > a:hover,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link.active,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link:hover,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link.active,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link:hover,
  body .retro-nav #main-nav-links .nav-more.active > summary,
  body .retro-nav #main-nav-links .nav-more > summary:hover,
  body .retro-nav #main-nav-links .nav-more-menu > a.active,
  body .retro-nav #main-nav-links .nav-more-menu > a:hover,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a:hover{
    background:linear-gradient(180deg,#f7ad2b,#e68b08) !important;
    border-color:#ffd17c !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  body .retro-nav #main-nav-links .nav-more{
    grid-column:1/-1 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body .retro-nav #main-nav-links .nav-more > summary{justify-content:space-between !important;list-style:none !important;cursor:pointer !important;}
  body .retro-nav #main-nav-links .nav-more > summary::-webkit-details-marker{display:none !important;}

  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:7px 0 0 !important;
    padding:7px !important;
    box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:9px !important;
    background:#235f92 !important;
  }

  body .retro-nav #main-nav-links .notification-nav-wrap{
    width:100% !important;
    min-width:0 !important;
    position:relative !important;
  }

  body .retro-nav #main-nav-links .nav-status-control{
    grid-column:1/-1 !important;
    padding:5px 7px !important;
  }
  body .retro-nav #main-nav-links .menu-status-select{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 30px 0 9px !important;
    box-sizing:border-box !important;
    border:1px solid #81b3d8 !important;
    border-radius:7px !important;
    background:#2f70a7 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
  }
  body .retro-nav #main-nav-links .menu-status-select option{background:#2f70a7 !important;color:#fff !important;}

  body .retro-nav #main-nav-links .nav-sound-toggle{
    justify-content:center !important;
    font-size:18px !important;
  }

  body .retro-nav #main-nav-links .retro-search{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:7px !important;
    width:100% !important;
    margin:7px 0 0 !important;
    padding:7px !important;
    box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:9px !important;
    background:#235f92 !important;
  }
  body .retro-nav #main-nav-links .retro-search input{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    border:1px solid #bfd5e4 !important;
    border-radius:7px !important;
    background:#fff !important;
    color:#173d59 !important;
    -webkit-text-fill-color:#173d59 !important;
    font-size:13px !important;
  }
  body .retro-nav #main-nav-links .retro-search input::placeholder{color:#708391 !important;-webkit-text-fill-color:#708391 !important;}
  body .retro-nav #main-nav-links .retro-search button{
    min-height:38px !important;
    padding:0 12px !important;
    border:1px solid #d67d04 !important;
    border-radius:7px !important;
    background:linear-gradient(180deg,#f7ad2b,#e68b08) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-weight:900 !important;
  }

  body .retro-nav #main-nav-links .notification-dropdown{
    left:auto !important;
    right:0 !important;
    width:min(92vw,360px) !important;
    max-width:calc(100vw - 24px) !important;
    background:#fff !important;
    color:#173d59 !important;
    -webkit-text-fill-color:#173d59 !important;
    z-index:1200 !important;
  }
  body .retro-nav #main-nav-links .notification-dropdown *{
    color:#173d59 !important;
    -webkit-text-fill-color:#173d59 !important;
    text-shadow:none !important;
  }

  body .retro-nav #main-nav-links .nav-badge{
    margin-left:auto !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  body .retro-nav #main-nav-links .mobile-menu-account-actions > a:last-child{
    background:linear-gradient(180deg,#df7544,#c95a32) !important;
    border-color:#b94e29 !important;
  }
}

@media (max-width:600px){
  body .retro-nav .retro-navin{padding:7px !important;}
  body .retro-nav .nav-toggle{min-height:46px !important;border-radius:9px !important;font-size:16px !important;}
  body .retro-nav #main-nav-links{padding:7px !important;border-radius:10px !important;max-height:calc(100dvh - 135px) !important;}
  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;}
  body .retro-nav #main-nav-links .nav-primary > a,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  body .retro-nav #main-nav-links .nav-more > summary,
  body .retro-nav #main-nav-links .nav-more-menu > a,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a,
  body .retro-nav #main-nav-links .nav-status-control,
  body .retro-nav #main-nav-links .nav-sound-toggle{min-height:40px !important;padding:7px 9px !important;font-size:12.5px !important;border-radius:7px !important;}
  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;padding:6px !important;}
}

@media (min-width:601px) and (max-width:1100px){
  body .retro-nav .retro-navin{padding:9px 12px !important;}
  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  body .retro-nav #main-nav-links .nav-more{grid-column:1/-1 !important;}
  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}

/* Installed PWA/app: exact same responsive menu behavior as browser mobile/tablet. */
@media (display-mode:standalone) and (max-width:1100px){
  body .retro-nav{padding-top:env(safe-area-inset-top,0px) !important;}
  body .retro-nav #main-nav-links{max-height:calc(100dvh - 150px - env(safe-area-inset-top,0px)) !important;}
}