/* ================================================================
   crmx-mobile.css — New Mobile Menu for CRM Xperts
   Upload to: demo-theme/assets/scss/crmx-mobile.css
   Add to enqueue.php inside acf_assets():
     wp_enqueue_style('crmx-mobile',
       get_template_directory_uri().'/assets/scss/crmx-mobile.css',
       array('acf-style-header'), '1.0');
   ================================================================ */

/* Overlay backdrop */
#crmx-mobile { display: none; }
#crmx-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,25,50,0.55);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
#crmx-mobile.open { display: block; }
#crmx-mobile.open #crmx-overlay { opacity: 1; }

/* Drawer */
#crmx-drawer {
  position: fixed; top: 0; right: -100%; bottom: 0;
  width: 88%; max-width: 360px;
  background: #ffffff;
  z-index: 1200;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 40px rgba(15,25,50,0.18);
  transition: right .32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#crmx-mobile.open #crmx-drawer { right: 0; }

/* Header bar */
#crmx-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E8EDF3;
  flex-shrink: 0;
}
#crmx-header img { height: 32px; width: auto; display: block; }
#crmx-close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: #F4F7FA; border: none; cursor: pointer;
  color: #5A6B82; transition: background .2s;
}
#crmx-close:hover { background: #E8EDF3; color: #1B2A4A; }

/* Scrollable body */
#crmx-body {
  flex: 1; overflow-y: auto; padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

/* Group = one section (Services / Platforms / etc) */
.crmx-group { border-bottom: 1px solid #F0F3F7; }

/* Section heading button */
.crmx-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; background: #fff; border: none; cursor: pointer;
  font-family: 'Mulish', sans-serif; font-size: 1rem; font-weight: 700;
  color: #1B2A4A; text-align: left;
  transition: background .18s;
}
.crmx-head:hover { background: #F7F9FB; }
.crmx-head.open { color: #1A9E92; }
.crmx-head > span { flex: 1; }

/* Chevron */
.crmx-chev {
  flex-shrink: 0; color: #A8B5C8;
  transition: transform .25s ease, color .2s;
}
.crmx-head.open > .crmx-chev { transform: rotate(180deg); color: #2EC4B6; }
.crmx-sub-head.open > .crmx-chev { transform: rotate(180deg); color: #2EC4B6; }

/* Panel — hidden by default */
.crmx-panel {
  display: none;
  background: #FAFBFC;
  border-top: 1px solid #F0F3F7;
  padding: 4px 0 8px;
}
.crmx-panel.open { display: block; }

/* Section label inside panel */
.crmx-panel-label {
  padding: 10px 20px 4px;
  font-family: 'League Spartan', sans-serif;
  font-size: .66rem; font-weight: 700;
  color: #A8B5C8; text-transform: uppercase; letter-spacing: .1em;
}

/* Link inside panel */
.crmx-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  font-family: 'Mulish', sans-serif;
  font-size: .9rem; font-weight: 600;
  color: #2D3E56; text-decoration: none;
  transition: color .18s, background .18s;
  border-left: 3px solid transparent;
}
.crmx-link:hover {
  color: #1A9E92; background: rgba(46,196,182,.05);
  border-left-color: #2EC4B6;
}
.crmx-link svg {
  width: 16px; height: 16px; flex-shrink: 0;
  color: #2EC4B6; opacity: .75;
}

/* Sub-section heading (Salesforce / Zoho inside Platforms) */
.crmx-sub-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 12px 24px;
  background: #FAFBFC; border: none; cursor: pointer;
  font-family: 'Mulish', sans-serif; font-size: .9rem; font-weight: 700;
  color: #1B2A4A; border-top: 1px solid #F0F3F7;
  transition: background .18s;
}
.crmx-sub-head:first-child { border-top: none; }
.crmx-sub-head:hover { background: #F0F3F7; }
.crmx-sub-head.open { color: #1A9E92; background: rgba(46,196,182,.04); }
.crmx-sub-head > span { flex: 1; }

/* Sub-panel — hidden by default */
.crmx-sub-panel { display: none; }
.crmx-sub-panel.open { display: block; }

/* Links inside sub-panel */
.crmx-sub-link {
  display: block;
  padding: 10px 20px 10px 36px;
  font-family: 'Mulish', sans-serif;
  font-size: .87rem; font-weight: 600;
  color: #5A6B82; text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .18s, background .18s;
}
.crmx-sub-link:hover {
  color: #1A9E92; background: rgba(46,196,182,.05);
  border-left-color: #2EC4B6;
}
.crmx-sub-all {
  color: #1A9E92 !important; font-weight: 700 !important;
  padding-left: 36px !important;
}

/* Footer CTA */
#crmx-footer {
  padding: 16px 20px;
  border-top: 1px solid #E8EDF3;
  flex-shrink: 0;
}
#crmx-cta {
  display: block; text-align: center;
  padding: 14px 24px;
  background: linear-gradient(135deg, #2EC4B6, #4DA3E8);
  color: #fff; font-family: 'Mulish', sans-serif;
  font-weight: 700; font-size: .95rem;
  border-radius: 50px; text-decoration: none;
  box-shadow: 0 4px 16px rgba(46,196,182,.3);
  transition: box-shadow .25s, transform .25s;
}
#crmx-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(46,196,182,.4); }

/* Hamburger open animation */
.mn-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mn-toggle.is-open span:nth-child(2) { opacity: 0; }
.mn-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Only show on mobile */
@media (min-width: 769px) {
  #crmx-mobile { display: none !important; }
}