:root{--app-nav-h:78px;--app-head-h:122px}
@media (max-width:767px){
 body{padding-bottom:calc(var(--app-nav-h) + env(safe-area-inset-bottom));}
 #mw-app-nav{position:fixed;left:0;right:0;bottom:0;height:var(--app-nav-h);padding-bottom:env(safe-area-inset-bottom);z-index:2147483000;background:#030b15;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 30px rgba(0,0,0,.35);display:grid;grid-template-columns:repeat(4,1fr);}
 #mw-app-nav button{border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:inherit;font-weight:700;font-size:12px;min-width:0}
 #mw-app-nav button .mw-ico{font-size:23px;line-height:1}
 #mw-app-nav button.active{color:#08a8ff;background:#0a1b2d;border-radius:16px;margin:7px 5px}
 #mw-app-account{position:fixed;inset:0;z-index:40;background:#020817;color:#fff;display:none;overflow:auto;padding-top:calc(var(--app-head-h) + 10px);padding-bottom:calc(var(--app-nav-h) + 18px + env(safe-area-inset-bottom));}
 #mw-app-account.open{display:block}
 #mw-app-account .mw-card{margin:0 16px 16px;border:1px solid rgba(30,160,255,.35);border-radius:22px;background:#061b2b;padding:18px}
 #mw-app-account h1{font-size:25px;margin:0 0 6px;font-weight:800}
 #mw-app-account .mw-sub{color:#b8c6d5;font-size:14px}
 #mw-app-account label{display:block;font-size:16px;font-weight:800;margin:14px 0 7px}
 #mw-app-account input{width:100%;box-sizing:border-box;background:#041b2b;color:#fff;border:1.5px solid #64778a;border-radius:15px;padding:15px;font:inherit;outline:none}
 #mw-app-account input:focus{border-color:#159fff}
 .mw-primary{width:100%;border:0;border-radius:15px;background:#0b83f5;color:#fff;padding:15px;font:800 18px inherit;margin-top:16px}
 .mw-link{background:none;border:0;color:#08a8ff;font:700 14px inherit;padding:12px 0;cursor:pointer}
 .mw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 16px}
 .mw-tile{min-height:125px;border-radius:22px;border:2px solid #159fff;background:#08233a;color:#fff;padding:16px;text-align:left;font:800 18px inherit}
 .mw-tile.green{border-color:#00d58a;background:#003d33}.mw-tile.amber{border-color:#ffab00;background:#3a2813}.mw-tile.red{border-color:#ff3157;background:#3a1320}
 .mw-top{display:flex;align-items:center;gap:12px}.mw-top img{width:58px;height:58px;border-radius:50%;object-fit:cover}.mw-top .grow{flex:1}.mw-edit{border:1px solid #159fff;background:transparent;color:#fff;border-radius:14px;padding:11px;font-weight:800}
 .mw-chat{margin:0 16px;background:#061b2b;border:1px solid rgba(30,160,255,.35);border-radius:20px;padding:12px;display:flex;flex-direction:column;height:calc(100vh - var(--app-head-h) - var(--app-nav-h) - 40px)}
 .mw-chat-head{font-weight:800;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.12)}.mw-msgs{flex:1;overflow:auto;padding:10px 2px}.mw-bubble{max-width:78%;padding:10px 12px;border-radius:14px;margin:7px 0;line-height:1.35}.mw-me{margin-left:auto;background:#0b83f5}.mw-admin{background:#16263a}.mw-chat-form{display:flex;gap:8px}.mw-chat-form input{flex:1}.mw-send{border:0;background:#0b83f5;color:#fff;border-radius:13px;padding:0 16px;font-weight:800}
}
@media (min-width:768px){#mw-app-nav,#mw-app-account{display:none!important}}

@media (max-width:767px){
  /* App shell: keep the EXISTING website header fixed on every app view. */
  #root header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:2147482000 !important;
  }
  #root{padding-top:var(--app-head-h) !important;}
  #mw-app-account{
    z-index:2147481500 !important;
    top:0 !important;
    padding-top:calc(var(--app-head-h) + 12px) !important;
  }
  #mw-app-nav{z-index:2147483000 !important;}
}

@media (max-width:767px){
  #root{padding-top:var(--app-head-h)!important;}
  #root header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:2147482000!important;}
  #mw-app-account{padding-top:calc(var(--app-head-h) + 12px)!important;}
  .mw-login-links{display:flex;justify-content:flex-end;width:100%;margin-top:4px;}
  .mw-login-links .mw-link{padding:8px 0 4px;white-space:nowrap;}
  .mw-chat{height:calc(100dvh - var(--app-head-h) - var(--app-nav-h) - 40px)!important;min-height:420px;}
  .mw-chat-head{display:flex;align-items:center;gap:8px;}
  .mw-chat-head .mw-link{margin-left:auto;}
}

@media (max-width:767px){.mw-chat-status{font-size:11px;color:#62d9b2;margin-left:2px}.mw-attach{display:flex;align-items:center;justify-content:center;width:42px;border:1px solid #35516d;border-radius:13px;background:#081b2e;cursor:pointer}.mw-chat-form{align-items:stretch}.mw-chat-form>input{min-width:0}.mw-send{min-width:68px}}


/* FINAL FIX — EXISTING MIR WORLD HEADER IS ALWAYS FIXED */
html{--mw-header-height:122px;}
#root{padding-top:var(--mw-header-height)!important;}
#root header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;margin:0!important;z-index:2147483000!important;transform:none!important;}
body{overflow-x:hidden;}
@media(max-width:767px){#mw-app-account{padding-top:calc(var(--mw-header-height) + 12px)!important;z-index:2147482000!important;}#mw-app-nav{z-index:2147483000!important;}}

/* MIR WORLD FINAL: permanently fixed existing site header on every viewport */
#root header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483647 !important;
}
#root { padding-top: var(--mw-header-height, 122px) !important; }
html { scroll-padding-top: var(--mw-header-height, 122px); }

/* V12 HARD GUARANTEE: fixed header must remain viewport-anchored */
html, body { overflow-x: hidden !important; }
#root, #root > * { transform: none !important; filter: none !important; perspective: none !important; contain: none !important; }
#root header { position: fixed !important; inset: 0 0 auto 0 !important; width: 100vw !important; max-width: none !important; margin: 0 !important; transform: none !important; z-index: 2147483647 !important; }

/* V12.1 — My Booking + Status Tracker usability fixes */
@media (max-width:767px){
  #mw-app-account .mw-history-head{position:relative;padding-top:14px}
  #mw-app-account .mw-back-top{display:block;width:100%;border:1px solid rgba(21,159,255,.45);background:#08233a;color:#fff;border-radius:14px;padding:11px 13px;text-align:left;font:800 14px inherit;margin:0 0 16px;cursor:pointer}
  #mw-app-account .mw-booking-item{padding:17px 16px}
  #mw-app-account .mw-booking-id{font-size:18px;font-weight:900;color:#fff;letter-spacing:.2px;word-break:break-word}
  #mw-app-account .mw-booking-meta{font-size:14px;color:#c4d0dc;margin-top:8px}
  #mw-app-account .mw-copy-id{margin-top:14px;border:1px solid #159fff;background:#092b48;color:#55c3ff;border-radius:12px;padding:9px 13px;font:800 13px inherit;cursor:pointer}
  #mw-app-account .mw-empty-bookings{text-align:center;color:#c4d0dc}
}

/* The original tracker is a modal with z-50; the app header/nav have much higher z-index.
   Keep the tracker below the fixed header and above the page so its Close button is visible. */
@media (max-width:767px){
  body > div.fixed.inset-0:has(button[aria-label="Close Tracker"]){z-index:2147482500!important;top:var(--mw-header-height,122px)!important;bottom:var(--app-nav-h,78px)!important;height:auto!important;}
}

/* V12.2 — booking date, install prompt, profile image and mobile polish */
@media (max-width:767px){
  #mw-app-account{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  #mw-app-account .mw-profile-img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(21,159,255,.55);background:#06101c;flex:0 0 58px;}
  #mw-app-account .mw-top{align-items:center;gap:12px;}
  #mw-app-account .mw-card{box-sizing:border-box;}
  #mw-app-account input,#mw-app-account button{max-width:100%;box-sizing:border-box;}
  #mw-app-account .mw-chat{margin:0 10px;border-radius:18px;padding:10px;height:calc(100dvh - var(--mw-header-height,122px) - var(--app-nav-h,78px) - 22px)!important;min-height:0!important;}
  #mw-app-account .mw-chat-head{padding:4px 2px 10px;min-height:48px;}
  #mw-app-account .mw-chat-back{width:42px;height:42px;border-radius:13px;border:1px solid rgba(80,170,255,.35);background:#0b2035;color:#fff;font-size:25px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 42px;}
  #mw-app-account .mw-chat-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
  #mw-app-account .mw-chat-title strong{font-size:15px;color:#fff;}
  #mw-app-account .mw-chat-title span{font-size:11px;color:#7e9bb5;}
  #mw-app-account .mw-chat-form{gap:6px;padding-top:8px;}
  #mw-app-account .mw-chat-form input{min-height:44px;}
  #mw-app-account .mw-attach{width:44px;min-width:44px;height:44px;box-sizing:border-box;}
  #mw-app-account .mw-send{min-width:64px;height:44px;}
}

/* Install App popup */
#mw-install-pop{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;font-family:inherit;}
#mw-install-pop .mw-install-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);}
#mw-install-pop .mw-install-box{position:relative;width:min(390px,100%);background:#071522;border:1px solid rgba(35,164,255,.45);border-radius:24px;padding:24px 20px 20px;box-shadow:0 24px 80px rgba(0,0,0,.65);text-align:center;color:#fff;box-sizing:border-box;}
#mw-install-pop .mw-install-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:#101c29;color:#fff;font-size:25px;line-height:1;cursor:pointer;}
#mw-install-pop .mw-install-logo{width:72px;height:72px;border-radius:18px;object-fit:contain;margin:0 auto 12px;display:block;}
#mw-install-pop h2{font-size:22px;margin:4px 0 8px;font-weight:900;}
#mw-install-pop p{margin:0 auto 16px;color:#b9c9d8;font-size:14px;line-height:1.5;}
#mw-install-pop .mw-install-btn{margin-top:2px;width:100%;min-height:48px;font-size:15px;}
#mw-install-pop .mw-install-help{margin-top:13px;color:#849caf;font-size:11px;line-height:1.5;}
@media (min-width:768px){#mw-install-pop{display:none!important;}}

/* V12.3 mobile safe-area: keep site content and dialogs clear of the app footer */
@media (max-width:767px){
  #root{padding-bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom) + 18px)!important;}
  body{padding-bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom) + 18px)!important;}
  #mw-app-account{padding-bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom) + 28px)!important;}
  #mw-app-account .mw-card:last-child{margin-bottom:28px;}
}

/* V12.5 final account polish */
#mw-toast{position:fixed;left:50%;top:calc(var(--mw-real-header-h,120px) + 16px);transform:translateX(-50%);z-index:2147483647;background:#062b1e;color:#fff;border:1px solid #18d889;border-radius:14px;padding:12px 18px;font-weight:800;box-shadow:0 12px 35px rgba(0,0,0,.35);white-space:nowrap}
#mw-app-account input[type=file]{padding:10px}
@media(max-width:767px){#mw-toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center}}

/* V12.5.1 — Policy modal mobile usability */
.mw-policy-modal{
  align-items:flex-start !important;
  justify-content:center !important;
  padding:calc(var(--mw-header-height,122px) + 10px) 12px calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom) + 12px) !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}
.mw-policy-modal > div{
  width:min(720px,100%) !important;
  max-width:720px !important;
  max-height:calc(100dvh - var(--mw-header-height,122px) - var(--app-nav-h,78px) - 22px) !important;
  margin:0 !important;
  padding:18px !important;
  border-radius:20px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.mw-policy-modal > div > button:first-child{
  top:10px !important;
  right:10px !important;
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
}
.mw-policy-modal > div > div:nth-last-child(1){flex-shrink:0 !important;}
.mw-policy-modal > div > div:nth-child(2){min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;}
@media(max-width:767px){
  .mw-policy-modal h3{font-size:17px !important;padding-right:42px !important;line-height:1.3 !important;}
  .mw-policy-modal p{line-height:1.55 !important;}
  .mw-policy-modal > div{padding:16px !important;}
}

/* V12.5.2 — mobile modal/page overflow guard + FAQ close button */
@media (max-width: 767px){
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop){
    top:var(--mw-header-height,122px) !important;
    bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom)) !important;
    height:auto !important;
    max-height:none !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding:12px !important;
  }
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div{
    max-height:calc(100dvh - var(--mw-header-height,122px) - var(--app-nav-h,78px) - 24px) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    margin:auto !important;
  }
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div > button[aria-label],
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div > button:first-child{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:20 !important;
  }
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) h1,
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) h2,
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) h3{
    padding-right:48px !important;
  }
}

/* V12.5.3 — final mobile modal/short-page viewport fix */
@media (max-width:767px){
  html,body{min-height:100dvh !important;background:#070b14 !important;}
  #root{min-height:100dvh !important;background:#070b14 !important;}
  #root > div{min-height:0;}
  /* Never leave a white/empty strip below short pages while the app footer is fixed. */
  #root{padding-bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom) + 22px) !important;}
  body{padding-bottom:0 !important;}

  /* Every small site popup stays fully between the fixed header and app footer. */
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop){
    top:var(--mw-header-height,122px) !important;
    bottom:calc(var(--app-nav-h,78px) + env(safe-area-inset-bottom)) !important;
    padding:8px 10px !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
  }
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div{
    position:relative !important;
    width:min(100%,720px) !important;
    max-width:720px !important;
    max-height:calc(100dvh - var(--mw-header-height,122px) - var(--app-nav-h,78px) - 18px) !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    padding-top:58px !important;
  }
  /* Close control is always visible at the panel's top-right. */
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div > button.mw-universal-close{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:#132235 !important;
    color:#fff !important;
    border:1px solid rgba(90,180,255,.55) !important;
    font-size:27px !important;
    line-height:1 !important;
    z-index:2147483646 !important;
    box-shadow:0 6px 20px rgba(0,0,0,.45) !important;
    cursor:pointer !important;
  }
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div > div.flex-1.overflow-y-auto,
  body > div.fixed.inset-0:not(#mw-app-account):not(#mw-install-pop) > div > div[class*="overflow-y-auto"]{
    min-height:0 !important;
    max-height:calc(100dvh - var(--mw-header-height,122px) - var(--app-nav-h,78px) - 86px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  /* FAQ / General Questions gets extra room for the permanent close button. */
  body > div.mw-faq-modal > div{padding-top:58px !important;}
}
