/* Main style PlayFilm (Dark) Template */
/* Закомментируйте или удалите эти строки, если хотите сменить на светлый дизайн. */
@import url('/style/styles.css');
@import url('/style/engine.css');

/* Раскоментируйте эти стили, если хотите шаблон в светлых тонах. После почистите кеш браузера, либо обновите комбинацией ctrl + shift + r.
@import url('/style/styles_white.css');
@import url('/style/engine_white.css');
*/

/* Other style PlayFilm Template */
.com-order-block {display: none;}
.uadm *, .uadm--mini {display:none !important;}










/* Підхоплюємо палітру сайту */
:root{
 --accent: #ff6a00; /* помаранчева риска з інтерфейсу */
 --panel: #2a2f36; /* тло боксів */
 --panel-2:#1f242a; /* темніше тло */
 --text: #e8e8e8;
 --muted: #3a3f46;
 --tg: #2AABEE;
 --vk: #4c75a3;
}

.social-buttons{
 display:grid;
 grid-template-columns: 1fr;
 gap: 10px;
 margin-bottom: 10px;
}

.btn-soc{
 display:flex;
 align-items:center;
 gap: 10px;
 padding: 10px 14px;
 border: 1px solid var(--muted);
 background: linear-gradient(180deg, var(--panel), var(--panel-2));
 color: var(--text);
 text-decoration:none;
 border-radius: 12px;
 position: relative;
 transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* тонка акцентна риска ліворуч — у стилі сайту */
.btn-soc::before{
 content:"";
 position:absolute;
 left:0; top:0; bottom:0;
 width: 3px;
 background: var(--accent);
 border-radius: 12px 0 0 12px;
}

.btn-soc i{
 font-size: 20px;
 line-height: 1;
}

/* Індивідуальні кольори іконок */
.btn-tg i{ color: var(--tg); }
.btn-vk i{ color: var(--vk); }

.btn-soc:hover{
 border-color: var(--accent);
 box-shadow: 0 0 0 2px rgba(255,106,0,.15);
 transform: translateY(-1px);
}

/* картка з віджетом, щоб вписався в бокс */
.vk-card{
 margin-top: 8px;
 background: var(--panel);
 border: 1px solid var(--muted);
 border-radius: 12px;
 overflow: hidden;
}




/* покращення каруселі вверху сайту */
/* маска при наведенні */
.carou-item-wr .mask {
 position: absolute;
 inset: 0;
 background: rgba(0,0,0,0.25);
 opacity: 0;
 transition: opacity .25s ease;
 display: flex;
 align-items: center;
 justify-content: center;
}

.carou-item-wr:hover .mask { opacity: 1; }

/* стилізація іконки завантаження */
.download-icon {
 width: 48px;
 height: 48px;
 filter: invert(1);
 opacity: 0.9;
 transform: translateY(10px);
 transition: transform .25s ease, opacity .25s ease;
}

.carou-item-wr:hover .download-icon {
 opacity: 1;
 transform: translateY(0);
}



.side-figure{margin:0}
.side-figure img{display:block;width:100%;height:auto;aspect-ratio:12/17;object-fit:cover}
.side-title{margin-top:.35rem;line-height:1.25;font-weight:600}
.side-link{color:inherit;text-decoration:none}
.side-link:hover .side-title{text-decoration:underline}


.pro-badge{
 position:absolute; top:2px; right:-10px;
 padding:0 4px; font-size:10px; font-weight:700; line-height:14px;
 color:#fff; background:#ff293d; border-radius:5px;
}
.ltext{margin:.35rem 0; color:#cfd2d6; line-height:1.35}
.lname a{font-weight:600}




.side-figure{margin:0}
.side-figure img{display:block;width:100%;height:auto;aspect-ratio:12/17;object-fit:cover}
.side-title{margin-top:.35rem;line-height:1.25;font-weight:600}
.side-link{color:inherit;text-decoration:none}
.side-link:hover .side-title{text-decoration:underline}



/* ---- Тема / кольори ---- */
:root{
 --card-bg: #1b1f25; /* фон картки під темну тему */
 --frame: #2a313a; /* базова рамка */
 --accent: #ff6a00; /* акцент теми (оранжевий у тебе) */
}

/* ---- Карточка категорії ---- */
.cat-card{
 display:block;
 background: var(--card-bg);
 border: 2px solid var(--frame);
 border-radius: 16px;
 padding: 10px;
 box-shadow: 0 6px 18px rgba(0,0,0,.25);
 transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
 width: 240px; /* зробили більшими */
 margin: 0 auto 22px;
 text-decoration: none;
 color: inherit;
}
@media (max-width: 992px){ .cat-card{ width: 210px; } }
@media (max-width: 600px){ .cat-card{ width: 46vw; } }

/* Внутрішній блок із картинкою — фікс CLS, без обрізки */
.cat-card .side-img{
 position: relative;
 border-radius: 12px;
 overflow: hidden;
 aspect-ratio: 16/10; /* пропорція блоку — вища за попередню, щоб не “різало” */
 background: #0f1318;
 display:flex; align-items:center; justify-content:center;
 padding: 6px; /* невеликий відступ для “рамки” всередині */
}

/* Картинка: показати всю (не обрізати) */
.cat-card .side-img img{
 max-width: 100%;
 max-height: 100%;
 width: auto; height: auto;
 object-fit: contain; /* ключ: не обрізати */
 display: block;
}

/* Заголовок */
.cat-card .side-title{
 margin: 10px 6px 2px;
 font-weight: 700;
 line-height: 1.25;
 text-align: center;
 color: #e7eaee;
 min-height: 2.3em; /* щоб рядки вирівнювались */
}

/* Ховер: яскравіша рамка, легкий підйом та свічення */
.cat-card:hover{
 border-color: var(--accent);
 box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 3px rgba(255,106,0,.18);
 transform: translateY(-2px);
}




/* Заголовок секції та абзац */
.cat-section { text-align: center; margin: 10px auto 26px; }
.cat-section h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; }
.cat-intro { margin: 6px auto 18px; color: #aeb4ba; max-width: 860px; }

/* Грід для карток категорій ($MYINF_9$ виводить .cat-card) */
.cat-grid{
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 22px;
 align-items: stretch;
 justify-items: center;
}

/* Якщо ще не додавали стилі карток з попереднього кроку — мінімум: */
.cat-card{ display:block; width: 240px; text-decoration:none; color:inherit; }
@media (max-width: 992px){ .cat-card{ width: 210px; } }
@media (max-width: 600px){ .cat-card{ width: 46vw; } }





/* квадратні плитки у 2 колонки */
.recommend--squares .rec-list{
 display:grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}

/* робимо картку більш компактною */
.recommend--squares .rec-figure{ padding:8px; border-radius:12px; }

/* чіткий квадрат 1:1, іконки не обрізаємо */
.recommend--squares .rec-figure img{
 aspect-ratio: 1 / 1;
 object-fit: contain;
 background:#0e1216;
 border-radius:8px;
}

/* підпис менший, у два рядки максимум */
.recommend--squares .rec-caption{
 font-size:.9em;
 line-height:1.2;
 margin-top:6px;
 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width: 360px){
 .recommend--squares .rec-list{ grid-template-columns: 1fr; }
}



.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.footer-menu{display:flex;flex-wrap:wrap;gap:14px}
.footer-menu a{opacity:.9;text-decoration:none}
.footer-menu a:hover{opacity:1;text-decoration:underline}
.footer-right{display:flex;align-items:center;gap:8px;color:#cfd2d6}
.footer-right .drv-ico{vertical-align:middle}
.sr-only{position:absolute;left:-9999px} /* доступність, не видно */





/* Затемнення картки при наведенні */
.short-left {
 position: relative;
 overflow: hidden;
}

.short-left .img-box img {
 transition: transform 0.4s ease, filter 0.4s ease;
}

.short-left:hover .img-box img {
 transform: scale(1.05);
 filter: brightness(0.7);
}

/* М’яка тінь навколо картки при наведенні */
.short {
 transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.short:hover {
 box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
 transform: translateY(-4px);
}

/* Опціонально: зробимо маску більш виразною при наведенні */
.short-left:hover .mask {
 opacity: 1;
}

.short-left .mask {
 opacity: 0;
 background: rgba(0, 0, 0, 0.45);
 transition: opacity 0.4s ease;
}