/* Установка приложения на экран «Домой»: баннер на главной (partials/install_banner.html)
 * и страница инструкции /pwa (templates/pwa.html). Размеры, цвета и тени — из макета
 * «Баннер установки» (README). Шрифты Manrope/Inter подключены глобально (static/css/fonts.css). */

/* ============================== БАННЕР НА ГЛАВНОЙ ============================== */
.pv-banner-off .pv-banner { display: none; }   /* класс ставится синхронно скриптом перед баннером — без вспышки */

.pv-banner {
  position: relative;
  margin: 0 0 24px;
  min-height: 320px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 87, 255, 0.10);
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(13, 18, 32, 0.08);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(13, 18, 32, 0.12);
}
/* свечение справа сверху */
.pv-banner::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 760px; height: 640px;
  background: radial-gradient(closest-side, rgba(0, 128, 255, 0.20), rgba(0, 170, 255, 0.08) 55%, transparent);
  pointer-events: none;
}
.pv-banner__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  min-height: 320px;
  color: inherit;
  text-decoration: none;
}
.pv-banner__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 36px 40px;
}
.pv-banner__title {
  margin: 0;
  font: 800 clamp(28px, 3.2vw, 42px)/1.05 Manrope, system-ui, sans-serif;
  letter-spacing: -0.03em;
  color: #0D1220;
}
.pv-banner__sub {
  margin: 14px 0 24px;
  max-width: 480px;
  font: 400 16px/1.45 Inter, system-ui, sans-serif;
  color: #4A5878;
}
.pv-banner__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.pv-banner__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0057FF, #0080FF, #00AAFF);
  box-shadow: 0 4px 24px rgba(0, 87, 255, 0.35);
  color: #FFFFFF;
  font: 600 15px Inter, system-ui, sans-serif;
}
.pv-banner__hint { font: 500 14px Inter, system-ui, sans-serif; color: #4A5878; }
.pv-banner__art { position: relative; align-self: start; justify-self: end; width: 100%; }
.pv-banner__art img { display: block; width: 100%; height: auto; }
.pv-banner__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 87, 255, 0.12);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #0D1220;
  cursor: pointer;
}
.pv-banner__close:hover { background: #FFFFFF; }
.pv-banner__close:focus-visible, .pv-banner__link:focus-visible { outline: 2px solid #0057FF; outline-offset: 2px; }

@media (max-width: 759px) {
  .pv-banner { min-height: 0; border-radius: 22px; margin-bottom: 16px; }
  .pv-banner__link { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pv-banner__art { display: none; }
  .pv-banner__text { padding: 22px 20px 22px; }
  .pv-banner__title { font-size: 26px; padding-right: 36px; }
  .pv-banner__sub { font-size: 15px; margin: 10px 0 18px; }
  .pv-banner__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-banner, .pv-banner:hover { transition: none; transform: none; }
}

html.dark .pv-banner { background: #0F1730; border-color: rgba(120, 160, 255, 0.20); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
html.dark .pv-banner::before { background: radial-gradient(closest-side, rgba(0, 128, 255, 0.28), rgba(0, 170, 255, 0.10) 55%, transparent); }
html.dark .pv-banner__title { color: #F3F6FF; }
html.dark .pv-banner__sub, html.dark .pv-banner__hint { color: #A8B5D6; }
html.dark .pv-banner__close { background: rgba(15, 23, 48, 0.85); border-color: rgba(120, 160, 255, 0.25); color: #F3F6FF; }

/* ============================== СТРАНИЦА ИНСТРУКЦИИ ============================== */
.pv-install { margin: 8px 0 32px; font-family: Inter, system-ui, sans-serif; color: #0D1220; }
.pv-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 24px;
  border-radius: 999px; background: #EEF1F6;
}
.pv-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 22px; border-radius: 999px;
  background: transparent; color: #4A5878;
  font: 600 15px Inter, system-ui, sans-serif;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.pv-tab[aria-selected="true"] { background: #FFFFFF; color: #0D1220; box-shadow: 0 2px 8px rgba(13, 18, 32, 0.10); }
.pv-tab:focus-visible { outline: 2px solid #0057FF; outline-offset: 2px; }
.pv-panel[hidden] { display: none; }
.pv-install h2 {
  margin: 0 0 10px;
  font: 800 clamp(28px, 4vw, 40px)/1.08 Manrope, system-ui, sans-serif;
  letter-spacing: -0.03em; color: #0D1220;
}
.pv-lead { margin: 0 0 28px; max-width: 640px; font-size: 17px; line-height: 1.5; color: #4A5878; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.pv-card { background: #F6F7F8; border-radius: 28px; overflow: hidden; padding-bottom: 28px; }
.pv-card img { display: block; width: 100%; aspect-ratio: 392 / 280; object-fit: cover; object-position: top; }
.pv-card__art {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 392 / 280;
  background: radial-gradient(closest-side, rgba(0, 128, 255, 0.16), rgba(0, 170, 255, 0.06) 70%, transparent), #EEF3FB;
}
.pv-card__num {
  font: 800 112px/1 Manrope, system-ui, sans-serif; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0057FF, #00AAFF); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pv-card h3 { margin: 8px 28px 8px; font: 800 24px/1.15 Manrope, system-ui, sans-serif; letter-spacing: -0.02em; color: #0D1220; }
.pv-card p { margin: 0 28px; font-size: 15px; line-height: 1.5; color: #4A5878; }
.pv-card a { color: #0073E6; text-decoration: none; }
.pv-card a:hover { text-decoration: underline; }
.pv-install-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px; margin: 0 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #0057FF, #0080FF, #00AAFF);
  box-shadow: 0 4px 24px rgba(0, 87, 255, 0.35);
  color: #FFFFFF; font: 600 15px Inter, system-ui, sans-serif;
}
.pv-install-btn[hidden] { display: none; }
.pv-note {
  margin: 0 0 24px; padding: 14px 18px; max-width: 640px;
  border-radius: 16px; background: #EEF3FB; color: #34415E;
  font-size: 14.5px; line-height: 1.5;
}
.pv-note b { color: #0D1220; }

html.dark .pv-install, html.dark .pv-install h2, html.dark .pv-card h3 { color: #F3F6FF; }
html.dark .pv-lead, html.dark .pv-card p { color: #A8B5D6; }
html.dark .pv-tabs { background: #151C33; }
html.dark .pv-tab { color: #A8B5D6; }
html.dark .pv-tab[aria-selected="true"] { background: #0F1730; color: #F3F6FF; box-shadow: none; }
html.dark .pv-card { background: #121A33; }
html.dark .pv-card__art { background: radial-gradient(closest-side, rgba(0, 128, 255, 0.22), rgba(0, 170, 255, 0.08) 70%, transparent), #101830; }
html.dark .pv-note { background: #121A33; color: #A8B5D6; }
html.dark .pv-note b { color: #F3F6FF; }

@media (max-width: 600px) {
  .pv-card { border-radius: 22px; padding-bottom: 22px; }
  .pv-card h3 { margin: 6px 22px 6px; font-size: 21px; }
  .pv-card p { margin: 0 22px; }
  .pv-card__num { font-size: 88px; }
  .pv-tab { padding: 10px 18px; }
}

/* Внутри Telegram Mini App установка не нужна (и не работает) — баннер не показываем */
html.tg-webapp .pv-banner { display: none; }

/* --- Перебиваем глобальный сброс кнопок из store-v2.css (button:not(.chip):not(...) {border:none; background:none; padding:0}):
   его специфичность выше обычной, поэтому у наших кнопок оформление держим через !important --- */
.pv-tabs .pv-tab { padding: 10px 22px !important; border: 0 !important; background: transparent !important; border-radius: 999px !important; }
.pv-tabs .pv-tab[aria-selected="true"] { background: #FFFFFF !important; }
html.dark .pv-tabs .pv-tab[aria-selected="true"] { background: #0F1730 !important; }
.pv-install .pv-install-btn { padding: 0 22px !important; border: 0 !important; background: linear-gradient(135deg, #0057FF, #0080FF, #00AAFF) !important; border-radius: 999px !important; }
.pv-banner .pv-banner__close { padding: 0 !important; border: 1px solid rgba(0, 87, 255, 0.12) !important; background: rgba(255, 255, 255, 0.85) !important; }
.pv-banner .pv-banner__close:hover { background: #FFFFFF !important; }
html.dark .pv-banner .pv-banner__close { border-color: rgba(120, 160, 255, 0.25) !important; background: rgba(15, 23, 48, 0.85) !important; }
@media (max-width: 600px) { .pv-tabs .pv-tab { padding: 10px 18px !important; } }

/* Блок «Приложение уже установлено»: display:flex из store-v2.css перебивал атрибут hidden, и его видели все */
body.store-v2.page-pwa .pwa-done[hidden] { display: none; }

/* Заголовок страницы /app в стиле макета */
body.store-v2.page-pwa .page-head { padding: 28px 0 8px; }
body.store-v2.page-pwa .page-head h1 {
  margin: 0 0 10px; font: 800 clamp(30px, 4.4vw, 46px)/1.05 Manrope, system-ui, sans-serif;
  letter-spacing: -0.03em; color: #0D1220;
}
body.store-v2.page-pwa .page-head p { margin: 0 0 24px; max-width: 640px; font-size: 17px; line-height: 1.5; color: #4A5878; }
body.store-v2.page-pwa .pwa-why { margin: 0 0 32px; }
html.dark body.store-v2.page-pwa .page-head h1 { color: #F3F6FF; }
html.dark body.store-v2.page-pwa .page-head p { color: #A8B5D6; }

@media (max-width: 600px) { .pv-card__art { aspect-ratio: 392 / 150; } .pv-card__num { font-size: 72px; } }