/* ShotPropz v2 — the app on a home screen (0.77.0): the "Get the app" bar, the iPhone steps, My Account's section,
   and the Back button in the app on an iPhone. See includes/class-app.php and assets/js/spz-app.js. */

.spz-app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--spz-brand-btn, #00813a); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
}
.spz-app-btn:focus-visible, .spz-app-bar-x:focus-visible, .spz-app-back:focus-visible {
  outline: 2px solid var(--spz-brand, #00913d); outline-offset: 2px;
}

/* ── The bar: at the very top of the page, in the flow (never over the page's own bars) ── */
.spz-app-bar {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%;
  padding: 8px 8px 8px 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
  background: #f1f7f3; border-bottom: 1px solid #d5e6db; color: #1f2a26;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.3;
  position: relative; z-index: 2;
}
.spz-app-bar-icon { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 36px; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.spz-app-bar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spz-app-bar-text strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spz-app-bar-text span { color: #55625d; font-size: 13px; }
.spz-app-bar .spz-app-btn { min-height: 36px; padding: 0 14px; font-size: 14px; flex: 0 0 auto; }
.spz-app-bar-x {
  flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: #55625d; cursor: pointer; padding: 0;
}

/* ── The iPhone steps ── */
.spz-app-sheet {
  position: fixed; inset: 0; z-index: 100002; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .45); padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.spz-app-sheet-box {
  width: 100%; max-width: 420px; box-sizing: border-box; background: #fff; color: #1f2a26; border-radius: 18px;
  padding: 20px 20px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45;
  max-height: calc(100vh - 32px); overflow: auto;
}
.spz-app-sheet-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.spz-app-sheet-top img { border-radius: 11px; flex: 0 0 44px; }
.spz-app-sheet h2 { font-size: 18px; line-height: 1.25; margin: 0; font-weight: 700; color: inherit; }
.spz-app-sheet ol { margin: 0 0 16px; padding-left: 22px; }
.spz-app-sheet li { margin: 0 0 8px; }
.spz-app-sheet b { font-weight: 700; }
.spz-app-share { display: inline-flex; vertical-align: -3px; color: #007aff; }
.spz-app-sheet-ok { width: 100%; min-height: 44px; }
@media (min-width: 700px) { .spz-app-sheet { align-items: center; } }

/* ── My Account ── */
.spz-app-get { margin: 20px 0; padding: 16px 18px; border: 1px solid #d5e6db; border-radius: 12px; background: #f6faf7; max-width: 640px; }
.spz-app-get[hidden] { display: none; }
.spz-app-get h3 { margin: 0 0 6px; font-size: 1.2em; font-weight: 700; line-height: 1.3; }
.spz-app-get p { margin: 0 0 10px; }
.spz-app-get p:last-child { margin-bottom: 0; }
.spz-app-get .spz-app-get-act:empty, .spz-app-get .spz-app-btn[hidden], .spz-app-get p[hidden] { display: none; }

/* ── In the app on an iPhone: Back, bottom left (raised above a game log's line bar) ── */
.spz-app-back {
  position: fixed; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 99998;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: #1f2a26; border: 1px solid #d5dbe1; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
html.spz-pbar-on .spz-app-back { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }      /* (a parlay being built) */
html.spz-linebar-on .spz-app-back { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ── In the app, back after half an hour with something changed on the page: Refresh, top centre ── */
.spz-app-refresh {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 99998;
  min-height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
@media print { .spz-app-bar, .spz-app-back, .spz-app-sheet, .spz-app-refresh { display: none !important; } }

/* ── Dark ── */
[data-spz-theme="dark"] .spz-app-bar { background: #111a2e; border-bottom-color: #24304a; color: #e2e8f0; }
[data-spz-theme="dark"] .spz-app-bar-text span, [data-spz-theme="dark"] .spz-app-bar-x { color: #94a3b8; }
[data-spz-theme="dark"] .spz-app-sheet-box { background: #1a2332; color: #e2e8f0; }
[data-spz-theme="dark"] .spz-app-share { color: #60a5fa; }
[data-spz-theme="dark"] .spz-app-get { background: #111a2e; border-color: #24304a; color: #e2e8f0; }
[data-spz-theme="dark"] .spz-app-back { background: rgba(26,35,50,.94); color: #e2e8f0; border-color: #334155; }