* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, Arial, sans-serif;
  background: #fff;
}

/* Utility: force LTR for numbers/dates inside RTL */
.ltr{
  direction: ltr;
  unicode-bidi: embed;
}


/* =====================================
   RTL (Arabic) overrides
   Works when <html dir="rtl"> is set
   ===================================== */

/* Keep numbers/ratings/dates readable in RTL */
[dir="rtl"] .stat-main,
[dir="rtl"] .rr-score,
[dir="rtl"] .rr-count,
[dir="rtl"] .review-date,
[dir="rtl"] .updated-date,
[dir="rtl"] .rr-bar-label {
  direction: ltr;
  unicode-bidi: embed;
}

/* ===== RTL header/menu layout (match Google Play Arabic UI) =====
   In RTL the brand block should be on the RIGHT,
   while the icon buttons cluster stays on the LEFT.
   So we keep the main bar direction as-is (row),
   and only reverse the icon cluster order to: avatar, help, search.
*/
[dir="rtl"] .topbar{
  flex-direction: row; /* keep brand block on the right */
}

[dir="rtl"] .topbar-right{
  flex-direction: row-reverse; /* avatar, help, search (left-to-right) */
}

[dir="rtl"] .app-header{
  flex-direction: row; /* app icon stays on the right in RTL */
}

/* Actions: put icon on the right side of the label */
[dir="rtl"] .action-btn{
  flex-direction: row-reverse;
}

/* Verified line: put info dot before text naturally in RTL */
[dir="rtl"] .verified-line{
  flex-direction: row-reverse;
}

/* Tabs order */
[dir="rtl"] .rr-tabs{
  flex-direction: row-reverse;
}

[dir="rtl"] .rr-tab{
  flex-direction: row-reverse;
}

/* Ratings summary columns: score on the right, bars on the left */
[dir="rtl"] .rr-summary{
  grid-template-columns: 1fr 140px;
}

[dir="rtl"] .rr-left{
  text-align: right;
}

/* Review header: kebab on the left, avatar on the right */
[dir="rtl"] .review-top{
  grid-template-columns: 32px 1fr 44px;
}

[dir="rtl"] .review-top .review-avatar{
  grid-column: 3;
}
[dir="rtl"] .review-top .review-name{
  grid-column: 2;
}
[dir="rtl"] .review-top .kebab{
  grid-column: 1;
}

/* Review meta/actions spacing */
[dir="rtl"] .review-meta{
  flex-direction: row-reverse;
}

[dir="rtl"] .review-actions{
  flex-direction: row-reverse;
}

[dir="rtl"] .review-q{
  margin-right: 0;
  margin-left: 0;
  margin-inline-end: 10px;
}

/* Section arrow should point to the left in RTL */
[dir="rtl"] .section-head__arrow{
  transform: scaleX(-1);
}

/* Stats: align the “first” stat to the start side (right in RTL) */
[dir="rtl"] .stat:first-child{
  align-items: flex-end;
  text-align: right;
}

/* Screenshots: start scrolling from the right in RTL */
[dir="rtl"] .screenshots{
  direction: rtl;
}
[dir="rtl"] .screenshots img{
  direction: ltr;
}

/* Footer link groups look better stacked in RTL */
[dir="rtl"] .footer-links{
  flex-direction: row-reverse;
}

/* Верхняя панель */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 56px;
  padding: 0 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #fff;
  z-index: 1000;

  /* тени нет по умолчанию */
  box-shadow: none;
  transition: box-shadow 0.25s ease;
}

/* тень появляется при скролле */
.topbar.scrolled{
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


/* маленький логотип слева */
.brand-logo{
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

/* текст рядом */
.brand-text{
  font-size: 18px;
  font-weight: 500;
  color: #202124;
  line-height: 1;
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* логотип НЕ должен быть 100px */
.brand-img{
  height: 88px;        /* или 32px если хочешь больше */
  width: auto;
  display: block;
}

/* кнопки справа ровно по центру */
.topbar-right{
  display: flex;
  align-items: center;
  gap: 4px;
}

/* аватар чуть больше, но чтобы влезал */
.avatar-btn{
  width: 40px;
  height: 40px;
}

.avatar-btn img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
}


/* Левая часть */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Кнопки */
.icon-btn,
.avatar-btn {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}

.icon-btn:hover,
.avatar-btn:hover {
  background: #f1f3f4;
}

/* Иконки */
.icon-btn img {
  width: 28px;
  height: 28px;
}

/* Аватар */
.avatar-btn img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}


.app-page{
  max-width: 480px;
  margin: 0 auto;

  padding-left: 25px;
  padding-right: 25px;

  /* ВАЖНО: увеличенный отступ от верхней панели */
  padding-top: 96px;   /* было ~80px → стало заметно больше */
}


/* Верх */
.app-header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.app-logo {
  width: 80px;
  height: 80px;
  border-radius: 18px;
}

.app-title {
  font-size: 26px;
  font-weight: 500;
  color: #202124;
}

.app-dev {
  color: #0f9d58;
  font-size: 16px;
  margin-top: 4px;
}

.app-meta {
  color: #5f6368;
  font-size: 12px;
  margin-top: 4px;
}


/* ===== App stats like Google Play ===== */
.app-stats{
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center;

  margin-top: 32px;
  margin-bottom: 32px;
}

/* разделители */
.stat-divider{
  width: 1px;
  height: 32px;
  background: #dadce0;
}

/* общий стиль */
.stat{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ЛЕВЫЙ БЛОК — выравнивание влево */
.stat:first-child{
  align-items: flex-start;
  text-align: left;
}

/* СРЕДНИЙ и ПРАВЫЙ — по центру */
.stat:not(:first-child){
  align-items: center;
  text-align: center;
}

.stat-main {
  font-size: 14px;        /* меньше, как в оригинале */
  font-weight: 500;
  color: #202124;
}


.stat-sub {
  font-size: 12px;
  color: #5f6368;
  margin-top: 2px;
  white-space: nowrap;
}


.install-btn {
  width: 100%;
  height: 40px;

  background: #3A8462;          /* Google Play blue */
  color: #fff;

  border: none;
  border-radius: 10px;

  font-size: 16px;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  margin-bottom: 12px;
}

.install-btn:hover {
  background: #3A8462;   
}


/* Actions */
.app-actions {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 16px 0 24px;
}

.action-btn {
  background: none;
  border: none;
  color: #0f9d58;
  font-size: 14px;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 6px; /* расстояние между иконкой и текстом */
}

.action-icon {
  width: 24px;
  height: 24px;
  display: block;
}


/* Screenshots */
.screenshots {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.screenshots img {
  width: 160px;
  border-radius: 12px;
}

/* About */
.about {
  margin-top: 24px;
}

.about-title {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}

.about p {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
}

/* Screenshots */
.screenshots {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;

  /* скрыть скроллбар */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge (старые) */
}

.screenshots::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Opera */
}


.pg-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
.pg-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}


.device-note{
  display: flex;
  align-items: center;
  gap: 10px;

  color: #5f6368;
  font-size: 16px;

  margin: 8px 0 12px; /* отступы как “под кнопкой” */
}

.device-note__icon{
  width: 32px;   /* подгони если нужно */
  height: 32px;
  display: block;
}

.device-note__text{
  line-height: 1.3;
}


/* ===== Updated on + chips ===== */
.updated{
  margin-top: 18px;
}

.updated-title{
  font-size: 18px;
  font-weight: 500;
  color: #202124;
}

.updated-date{
  margin-top: 6px;
  font-size: 14px;
  color: #5f6368;
}

.chips{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.chip{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  font-size: 14px;
  color: #3c4043;
  background: #fff;
}

/* ===== Section header (title + arrow) ===== */
.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  margin-bottom: 10px;
}

.section-head__title{
  font-size: 18px;
  font-weight: 500;
  color: #202124;
}

.section-head__arrow{
  color: #5f6368;
  font-size: 20px;
  line-height: 1;
}

/* ===== Data safety ===== */
.section-desc{
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
}

.safety-card{
  margin-top: 14px;
  border: 1px solid #dadce0;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.safety-row{
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.safety-ic{
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.safety-ic img{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}


.safety-ic svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.safety-text{
  flex: 1;
}

.safety-main{
  font-size: 14px;
  color: #202124;
  line-height: 1.25;
}

.safety-sub{
  margin-top: 4px;
  font-size: 13px;
  color: #5f6368;
  line-height: 1.25;
}

.see-details{
  margin-top: 8px;
  padding: 10px 14px;
  border: 0px solid #dadce0;
  border-radius: 10px;
  background: #f8f9fa;
  color: #0f9d58;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.see-details:hover{
  background: #f1f3f4;
}

/* ===== Ratings section spacing ===== */
.ratings{
  padding-bottom: 20px; /* чтобы низ не перекрывался bottom-nav */
}

/* ===== Bottom navigation ===== */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 64px;
  background: #fff;
  border-top: 1px solid #dadce0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}

.nav-item{
  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  color: #5f6368;
  font-size: 12px;
}

.nav-ic{
  width: 28px;          /* чуть больше, чтобы не тесно */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-ic svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nav-item.active{
  color: #0f9d58; /* зелёный как в Play */
  font-weight: 500;
}

/* ===== Center all lower sections like top blocks ===== */
.updated,
.data-safety,
.ratings {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}


/* ===== Bottom nav custom icons ===== */
.nav-ic img{
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
/* если хочешь, чтобы активная иконка была зеленой */
.nav-item.active img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(28%) saturate(616%) hue-rotate(96deg);
}


/* ===== Ratings & reviews block ===== */
.verified-line{
  margin-top:0px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f6368;
  font-size: 14px;
}

.info-dot{
  width: 18px;
  height: 18px;
  border: 1px solid #dadce0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #5f6368;
}

/* Tabs */
.rr-tabs{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rr-tab{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #3c4043;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 16px;
}

.rr-tab-ic{
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.rr-tab.active{
  background: #e6f4ea;
  border-color: transparent;
  color: #0f9d58;
}

/* Summary */
.rr-summary{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: start;
}

.rr-score{
  font-size: 72px;
  font-weight: 500;
  color: #202124;
  line-height: 0.95;
}

.rr-stars{
  margin-top: 10px;
  display: flex;
  gap: 4px;
}

.star{
  font-size: 18px;
  line-height: 1;
}

.star.filled{ color: #0f9d58; }
.star.empty{ color: #dadce0; }

/* “half” звезда (простая имитация) */
.star.half{
  color: #dadce0;
  position: relative;
}
.star.half::before{
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #3A8462;
}

.rr-count{
  margin-top: 10px;
  font-size: 16px;
  color: #5f6368;
}

/* Bars */
.rr-bars{
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rr-bar-row{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
}

.rr-bar-label{
  color: #5f6368;
  font-size: 14px;
}

.rr-bar{
  height: 12px;
  background: #e8eaed;
  border-radius: 999px;
  overflow: hidden;
}

.rr-bar-fill{
  height: 100%;
  background: #3A8462;
  border-radius: 999px;
}

/* Review card */
.review-card{
  margin-top: 18px;
  padding-top: 14px;
}

/* Top section */
.review-top{
  /* фиксируем направления, чтобы не зеркалилось из-за RTL страницы */
  direction: ltr;

  display: grid;
  grid-template-columns: 32px 1fr 44px;
  align-items: center;
  gap: 12px;
}

/* Avatar (справа) */
.review-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Name (в центре, но текст можно в RTL) */
.review-name{
  font-size: 20px;
  color: #202124;

  /* если имя/контент может быть арабским — пусть отображается RTL */
  direction: rtl;
  text-align: right;
}

/* Kebab menu (слева) */
.kebab{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kebab:hover{
  background: #f1f3f4;
}

.kebab span{
  width: 4px;
  height: 4px;
  background: #5f6368;
  border-radius: 50%;
  display: block;
  margin: 2px 0;
}

/* review meta */
.review-meta{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-stars{
  display: flex;
  gap: 3px;
}

.review-date{
  color: #5f6368;
  font-size: 16px;
}

/* review text */
.review-text{
  margin-top: 10px;
  color: #3c4043;
  font-size: 16px;
  line-height: 1.5;
}

.review-helpful{
  margin-top: 14px;
  color: #5f6368;
  font-size: 15px;
}

.review-actions{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.review-q{
  color: #5f6368;
  font-size: 15px;
  margin-right: 10px;
}

.help-btn{
  height: 36px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #3c4043;
  font-size: 16px;
  cursor: pointer;
}

.help-btn:hover{
  background: #f1f3f4;
}


/* ===== Ratings: убрать лишний отступ снизу заголовка ===== */
.ratings .section-head{
  margin-bottom: 6px;   /* было ~14px */
}

/* строка verified — без отступа сверху */
.verified-line{
  margin-top: 0;
}


/* ===== Google Play footer ===== */
.gp-footer{
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 25px 100px; /* низ с запасом под bottom-nav */
  border-top: 1px solid #e8eaed;
  background: #fff;
}

.footer-group{
  margin-bottom: 22px;
}

.footer-title{
  font-size: 12px;
  font-weight: 500;
  color: #202124;
  margin-bottom: 10px;
}

.gp-footer a{
  display: block;
  font-size: 12px;
  color: #5f6368;
  text-decoration: none;
  margin-bottom: 8px;
}

.gp-footer a:hover{
  text-decoration: underline;
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 16px;
}

.footer-links a{
  margin: 0;
}

.footer-muted{
  font-size: 12px;
  color: #5f6368;
}

.footer-locale{
  margin-top: 12px;
  font-size: 12px;
  color: #5f6368;
}


/* Центрируем ТОЛЬКО 4.5★, текст снизу не трогаем */
.stat:first-child .stat-main {
  align-self: center;
  text-align: center;
}


/* ===== Google Play arrow ===== */
.section-head__arrow{
  width: 24px;
  height: 24px;
  display: inline-block;

  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M5 12h14'/>\
<path d='M13 6l6 6-6 6'/>\
</svg>");
}


/* ===== Install simulation (Install -> Installing -> Open) ===== */
.install-btn{
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
}

.install-btn:disabled{
  cursor: default;
  opacity: 0.98;
}

.install-btn__main{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
}

.install-btn__sub{
  display: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.05;
  opacity: 0.92;
}

.install-btn__bar{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.28);
}

.install-btn__fill{
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.95);
  transform-origin: left center;
}

/* states */
.install-btn[data-state="installing"] .install-btn__sub,
.install-btn[data-state="installing"] .install-btn__bar{
  display: block;
}

.install-btn[data-state="open"] .install-btn__sub,
.install-btn[data-state="open"] .install-btn__bar{
  display: none;
}

/* ===== Installing state: green text & bar, no background/border ===== */
.install-btn[data-state="installing"]{
  background: transparent !important;
  border: none !important;
}

.install-btn[data-state="installing"] .install-btn__main,
.install-btn[data-state="installing"] .install-btn__sub{
  color: #3A8462;
}

.install-btn[data-state="installing"] .install-btn__bar{
  background: rgba(58,132,98,0.25);
}

.install-btn[data-state="installing"] .install-btn__fill{
  background: #3A8462;
}