/* Alpha 37 — precise mobile header geometry and perfectly matched action icons. */
:root{--mb37-header-edge:46px;--mb37-tool:38px;--mb37-gap:7px}

/* Desktop keeps the established composition. The mobile toggle is an independent sibling. */
html body #makkah-v2-header .makkah-v2-menu-toggle{flex:none!important}

@media(max-width:900px){
  html body #makkah-v2-header .makkah-v2-header-row{
    display:grid!important;
    grid-template-columns:var(--mb37-header-edge) minmax(0,1fr) var(--mb37-header-edge)!important;
    grid-template-areas:"brand tools menu"!important;
    align-items:center!important;
    justify-items:stretch!important;
    column-gap:8px!important;
    min-height:68px!important;
    padding:0 12px!important;
    direction:ltr!important;
  }
  html body #makkah-v2-header .makkah-v2-brand-wrap{
    grid-area:brand!important;
    width:var(--mb37-header-edge)!important;
    min-width:var(--mb37-header-edge)!important;
    max-width:var(--mb37-header-edge)!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    margin:0!important;
  }
  html body #makkah-v2-header .makkah-v2-brand-wrap .custom-logo-link,
  html body #makkah-v2-header .makkah-v2-brand-wrap .makkah-v2-brand{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:44px!important;height:52px!important;margin:0!important;padding:0!important;
  }
  html body #makkah-v2-header .makkah-v2-brand-wrap img.custom-logo{
    width:auto!important;height:46px!important;max-width:44px!important;max-height:46px!important;object-fit:contain!important;
  }
  html body #makkah-v2-header .makkah-v2-actions{
    grid-area:tools!important;
    width:100%!important;
    min-width:0!important;
    height:var(--mb37-tool)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:var(--mb37-gap)!important;
    margin:0!important;
    padding:0!important;
    direction:ltr!important;
  }
  html body #makkah-v2-header .makkah-v2-actions>.mb30-header-icon{
    flex:0 0 var(--mb37-tool)!important;
    width:var(--mb37-tool)!important;
    height:var(--mb37-tool)!important;
    min-width:var(--mb37-tool)!important;
    max-width:var(--mb37-tool)!important;
    min-height:var(--mb37-tool)!important;
    max-height:var(--mb37-tool)!important;
    margin:0!important;
    padding:0!important;
    border-radius:10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:0!important;
  }
  html body #makkah-v2-header .makkah-v2-actions>.mb30-header-icon>svg{
    width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;
    margin:0!important;padding:0!important;display:block!important;transform:none!important;
  }
  html body #makkah-v2-header .makkah-v2-actions>.makkah-v2-cta{display:none!important}
  html body #makkah-v2-header .makkah-v2-menu-toggle{
    grid-area:menu!important;
    position:relative!important;
    inset:auto!important;
    align-self:center!important;
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;
    margin:0!important;padding:8px!important;
    box-sizing:border-box!important;
  }
  html body #makkah-v2-header .makkah-v2-menu-toggle span{
    width:22px!important;height:2px!important;min-height:2px!important;margin:2.5px 0!important;border-radius:99px!important;
  }
}

@media(max-width:380px){
  :root{--mb37-header-edge:42px;--mb37-tool:35px;--mb37-gap:5px}
  html body #makkah-v2-header .makkah-v2-header-row{column-gap:5px!important;padding:0 8px!important}
  html body #makkah-v2-header .makkah-v2-brand-wrap,
  html body #makkah-v2-header .makkah-v2-brand-wrap .custom-logo-link,
  html body #makkah-v2-header .makkah-v2-brand-wrap .makkah-v2-brand{width:42px!important;min-width:42px!important;max-width:42px!important}
  html body #makkah-v2-header .makkah-v2-brand-wrap img.custom-logo{height:43px!important;max-width:40px!important;max-height:43px!important}
  html body #makkah-v2-header .makkah-v2-menu-toggle{width:39px!important;height:39px!important;min-width:39px!important;max-width:39px!important}
  html body #makkah-v2-header .makkah-v2-actions>.mb30-header-icon>svg{width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important}
}