/* namespaced styles only under #mph-mobile-header to avoid collisions */
#mph-mobile-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999999; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; pointer-events: auto; }

/* Force LTR inside header for consistent logo left / actions right */
#mph-mobile-header.mph-rtl-fix, #mph-mobile-header .mph-topbar { direction: ltr; }

/* CSS variables defaults (overridden by inline CSS produced by PHP) */
#mph-mobile-header {
  --mph-header-height: 64px;
  --mph-logo-height: 40px;
  --mph-icon-size: 20px;
  --mph-header-bg-light: #000;
  --mph-menu-bg-light: #111;
  --mph-menu-link-light: #fff;
  --mph-header-bg-dark: #0b0b0b;
  --mph-menu-bg-dark: #101010;
  --mph-menu-link-dark: #fff;
  --mph-btn-color-light: #007AFF;
  --mph-btn-color-dark: #0A84FF;
  --mph-search-icon-light: #fff;
  --mph-search-icon-dark: #fff;
}

/* Topbar */
#mph-mobile-header .mph-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; box-sizing:border-box;
  height: var(--mph-header-height);
  background: var(--mph-header-bg-light);
  color: inherit;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* left/right */
#mph-mobile-header .mph-left,
#mph-mobile-header .mph-right { display:flex; align-items:center; gap:12px; }

/* logo */
#mph-mobile-header .mph-logo img { height: var(--mph-logo-height); width:auto; display:block; }

/* buttons */
#mph-mobile-header .mph-btn {
  background:transparent; border: none; padding: 8px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--mph-btn-color-light);
}
#mph-mobile-header .mph-btn:focus { outline: 2px solid rgba(0,0,0,0.12); outline-offset: 2px; }

/* icons */
#mph-mobile-header .mph-icon { width: var(--mph-icon-size); height: var(--mph-icon-size); stroke: currentColor; color: inherit; }

/* hamburger */
#mph-mobile-header .mph-hamburger { width:22px; height:16px; display:inline-block; }
#mph-mobile-header .mph-hamburger span { display:block; height:2px; background: currentColor; margin:3px 0; border-radius:2px; transition: transform .18s ease, opacity .18s ease; }

/* SEARCH BAR (improved UI) */
#mph-mobile-header .mph-search-bar {
  position: fixed; top: calc(var(--mph-header-height)); left:0; right:0; padding:10px 14px; z-index:999998;
  display:flex; justify-content:center;
}
#mph-mobile-header .mph-search-bar form { width:100%; max-width:900px; display:flex; gap:8px; align-items:center; }
#mph-mobile-header .mph-search-bar input[type="search"]{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color:inherit; font-size:16px;
}
#mph-mobile-header .mph-search-bar input::placeholder{ color: rgba(255,255,255,0.6); }
#mph-mobile-header .mph-search-bar button{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--mph-btn-color-light); color:#fff; border:none; }

/* MOBILE MENU (non-fullscreen): panel with rounded corners */
#mph-mobile-header .mph-mobile-menu { position: fixed; top: calc(var(--mph-header-height)); left: 0; right: 0; z-index:999997; pointer-events:none; opacity:0; transform: translateY(-6px); transition: transform .28s ease, opacity .28s ease; }
#mph-mobile-header .mph-mobile-menu.open { pointer-events:auto; opacity:1; transform: translateY(0); }
#mph-mobile-header .mph-mobile-menu .mph-menu-panel { margin:8px 12px; border-radius:12px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-height: 70vh; background: var(--mph-menu-bg-light); }
#mph-mobile-header .mph-mobile-menu-head { display:flex; justify-content:flex-end; padding:8px 12px; }
#mph-mobile-header .mph-menu-close { background:transparent; border:none; font-size:20px; padding:6px; cursor:pointer; color:inherit; }
#mph-mobile-header .mph-mobile-menu-body { padding: 0 8px 12px; overflow:auto; max-height: calc(70vh - 48px); }
#mph-mobile-header .mph-mobile-menu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }

/* --- RIGHT ALIGN MENU ITEMS (for RTL sites) --- */
#mph-mobile-header .mph-mobile-menu-list {
  direction: rtl;
  text-align: right;
}
#mph-mobile-header .mph-mobile-menu-list a {
  display:block; padding:14px 8px; color: var(--mph-menu-link-light); text-decoration:none; font-size:16px; text-align: right;
}
#mph-mobile-header .mph-mobile-menu-list li { border-bottom:1px solid rgba(255,255,255,0.03); }

/* overlay */
#mph-mobile-header .mph-overlay { position:fixed; inset:0; background: rgba(0,0,0,0.35); z-index:999996; display:none; }
#mph-mobile-header .mph-overlay.open { display:block; }

/* push class: only when body.mph-push exists (we won't add padding otherwise) */
body.mph-push { padding-top: var(--mph-header-height) !important; }

/* dark mode rules (we only read common dark selectors, do NOT change them) */
body.pro-dm--dark #mph-mobile-header .mph-topbar,
body.wp-dark-mode #mph-mobile-header .mph-topbar,
[data-theme="dark"] #mph-mobile-header .mph-topbar { background: var(--mph-header-bg-dark); }
body.pro-dm--dark #mph-mobile-header .mph-menu-panel,
body.wp-dark-mode #mph-mobile-header .mph-menu-panel,
[data-theme="dark"] #mph-mobile-header .mph-menu-panel { background: var(--mph-menu-bg-dark); }
body.pro-dm--dark #mph-mobile-header .mph-mobile-menu-list a,
body.wp-dark-mode #mph-mobile-header .mph-mobile-menu-list a,
[data-theme="dark"] #mph-mobile-header .mph-mobile-menu-list a { color: var(--mph-menu-link-dark); }
body.pro-dm--dark #mph-mobile-header .mph-btn,
body.wp-dark-mode #mph-mobile-header .mph-btn,
[data-theme="dark"] #mph-mobile-header .mph-btn { color: var(--mph-btn-color-dark); }
body.pro-dm--dark #mph-mobile-header .mph-icon,
body.wp-dark-mode #mph-mobile-header .mph-icon,
[data-theme="dark"] #mph-mobile-header .mph-icon { color: var(--mph-search-icon-dark); }

/* safety: ensure header hidden on desktop by default (server-side inline CSS also adds breakpoint-specific rule) */
@media (min-width: 901px) {
  #mph-mobile-header { display:none !important; }
  body { padding-top: 0 !important; }
}