/* ================================================================
   MedEasy Mobile Header — mh.css
   All classes prefixed mh-. Critical layout props use !important
   so nothing in new-header.css / Bootstrap can override them.
   ================================================================ */

/* ── Old-header hide (mobile only) ──────────────────────────── */
@media (max-width: 992px) {
    .medeasy-top-header  { display: none !important; }
    .medeasy-bottom-nav  { display: none !important; }
    /* 10px top + 44px row1 + 8px gap + 44px row2 + 8px bottom = 114px + 1px border */
    body                 { padding-top: 116px !important; }
}

/* ── CSS tokens ──────────────────────────────────────────────── */
.mh-header, .mh-drawer, .mh-overlay {
    --mhP:  #2563eb;
    --mhPh: #1d4ed8;
    --mhPl: #eff6ff;
    --mhT:  #0f172a;
    --mhT2: #64748b;
    --mhBd: #e2e8f0;
    --mhBg: #f8fafc;
    --mhWh: #ffffff;
    --mhSh: 0 2px 16px rgba(0,0,0,.08);
    --mhR:  12px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   HEADER SHELL
   ══════════════════════════════════════════════════════════════ */
.mh-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9100 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.08) !important;
    padding: 10px 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    /* Explicit vw cap — prevents body overflow-x:hidden expanding 100% beyond viewport */
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ── Row 1 ───────────────────────────────────────────────────── */
.mh-row1 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Burger */
.mh-burger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    outline: none !important;
}
.mh-burger:hover  { background: #f8fafc !important; }
.mh-burger:active { background: #eff6ff !important; }
.mh-burger:focus  { outline: none !important; box-shadow: none !important; }

.mh-burger-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 20px !important;
    pointer-events: none !important;
}
.mh-burger-bars b {
    display: block !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #0f172a !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1),
                opacity  .28s,
                width    .28s;
    transform-origin: center !important;
    font-weight: normal !important;
}
.mh-burger-bars b:nth-child(1) { width: 20px !important; }
.mh-burger-bars b:nth-child(2) { width: 14px !important; }
.mh-burger-bars b:nth-child(3) { width: 20px !important; }

/* ✕ animation when open */
.mh-header.mh-open .mh-burger-bars b:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    width: 20px !important;
}
.mh-header.mh-open .mh-burger-bars b:nth-child(2) {
    opacity: 0 !important;
    width: 0 !important;
}
.mh-header.mh-open .mh-burger-bars b:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    width: 20px !important;
}

/* Logo */
.mh-logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}
.mh-logo {
    height: 36px !important;
    width: auto !important;
    max-width: 136px !important;
    object-fit: contain !important;
    flex-shrink: 1 !important;
    display: block !important;
}

/* Separator */
.mh-sep {
    display: block !important;
    width: 1px !important;
    height: 22px !important;
    background: #e2e8f0 !important;
    flex-shrink: 0 !important;
}

/* HIPAA badge */
.mh-hipaa {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}
.mh-hipaa-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.mh-hipaa-txt {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
}
.mh-hipaa-txt em {
    font-style: normal !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: .04em !important;
}
.mh-hipaa-txt small {
    font-size: 8px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    letter-spacing: .02em !important;
}

/* Spacer */
.mh-flex1 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* CTA button */
.mh-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 16px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 38px !important;
    letter-spacing: .01em !important;
    border: none !important;
    box-shadow: none !important;
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1 !important;
}
.mh-cta:hover  { background: #1d4ed8 !important; color: #ffffff !important; }
.mh-cta:active { transform: scale(.97); color: #ffffff !important; }
.mh-cta:focus  { color: #ffffff !important; outline: none !important; }

/* ── Row 2: Search pill ──────────────────────────────────────── */
.mh-row2 {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mh-search {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 16px !important;
    height: 44px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
    text-align: left !important;
    box-shadow: none !important;
    /* Use 0 base + flex-grow to fill row; cap at vw to prevent overflow */
    width: 0 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.mh-search:hover,
.mh-search:focus {
    border-color: #2563eb !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
    outline: none !important;
}
.mh-search i {
    color: #2563eb !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.mh-search span {
    font-size: 13px !important;
    color: #64748b !important;
    font-family: 'Poppins', sans-serif !important;
    flex: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════════════════════════ */
.mh-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.48) !important;
    z-index: 9099 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .3s, visibility .3s;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none !important;
}
.mh-overlay.mh-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   DRAWER
   ══════════════════════════════════════════════════════════════ */
.mh-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 288px !important;
    max-width: 88vw !important;
    background: #ffffff !important;
    z-index: 9200 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.14) !important;
    overflow: hidden !important;
}
.mh-drawer.mh-open {
    transform: translateX(0) !important;
}

/* Drawer top bar */
.mh-drawer-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}
.mh-drawer-logo {
    height: 30px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}
.mh-drawer-x {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: none !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #64748b !important;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.mh-drawer-x:hover { background: #fee2e2 !important; color: #dc2626 !important; }
.mh-drawer-x:focus { outline: none !important; }

/* Drawer scrollable body */
.mh-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 10px 16px !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
}
.mh-drawer-body::-webkit-scrollbar { display: none !important; }

/* Section label */
.mh-sec-lbl {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 10px 10px 6px !important;
}

/* Nav item */
.mh-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background .15s;
    margin-bottom: 2px !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
}
.mh-nav-item:hover,
.mh-nav-item:active {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.mh-nav-item:hover .mh-ico,
.mh-nav-item:active .mh-ico {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* Icon pill */
.mh-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    color: #2563eb !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    transition: background .15s, color .15s;
}
.mh-nav-lbl {
    flex: 1 !important;
    min-width: 0 !important;
}
.mh-nav-arr {
    color: #e2e8f0 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* Rule divider */
.mh-rule {
    display: block !important;
    height: 1px !important;
    background: #e2e8f0 !important;
    margin: 8px 10px !important;
    border: none !important;
}

/* ── Auth footer ─────────────────────────────────────────────── */
.mh-drawer-foot {
    padding: 12px 12px 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.mh-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, transform .1s;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.mh-btn:active { transform: scale(.98); }
.mh-btn:focus  { outline: none !important; }

.mh-btn-outline {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
}
.mh-btn-outline:hover { border-color: #2563eb !important; color: #2563eb !important; }

.mh-btn-solid {
    background: #2563eb !important;
    color: #ffffff !important;
}
.mh-btn-solid:hover  { background: #1d4ed8 !important; color: #ffffff !important; }
.mh-btn-solid:focus  { color: #ffffff !important; }

.mh-btn-danger {
    background: #ffffff !important;
    border: 1.5px solid #fecaca !important;
    color: #dc2626 !important;
}
.mh-btn-danger:hover { background: #fff1f1 !important; }

/* ── Small-screen refinements ────────────────────────────────── */
@media (max-width: 400px) {
    .mh-header  { padding: 8px 12px 6px !important; }
    .mh-logo    { height: 32px !important; max-width: 120px !important; }
    .mh-hipaa-img { width: 18px !important; height: 18px !important; }
    .mh-cta     { padding: 8px 12px !important; font-size: 12px !important; min-height: 36px !important; }
    body        { padding-top: 110px !important; }
}

@media (max-width: 360px) {
    .mh-logo  { height: 30px !important; max-width: 110px !important; }
    .mh-sep   { display: none !important; }
    .mh-hipaa { display: none !important; }
    body      { padding-top: 108px !important; }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP VISIBILITY GATE — must be LAST in this file.
   Base rules above set display:flex !important on .mh-header etc.
   CSS cascade: equal specificity + !important → last rule wins.
   Placing this block last guarantees it overrides the base rules
   on desktop (≥993px) and the mobile header stays hidden.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 993px) {
    .mh-header,
    .mh-overlay,
    .mh-drawer  { display: none !important; }

    /* Restore desktop body padding (old fixed header handles this) */
    body        { padding-top: 0 !important; }

    /* Restore old header + nav on desktop */
    .medeasy-top-header { display: block !important; }
    .medeasy-bottom-nav { display: block !important; }
}