/* Plenzy PWA / Mobile app layer */
:root{--pwa-safe-top:env(safe-area-inset-top,0px);--pwa-safe-bottom:env(safe-area-inset-bottom,0px);--pwa-primary:#1747D8}
html{overscroll-behavior-y:none}
body.pwa-standalone{-webkit-tap-highlight-color:transparent}
body.pwa-standalone .topbar{box-sizing:border-box}

.pwa-install-btn{display:none;align-items:center;gap:7px;border:1px solid #d9e4f2;background:#fff;color:#17314f;border-radius:10px;padding:9px 12px;font:600 12px/1 inherit;cursor:pointer;white-space:nowrap}
.pwa-install-btn.is-visible{display:inline-flex}.pwa-install-btn i{font-size:17px;color:var(--pwa-primary)}

.pwa-push-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dbe5f2;background:#f8faff;color:#17314f;border-radius:10px;padding:10px 12px;font:700 12px/1.2 inherit;cursor:pointer}
.pwa-push-btn.is-active{background:#edf8f1;border-color:#ccebd7;color:#167243}.pwa-push-btn.is-blocked{background:#fff4f4;border-color:#ffd4d4;color:#b42318}
.pwa-push-btn i{font-size:17px}.pwa-notification-tools{padding:10px 12px;border-top:1px solid #edf1f6;display:grid;gap:7px;background:#fff}

.pwa-offline-bar{position:fixed;z-index:9999998;left:50%;bottom:calc(80px + var(--pwa-safe-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#172033;color:#fff;border-radius:999px;padding:9px 14px;font:700 11px/1 inherit;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.2s ease}
body.pwa-offline .pwa-offline-bar{transform:translate(-50%,0);opacity:1}

.pwa-toast{position:fixed;z-index:10000001;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));background:#10233f;color:#fff;border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 50px rgba(7,26,61,.26);opacity:0;transform:translateY(18px);pointer-events:none;transition:.2s ease}
.pwa-toast.is-visible{opacity:1;transform:none;pointer-events:auto}.pwa-toast-copy{min-width:0;flex:1}.pwa-toast strong{display:block;font-size:12px;margin-bottom:3px}.pwa-toast span{display:block;font-size:11px;line-height:1.35;color:#d9e5f5}.pwa-toast button{border:0;background:#fff;color:#10233f;border-radius:8px;padding:8px 10px;font:700 11px/1 inherit;cursor:pointer}

.pwa-modal-backdrop{position:fixed;inset:0;z-index:10000000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(7,26,61,.58)}
.pwa-modal-backdrop.is-open{display:flex}.pwa-modal{width:min(460px,100%);background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(7,26,61,.26);overflow:hidden}.pwa-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #edf1f6}.pwa-modal-title{display:flex;align-items:center;gap:10px;font-weight:800;color:#10233f}.pwa-modal-title img{width:34px;height:34px;border-radius:9px}.pwa-modal-close{width:34px;height:34px;border:0;background:#f4f7fb;border-radius:9px;color:#5f7087;cursor:pointer;font-size:18px}.pwa-modal-body{padding:20px}.pwa-modal-body p{margin:0 0 14px;color:#6d7b8f;font-size:13px;line-height:1.55}.pwa-steps{display:grid;gap:9px;margin:14px 0}.pwa-step{display:flex;gap:10px;align-items:flex-start;background:#f7f9fc;border:1px solid #e7edf5;border-radius:11px;padding:11px}.pwa-step b{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#1747D8;color:#fff;font-size:11px}.pwa-step span{font-size:12px;line-height:1.45;color:#344a67}.pwa-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px 20px}.pwa-modal-actions button{border-radius:10px;padding:11px 12px;font:700 12px/1 inherit;cursor:pointer}.pwa-action-secondary{border:1px solid #dbe5f2;background:#fff;color:#243a57}.pwa-action-primary{border:1px solid #1747D8;background:#1747D8;color:#fff}

@media (display-mode:standalone){.pwa-install-btn{display:none!important}}
@media (max-width:760px){
  .pwa-install-btn{padding:8px 9px}.pwa-install-btn span{display:none}
  .mobile-bottom-nav{height:calc(68px + var(--pwa-safe-bottom))!important;padding-bottom:var(--pwa-safe-bottom)!important}
  .main{padding-bottom:calc(78px + var(--pwa-safe-bottom))!important}
  .pwa-toast{right:10px;bottom:calc(80px + var(--pwa-safe-bottom));width:calc(100vw - 20px)}
  .pwa-modal-backdrop{align-items:flex-end;padding:0}.pwa-modal{width:100%;max-width:none;border-radius:18px 18px 0 0;padding-bottom:var(--pwa-safe-bottom)}
}

/* =========================================================
   iPhone / iPad PWA safe area — Dynamic Island / notch fix
   ========================================================= */
@supports (padding: max(0px)) {
  @media (max-width: 860px) {
    body.pwa-standalone .topbar {
      height: calc(58px + var(--pwa-safe-top)) !important;
      min-height: calc(58px + var(--pwa-safe-top)) !important;
      padding-top: var(--pwa-safe-top) !important;
      padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
      padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
      align-items: center !important;
      background: #FFFFFF !important;
    }

    body.pwa-standalone .notification-dropdown {
      top: calc(62px + var(--pwa-safe-top)) !important;
      left: max(8px, env(safe-area-inset-left, 0px)) !important;
      right: max(8px, env(safe-area-inset-right, 0px)) !important;
      max-height: calc(100dvh - 142px - var(--pwa-safe-top) - var(--pwa-safe-bottom)) !important;
    }

    body.pwa-standalone .mobile-bottom-nav {
      padding-left: env(safe-area-inset-left, 0px) !important;
      padding-right: env(safe-area-inset-right, 0px) !important;
    }

    body.pwa-standalone .pwa-modal-backdrop {
      padding-top: var(--pwa-safe-top) !important;
      padding-bottom: var(--pwa-safe-bottom) !important;
    }
  }
}


/* =========================================================
   MOBILE HEADER FINAL — logo left + fixed safe topbar
   ========================================================= */
.mobile-top-logo{display:none}

@media (max-width:860px){
  body.pwa-standalone{
    --pwa-mobile-header-height:58px;
  }

  body.pwa-standalone .main{
    padding-top:calc(var(--pwa-mobile-header-height) + var(--pwa-safe-top))!important;
    padding-bottom:calc(78px + var(--pwa-safe-bottom))!important;
  }

  body.pwa-standalone .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:calc(var(--pwa-mobile-header-height) + var(--pwa-safe-top))!important;
    min-height:calc(var(--pwa-mobile-header-height) + var(--pwa-safe-top))!important;
    padding-top:var(--pwa-safe-top)!important;
    padding-left:max(12px,env(safe-area-inset-left,0px))!important;
    padding-right:max(10px,env(safe-area-inset-right,0px))!important;
    background:#fff!important;
    border-bottom:1px solid #dfe7f2!important;
    box-shadow:0 6px 18px rgba(7,26,61,.035)!important;
    z-index:1000000!important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  body.pwa-standalone .topbar-left{
    display:flex!important;
    align-items:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    margin:0 auto 0 0!important;
  }

  body.pwa-standalone .mobile-top-logo{
    display:flex!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:11px!important;
    text-decoration:none!important;
    overflow:hidden!important;
  }

  body.pwa-standalone .mobile-top-logo img{
    display:block!important;
    width:36px!important;
    height:36px!important;
    object-fit:contain!important;
  }

  body.pwa-standalone .topbar-actions{
    margin-left:0!important;
    gap:5px!important;
    flex:0 1 auto!important;
    min-width:0!important;
  }

  body.pwa-standalone .notification-dropdown{
    top:calc(var(--pwa-mobile-header-height) + var(--pwa-safe-top) + 4px)!important;
  }

  body.pwa-standalone .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(68px + var(--pwa-safe-bottom))!important;
    padding-bottom:var(--pwa-safe-bottom)!important;
    background:#fff!important;
    z-index:999900!important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    box-shadow:0 -8px 24px rgba(7,26,61,.08)!important;
  }
}

@media (max-width:390px){
  body.pwa-standalone .mobile-top-logo{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  body.pwa-standalone .mobile-top-logo img{
    width:32px!important;
    height:32px!important;
  }
  body.pwa-standalone .topbar-left{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
  }
  body.pwa-standalone .topbar-actions{gap:4px!important}
}

/* =========================================================
   MOBILE LOGO — visible on every mobile view, PWA or browser
   ========================================================= */
@media (max-width:860px){
  .topbar-left{
    display:flex!important;
    align-items:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    margin:0 auto 0 0!important;
  }

  .mobile-top-logo{
    display:flex!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:11px!important;
    text-decoration:none!important;
    overflow:hidden!important;
  }

  .mobile-top-logo img{
    display:block!important;
    width:36px!important;
    height:36px!important;
    object-fit:contain!important;
  }

  .mobile-menu{display:none!important}
}

@media (max-width:390px){
  .topbar-left{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
  }
  .mobile-top-logo{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .mobile-top-logo img{
    width:32px!important;
    height:32px!important;
  }
}