/* Main style DroidTools */
@import url('/css/common.css');
@import url('/css/styles.css');
@import url('/css/engine.css');
@import url('/css/fontawesome.css');

/* Other style DroidTools Template */
.com-order-block {display: none;}
.uadm *, .uadm--mini {display:none !important;}
.page__comments-list #allEntries {display: block;}
.ucoz-editor-panel input[type="button"] {width: auto !important;}
.ucoz-editor-htpanel select { display: initial; }
.pmovie__ext-ratings {display: none;}
.pagesBlockuz1, .pagesBlockuz, .pagesBlock1, .pagesBlock {display: contents;}



.form_row select {max-width: 120px !important; display: initial !important; background: #252525; color: #fff; border: 1px solid var(--line);}

/* Поля ввода - Исправление "схлопывания" */
.form-fields input[type="text"], 
.myWinCont input[type=password], 
.myWinCont input[type=text] { 
 background: #1a1a1a; 
 border: 1px solid var(--line); 
 color: #fff !important; 
 border-radius: 8px; 
 padding: 10px 15px !important; /* Увеличили высоту, чтобы не было "кнопкой" */
 margin: 5px 0;
 width: 100%;
 box-sizing: border-box;
}

.u-combolist { 
 background: #1a1a1a !important; 
 border: 1px solid var(--line) !important; 
 color: #fff !important; 
 box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}
.u-combolist>div { padding: 5px 10px; color: #eee; border-bottom: 1px solid #2d2d2d; }
.u-combolist>div:hover { background: var(--lcolor); color: #fff; }

/* Цитаты (Dark Mode) */
.bbQuoteName { background-color: #252525; color: var(--lcolor); padding: 8px 15px !important; font-size: 13px !important; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.quoteMessage { 
 margin-bottom: 20px; padding: 15px 15px 15px 80px; position: relative; font-size: 14px; 
 background: #1e1e1e url(../dleimages/quotes.svg) 25px center / 35px no-repeat; 
 border: 1px solid var(--line) !important; color: #ccc; border-radius: 0 0 8px 8px;
}

/* Спойлеры (Dark Mode) */
.uSpoilerButton { 
 padding: 10px 15px !important; background: #252525 !important; border: 1px solid var(--line) !important; 
 width: 100% !important; text-align: left !important; color: var(--lcolor) !important; 
 font-weight: bold !important; border-radius: 8px !important; cursor: pointer;
}
.uSpoilerText { 
 padding: 10px 15px; background: #1a1a1a; border: 1px solid var(--line); border-top: 0; 
 color: #bbb; border-radius: 0 0 8px 8px; margin-bottom: 10px;
}

/* Код (Dark Mode) */
.codeMessage {
 background: #0d0d0d !important; color: #8CD0D3 !important; 
 border: 1px solid var(--line) !important; box-shadow: none !important;
 text-shadow: none !important; padding: 15px; border-radius: 8px;
}

/* Базовый стиль блока внимания */
.custom-alert {
 padding: 15px 20px;
 margin: 20px 0;
 border-radius: 8px;
 border-left: 5px solid;
 font-size: 14px;
 line-height: 1.6;
}

/* Синий - Инфо (например, для системных требований) */
.alert-info {
 background-color: rgba(52, 152, 219, 0.1);
 border-color: #3498db;
 color: #ecf0f1;
}

/* Желтый - Внимание (например, для модов или бета-версий) */
.alert-warning {
 background-color: rgba(241, 196, 15, 0.1);
 border-color: #f1c40f;
 color: #f1c40f;
}

/* Зеленый - Скачать/Важно (для прямых ссылок) */
.alert-success {
 background-color: rgba(46, 204, 113, 0.1);
 border-color: #2ecc71;
 color: #2ecc71;
}

.custom-alert {
 padding: 15px 20px;
 margin: 20px 0;
 border-radius: 8px;
 border-left: 5px solid;
 font-size: 14px;
 line-height: 1.6;
 /* Добавляем легкую тень для глубины */
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 transition: transform 0.2s ease;
}

/* Эффект при наведении — мелочь, но выглядит современно */
.custom-alert:hover {
 transform: translateX(5px);
}

/* --- ФИКС ВЫБОРА КАТЕГОРИЙ (ВОЗВРАЩАЕМ ИЗ ЧИСТОГО ШАБЛОНА) --- */

/* Контейнер меню */
form #uCatsMenu7 {
 position: relative !important; 
 height: auto !important; 
 display: block !important; 
 visibility: inherit !important;
}

/* Скрываем ненужную ячейку редактирования ucoz */
.u-comboeditcell {display: none !important;}

/* Основная плашка выбора */
.u-combo { 
 margin-bottom: 5px !important; 
 padding: 5px 10px !important; 
 white-space: normal !important; 
 background: #1a1a1a !important; 
 border: 1px solid var(--line) !important; 
 width: 100% !important;
 border-radius: 8px !important;
 display: flex !important;
 align-items: center;
 min-height: 40px;
}

/* Выпадающий список (само меню с категориями) */
.u-combolist { 
 background: #1a1a1a !important; 
 border: 1px solid var(--line) !important;
 color: #fff !important; 
 overflow: auto !important; 
 position: relative !important; 
 padding: 5px !important; 
 border-radius: 8px !important; 
 width: 100% !important; 
 height: 180px !important; 
 box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}

/* Пункты внутри списка */
.u-combolist > div {
 padding: 8px 12px !important; 
 color: #eee !important;
 border-bottom: 1px solid #2d2d2d;
 cursor: pointer;
}

.u-combolist > div:hover {
 background: var(--accent-primary) !important; /* Цвет из твоего шаблона */
 color: #fff !important;
}

/* Исправляем чекбоксы и метки внутри категорий */
.u-combolist > div label { 
 vertical-align: middle !important;
 cursor: pointer;
}

/* Стиль кнопки запроса обновления в стиле DroidTools */
.page__btn-update {
 display: inline-block;
 padding: 10px 20px;
 background: #252525; /* Как у спойлера */
 border: 1px solid var(--line);
 color: var(--lcolor) !important; /* Акцентный цвет текста */
 font-weight: bold;
 text-decoration: none !important;
 border-radius: 8px;
 transition: all 0.3s ease;
 cursor: pointer;
 font-size: 14px;
 text-align: center;
}

.page__btn-update:hover {
 background: var(--line); /* Слегка подсвечиваем фон */
 color: #fff !important;
 transform: translateY(-2px); /* Небольшой эффект всплытия */
 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.page__btn-update::before {
 content: '\f01e'; /* Код иконки обновления */
 /* Важно использовать именно это имя, оно прописано в вашем fontawesome.css */
 font-family: 'Font Awesome 5 Pro'; 
 font-weight: 900; /* Для версии Pro это начертание Solid, которое обычно содержит эту иконку */
 margin-right: 8px;
 display: inline-block;
 font-style: normal;
 font-variant: normal;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}

.category-info-box {
 display: flex;
 justify-content: flex-start; /* Прижимаем всё к левому краю */
 align-items: flex-start;
 gap: 25px; /* Расстояние между картинкой и текстом */
 margin: 20px 0;
 width: 100%;
}

.category-aside-img img {
 width: 100px; /* Размер картинки */
 height: auto;
 border-radius: 12px;
 display: block;
 box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.category-text {
 flex: 1; /* Текст заполняет всё пространство справа */
 font-size: 15px;
 line-height: 1.6;
 color: #fff;
}

/* Адаптивность для телефонов */
@media (max-width: 768px) {
 .category-info-box {
 flex-direction: column; /* На мобильных картинка будет над текстом */
 align-items: center;
 text-align: center; /* Центрируем текст на мобилках */
 }
}

/* Стилизация краткого описания */
.page__brief {
 margin: 20px 0;
 padding: 15px 20px;
 background: rgba(255, 255, 255, 0.03); /* Легкий фон */
 border-left: 4px solid var(--accent-primary); /* Акцентная линия слева */
 border-radius: 4px;
 color: var(--tt-fade-2); /* Чуть более приглушенный цвет текста */
 font-size: 16px;
 line-height: 1.6;
 font-style: italic; /* Выделение курсивом для отличия от основного текста */
 box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Если внутри BRIEF есть параграфы */
.page__brief p {
 margin: 0;
}

/* Адаптивность */
@media screen and (max-width: 768px) {
 .page__brief {
 font-size: 14px;
 padding: 12px 15px;
 }
}


.dark-note {
 position: relative;
 padding: 15px 20px;
 margin: 20px 0;
 background: rgba(255, 255, 255, 0.05);
 border-radius: 4px;
 color: #e0e0e0;
 border: 1px solid rgba(255, 255, 255, 0.1);
 font-family: sans-serif;
 line-height: 1.5;
}

.dark-note.important {
 border-left: 4px solid #ff4757;
}

.dark-note .label {
 /* Делаем блок, чтобы текст под ним не затекал */
 display: block; 
 width: fit-content; /* Ширина по тексту */
 
 /* Сдвиг влево для эффекта "выноса" */
 margin-left: -24px; 
 margin-bottom: 10px;
 
 background: #ff4757;
 color: #fff;
 padding: 2px 10px;
 font-size: 11px;
 font-weight: bold;
 border-radius: 0 4px 4px 0;
 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 text-transform: uppercase;
}

/* Оранжевый блок для рисков сохранения */
.dark-note.warning {
 border-left: 4px solid #ffa502; /* Оранжевый акцент */
}

.dark-note.warning .label {
 background: #ffa502; /* Оранжевый фон плашки */
 box-shadow: 3px 3px 10px rgba(255, 165, 2, 0.2);
}
.glass-block {
 background: rgba(255, 255, 255, 0.03);
 backdrop-filter: blur(5px); /* Размытие фона (если поддерживает браузер) */
 border: 1px solid rgba(255, 255, 255, 0.1);
 padding: 15px;
 border-radius: 10px;
 color: #b0b0b0;
 box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.glass-block strong {
 color: #00d1ff; /* Голубой акцент для текста */
}
.terminal-box {
 background: #1a1a1a;
 border: 1px solid #333;
 font-family: 'Courier New', monospace;
 font-size: 13px;
 margin: 20px 0;
}

.terminal-header {
 background: #333;
 color: #888;
 padding: 3px 10px;
 text-transform: uppercase;
 font-size: 10px;
}

.terminal-body {
 padding: 10px;
 color: #aaa;
}

.status-ok {
 color: #2ecc71; /* Зеленый текст */
}
/* Стили конкретно для иконок внутри списка */
.page__list li > span.fal::before {
 margin-right: 10px; /* Отступ от иконки до текста */
 color: #53a4f4; /* Голубой цвет иконки */
 display: inline-block;
 width: 20px; /* Чтобы все иконки занимали одинаковое место */
 text-align: center;
}

/* На всякий случай сбросим жирность самой иконки, если она кривая */
.page__list li > span.fal {
 font-family: inherit; /* Чтобы основной текст остался обычным шрифтом */
}

/* Основной контейнер-обертка */
.dark-note {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.07);
 border-left: 4px solid #4caf50; /* Зеленая полоса слева */
 padding: 20px;
 margin: 20px 0;
 border-radius: 0 8px 8px 0;
 position: relative;
}

/* Стили заголовка "Важные нюансы", если он внутри блока */
.dark-note p:first-child span, 
.dark-note strong:first-child {
 display: block;
 color: #4caf50;
 text-transform: uppercase;
 font-weight: 800;
 font-size: 14px !important;
 margin-bottom: 15px;
 letter-spacing: 1px;
}

/* Стилизуем сам список внутри блока */
.dark-note ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.dark-note ul li {
 position: relative;
 padding-left: 20px;
 margin-bottom: 12px;
 color: rgba(255, 255, 255, 0.85);
 line-height: 1.5;
 font-size: 14px;
}

/* Красивая точка-маркер перед пунктом */
.dark-note ul li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 6px;
 height: 6px;
 background: #4caf50;
 border-radius: 50%;
 box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* Авто-стилизация меток (Права доступа, Подготовка и т.д.) */
/* Ищет текст до первого двоеточия или внутри span.label */
.dark-note .label, 
.dark-note ul li b:first-child, 
.dark-note ul li strong:first-child {
 color: #fff;
 font-weight: 700;
 margin-right: 5px;
}