/* FB Clone Hosting | macOS Pro colored SVG icon system (member shell only)
   Loaded AFTER member_preferences.css; no global icon or login overrides. */

body.hm-body.hm-member {
  --hm-icon-blue:#0a84ff;
  --hm-icon-indigo:#5965e9;
  --hm-icon-cyan:#008ebf;
  --hm-icon-orange:#ed8431;
  --hm-icon-purple:#8754d9;
  --hm-icon-green:#16a66b;
  --hm-icon-coral:#ed5b70;
  --hm-icon-violet:#7259d5;
  --hm-icon-teal:#079eaa;
}

body.hm-body.hm-member .hm-macos-icon{
  --hm-icon-bg:var(--hm-icon-blue);
  display:inline-flex !important;
  flex:0 0 30px;
  width:30px;height:30px;
  box-sizing:border-box;
  align-items:center;justify-content:center;
  border:0 !important;
  border-radius:9px;
  background:var(--hm-icon-bg) !important;
  color:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.09);
  vertical-align:middle;
  position:relative;
}
body.hm-body.hm-member .hm-macos-icon svg,
body.hm-body.hm-member .hm-macos-icon .site-icon{
  display:block;
  width:16px !important;height:16px !important;
  color:#fff !important;
  stroke:currentColor;
  flex:none;
}
body.hm-body.hm-member .hm-macos-icon--home{--hm-icon-bg:var(--hm-icon-blue)}
body.hm-body.hm-member .hm-macos-icon--account{--hm-icon-bg:var(--hm-icon-indigo)}
body.hm-body.hm-member .hm-macos-icon--products{--hm-icon-bg:var(--hm-icon-cyan)}
body.hm-body.hm-member .hm-macos-icon--news{--hm-icon-bg:var(--hm-icon-orange)}
body.hm-body.hm-member .hm-macos-icon--categories{--hm-icon-bg:var(--hm-icon-purple)}
body.hm-body.hm-member .hm-macos-icon--wallet{--hm-icon-bg:var(--hm-icon-green)}
body.hm-body.hm-member .hm-macos-icon--orders{--hm-icon-bg:var(--hm-icon-coral)}
body.hm-body.hm-member .hm-macos-icon--policy{--hm-icon-bg:var(--hm-icon-violet)}
body.hm-body.hm-member .hm-macos-icon--support{--hm-icon-bg:var(--hm-icon-teal)}
body.hm-body.hm-member .hm-macos-icon--bell{--hm-icon-bg:#7155d9}
body.hm-body.hm-member .hm-macos-icon--user{--hm-icon-bg:#388cf0}
body.hm-body.hm-member .hm-macos-icon--balance{--hm-icon-bg:#10a774}
body.hm-body.hm-member .hm-macos-icon--tier{--hm-icon-bg:#e69a22}
body.hm-body.hm-member .hm-macos-icon--date{--hm-icon-bg:#6179d6}
body.hm-body.hm-member .hm-macos-icon--logout{--hm-icon-bg:#dd5263}

/* Sidebar: colored icon wells sit at the beginning of each navigation row.
   Keep the original link hit areas, active-state logic and submenu behavior. */
body.hm-body.hm-member .hm-sidebar .hm-side-link{
  display:flex;
  align-items:center;
  column-gap:10px;
  min-width:0;
}
body.hm-body.hm-member .hm-sidebar .hm-side-link>.hm-macos-icon{
  flex:0 0 30px;
}
body.hm-body.hm-member .hm-sidebar .hm-side-expand>summary.hm-side-link>.site-icon:last-child{
  margin-left:auto;
  flex:none;
}
body.hm-body.hm-member .hm-sidebar .hm-side-link:hover .hm-macos-icon,
body.hm-body.hm-member .hm-sidebar .hm-side-link.is-active .hm-macos-icon{
  box-shadow:0 2px 8px rgba(20,35,85,.18);
}

/* Member account panel: separate solid-color SVG wells, without changing
   the trusted member tier badge, balance text or account actions. */
body.hm-body.hm-member .hm-sidebar .hm-market-member-title{
  display:inline-flex;min-width:0;align-items:center;gap:6px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-title>.hm-macos-icon{
  flex:0 0 24px;width:24px;height:24px;border-radius:7px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-title>.hm-macos-icon svg{
  width:13px!important;height:13px!important;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-head{
  flex-wrap:wrap;row-gap:6px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-status{
  white-space:nowrap;max-width:100%;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail-label{
  display:inline-flex;align-items:center;gap:7px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail-label>.hm-macos-icon,
body.hm-body.hm-member .hm-sidebar .hm-market-member-orders .hm-macos-icon,
body.hm-body.hm-member .hm-sidebar .hm-market-member-logout>.hm-macos-icon{
  flex:0 0 25px;width:25px;height:25px;border-radius:7px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail-label>.hm-macos-icon svg,
body.hm-body.hm-member .hm-sidebar .hm-market-member-orders .hm-macos-icon svg,
body.hm-body.hm-member .hm-sidebar .hm-market-member-logout>.hm-macos-icon svg{
  width:14px!important;height:14px!important;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail,
body.hm-body.hm-member .hm-sidebar .hm-market-member-orders,
body.hm-body.hm-member .hm-sidebar .hm-market-member-logout{
  min-height:36px;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail-label{
  min-width:0;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-detail strong{
  max-width:100%;
}

/* Toolbar: same solid SVG icons, but the toolbar controls stay 44px tall
   and keep their old destinations and notification counter. */
body.hm-body.hm-member .hm-header .hm-header-actions>a.hm-header-action{
  display:inline-flex;align-items:center;justify-content:center;
}
body.hm-body.hm-member .hm-header .hm-header-actions>a.hm-header-action>.hm-macos-icon{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;
}
body.hm-body.hm-member .hm-header .hm-header-actions>a.hm-header-action>.hm-macos-icon svg{
  width:17px!important;height:17px!important;
}
body.hm-body.hm-member .hm-security-bell .hm-security-count{
  position:absolute;z-index:2;
}
body.hm-body.hm-member .hm-search>svg.site-icon{color:#6384ae}

/* No changes to the login screen; the dark-mode engine controls background
   and typography, these wells remain white-on-solid in both themes. */
@media(max-width:760px){
  body.hm-body.hm-member .hm-sidebar .hm-side-link{column-gap:8px}
  body.hm-body.hm-member .hm-sidebar .hm-market-member-head{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  body.hm-body.hm-member .hm-macos-icon{transition:none!important}
}


/* ===== Sidebar icon alignment + genuine SVG submenu icons (V2) =====
   Uses the actual .hm-side-submenu markup. Prior icon color rules above
   are preserved verbatim; light/dark mode and PJAX are unaffected. */
body.hm-body.hm-member .hm-sidebar .hm-side-expand > summary.hm-side-link > .hm-macos-icon--products {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 30px !important;
  position: relative !important;
  line-height: 1 !important;
}
body.hm-body.hm-member .hm-sidebar .hm-side-expand > summary.hm-side-link > .hm-macos-icon--products > svg.site-icon {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu > a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 34px;
  box-sizing: border-box;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu > a > span:last-child {
  min-width: 0;
  line-height: 1.25;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu .hm-macos-subicon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  height: 23px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border-radius: 7px;
  color: #fff !important;
  background-color: #2563eb !important;
  vertical-align: middle;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu .hm-macos-subicon--category {
  background-color: #8b5cf6 !important;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu > a:nth-of-type(3n) .hm-macos-subicon--category {
  background-color: #0891b2 !important;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu > a:nth-of-type(3n + 1):not(:first-child) .hm-macos-subicon--category {
  background-color: #f97316 !important;
}
body.hm-body.hm-member .hm-sidebar .hm-side-submenu .hm-macos-subicon > svg.site-icon {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  stroke: currentColor !important;
  flex: none !important;
}
/* Avoid covering real SVGs with duplicate decorative pseudo-icons. */
body.hm-body.hm-member .hm-sidebar .hm-side-submenu > a::before {
  content: none !important;
  display: none !important;
}