{% macro section(user,post=False) -%}
  <form class="c_sbrxk" id="postForm">
    <div class="c_dtjoh">
        <div class="c_aihm6 floating-group">
            <input name="author" id="author" placeholder="{{user.username}}" class="c_xhd5k" />
            <label for="author" class="c_z3ybu floating-label">Автор</label>
        </div>
        {% if user.get('grade') is none %}
        <div class="c_aihm6 floating-group">
            <input readonly name="grade" id="grade" class="c_xhd5k" required data-toast="Поле Звание должно быть заполнено" data-select="1" data-radio="0" data-list="['Без звания', 'Заслуженный художник Российской федерации', 'Народный художник Российской федерации', 'Академик Российской академии художеств', 'Почетный член Российской академии художеств', 'Действительный член Российской Академии художеств', 'Член-корреспондент Российской академии художеств', 'Член Союза художников России', 'Член творческого союза художников России', 'Член Московского союза художников', 'Член Подмосковного союза художников', 'Член Союза русских художников', 'Творческий союз профессиональных художников', 'Евразийский союз художников', 'Международный художественный фонд', 'Творческое объединение женщин-художников']" data-label="Сохранить" data-custom_placeholder="Напишите свой вариант" data-custom="1" data-title="Выберите звание из списка">
            <label for="grade" class="c_z3ybu floating-label">Звание</label>
        </div>
        {% endif %}
        <div class="c_aihm6 floating-group">
            <input name="title" id="title"  class="c_xhd5k" required />
            <label for="title" class="c_z3ybu floating-label">Название</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="city" id="city"  class="c_xhd5k" />
            <label for="city" class="c_z3ybu floating-label">Город</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="size" id="size"  class="c_xhd5k" />
            <label for="size" class="c_z3ybu floating-label">Размер</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="material" id="material"  class="c_xhd5k" />
            <label for="material" class="c_z3ybu floating-label">Материал</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="genre" id="genre"  class="c_xhd5k" />
            <label for="genre" class="c_z3ybu floating-label">Жанр</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="price" id="price"  class="c_xhd5k" />
            <label for="price" class="c_z3ybu floating-label">Цена</label>
        </div>
        <div class="c_nb6gy floating-group">
            <textarea type="text" id="description" name="description" class="c_4ykpn"></textarea>
            <label for="description" class="c_z3ybu floating-label">Описание</label>
        </div>
        <button class="c_aq9et" id="createBtn" type="button">
            <span class="c_som9s">Сохранить</span>
        </button>
    </div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('author').value = '{{post.author|safe or ""}}';
        {% if user.get('grade') is none %}
        document.getElementById('grade').value = '{{post.grade|safe or ""}}';
        {% endif %}
        document.getElementById('title').value = '{{post.title|safe or ""}}';
        document.getElementById('city').value = '{{post.city|safe or ""}}';
        document.getElementById('size').value = '{{post.size|safe or ""}}';
        document.getElementById('material').value = '{{post.material|safe or ""}}';
        document.getElementById('genre').value = '{{post.genre|safe or ""}}';
        document.getElementById('price').value = '{{post.price|safe or ""}}';
        document.getElementById('description').value = `{{post.description|safe or ""}}`;
    });
</script>

    <div class="c_rtopc">
        <label class="c_aq9et" for="fileInput">
            <span class="c_som9s">Добавить фото</span>
        </label>
        <input class="c_1gai0" id="fileInput" type="file" multiple accept="image/*" style="display: none;"/>
        <div class="preview" id="preview"></div>
    </div>
    
  </form>

<script>
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');

    let filesOrdered = []; // теперь храним строки (имена файлов) + существующие медиа

    const existingMedias = [
        {% if post %}
            {% for media in post.medias_original %}
            {
                url: "/b/posts/{{ media }}",
                name: "{{ media }}",
                isExisting: true,
                type: "image"
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        {% endif %}
    ];

    async function uploadMediaFiles(files) {
        if (!files || files.length === 0) return [];

        const formData = new FormData();
        for (let file of files) {
            formData.append('medias', file);
        }

        const res = await fetch('/api/posts/media', {
            method: 'POST',
            body: formData
        });

        if (!res.ok) throw new Error('Ошибка загрузки медиа');
        return await res.json(); // ожидается массив имён файлов
    }

    function loadExistingMedias() {
        existingMedias.forEach(media => {
            filesOrdered.push({
                name: media.name,
                url: media.url,
                isExisting: true,
                type: media.type
            });
        });
        renderPreviews();
    }

    function createObjectURLSafe(item) {
        if (item.isExisting || !item.file) return item.url;
        if (!item.previewURL) {
            item.previewURL = URL.createObjectURL(item.file);
        }
        return item.previewURL;
    }

    function revokeObjectURLSafe(item) {
        if (item.previewURL) {
            URL.revokeObjectURL(item.previewURL);
            item.previewURL = null;
        }
    }

    function renderPreviews() {
        preview.innerHTML = '';

        filesOrdered.forEach((item, idx) => {
            const div = document.createElement('div');
            div.className = 'item';
            div.draggable = true;
            div.dataset.index = idx;

            const title = document.createElement('div');
            title.className = 'title';
            title.textContent = idx === 0 ? 'Титульная' : `${idx + 1}`;

            const isImage = item.type && item.type.startsWith('image');

            const mediaEl = document.createElement(isImage ? 'img' : 'video');
            mediaEl.className = 'thumb';
            mediaEl.src = createObjectURLSafe(item);
            if (!isImage) mediaEl.controls = true;

            // Контролы
            const controls = document.createElement('div');
            controls.className = 'controls';

            const makeFirstBtn = document.createElement('button');
            makeFirstBtn.textContent = 'Титульная';
            makeFirstBtn.title = 'Сделать титульной';
            makeFirstBtn.disabled = idx === 0;
            makeFirstBtn.addEventListener('click', () => moveFile(idx, 0));

            const leftBtn = document.createElement('button');
            
            leftBtn.textContent = idx;
            leftBtn.disabled = idx === 0;
            leftBtn.addEventListener('click', () => moveFile(idx, idx - 1));

            const rightBtn = document.createElement('button');
            rightBtn.textContent = idx + 2;
            rightBtn.disabled = idx === filesOrdered.length - 1;
            rightBtn.addEventListener('click', () => moveFile(idx, idx + 1));

            const removeBtn = document.createElement('button');
            removeBtn.textContent = '✖';
            removeBtn.addEventListener('click', () => removeFile(idx));

            controls.append(idx>0?makeFirstBtn:'', idx>0?leftBtn:'', idx < filesOrdered.length - 1?rightBtn:'', removeBtn);

            div.append(mediaEl, title, controls);
            preview.appendChild(div);

            // Drag & Drop
            div.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', idx.toString());
                div.classList.add('dragging');
            });

            div.addEventListener('dragend', () => {
                div.classList.remove('dragging');
                document.querySelectorAll('.item').forEach(el => el.classList.remove('drag-over'));
            });

            div.addEventListener('dragover', (e) => {
                e.preventDefault();
                div.classList.add('drag-over');
            });

            div.addEventListener('dragleave', () => div.classList.remove('drag-over'));

            div.addEventListener('drop', (e) => {
                e.preventDefault();
                div.classList.remove('drag-over');
                const from = parseInt(e.dataTransfer.getData('text/plain'));
                const to = parseInt(div.dataset.index);
                if (from !== to) moveFile(from, to);
            });
        });
    }

    function moveFile(from, to) {
        if (to < 0 || to >= filesOrdered.length || from === to) return;
        const [moved] = filesOrdered.splice(from, 1);
        filesOrdered.splice(to, 0, moved);
        renderPreviews();
    }

    function removeFile(index) {
        const item = filesOrdered[index];
        revokeObjectURLSafe(item);
        filesOrdered.splice(index, 1);
        renderPreviews();
    }

    // === Основная загрузка новых файлов ===
    fileInput.addEventListener('change', async (e) => {
        const newFiles = Array.from(e.target.files);
        if (newFiles.length === 0) return;

        try {
            const uploadedNames = await uploadMediaFiles(newFiles);

            // Добавляем загруженные файлы в массив
            newFiles.forEach((file, i) => {
                filesOrdered.push({
                    name: uploadedNames['post_medias'][i],      // имя с сервера
                    url: `/b/posts/${uploadedNames['post_medias'][i]}`,
                    file: file,                  // для превью
                    type: file.type,
                    isExisting: false
                });
            });

            renderPreviews();
        } catch (err) {
            console.error('Ошибка загрузки фото:', err);
            alert('Не удалось загрузить фото. Попробуйте ещё раз.');
        }

        fileInput.value = '';
    });

    window.addEventListener('load', () => {
        loadExistingMedias();
    });

    window.addEventListener('beforeunload', () => {
        filesOrdered.forEach(revokeObjectURLSafe);
    });

    // === Отправка формы ===
    document.addEventListener('DOMContentLoaded', () => {
        const author = '{{user.username}}';
        const grade = '{{user.grade}}';
        const form = document.getElementById('postForm');
        const createBtn = document.getElementById('createBtn');
        const postId= '{{post._id}}'

        createBtn.addEventListener('click', async (e) => {
            e.preventDefault();

            // ... (проверка обязательных полей остаётся без изменений)

            const requiredFields = [...document.querySelectorAll('input[required]'), ...document.querySelectorAll('textarea[required]')];
            let hasError = false;

            requiredFields.forEach(field => {
                const group = field.closest('.floating-group');
                const isEmpty = field.type === 'file' 
                    ? !field.files || field.files.length === 0 
                    : !field.value.trim();

                if (isEmpty) {
                    group.classList.add('error');
                    hasError = true;
                } else {
                    group.classList.remove('error');
                }
            });

            if (hasError) return;

            // === Подготовка данных ===
            const data = new FormData(form);

            if (document.querySelector('#author').value === '') {
                data.set('author', author);
            }
            {% if 'user' in user.get('roles') and user.get('grade') is not none %}
            data.set('grade', grade);
            {% endif %}
            filesOrdered.forEach(f => data.append('post_medias', f.name));

            try {
                const res = await fetch(`/api/post/${postId}`, { 
                    method: 'PUT', 
                    body: data 
                });

                if (res.ok) {
                    const params = new URLSearchParams(window.location.search);
                    const next = params.get('next') || '/profile/posts';
                    window.location.href = next;
                } else {
                    showToast({message: 'Ошибка при сохранение поста', status: "error", duration:2500});
                }
            } catch (err) {
                console.error(err);
                showToast({message: 'Ошибка соединения', status: "error", duration:2500});
            }
        });

        // Удаление ошибки при вводе
        document.querySelectorAll('.floating-group input, .floating-group textarea').forEach(input => {
            input.addEventListener('input', () => {
                input.closest('.floating-group').classList.remove('error');
            });
        });
    });
</script>


{%- endmacro %}

{% macro style() -%}

  <style>
    .preview { 
      display: flex; 
      gap: 8px; 
      flex-wrap: wrap; 
      margin-top: 8px; 
    }
    .item { 
      border: 1px solid #ddd; 
      padding: 8px; 
      width: 335px; 
      display: flex; 
      flex-direction: column; 
      align-items: center;
      background: white;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .item.dragging {
      opacity: 0.4;
      border-style: dashed;
      transform: scale(0.95);
    }
    .item.drag-over {
      border-color: #a200ff;
      background: #f9f0ff;
      transform: scale(1.05);
    }
    .thumb { 
      width: 335px; 
      object-fit: cover; 
      background: #f6f6f6;
      border-radius: 4px;
    }
    .controls { 
      margin-top: 6px; 
      display: flex; 
      gap: 4px; 
    }
    .title {
      color: #5f1798;
  font-size: 24px;
      text-align: center;
      margin: 4px 0;
      word-break: break-all;
    }
    .controls>button { 
display: flex;
    padding: 16px 23px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    font-size: 16px;
    background: #5F1798;
    color: white;
    }
  </style>
  <style type="text/css">
.poster-group {position: relative;}

.file-name-display {width: 100%;padding: 16px 50px 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;color: #555;background: #fff;min-height: 56px;display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all 0.3s ease;cursor: pointer;}

/* Hover эффект */
.c_aihm6:hover input, .c_nb6gy:hover textarea, .poster-group:hover .file-name-display {border-color: #5F1798;}

/* Когда файл выбран — делаем текст чуть темнее */
.poster-group.has-file .file-name-display {color: #222;font-weight: 500;}

/* Скрытый input file */
.hidden-file {position: absolute;inset: 0;opacity: 0;cursor: pointer;z-index: 2;}

/* Плавающий лейбл */
.poster-group .floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;background: #fff;padding: 0 6px;z-index: 3;transition: all 0.3s ease;pointer-events: none;}

/* Когда лейбл должен подняться */
.poster-group input:focus + .floating-label,
.poster-group.has-file .floating-label {top: -8px;font-size: 13px;color: #5F1798;}

/* Иконка справа */
.file-icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);z-index: 3;pointer-events: none;}

/* Красная ошибка */
.poster-group.error .file-name-display {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);}

.poster-group.error .floating-label {color: #e74c3c !important;}
/* ====================== FLOATING LABELS ====================== */
.floating-group {position: relative;margin-bottom: 1.5rem;}

.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fff;padding: 0 6px;z-index: 2;}

/* Плавающий лейбл */
.floating-group input:focus + .floating-label, .floating-group textarea:focus + .floating-label,
.floating-group input:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {top: -8px;font-size: 15px;color: #5F1798;}

/* Красная подсветка — ТОЛЬКО после попытки отправки */
.floating-group.error input, .floating-group.error textarea,
.floating-group.error input[type="file"] {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.38);}

.floating-group.error .floating-label {color: #e74c3c !important;}

/* Основные стили полей */
.c_xhd5k, .c_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fff;}

 .c_xhd5k:focus, .c_4ykpn:focus {border-color: #5F1798;outline: none;box-shadow: 0 0 0 3px rgba(95, 23, 152, 0.15);}

/* Файловые поля */
.file-group input[type="file"] {height: 43px;}


.file-group .floating-label {top: 12px;}
/* ====================== СКРЫТЬ СТРЕЛОЧКИ У INPUT TYPE=NUMBER ====================== */

/* Chrome, Edge, Safari, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;display: none;}

/* Firefox */
input[type="number"] {-moz-appearance: textfield;}

/* Дополнительно: чтобы стрелочки не появлялись при фокусе (на всякий случай) */
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {display: none;}
.c_xc07u {white-space: pre;}
.c_5qh93{cursor: pointer;}
.c_965ia{object-fit: cover;}
.c_rtopc{width: 335px;}
.c_z3ybu{top: -8px;
  font-size: 15px;
  color: #5F1798;}
@media (min-width: 901px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: calc(50% - 10px); height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; flex-shrink: 0; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (max-width: 699px) {
    .item,.thumb{width: 100%;}
    .c_dtjoh{order: 2;} .c_rtopc{order: 1;}
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}
@media (min-width: 901px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 200px; flex-wrap: wrap; background: #FFF; }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex;  flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; gap: 50px; background: #FFF; }
}

@media (max-width: 699px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px;  font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; }
.c_aihm6 { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { height: 7px; flex: 1 0 0; fill: rgba(95, 23, 152, 0.20); background: rgba(95, 23, 152, 0.20);}
.c_jups4 { display: flex; padding: 10px; align-items: center; align-content: center; gap: 10px; align-self: stretch; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 50px 0; flex-wrap: wrap; background: #FFF; }
}
.c_sbrxk{z-index: 1000;}
#preview_poster{width: 335px;}
</style>
{%- endmacro %}