/* Petya Store - app layer (adds iOS app feel without changing the site design) */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-h: 56px;
}
*{ -webkit-tap-highlight-color: transparent; }
html{ -webkit-text-size-adjust: 100%; }
a, button, .btn{ touch-action: manipulation; }
/* The page used overflow-x:hidden on body, which breaks sticky headers. clip does the same job without that side effect. */
html body{ overflow-x: clip !important; }

/* Tab bar */
.petya-tabbar{ display: none; }
@media (max-width: 820px){
  .petya-tabbar{
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    height: calc(var(--tab-h) + var(--safe-bottom));
    padding: 0 6px var(--safe-bottom);
    background: var(--header-bg, rgba(11,21,38,.78));
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: .5px solid var(--border-strong, rgba(147,197,253,.24));
    direction: rtl;
  }
  body{ padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 8px); }
  input, select, textarea{ font-size: 16px; } /* stops iOS zoom on focus */
  /* keep the three-line menu button visible on every page */
  header .nav-cta .menu-toggle{ display: flex !important; }
}
.petya-tab{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--text-faint, #7DA3D1);
  font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1;
  transition: color .15s, transform .1s;
}
.petya-tab svg{
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.petya-tab:active{ transform: scale(.92); }
.petya-tab.active{ color: var(--accent, #3B82F6); }
.petya-tab.active svg{ fill: currentColor; fill-opacity: .16; }

/* Install hint (iPhone Safari only) */
.petya-install{
  position: fixed; left: 12px; right: 12px; z-index: 95;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 10px);
  display: flex; align-items: center; gap: 10px; direction: rtl;
  padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5;
  color: var(--text, #F0F7FF);
  background: var(--header-bg, rgba(11,21,38,.9));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong, rgba(147,197,253,.24));
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.petya-install img{ width: 38px; height: 38px; border-radius: 9px; flex: none; }
.petya-install span{ flex: 1; }
.petya-install button{
  background: none; border: 0; color: var(--text-faint, #7DA3D1);
  font-size: 18px; padding: 4px 6px; cursor: pointer;
}

/* Installed app mode (iPhone): the header itself extends under the status bar,
   so there is no separate empty band above it. */
html.is-standalone header{
  top: 0;
  padding-top: var(--safe-top);
}
/* Light theme: keep a dark band behind the white status-bar text so it stays readable */
html.is-standalone body.light header{
  background-image: linear-gradient(#0B1526, #0B1526);
  background-repeat: no-repeat;
  background-size: 100% var(--safe-top);
}
@media (prefers-reduced-motion: reduce){ .petya-tab{ transition: none; } }