/* mobile-app.css — iPhone-app-style look. Loaded only when admin turns "Mobile App View" ON.
   Everything is inside @media (max-width: 767px), so desktop/tablet are never changed. */
.app-only{display:none}
@media (max-width:767px){
  :root{--app-green:#0e7c61;--app-navy:#1b2a6b;--app-bg:#f2f4f8;--app-tab-h:62px}
  body.app-view{background:var(--app-bg);padding-bottom:calc(var(--app-tab-h) + env(safe-area-inset-bottom,0px) + 14px);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Roboto,Arial,sans-serif}
  .app-only{display:block}
  /* hide the normal website chrome */
  body.app-view .site-header,body.app-view #mainNav{display:none!important}

  /* top bar */
  .app-topbar{position:sticky;top:0;z-index:1000;display:flex!important;align-items:center;justify-content:space-between;gap:10px;
    padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
  .app-logo-link img{height:34px;width:auto;display:block}
  .app-back,.app-call{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0}
  .app-back{background:#eef1f6;color:#1b2a6b;font-size:16px}
  .app-call{background:var(--app-green);color:#fff;font-size:15px;box-shadow:0 3px 8px rgba(14,124,97,.35)}
  .app-title{flex:1;font-weight:700;font-size:17px;color:#10213a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* inner pages: make existing content feel like app cards */
  body.app-view .hero-banner{border-radius:0 0 22px 22px;margin:0 0 6px;padding:20px 16px}
  body.app-view .hero-banner h1{font-size:22px}
  body.app-view .main-content{padding:14px 12px}
  body.app-view .card-grid{grid-template-columns:1fr!important}
  body.app-view .info-card,body.app-view .test-card{border-radius:16px}
  body.app-view .btn-cta,body.app-view .btn-success,body.app-view .btn{border-radius:12px}
  body.app-view input.form-control,body.app-view select.form-control{border-radius:12px;height:46px;font-size:16px}

  /* home screen */
  .app-home{padding:0 0 10px}
  .ah-hero{background:linear-gradient(145deg,#0e7c61,#1b2a6b);color:#fff;padding:20px 16px 44px;border-radius:0 0 26px 26px}
  .ah-hello{font-size:22px;font-weight:800;letter-spacing:-.3px}
  .ah-sub{opacity:.85;font-size:14px;margin-top:2px}
  .ah-search{display:flex;align-items:center;gap:10px;background:#fff;color:#7a8699;border-radius:14px;padding:13px 14px;margin:16px 0 -64px;font-size:14px;text-decoration:none;box-shadow:0 8px 20px rgba(16,33,58,.18)}
  .ah-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 14px 0;padding:16px;border-radius:18px;background:linear-gradient(120deg,#ff8a3d,#ff5e62);color:#fff;text-decoration:none;box-shadow:0 8px 18px rgba(255,94,98,.3)}
  .ah-banner b{display:block;font-size:16px}
  .ah-banner span{display:block;font-size:12.5px;opacity:.92;margin-top:3px;line-height:1.35}
  .ah-banner i{font-size:34px;opacity:.9}
  .ah-section{margin:20px 16px 10px;font-weight:800;font-size:17px;color:#10213a}
  .ah-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;padding:0 10px}
  .ah-tile{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:#22314a}
  .ah-ic{width:56px;height:56px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 6px 12px rgba(16,33,58,.16)}
  .ah-lb{font-size:11.5px;font-weight:600;text-align:center;line-height:1.2}
  .g-teal{background:linear-gradient(135deg,#14b8a6,#0e7c61)}.g-blue{background:linear-gradient(135deg,#4facfe,#2563eb)}
  .g-violet{background:linear-gradient(135deg,#a78bfa,#6d28d9)}.g-pink{background:linear-gradient(135deg,#f472b6,#db2777)}
  .g-orange{background:linear-gradient(135deg,#fbbf24,#f97316)}.g-red{background:linear-gradient(135deg,#fb7185,#e11d48)}
  .g-green{background:linear-gradient(135deg,#4ade80,#16a34a)}.g-navy{background:linear-gradient(135deg,#5b6bd6,#1b2a6b)}
  .ah-emergency{display:flex;align-items:center;gap:12px;margin:22px 14px 0;padding:14px;border-radius:18px;background:#fff;color:#10213a;text-decoration:none;box-shadow:0 4px 14px rgba(16,33,58,.08);border:1px solid #fde2e4}
  .ah-emergency b{display:block;font-size:15px}.ah-emergency small{display:block;color:#6b7280;font-size:12.5px}
  .ah-em-ic{width:44px;height:44px;border-radius:14px;background:#fee2e2;color:#dc2626;display:flex;align-items:center;justify-content:center;font-size:20px}
  .ah-em-call{margin-left:auto;width:38px;height:38px;border-radius:50%;background:#dc2626;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}

  /* bottom tab bar */
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:flex!important;align-items:flex-end;justify-content:space-around;height:calc(var(--app-tab-h) + env(safe-area-inset-bottom,0px));
    padding:6px 4px env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-top:1px solid rgba(0,0,0,.08)}
  .app-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:#8a94a6;text-decoration:none;font-size:10.5px;font-weight:600}
  .app-tabbar a i{font-size:20px}.app-tabbar a.on{color:var(--app-green)}
  .app-tabbar .app-fab{position:relative;top:-16px;color:var(--app-green);gap:2px}
  .app-tabbar .app-fab span{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#0e7c61);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px rgba(14,124,97,.4);border:4px solid #fff;font-size:20px}
  .app-tabbar .app-fab em{font-style:normal;font-size:10.5px;font-weight:700}

  /* More sheet */
  .app-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2147483001;opacity:0;pointer-events:none;transition:opacity .2s}
  .app-sheet-bg.open{opacity:1;pointer-events:auto}
  .app-sheet{position:fixed;left:0;right:0;bottom:0;z-index:2147483002;background:#fff;border-radius:22px 22px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  .app-sheet.open{transform:none}
  .as-handle{width:40px;height:5px;border-radius:3px;background:#d5dae3;margin:2px auto 8px}
  .app-sheet a{display:flex;align-items:center;gap:14px;padding:13px 6px;color:#10213a;text-decoration:none;font-size:15.5px;font-weight:600;border-bottom:1px solid #f0f2f6}
  .app-sheet a i{width:24px;text-align:center;color:var(--app-green)}
  .app-sheet a.as-desktop{border-bottom:0;color:#6b7280;font-weight:500}

  /* chat + WhatsApp: keep visible, sit above the tab bar */
  body.app-view #llLauncher{bottom:calc(var(--app-tab-h) + env(safe-area-inset-bottom,0px) + 22px)!important}
  body.app-view #llChatWindow{bottom:calc(var(--app-tab-h) + env(safe-area-inset-bottom,0px) + 8px)!important;max-height:calc(100vh - var(--app-tab-h) - 90px)}
  /* compact floating buttons (icons only) so they don't cover the page */
  body.app-view #llPreviewBubble,body.app-view #llChatPill,body.app-view #llWaFloat>span{display:none!important}
  body.app-view #llLauncher{right:14px!important}
  body.app-view #llChatBubble{width:52px!important;height:52px!important;padding:12px!important;box-shadow:0 4px 12px rgba(0,0,0,.28)}
  body.app-view #llWaFloat{gap:0!important}
  body.app-view #llWaFloat a{width:52px!important;height:52px!important;box-shadow:0 4px 12px rgba(0,0,0,.28)!important}
  body.app-view #llWaFloat a svg{width:28px;height:28px}
}