/* ==========================================================================
   MyGov Bahrain — Google Play mock landing page
   Стили, повторяющие визуал Google Play. Семантические классы, читаемая
   структура. Легко править и добавлять секции.
   ========================================================================== */

/* ---------- 1. Дизайн-токены ---------- */
:root {
  --gp-green:      #01875f;
  --gp-green-h:    #017a54;
  --gp-text:       #202124;
  --gp-muted:      #5f6368;
  --gp-border:     #dadce0;
  --gp-border-sft: #e8eaed;
  --gp-bg:         #ffffff;
  --gp-bg-soft:    #f1f3f4;
  --gp-blue:       #1a73e8;

  --font:          'Google Sans', 'Roboto', Arial, sans-serif;
  --radius:        8px;
  --radius-lg:     22px;

  --page-max:      1280px;
  --gutter:        24px;
}

/* ---------- 2. Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  /* Жёстко режем горизонтальный overflow — что бы ни делал контент,
     страница никогда не станет шире viewport. */
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  color: var(--gp-text);
  background: var(--gp-bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Длинные слова / URL режем — иначе flex-item раздвигается сверх viewport. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gp-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit; cursor: pointer; border: 0; background: none; color: inherit;
}

/* ---------- 3. Скрытие неактивного языка ---------- */
[data-lang]                                 { display: none; }
html[data-active-lang="en"] [data-lang="en"] { display: inline; }
html[data-active-lang="ar"] [data-lang="ar"] { display: inline; }
/* блочные варианты */
html[data-active-lang="en"] [data-lang="en"].block,
html[data-active-lang="ar"] [data-lang="ar"].block { display: block; }

/* ---------- 4. Верхняя панель ---------- */
.topbar {
  height: 64px;
  border-bottom: 1px solid var(--gp-border-sft);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  position: sticky; top: 0; z-index: 20;
  background: var(--gp-bg);
}
.topbar__logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Google Sans', sans-serif;
  font-size: 22px; color: var(--gp-text);
}
.topbar__logo svg { width: 26px; height: 26px; }
.topbar__search {
  flex: 1; max-width: 720px;
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 18px;
  background: var(--gp-bg-soft);
  border-radius: 24px;
  color: var(--gp-muted);
}
.topbar__search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--gp-text);
}
.topbar__actions { display: flex; align-items: center; gap: 4px; }
.topbar__lang {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--gp-border); border-radius: 20px;
  margin: 0 4px;
}
.topbar__lang button {
  padding: 6px 12px; font-weight: 500; color: var(--gp-muted);
  font-size: 13px;
}
.topbar__lang button.is-active {
  background: var(--gp-green); color: #fff;
}
/* круглые кнопки-иконки в топбаре */
.topbar__icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gp-muted);
  transition: background .15s;
}
.topbar__icon:hover { background: var(--gp-bg-soft); }
.topbar__icon svg { width: 22px; height: 22px; }
.topbar__search-icon { display: none; }         /* только мобилка */
.topbar__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  margin-inline-start: 6px;
  background: var(--gp-bg-soft);
  color: var(--gp-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar__avatar svg { width: 22px; height: 22px; }

/* ---------- 5. Layout ---------- */
.app-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
}
.section {
  padding: 32px 0;
  border-top: 1px solid var(--gp-border-sft);
}
.section:first-child { border-top: 0; padding-top: 0; }
.section__title {
  font-size: 20px; font-weight: 500; margin-bottom: 20px;
  color: var(--gp-text);
}
.section__title--arrow {
  display: flex; align-items: center; gap: 10px;
}
.section__arrow { width: 24px; height: 24px; color: var(--gp-text); flex-shrink: 0; }
html[dir="rtl"] .section__arrow { transform: scaleX(-1); }

/* ---------- 6. Шапка приложения ---------- */
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 40px;
  align-items: start;
}
.app-header__info {
  display: flex; flex-direction: column; gap: 12px;
}
.app-title {
  font-size: 44px; font-weight: 500; line-height: 1.15;
  color: var(--gp-text);
}
.app-developer a {
  color: var(--gp-green); font-weight: 500; font-size: 14px;
}
.app-developer__ads {
  color: var(--gp-muted); margin-inline-start: 10px;
}
.app-icon {
  width: 148px; height: 148px;
  border-radius: var(--radius-lg);
  /* overflow снят: нужно чтобы SVG-кольцо install-анимации выходило за иконку */
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  position: relative;
}
.app-icon img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg);   /* скруглённые углы теперь на самой картинке */
}

/* мобильная иконка живёт внутри app-header__top, скрыта на десктопе */
.app-icon--mobile { display: none; }
.app-header__top  { display: contents; }
.app-header__name { display: contents; }

/* ---------- 7. Метрики ---------- */
.app-metrics {
  display: flex; align-items: center;
  gap: 0; margin-top: 24px;
  color: var(--gp-muted);
}
.app-metrics__item {
  flex: 0 0 auto;
  padding: 8px 24px;
  text-align: center;
  border-inline-end: 1px solid var(--gp-border-sft);
}
.app-metrics__item:last-child { border-inline-end: 0; }
.app-metrics__value {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 15px; font-weight: 500; color: var(--gp-text);
}
.app-metrics__value img { height: 20px; width: auto; }
.app-metrics__value .star { width: 14px; height: 14px; fill: var(--gp-text); }
.app-metrics__label {
  font-size: 12px; margin-top: 4px;
}

/* два набора метрик: десктопный виден по умолчанию, мобильный скрыт */
.app-metrics--mobile { display: none; }
.metric-badge { height: 18px !important; width: auto; }
.metric-svg   { width: 20px; height: 20px; color: var(--gp-muted); }
.metric-info  {
  display: inline-flex; align-items: center; gap: 3px; justify-content: center;
}
.info-i { width: 13px; height: 13px; color: var(--gp-muted); opacity: .8; }

/* ---------- 8. CTA ---------- */
.app-cta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px;
}
.install-btn {
  height: 40px; padding: 0 24px;
  border-radius: 20px;
  background: var(--gp-green); color: #fff;
  font-weight: 500; font-size: 14px;
  transition: background .15s;
}
.install-btn:hover { background: var(--gp-green-h); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gp-muted);
  transition: background .15s;
}
.icon-btn:hover { background: var(--gp-bg-soft); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.share-btn { color: var(--gp-green); font-weight: 500; padding: 0 12px; }

/* мобильный ряд действий Share / Add to wishlist — скрыт на десктопе */
.app-actions-mobile { display: none; }
.text-action {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gp-green); font-weight: 500; font-size: 14px;
}
.text-action svg { width: 20px; height: 20px; }

.device-note {
  margin-top: 12px; font-size: 13px; color: var(--gp-muted);
}
.device-note svg { width: 16px; height: 16px; vertical-align: middle; margin-inline-end: 6px; fill: currentColor; }

/* ---------- 9. Карусель скриншотов ---------- */
.screenshots {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-top: 32px;
  scrollbar-width: thin;
}
.screenshots img {
  flex: 0 0 auto;
  width: 178px; height: 316px;
  object-fit: cover;
  border-radius: 12px;
  scroll-snap-align: start;
  background: var(--gp-bg-soft);
  cursor: pointer;
}

/* ---------- 9b. Лайтбокс скриншотов ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(90vw, 420px); max-height: 90vh;
  object-fit: contain; border-radius: 8px;
}
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.12);
}
.lightbox__close svg { width: 26px; height: 26px; }
.lightbox__nav {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.lightbox__nav svg { width: 28px; height: 28px; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.25); }
@media (max-width: 720px) {
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ---------- 10. About ---------- */
.about__text {
  font-size: 14px; line-height: 1.6; color: var(--gp-text);
  max-width: 820px;
}
.about__text p       { margin: 0 0 12px; }
.about__text p:last-child { margin-bottom: 0; }
.about__subhead      { font-weight: 500; margin-top: 12px !important; }
.about__list         { list-style: none; padding: 0; margin: 8px 0 0; }
.about__list li      {
  position: relative;
  padding-inline-start: 18px;
  margin-bottom: 6px;
}
.about__list li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 4px;
  color: var(--gp-muted);
  line-height: inherit;
}
.about__list strong  { font-weight: 500; color: var(--gp-text); }
.about__genre {
  margin-top: 16px; font-size: 13px; color: var(--gp-muted);
}
.about__genre strong { color: var(--gp-text); font-weight: 500; }
.about__updated {
  margin-top: 20px; font-size: 13px; color: var(--gp-muted);
}

/* ---------- 11. Data safety ---------- */
.data-safety__intro {
  color: var(--gp-text); line-height: 1.6; font-size: 14px;
  max-width: 820px; margin-bottom: 20px;
}
.ds-card {
  border: 1px solid var(--gp-border); border-radius: 12px;
  padding: 20px 24px; max-width: 820px;
}
.ds-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 20px;
  padding: 14px 0;
  align-items: start;
}
.ds-item:first-child { padding-top: 0; }
.ds-item__icon { width: 24px; height: 24px; color: var(--gp-muted); margin-top: 2px; }
.ds-item__title { color: var(--gp-text); font-size: 14px; line-height: 1.4; }
.ds-item__note  { color: var(--gp-muted); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.ds-item__note a { color: var(--gp-green); }
.ds-details {
  display: inline-block; margin-top: 12px;
  color: var(--gp-green); font-weight: 500; font-size: 14px;
}

/* ---------- 12. Ratings ---------- */
.ratings-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.rating-headline {
  font-size: 56px; font-weight: 500; line-height: 1;
}
.rating-stars {
  display: flex; gap: 2px; margin: 6px 0 12px;
}
.rating-stars svg { width: 14px; height: 14px; fill: var(--gp-green); }   /* зелёные звёзды */
.rating-total { color: var(--gp-muted); font-size: 13px; }

.rating-bars { display: flex; flex-direction: column; gap: 6px; }
.rating-bar {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 12px;
  font-size: 13px; color: var(--gp-muted);
}
.rating-bar__track {
  height: 10px; background: var(--gp-bg-soft); border-radius: 5px; overflow: hidden;
}
.rating-bar__fill {
  height: 100%; background: var(--gp-green); border-radius: 5px;
}

.reviews-list { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; }
.review {
  padding-top: 20px; border-top: 1px solid var(--gp-border-sft);
}
.review:first-child { border-top: 0; padding-top: 0; }
.review__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.review__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gp-bg-soft); color: var(--gp-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 13px; flex-shrink: 0;
  overflow: hidden;
}
.review__avatar img {
  width: 100%; height: 100%; display: block;
}
/* маленький подстрочный BH-тег */
.flag-bh {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  vertical-align: super;
  color: var(--gp-muted);
  margin-inline-start: 4px;
  letter-spacing: .5px;
}
.review__name { font-weight: 500; font-size: 14px; flex: 1; }
.review__menu {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gp-muted); transition: background .15s;
}
.review__menu:hover { background: var(--gp-bg-soft); }
.review__menu svg { width: 20px; height: 20px; }

.review__rating {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.review__stars { display: inline-flex; gap: 2px; }
.review__stars svg { width: 12px; height: 12px; fill: var(--gp-green); }   /* зелёные */
.review__date { color: var(--gp-muted); font-size: 12px; }
.review__text { color: var(--gp-text); line-height: 1.6; font-size: 14px; }

.review__helpful {
  margin-top: 12px; color: var(--gp-muted); font-size: 12px;
}
.review__vote {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.review__vote-q { color: var(--gp-muted); font-size: 12px; }
.vote-btn {
  height: 32px; padding: 0 20px;
  border: 1px solid var(--gp-border); border-radius: 16px;
  font-weight: 500; font-size: 13px; color: var(--gp-green);
  transition: background .15s;
}
.vote-btn:hover { background: var(--gp-bg-soft); }

/* ---------- 13. What's new ---------- */
.whats-new__body {
  line-height: 1.6; color: var(--gp-text); max-width: 820px;
}

/* ---------- 14. Similar apps ---------- */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.similar-card {
  padding: 16px 12px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .15s;
  cursor: pointer;
}
.similar-card:hover { background: var(--gp-bg-soft); }
.similar-card__icon {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--gp-bg-soft); overflow: hidden;
}
.similar-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.similar-card__title {
  font-size: 13px; color: var(--gp-text); font-weight: 500;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.similar-card__dev {
  font-size: 12px; color: var(--gp-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.similar-card__rating {
  font-size: 12px; color: var(--gp-muted);
  display: inline-flex; align-items: center; gap: 3px;
}
.similar-card__rating svg { width: 10px; height: 10px; fill: currentColor; }

/* ---------- 15. Support (сворачиваемый) ---------- */
.support { }
.support__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.support__summary::-webkit-details-marker { display: none; }
.support__title { font-size: 20px; font-weight: 500; color: var(--gp-text); }
.support__chevron {
  width: 24px; height: 24px; color: var(--gp-muted);
  transition: transform .2s;
}
.support[open] .support__chevron { transform: rotate(180deg); }
.support-list { margin-top: 12px; }
.support-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--gp-border-sft);
}
.support-row:first-child { border-top: 0; }
.support-row__label { font-size: 14px; color: var(--gp-text); }
.support-row__value { font-size: 13px; color: var(--gp-muted); }
.support-row svg { width: 20px; height: 20px; fill: var(--gp-muted); }

/* ---------- 16. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--gp-border-sft);
  padding: 40px var(--gutter);
  color: var(--gp-muted);
  font-size: 13px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.footer-cols {
  display: flex; flex-wrap: wrap; gap: 48px;
  margin-bottom: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h4 {
  color: var(--gp-text); font-size: 14px; font-weight: 500; margin-bottom: 2px;
}
.footer-col a { color: var(--gp-muted); font-size: 13px; }
.footer-col a:hover { color: var(--gp-text); text-decoration: none; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  padding-top: 24px; border-top: 1px solid var(--gp-border-sft);
}
.footer-legal a { color: var(--gp-muted); font-size: 13px; }
.footer-locale {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; color: var(--gp-text); font-size: 13px;
}
.footer-vat { margin-top: 16px; font-size: 12px; }

/* ---------- 16b. Нижний таб-бар (только мобилка) ---------- */
.tabbar { display: none; }

/* ---------- 17. RTL корректировки ---------- */
html[dir="rtl"] body { font-family: 'Cairo', 'Tajawal', 'Google Sans', sans-serif; }
html[dir="rtl"] .app-title { font-size: 40px; }

/* ---------- 18. Responsive: планшет ---------- */
@media (max-width: 1000px) {
  .app-header  { grid-template-columns: 128px minmax(0, 1fr); gap: 24px; }
  .app-icon    { width: 128px; height: 128px; }
  .app-title   { font-size: 32px; }
  .app-metrics { overflow-x: auto; }
  .similar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ratings-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- 19. Responsive: мобилка (Google Play mobile 1:1) ---------- */
@media (max-width: 720px) {

  /* -- топбар: полный логотип + иконки справа (как в оригинале) -- */
  .topbar {
    height: 56px;
    padding: 0 8px 0 16px;
    gap: 4px;
    border-bottom: 0;
  }
  .topbar__logo { font-size: 20px; gap: 8px; flex: 1; }
  .topbar__logo svg { width: 26px; height: 26px; }
  .topbar__search { display: none; }                 /* поле-строка скрыто */
  .topbar__search-icon { display: inline-flex; }      /* показываем иконку поиска */
  .topbar__actions { gap: 0; }
  .topbar__icon { width: 40px; height: 40px; }
  .topbar__lang {
    margin: 0 2px;
  }
  .topbar__lang button { padding: 4px 9px; font-size: 12px; }
  .topbar__avatar { width: 30px; height: 30px; margin-inline-start: 4px; }

  /* -- рабочая область -- */
  .app-page { padding: 16px 20px 48px; }
  .section  { padding: 20px 0; }
  .section__title { font-size: 16px; margin-bottom: 14px; }

  /* -- шапка приложения -- */
  .app-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .app-header > .app-icon { display: none; }          /* десктопная иконка скрыта */
  .app-header__top {
    display: flex; align-items: center; gap: 16px;
    grid-column: 1 / -1;
  }
  .app-header__name { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .app-icon--mobile {
    display: block;
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 16px;
    /* overflow снят: нужно чтобы SVG-кольцо install-анимации выходило за иконку */
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
  .app-icon--mobile img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
  .app-title   { font-size: 22px; font-weight: 500; line-height: 1.25; }
  .app-developer { font-size: 13px; margin-top: 2px; }
  .app-developer a { font-size: 13px; }
  .app-developer__ads { display: block; margin: 4px 0 0 0; font-size: 12px; }

  /* -- метрики: прячем десктопный набор, показываем мобильный (иконка сверху) -- */
  .app-metrics--desktop { display: none; }
  .app-metrics--mobile {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    overflow: visible;
  }
  .app-metrics--mobile .app-metrics__item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 4px 8px;
    border-inline-end: 1px solid var(--gp-border-sft);
  }
  .app-metrics--mobile .app-metrics__item:last-child { border-inline-end: 0; }
  .app-metrics--mobile .app-metrics__value {
    min-height: 22px; display: flex; align-items: center; justify-content: center;
  }
  .app-metrics__label { font-size: 12px; line-height: 1.3; margin-top: 0; color: var(--gp-text); }
  .metric-badge { height: 22px !important; }
  .metric-svg   { width: 22px; height: 22px; }
  .metric-num   { font-size: 15px; font-weight: 500; color: var(--gp-text); }
  .info-i       { width: 14px; height: 14px; }

  /* -- CTA: install на всю ширину, затем ряд Share / Add to wishlist -- */
  .app-cta {
    grid-column: 1 / -1;
    display: block;
    margin-top: 20px;
  }
  .install-btn { width: 100%; height: 44px; font-size: 15px; border-radius: 8px; }
  .app-cta .icon-btn, .app-cta .share-btn { display: none; }   /* убираем сердечко/share из ряда */

  .app-actions-mobile {
    grid-column: 1 / -1;
    display: flex; justify-content: space-around; align-items: center;
    margin-top: 20px;
  }

  /* -- скриншоты компактнее -- */
  .screenshots { gap: 6px; margin-top: 24px; padding-inline: 0; }
  .screenshots img { width: 148px; height: 262px; border-radius: 8px; }

  /* -- device-note скрыт (в оригинале мобилки его нет) -- */
  .device-note { display: none; }

  /* -- about -- */
  .about__text     { font-size: 14px; }
  .about__genre    { margin-top: 12px; font-size: 12px; }
  .about__updated  { margin-top: 12px; font-size: 12px; }

  /* -- data safety -- */
  .data-safety { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .data-safety__icon { width: 24px; height: 24px; }
  .data-safety__body h3 { font-size: 13px; }
  .data-safety__row     { font-size: 12px; padding: 10px 0; }

  /* -- ratings: число слева + бары справа (как в оригинале) -- */
  .ratings-grid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: center;
  }
  .rating-headline { font-size: 48px; }
  .rating-stars    { margin: 4px 0 8px; }
  .rating-total    { font-size: 12px; }
  .rating-bar      { font-size: 12px; gap: 8px; }
  .rating-bar__track { height: 8px; }
  .review__text    { font-size: 14px; }
  .review__name    { font-size: 14px; }
  .reviews-list    { margin-top: 24px; }

  /* -- similar apps: 2 колонки, горизонтальные карточки (icon слева, текст справа) -- */
  .similar-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .similar-card    {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 10px 4px;
  }
  .similar-card__icon {
    width: 56px; height: 56px; border-radius: 12px;
    grid-row: 1 / 4;                 /* иконка через все 3 текстовые строки */
    align-self: center;
  }
  .similar-card__title  { font-size: 14px; }
  .similar-card__dev    { font-size: 12px; }
  .similar-card__rating { font-size: 12px; }

  /* -- support -- */
  .support-row__label { font-size: 13px; }
  .support-row__value { font-size: 12px; }

  /* -- footer: колонки в столбик -- */
  .site-footer { padding: 24px 20px 32px; }
  .footer-cols { gap: 28px; margin-bottom: 24px; }
  .footer-legal { gap: 10px 20px; }

  /* -- нижний таб-бар: фиксирован, 4 вкладки -- */
  body { padding-bottom: 56px; }        /* чтобы контент не прятался под баром */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: 56px;
    background: var(--gp-bg);
    border-top: 1px solid var(--gp-border-sft);
  }
  .tabbar__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--gp-muted); font-size: 11px; font-weight: 500;
    text-decoration: none;
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item.is-active { color: var(--gp-green); }
}

/* ---------- 20. Очень узкий экран (≤380px) ---------- */
@media (max-width: 380px) {
  .app-page       { padding: 12px 16px 40px; }
  .app-title      { font-size: 20px; }
  .screenshots img { width: 130px; height: 232px; }
  .topbar__help   { display: none; }     /* экономим место в топбаре */
}


/* ==========================================================================
   21. Install-animation (fake Play Store install flow)
   Кольцо-волна вокруг иконки + подписной чип под именем разработчика.
   Из bahrain-siren/store-en.html, адаптировано под нашу разметку.
   ========================================================================== */

/* Обёртка вокруг иконки — вставляется JS-ом, задаёт систему координат для кольца */
.bhInstall-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: top;
}

/* SVG-кольцо вокруг иконки.
   max-width:none обязательно: базовый reset `img, svg {max-width:100%}`
   иначе обрезает ширину кольца до размера родителя-иконки. */
.bhInstall-ring {
  position: absolute;
  pointer-events: none;
  max-width: none;
  overflow: visible;
}
.bhInstall-ring .trk,
.bhInstall-ring .act { fill: none; stroke-linecap: round; }
.bhInstall-ring.spin {
  animation: bhRingSpin 1.15s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes bhRingSpin { to { transform: rotate(360deg); } }

/* Чип-подпись под разработчиком: "Pending…", "7% of 20 MB", "Installed" */
.bhInstall-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1f1f1f;
  color: #c4c7c5;
  font: 500 12.5px/1.15 var(--font);
  padding: 5px 10px;
  border-radius: 10px;
  margin-top: 8px;
  letter-spacing: .1px;
  /* В flex-column родителе (.app-header__info) без align-self chip
     растягивается на всю ширину и становится безобразной полосой. */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.bhInstall-chip.done {
  background: transparent;
  padding: 5px 0;
  color: #8ab4f8;
}
.bhInstall-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

.bhInstall-pulse { animation: bhInstallPulse 1.2s ease-in-out infinite; }
@keyframes bhInstallPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.bhInstall-spin { animation: bhInstallSpin 1.4s linear infinite; transform-origin: center; }
@keyframes bhInstallSpin { to { transform: rotate(360deg); } }