/* BeeTravel LK PWA additions. Kept separate from the shared reader styles so
   the storefront and Telegram shell keep their existing layout. */
:root {
  --bt-pwa-nav-height: 74px;
}

/* app.css declares color-scheme only under [data-theme]; before a theme is
   picked the document does not declare one. Hygiene for native form fields
   and the overscroll area, not a proven cause of the screenshot. */
html:not(.tg-shell) {
  color-scheme: light;
}

/* ui-8, second hypothesis (ui-7's background-color on html was reverted,
   proved no cause): the owner's iOS full-page screenshot loses the SOLID
   color layer of the root/body background but keeps image layers in the
   same spot (the yellow arcs are body's own background and survive), and
   keeps solid colors on ordinary elements (buttons). So the base color is
   moved from background-color into a background-image layer instead. The
   first two layers below are copied verbatim from the live app.css:110-113
   body background; if those change, update them here too. The third layer
   is new: the same base color as background-image so it is not the color
   layer the screenshot drops. Confirmed only by a screenshot from the
   owner's iPhone; not reproduced locally. */
html:not(.tg-shell) body {
  background-image:
    radial-gradient(1200px 500px at 100% -10%, rgba(245, 178, 62, 0.10), transparent 60%),
    radial-gradient(900px 400px at -10% 0%, rgba(245, 178, 62, 0.06), transparent 55%),
    linear-gradient(var(--bg), var(--bg));
}

html.bt-pwa-nav body {
  padding-bottom: calc(var(--bt-pwa-nav-height) + env(safe-area-inset-bottom));
}

html.bt-pwa-nav body.has-buy-bar {
  padding-bottom: calc(var(--bt-pwa-nav-height) + 92px + env(safe-area-inset-bottom));
}

html.bt-pwa-enabled #menuBtn,
html.bt-pwa-enabled .appmenu,
html.bt-pwa-enabled .drawer-backdrop,
html.bt-pwa-enabled .drawer-panel {
  display: none !important;
}

.bt-pwa-bottom-nav[hidden] {
  display: none;
}

html.bt-pwa-auth-pending .profile-shell {
  visibility: hidden;
}

html.bt-pwa-enabled .product-card[hidden] {
  display: none !important;
}

.bt-pwa-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-height: var(--bt-pwa-nav-height);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 -6px 20px rgba(34, 29, 22, .08);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.bt-pwa-bottom-nav__item {
  display: inline-flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-direction: column;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: 700 11px/1.1 var(--font);
  text-decoration: none;
}

.bt-pwa-bottom-nav__item:hover,
.bt-pwa-bottom-nav__item:focus-visible {
  background: var(--card-2);
  color: var(--fg);
  text-decoration: none;
}

.bt-pwa-bottom-nav__item.is-active {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.bt-pwa-bottom-nav__icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

/* The header keeps only logo, language and theme: the back arrow duplicated
   #backLink and the account icon moved into the bottom-nav profile tab. */
html.bt-pwa-nav #guideBackShop {
  display: none !important;
}

html.bt-pwa-nav #accountBtn {
  display: none !important;
}

.bt-pwa-guide-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.bt-pwa-download-btn,
.bt-pwa-delete-btn,
.bt-pwa-install-btn {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--fg);
  font: 700 13px/1.25 var(--font);
  cursor: pointer;
}

.bt-pwa-download-btn {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.bt-pwa-download-btn:disabled,
.bt-pwa-delete-btn:disabled,
.bt-pwa-install-btn:disabled {
  cursor: wait;
  opacity: .65;
}

.bt-pwa-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bt-pwa-install-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.bt-pwa-guide-status,
.bt-pwa-install-promo,
.bt-pwa-offline-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.bt-pwa-guide-status.is-ready {
  color: var(--ok);
  font-weight: 700;
}

.bt-pwa-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--card-2);
}

.bt-pwa-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent-strong);
  transition: width .15s ease;
}

.bt-pwa-install-promo {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
}

.bt-pwa-install-promo--top {
  grid-column: 1 / -1;
  margin: 0 0 14px;
}

.bt-pwa-install-promo button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font: 700 12px/1.3 var(--font);
  cursor: pointer;
}

.bt-pwa-offline-stub {
  display: grid;
  max-width: 560px;
  gap: 10px;
  margin: 32px auto;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.bt-pwa-offline-stub h1,
.bt-pwa-offline-stub p {
  margin: 0;
}

.bt-pwa-offline-stub p {
  color: var(--muted);
}

.bt-pwa-offline-stub a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-weight: 800;
}

.bt-pwa-modal-backdrop[hidden] {
  display: none;
}

.bt-pwa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 17, 13, .58);
}

.bt-pwa-modal {
  position: relative;
  width: min(100%, 460px);
  max-height: min(82dvh, 640px);
  overflow: auto;
  padding: 24px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

.bt-pwa-modal h2 {
  margin: 0 28px 12px 0;
}

.bt-pwa-modal p,
.bt-pwa-modal li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.bt-pwa-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.bt-pwa-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bt-pwa-step__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--accent-strong);
}

.bt-pwa-step__icon svg {
  width: 26px;
  height: 26px;
}

.bt-pwa-step__text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg);
}

.bt-pwa-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--fg);
  font-size: 22px;
  cursor: pointer;
}

@media (min-width: 900px) {
  .bt-pwa-bottom-nav {
    right: 16px;
    bottom: 16px;
    left: auto;
    width: min(420px, calc(100% - 32px));
    border: 1px solid var(--border);
    border-radius: 16px;
  }
}

@media (max-width: 430px) {
  .bt-pwa-bottom-nav {
    padding-right: 5px;
    padding-left: 5px;
  }

  .bt-pwa-bottom-nav__item {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bt-pwa-progress > span {
    transition: none;
  }
}

.bt-pwa-map-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Z2: the offline block on the guide page, styled like .bt-pwa-install-promo
   so it reads as part of the same family of cards. */
.bt-pwa-guide-offline {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
}

.bt-pwa-guide-offline__title {
  margin: 0;
  font-size: 15px;
}

.bt-pwa-guide-offline .bt-pwa-guide-actions {
  margin-top: 0;
}

.bt-pwa-guide-offline .bt-pwa-install-promo {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Z2.4: the small read-only label on an already-decorated library card. */
.bt-pwa-card-offline {
  margin-top: 6px;
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
}

/* R2 fix-10: sign-in has no .profile-card to borrow, so the diagnostics
   card there gets its own neutral background instead. */
.bt-pwa-diag-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-top: 16px;
}

/* Z3: the profile diagnostics card. */
.bt-pwa-diag dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

@media (max-width: 899px) {
  html.bt-pwa-nav .buy-bar {
    bottom: calc(var(--bt-pwa-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 12px;
  }
}
@media (min-width: 900px) {
  html.bt-pwa-nav body.has-buy-bar .bt-pwa-bottom-nav {
    bottom: calc(16px + 96px);
  }
}