/* Frisco App 1.0.0. Home-screen app mode (html.fbpwa-standalone, set before paint) plus the App and alerts pages.
   Outside the home-screen app nothing here changes the portal's layout. */

/* ---------------------------------------------------------------- home-screen app: safe areas */
/* The status bar is see-through (black-translucent): a dark strip the height of the status bar stays on top,
   and the page starts below it, so the Frisco top bar never sits under the notch, the Dynamic Island or the clock. */
html.fbpwa-standalone body { padding-top: env(safe-area-inset-top, 0px); }
html.fbpwa-standalone body::before {
  content: ""; position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: #120D0A; pointer-events: none;
}
/* Pulling the page down past the top shows the dark bar color, not a cream gap (staff pages; the sign-in page keeps its own). */
html.fbpwa-standalone:has(> body.app.admin) { background: #120D0A; }
/* iPhone on its side: the top bar still runs edge to edge; its contents and the page stay clear of the notch. */
html.fbpwa-standalone body.app.admin #header,
html.fbpwa-standalone body.app.admin #wrapper { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
/* Pop-ups and slide-ins anchored to the very top start below the status bar. */
html.fbpwa-standalone .modal { padding-top: env(safe-area-inset-top, 0px); }
html.fbpwa-standalone body.app.admin #menu { padding-top: env(safe-area-inset-top, 0px); }
html.fbpwa-standalone #setup-menu-wrapper { padding-top: env(safe-area-inset-top, 0px); }

@media (max-width: 767px) {
  /* Phone tab bar: it already grows by the home indicator height; the page keeps the same clearance above it. */
  html.fbpwa-standalone body.app.admin { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html.fbpwa-standalone body.app.admin .fbh-tabbar { padding-left: calc(6px + env(safe-area-inset-left, 0px)); padding-right: calc(6px + env(safe-area-inset-right, 0px)); }
  /* Save bars on phone pages without the tab bar stay clear of the home indicator. */
  html.fbpwa-standalone body.app.admin .btn-bottom-toolbar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* The Back button the tablet module adds in app mode: light on the dark top bar (it inherits a dark color there),
   and arrow only on phones so the search box keeps its room. It still works the same way. */
html.fbpwa-standalone #header .t31tab-back { color: rgba(255, 246, 230, .85); }
html.fbpwa-standalone #header .t31tab-back:hover, html.fbpwa-standalone #header .t31tab-back:focus { color: #FFF6E6; }
@media (max-width: 767px) {
  html.fbpwa-standalone #header .t31tab-back { min-width: 36px; padding: 0 0 0 8px; }
  html.fbpwa-standalone #header .t31tab-back .t31tab-back-t { display: none; }
  html.fbpwa-standalone #header .t31tab-back + .hide-menu { margin-left: 4px; }
}
/* Sign-in page in the app. */
html.fbpwa-standalone body.login_admin { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------------------------------------------------------------- App and alerts, Setup > Frisco App */
/* Buttons and blocks this page hides stay hidden (Bootstrap's .btn display would otherwise win over [hidden]). */
.fbpwa-page [hidden], .fbpwa-offer [hidden] { display: none !important; }
.fbpwa-page { max-width: 880px; }
.fbpwa-head { margin: 0 0 16px; }
.fbpwa-kicker { margin: 0 0 2px; font-family: "FB Fraunces", Georgia, serif; font-style: italic; font-weight: 700; font-size: 17px; line-height: 1.2; color: #A8170F; }
.fbpwa-head h1 { margin: 0; font-family: "FB Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 40px; line-height: .98; letter-spacing: .005em; color: #17110D; }
.fbpwa-head span { display: block; margin-top: 6px; color: #5b4f45; }
.fbpwa-card { background: #fff; border: 1px solid #EADBC2; border-radius: 14px; padding: 20px 22px; margin: 0 0 16px; }
.fbpwa-card h2 { margin: 0 0 10px; font-family: "FB Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1.05; color: #17110D; }
.fbpwa-card p, .fbpwa-card li { font-size: 15px; line-height: 1.5; color: #2A1D15; }
.fbpwa-card ol { padding-left: 22px; margin: 6px 0 0; }
.fbpwa-card ol li { margin: 0 0 6px; }
.fbpwa-steps { display: block; border-top: 1px solid #F2E6D2; padding-top: 10px; margin-top: 10px; }
.fbpwa-steps.is-this { border: 2px solid #F5B524; background: #FFF9EC; border-radius: 12px; padding: 12px 14px; }
.fbpwa-steps.is-this::before { content: "This device"; display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 40px; background: #17110D; color: #F5B524; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#fbpwa-install { display: flex; flex-direction: column; }
#fbpwa-install h2, #fbpwa-install .fbpwa-state { order: -2; }
#fbpwa-install .fbpwa-steps.is-this { order: -1; }
.fbpwa-state { font-weight: 700; color: #17110D; margin: 0 0 10px; }
.fbpwa-state.is-ok { color: #2E6B3A; }
.fbpwa-state.is-ok::before { content: "\2713  "; }
.fbpwa-state.is-bad { color: #A8170F; }
.fbpwa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.fbpwa-actions .btn, .fbpwa-steps .btn { min-height: 44px; }
.fbpwa-actions .btn.is-busy { opacity: .6; }
.fbpwa-note { font-size: 14px !important; color: #5b4f45 !important; margin: 6px 0 0; }
.fbpwa-empty { color: #5b4f45; margin: 0; }
.fbpwa-devices { list-style: none; margin: 0; padding: 0; }
.fbpwa-devices li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid #F2E6D2; }
.fbpwa-devices li:first-child { border-top: 0; }
.fbpwa-dev-name { font-weight: 800; min-width: 90px; }
.fbpwa-dev-meta { flex: 1 1 220px; color: #5b4f45; font-size: 14px; }
.fbpwa-inline { display: inline; margin: 0; }
.fbpwa-inline .btn { min-height: 36px; }
.fbpwa-status th { width: 210px; font-weight: 700; }
.fbpwa-status td, .fbpwa-status th { overflow-wrap: anywhere; }
.fbpwa-ok { color: #2E6B3A; font-weight: 800; }
.fbpwa-bad { color: #A8170F; font-weight: 800; }
.fbpwa-hosts { list-style: none; padding: 0; margin: 10px 0 0; }
.fbpwa-hosts li { padding: 4px 0; }
.fbpwa-hosts li.is-ok strong { color: #2E6B3A; }
.fbpwa-hosts li.is-bad strong { color: #A8170F; }
@media (max-width: 767px) {
  .fbpwa-head h1 { font-size: 34px; }
  .fbpwa-card { padding: 16px; }
  .fbpwa-actions .btn { flex: 1 1 100%; }
  .fbpwa-status th { width: auto; }
  .fbpwa-status tr { display: flex; flex-direction: column; }
}

/* ---------------------------------------------------------------- one-time offer and notices */
.fbpwa-offer {
  position: fixed; z-index: 1040; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 460px; margin: 0 auto; background: #17110D; color: #FFF6E6; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 4px 0 #D7261E; font-size: 15px; line-height: 1.45;
}
.fbpwa-offer p { margin: 0 0 10px; color: #FFF6E6; }
.fbpwa-offer strong { color: #F5B524; }
.fbpwa-offer-row { display: flex; gap: 10px; }
.fbpwa-offer-row .btn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fbpwa-offer-row .btn-default { background: transparent; color: #FFF6E6; border: 2px solid rgba(255, 246, 230, .5); }
.fbpwa-toast {
  position: fixed; z-index: 1110; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  max-width: calc(100% - 24px); background: #17110D; color: #FFF6E6; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 4px 0 #2E6B3A; font-weight: 700; transition: opacity .4s;
}
.fbpwa-toast.is-bad { box-shadow: 0 4px 0 #D7261E; }
.fbpwa-toast.is-out { opacity: 0; }

/* 1.0.1: floating install button and the top bar alerts button */
.fbpwa-install-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9990;background:#D7261E;color:#fff;border:0;border-radius:999px;padding:12px 18px;min-height:44px;font:600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer}
.fbpwa-install-float[hidden]{display:none!important}
.fbpwa-topbar-li{display:flex;align-items:center;height:100%}
.fbpwa-topbar-alerts{background:#D7261E;color:#fff;border:0;border-radius:999px;padding:7px 14px;min-height:36px;margin:10px 8px;font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;white-space:nowrap;cursor:pointer}
.fbpwa-topbar-alerts:disabled{opacity:.6}
.fbpwa-topbar-alerts.is-floating{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9989;margin:0;min-height:44px}
.fbpwa-topbar-alerts.is-floating{box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:15px;padding:12px 18px}