/* ═══════════════════════════════════════════════════════════
   css/app-detail.css — общие стили карточки приложения
   (шапка/hero, карусель скриншотов, кнопка "Скачать", подписка)

   Используется и современными страницами (app/_tpl.php, через
   apps.page_file в БД), и старыми страницами app/*.php — единая
   вёрстка вместо двух параллельных реализаций.
═══════════════════════════════════════════════════════════ */

/* ── Шапка приложения ── */
.app-hero{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:0 0 24px;}
/* display/padding сброшены явно: на старых app/*.php страницах
   css/styleapp.css уже определяет .app-hero-icon-frame как
   flex-контейнер с padding:9% (центрирует иконку через flex) — эти
   свойства этот файл не переопределял, и они наследовались как есть.
   В паре с img{width:100%;height:100%} это раскладка ломает картинку
   до 0×0 (align-items:center вместо stretch не даёт проценту
   разрешиться до реального размера). Явный сброс — единственный
   надёжный способ не зависеть от того, что ещё задаёт styleapp.css. */
.app-hero-icon-frame{position:relative;width:76px;height:76px;flex-shrink:0;display:block;padding:0;}
.app-hero-icon-frame::before{content:'';position:absolute;inset:-10px;border-radius:26px;background:radial-gradient(circle at 32% 28%,var(--accent-glow),transparent 72%);opacity:.75;}
.app-hero-icon{position:relative;display:block;width:100%;height:100%;border-radius:20px;object-fit:cover;box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 1px var(--glass-border);}
.app-hero-info{flex:1;min-width:0;}
.app-hero-name{font-family:'Syne',sans-serif;font-size:clamp(19px,4vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0 0 9px;}
.app-hero-meta{display:flex;flex-wrap:wrap;gap:7px;}
.app-hero-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap;}
.app-hero-badge .icon{width:12px;height:12px;}
.app-hero-badge.fresh{background:rgba(200,170,255,.16);border-color:rgba(200,170,255,.35);color:var(--accent-2);}
@media(max-width:420px){.app-hero{gap:13px}.app-hero-icon-frame{width:60px;height:60px}}

.app-sub-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.app-sub-btn svg{width:12px;height:12px;}
.app-sub-btn:hover{color:var(--text);}
.app-sub-btn.active{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.3);color:#ffd700;}
.app-sub-btn.active svg{fill:currentColor;}
.app-sub-btn[disabled]{opacity:.6;cursor:default;}

/* Компактная кнопка "Скачать" — сразу в шапке, рядом с иконкой,
   без баннера и без прокрутки вниз (как Install в Google Play/Windows Store) */
.app-hero-dl{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:14px;background:linear-gradient(135deg,rgba(130,90,255,.85),rgba(80,55,200,.8));color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:inherit;box-shadow:0 4px 18px rgba(100,60,200,.35);transition:transform .15s,box-shadow .15s;white-space:nowrap;margin-left:auto;}
.app-hero-dl:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(100,60,200,.5);}
.app-hero-dl[disabled]{opacity:.4;cursor:default;box-shadow:none;}
.app-hero-dl[disabled]:hover{transform:none;}
.app-hero-dl .icon{width:15px;height:15px;}
@media(max-width:480px){.app-hero-dl{width:100%;justify-content:center;margin-left:0;}}

/* ── Карусель скриншотов ──────────────────────────────────────
   Отличия от старой реализации: у каждого слайда — размытая
   подложка-копия того же кадра (та же техника, что и у иконок
   в каталоге), поэтому портретные/непропорциональные скриншоты
   не обрезаются object-fit:cover и не превращаются в чёрные
   полосы — вместо этого мягкая цветная растяжка самого кадра.
   Полоска миниатюр вместо точек — сразу видно, что на скриншоте. */
.cs-outer{border-radius:16px;overflow:hidden;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.07);position:relative;margin-bottom:10px;}
.cs-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;touch-action:pan-y;}
.cs-track{display:flex;height:100%;transition:transform .38s cubic-bezier(.4,0,.2,1);will-change:transform;}
.cs-slide{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;cursor:zoom-in;}
.cs-slide-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(22px) saturate(1.3) brightness(.5);}
.cs-slide img.cs-fg{position:relative;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;}
.cs-num{position:absolute;top:10px;right:10px;z-index:5;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);pointer-events:none;}
.cs-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s;opacity:.7;user-select:none;padding:0;line-height:1;touch-action:manipulation;}
.cs-btn:hover{background:rgba(0,0,0,.85);opacity:1;}
.cs-prv{left:10px;}.cs-nxt{right:10px;}

.cs-thumbs{display:flex;gap:6px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:none;}
.cs-thumbs::-webkit-scrollbar{display:none;}
.cs-thumb{flex-shrink:0;width:56px;height:38px;border-radius:8px;overflow:hidden;padding:0;border:1.5px solid transparent;background:rgba(0,0,0,.3);cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s;}
.cs-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-thumb:hover{opacity:.85;}
.cs-thumb.on{opacity:1;border-color:var(--accent);}

/* ── Лайтбокс (создаётся JS-ом, один на страницу) ── */
#ad-lb{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.96);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;}
#ad-lb.on{display:flex;}
.ad-lb-img{max-width:92vw;max-height:88vh;border-radius:10px;object-fit:contain;box-shadow:0 24px 64px rgba(0,0,0,.8);user-select:none;}
.ad-lb-x{position:absolute;top:14px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s;}
.ad-lb-x:hover{background:rgba(255,255,255,.18);color:#fff;}
.ad-lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:50px;color:rgba(255,255,255,.35);cursor:pointer;padding:20px 16px;user-select:none;line-height:1;transition:color .15s;background:none;border:none;}
.ad-lb-nav:hover{color:rgba(255,255,255,.9);}
.ad-lb-prv{left:4px;}.ad-lb-nxt{right:4px;}
.ad-lb-cnt{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);padding:4px 16px;border-radius:20px;color:rgba(255,255,255,.55);font-size:13px;pointer-events:none;}

@media(max-width:480px){.cs-btn{width:44px;height:44px;font-size:18px;}}
.ad-lb-x,.ad-lb-nav{touch-action:manipulation;}
@media(max-width:480px){.ad-lb-x{width:44px;height:44px;}}

/* ── Рейтинг и отзывы ── */
.rt-widget [hidden]{display:none !important;} /* страховка: ниже некоторые .rt-* классы сами задают display, что иначе перебивает [hidden] при равной специфичности */
.rt-widget{background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;padding:18px 20px;margin-top:16px;}
.rt-head{display:flex;align-items:center;gap:8px;font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:14px;}
.rt-head .icon{width:16px;height:16px;color:#ffd700;}

.rt-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.rt-avg{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;}
.rt-stars-display{display:flex;gap:2px;}
.rt-star-ico{width:16px;height:16px;stroke:rgba(255,215,0,.4);fill:none;}
.rt-star-ico.on{stroke:#ffd700;fill:#ffd700;}
.rt-count{font-size:12.5px;color:var(--muted);}

/* ── Компактный призыв к действию (вместо всегда открытой формы) ── */
.rt-cta{margin-bottom:4px;}
.rt-cta-btn{background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);color:#ffd700;border-radius:10px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;touch-action:manipulation;transition:background .15s;}
.rt-cta-btn:hover{background:rgba(255,215,0,.18);}
.rt-my-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.rt-my-stars{display:flex;gap:1px;}
.rt-my-stars .rt-star-ico{width:14px;height:14px;}
.rt-edit-btn{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:2px 4px;touch-action:manipulation;}
.rt-edit-btn:hover{text-decoration:underline;}
.rt-login-hint{font-size:13px;color:var(--muted);}
.rt-login-hint a{color:var(--accent);}

/* ── Форма оценки — скрыта по умолчанию, раскрывается по клику ── */
.rt-form{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);}
.rt-form-title{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.rt-picker{display:flex;gap:4px;margin-bottom:10px;}
.rt-star-btn{background:none;border:none;padding:4px;cursor:pointer;touch-action:manipulation;line-height:0;}
.rt-star-btn .icon{width:26px;height:26px;stroke:rgba(255,255,255,.25);fill:none;transition:stroke .12s,fill .12s;}
.rt-star-btn.on .icon,.rt-star-btn:hover .icon{stroke:#ffd700;fill:#ffd700;}
.rt-comment{width:100%;min-height:64px;resize:vertical;background:rgba(0,0,0,.25);border:1px solid var(--glass-border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:13.5px;margin-bottom:10px;}
.rt-comment:focus{outline:none;border-color:var(--accent);}
.rt-form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rt-submit{background:var(--accent);color:#0a0d16;border:none;border-radius:10px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:opacity .15s;touch-action:manipulation;}
.rt-submit[disabled]{opacity:.4;cursor:default;}
.rt-cancel{background:none;border:1px solid var(--glass-border);color:var(--muted);border-radius:10px;padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit;touch-action:manipulation;}
.rt-cancel:hover{color:var(--text);}
.rt-msg{font-size:12.5px;color:var(--muted);}
.rt-msg.err{color:#ff6b6b;}
.rt-msg.ok{color:#4caf50;}

.rt-list{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.rt-review{border-top:1px solid rgba(255,255,255,.06);padding-top:12px;}
.rt-review.banned{opacity:.55;}
.rt-review-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.rt-review-user{font-weight:700;font-size:13px;color:var(--text);}
.rt-review-stars{display:flex;gap:1px;}
.rt-review-stars .rt-star-ico{width:12px;height:12px;}
.rt-review-date{font-size:11px;color:var(--muted);margin-left:auto;}
.rt-review-text{font-size:13px;color:var(--muted);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.rt-review-admin{display:flex;gap:6px;margin-top:8px;}
.rt-admin-btn{background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--muted);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation;}
.rt-admin-btn:hover{color:var(--text);}
.rt-admin-btn.rt-del:hover{color:#ff6b6b;border-color:rgba(255,107,107,.35);}
.rt-admin-btn.rt-ban.banned{color:#ff6b6b;border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08);}

/* ── Бейдж рейтинга в шапке приложения (карточки каталога стилизуются
   в css/style.css — этот файл там не подключен) ── */
.app-hero-rating{display:none;}
.app-hero-rating.on{display:inline-flex;}
.app-hero-rating .icon{width:12px;height:12px;stroke:#ffd700;fill:#ffd700;}