/* ═══ FILE-UPLOAD КНОПКИ — глобальный premium-стиль ═══
   Заменяет уродливый нативный <input type="file"> на красивую label-кнопку.
   Применяется автоматически ко всем <input type="file"> через атрибут-селектор. */

/* Скрываем нативный инпут — но оставляем доступным для клавиатуры/скринридеров */
input[type="file"]:not(.raw-file){
    position:relative;
    width:100%;
    min-height:54px;
    padding:0;
    background:transparent;
    border:none;
    font-size:13px;
    color:transparent;
    cursor:pointer;
    outline:none;
}

input[type="file"]:not(.raw-file)::-webkit-file-upload-button{
    visibility:hidden;
    width:0;
    padding:0;
}
input[type="file"]:not(.raw-file)::file-selector-button{
    visibility:hidden;
    width:0;
    padding:0;
}

/* Декоративная кнопка-плашка поверх (через ::before) */
input[type="file"]:not(.raw-file)::before{
    content:"📁 Выбрать файл";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 18px;
    border-radius:11px;
    background:linear-gradient(180deg,rgba(28,28,36,.8),rgba(20,20,28,.95));
    border:1.5px dashed rgba(93,187,60,.35);
    color:#aef88b;
    font-family:inherit;
    font-size:13px;
    font-weight:900;
    letter-spacing:.02em;
    transition:all .2s cubic-bezier(.2,.7,.2,1);
    backdrop-filter:blur(6px);
    pointer-events:none;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
}

input[type="file"]:not(.raw-file):hover::before{
    background:linear-gradient(180deg,rgba(93,187,60,.14),rgba(93,187,60,.04));
    border-color:#5dbb3c;
    border-style:solid;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 8px 22px -10px rgba(93,187,60,.5),inset 0 1px 0 rgba(255,255,255,.05);
}

input[type="file"]:not(.raw-file):active::before{
    transform:translateY(0);
}

input[type="file"]:not(.raw-file):focus-visible::before{
    border-color:#7ed957;
    box-shadow:0 0 0 3px rgba(93,187,60,.25);
}

/* Когда файл выбран — браузер не сообщает напрямую, но мы можем
   подкрасить кнопку через :valid (если есть required) или через JS-класс .has-file */
input[type="file"]:not(.raw-file).has-file::before{
    content:"✓ Файл выбран · нажми чтобы заменить";
    background:linear-gradient(180deg,rgba(93,187,60,.18),rgba(93,187,60,.06));
    border-color:#5dbb3c;
    border-style:solid;
    color:#fff;
}

/* Кнопка для image-upload (квадратная превью-зона) */
input[type="file"][accept*="image"]:not(.raw-file){
    min-height:80px;
}
input[type="file"][accept*="image"]:not(.raw-file)::before{
    content:"🖼  Загрузить изображение";
    font-size:13.5px;
}

/* Множественный выбор */
input[type="file"][multiple]:not(.raw-file)::before{
    content:"📂 Выбрать несколько файлов";
}

/* Аватар-инпут — отдельный стиль (специально маркированный) */
input[type="file"].file-avatar:not(.raw-file)::before{
    content:"🖼  Аватар канала · JPG / PNG";
}
input[type="file"].file-cover:not(.raw-file)::before{
    content:"🌄 Обложка канала · широкая картинка";
}
input[type="file"].file-cover:not(.raw-file){
    min-height:90px;
}