/* =========================================================================
   لایه‌ی سفارشیِ نازک روی متریونیک ۸.
   فقط اجزای مخصوص فروشگاه اینجاست؛ دکمه/کارت/بَج/رنگ‌ها از خود متریونیک می‌آید.
   رنگ‌ها از متغیرهای متریونیک (--bs-*) خوانده می‌شوند تا دارک‌مود هم درست بماند.
   ========================================================================= */

/* پس‌زمینه‌ی صفحه (چون از لایوت app-default متریونیک استفاده نمی‌کنیم) */
body.app-body {
    background-color: var(--bs-gray-100);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* شعاع کارت کمی بزرگ‌تر برای حال‌وهوای مدرن (از متغیر خود بوت‌استرپ) */
.card { --bs-card-border-radius: 1rem; }

/* ---- هدر سایت ---- */
.app-header { background: var(--bs-body-bg); box-shadow: 0 1px 0 rgba(0,0,0,.04); z-index: 1030; }
.brand-logo {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary); color: #fff; border-radius: .75rem;
}
.search-box .search-icon {
    position: absolute; top: 50%; inset-inline-start: auto; inset-inline-end: 1rem;
    transform: translateY(-50%); color: var(--bs-gray-500); pointer-events: none;
}

/* ---- آیکون برنامه ---- */
.app-icon {
    width: 72px; height: 72px; border-radius: 1.1rem; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-primary-light); color: var(--bs-primary); font-size: 2rem;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-icon-lg { width: 92px; height: 92px; border-radius: 1.4rem; font-size: 2.4rem; }
.app-icon-placeholder { display: inline-flex; }

/* کارت برنامه در صفحه‌ی اصلی */
.app-card { transition: transform .15s ease, box-shadow .15s ease; }
.app-card:hover { transform: translateY(-4px); }

/* ---- هدر صفحه‌ی برنامه ---- */
.app-title { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* ---- کارت‌های آمار ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.stat-box { background: var(--bs-body-bg); border-radius: .85rem; padding: .9rem 1rem; box-shadow: var(--bs-box-shadow-sm); }
.stat-label { font-size: .8rem; color: var(--bs-gray-600); }
.stat-value { font-size: 1.15rem; font-weight: 700; margin-top: .15rem; }

/* عنوان بخش‌ها */
.section-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }

/* ---- نوار اسکرین‌شات‌ها ---- */
.screenshot-strip { display: flex; gap: .85rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.screenshot-item {
    flex: 0 0 auto; scroll-snap-align: start; width: 150px; border-radius: 1rem; overflow: hidden; background: var(--bs-gray-100);
}
.screenshot-item img { width: 100%; height: 290px; object-fit: cover; display: block; }

/* ---- توضیحات ---- */
.app-description { line-height: 2; }

/* ---- تایم‌لاین نسخه‌ها ---- */
.version-timeline { position: relative; padding-inline-start: 1.4rem; }
.version-timeline::before {
    content: ""; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--bs-border-color);
}
.vt-item { position: relative; padding-bottom: 1.4rem; }
.vt-item:last-child { padding-bottom: 0; }
.vt-dot {
    position: absolute; inset-inline-start: -1.4rem; top: 5px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--bs-primary); border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color);
}
.vt-dot-off { background: var(--bs-gray-400); }

/* ---- لیست اطلاعات ---- */
.info-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .65rem 0; border-bottom: 1px dashed var(--bs-border-color); gap: 1rem;
}
.info-list li:last-child { border-bottom: 0; }
.info-list li span { color: var(--bs-gray-600); }
.info-list code { word-break: break-all; text-align: left; }

.app-footer { background: var(--bs-body-bg); }

/* ---- واکنش‌گرایی ---- */
@media (max-width: 575.98px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .app-icon-lg { width: 76px; height: 76px; }
    .app-title { font-size: 1.25rem; }
    .screenshot-item { width: 124px; }
    .screenshot-item img { height: 230px; }
}