/* ==========================================================
   ZYROMOD APP PAGE STYLE
   Combined CSS
========================================================== */


/* ==========================================================
   THEME VARIABLES
========================================================== */

:root[data-theme="dark"] {
  --bg-color: #181a1b;
  --text-color: #f1f1f1;
}

:root[data-theme="light"] {
  --bg-color: #f8f9fa;
  --text-color: #212529;
}


/* ==========================================================
   GLOBAL
========================================================== */

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding-top: 60px;
  padding-left: 3px;
  padding-right: 3px;
}


/* ==========================================================
   HEADER
========================================================== */

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--card-bg);
  color: var(--text-color);
  z-index: 999;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.back-btn,
.share-btn {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff5500;
  border: none;
  background: none;
  padding: 7px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}


.title-center {
  font-family: 'Product Sans', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
}


/* Google style logo colors */

.title-center span:nth-child(1) { color:#DB4437; }
.title-center span:nth-child(2) { color:#F4B400; }
.title-center span:nth-child(3) { color:#0F9D58; }
.title-center span:nth-child(4) { color:#4285F4; }
.title-center span:nth-child(5) { color:#DB4437; }
.title-center span:nth-child(6) { color:#F4B400; }
.title-center span:nth-child(7) { color:#0F9D58; }



/* ==========================================================
   APP STATS
========================================================== */

.stats-bar {
  display:flex;
  justify-content:space-around;
  text-align:center;
  font-weight:bold;
  padding:0 30px;
  font-size:12px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  margin-top:-15px;
  margin-bottom:10px;
}


.stats-bar .value {
  font-weight:bold;
  display:block;
  font-size:1.1rem;
}



/* ==========================================================
   RATINGS
========================================================== */

.star {
  color:gold;
  font-size:1.4rem;
}


.star.text-muted {
  color:#888 !important;
}


body.dark-mode .star.text-muted {
  color:#bbb !important;
}



/* ==========================================================
   APP ICON + DOWNLOAD ANIMATION
========================================================== */

.app-icon-container {
  position:relative;
  width:66px;
  height:66px;
  display:inline-block;
}


#app-icon {
  width:66px;
  height:66px;
  object-fit:cover;
  border-radius:16px;
  position:relative;
  z-index:10;
  transition:transform 1.8s ease,
             border-radius 1.8s ease;
}


#app-icon.active {
  transform:scale(.75);
  border-radius:50%;
}


#download-ring {
  position:absolute;
  top:0;
  left:0;
  width:66px;
  height:66px;
  pointer-events:none;
  z-index:5;
  display:none;
}


#download-ring circle {
  stroke:#ff5500;
  stroke-width:4;
  fill:none;
  stroke-dasharray:213.6;
  stroke-dashoffset:213.6;
  transition:stroke-dashoffset 1.8s linear;
}



/* ==========================================================
   SCREENSHOTS
========================================================== */

.screenshot-img {
  height:160px;
  margin-right:10px;
  border-radius:10px;
  transition:transform .2s;
  cursor:pointer;
}


.screenshot-img:hover {
  transform:scale(1.1);
}


.screenshot-container {
  overflow-x:auto;
  white-space:nowrap;
  padding-bottom:10px;
}



/* ==========================================================
   DESCRIPTION
========================================================== */

.seo-title {
  font-family:'Product Sans',sans-serif;
  font-size:18px;
  font-weight:600;
  text-align:center;
  line-height:1.3;
  color:var(--text-color);
  margin:1rem 0 .5rem;
}


.short-description-wrapper {
  position:relative;
  width:calc(100% - 16px);
  margin:0 8px 15px;
  background:#fff !important;
  border:none !important;
  border-radius:10px;
  overflow:hidden;
  word-break:break-word;
}


.short-description-text {
  display:inline;
  white-space:normal;
  word-break:break-word;
  font-family:'Product Sans',sans-serif;
  font-size:15px;
  line-height:1.6;
}


#descriptionFull {
  width:100%;
  overflow-wrap:break-word;
  background:transparent !important;
  display:none;
}


#descriptionFull p,
#descriptionFull div,
#descriptionFull li,
#descriptionFull span,
#descriptionFull h1,
#descriptionFull h2,
#descriptionFull h3,
#descriptionFull h4,
#descriptionFull h5,
#descriptionFull h6 {

  font-family:'Product Sans',sans-serif !important;
  font-size:15px !important;
  line-height:1.6 !important;
  margin:6px 0 !important;
}


#descriptionFull img {
  max-width:100%;
  height:auto;
  border-radius:8px;
}


#descriptionFull table {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  display:block;
}


#descriptionFull a,
.read-more-inline {
  color:#ff5500 !important;
}


.read-more-inline {
  font-weight:600;
  text-decoration:none;
}



/* ==========================================================
   COMMENTS
========================================================== */

.comments-wrapper {
  background:transparent;
  width:calc(100% - 16px);
  margin:15px 8px;
  padding:12px 14px;
  border-radius:10px;
  font-family:'Product Sans',sans-serif;
}


.comments-wrapper h5 {
  font-size:15px;
  font-weight:600;
}


.comment-block {
  display:flex;
  gap:10px;
  margin-bottom:15px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
}


.comment-icon {
  width:40px;
  height:40px;
  border-radius:50%;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  flex-shrink:0;
}


.comment-text {
  font-size:15px;
  line-height:1.6;
}


.view-all-reviews {
  color:#ff5500 !important;
  font-weight:600;
  text-decoration:none;
}



/* ==========================================================
   FORMS + SOCIAL
========================================================== */

input,
textarea,
select {
  background:#fff !important;
  color:#000 !important;
}


.btn-primary,
.btn-success {
  border:none;
}


.form-button {
  display:flex;
  justify-content:flex-end;
}


.social-buttons {
  display:flex;
  justify-content:center;
  gap:3px;
  margin-top:10px;
}


.btn-telegram,
.btn-whatsapp {

  padding:5px 16px;
  font-size:.95rem;
  font-weight:600;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


.btn-telegram {
 background:#0088cc;
}


.btn-whatsapp {
 background:#25D366;
}



/* ==========================================================
   DOWNLOAD BUTTON
========================================================== */

.btn-download-apk {

 background:#ff5500 !important;
 color:#fff !important;
 font-weight:600;
 border:none;
 padding:6px 20%;
 border-radius:6px;
 text-decoration:none;
 box-shadow:
 0 3px 6px rgba(0,0,0,.16),
 0 1px 3px rgba(0,0,0,.12);

}



/* ==========================================================
   TRENDING BADGE
========================================================== */

.top-rank-badge {
 display:flex;
 justify-content:center;
 width:100%;
 padding:14px 0;
}


.badge-top-download {

 border:2px solid #d1d5db;
 color:#1e293b;
 padding:6px 14px;
 border-radius:12px;
 font-size:.9rem;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
}


.rank-animate {

 color:#1d4ed8;
 animation:pulseBadge 1.8s infinite ease-in-out;
}


@keyframes pulseBadge {

0%,100% {
 transform:scale(1);
}

50% {
 transform:scale(1.12);
}

}



/* ==========================================================
   SIMILAR APPS
========================================================== */

.similar-scroll {

 display:flex;
 overflow-x:auto;
 gap:14px;
 padding:10px 0 15px;
 scroll-snap-type:x mandatory;

}


.similar-app {

 flex:0 0 auto;
 width:100px;
 text-align:center;
 background:#fff;
 border-radius:16px;
 padding:10px 8px;
 text-decoration:none !important;
}


.similar-app img {

 width:50px;
 height:50px;
 object-fit:cover;
 border-radius:12px;

}


.similar-app-name {

 font-size:.78rem;
 color:#1f2937;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;

}


body.dark-mode .similar-app {
 background:#1f2937;
}


body.dark-mode .similar-app-name {
 color:#f1f5f9;
}



.see-all-link {
 color:#1e2538;
 text-decoration:none;
}



/* ==========================================================
   SHARE UNLOCK MODAL
========================================================== */

.share-backdrop {

 position:fixed;
 inset:0;
 background:rgba(0,0,0,.6);
 backdrop-filter:blur(8px);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:9999;

}


.share-modal {

 width:90%;
 max-width:380px;
 padding:25px;
 border-radius:20px;
 background:rgba(255,255,255,.15);
 backdrop-filter:blur(20px);
 color:#fff;
 text-align:center;

}


.share-title {

 font-size:1.3rem;
 font-weight:700;

}


.share-desc {

 font-size:.9rem;
 margin-bottom:15px;

}


.progress-ring {

 width:90px;
 height:90px;
 margin:auto;
 position:relative;

}


.progress-ring svg {
 transform:rotate(-90deg);
}


.progress-ring circle {

 fill:none;
 stroke-width:8;

}


.progress-bg {
 stroke:rgba(255,255,255,.2);
}


.progress-bar {

 stroke:#00ffae;
 stroke-dasharray:283;
 stroke-dashoffset:283;

}


.progress-text {

 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 font-weight:bold;

}


.share-button {

 width:100%;
 padding:12px;
 margin-bottom:10px;
 border:none;
 border-radius:12px;
 font-weight:600;

}


.telegram-btn {

 background:#0088cc;
 color:#fff;

}


.whatsapp-btn {

 background:#25D366;
 color:#fff;

}


.unlock-success {

 background:#00ffae !important;
 color:#000 !important;

}