/* What the store looks like inside the phone app. site/local/app.js adds .gt-app to <html> there, so
   none of this touches the website in a browser. The colours are the theme's (server.js THEME_COLORS). */

/* The home bar at the bottom of a notched phone sits under the floating buttons: lift them clear.
   The product page's buy bar already leaves room for it (site/local/quick-add.css). */
.gt-app .gt-wa { bottom: calc(20px + env(safe-area-inset-bottom)); }
.gt-app .local-multi-bar { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* While the keyboard is up, nothing floats over the box being typed in. */
.gt-app.gt-kb .gt-wa,
.gt-app.gt-kb .local-buybar,
.gt-app.gt-kb .local-multi-bar { display: none !important; }

/* The offline card (site/local/app.js). */
.gt-off {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 59, 61, .55);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.gt-off.is-open { display: flex; }
.gt-off__box {
  width: 100%; max-width: 340px; padding: 28px 24px; border-radius: 14px; text-align: center;
  background: #F6F0E6; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  color: #0B3B3C; font-size: 15px; line-height: 1.5;
}
.gt-off__box h2 {
  margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 22px;
  font-weight: 700; color: #083B3D; text-transform: none; letter-spacing: 0;
}
.gt-off__box p { margin: 0 0 20px; }
.gt-off__again, .gt-off__call, .gt-off__close {
  display: block; width: 100%; margin: 0 0 10px; padding: 0 18px; height: 48px; line-height: 48px;
  border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-family: inherit;
}
.gt-off__again { background: #0E5E62; color: #fff; }
.gt-off__call { background: #D4A64A; color: #fff; }
.gt-off__close {
  margin-bottom: 0; background: transparent; color: #33504F;
  text-transform: none; letter-spacing: 0; font-weight: 400; text-decoration: underline;
}

/* Inside the app the footer's "Download the Android app" card has nothing to offer. */
.gt-app .gt-foot__app { display: none !important; }