{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}


{% block title %}Запрос на восстановление пароля{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_sbrxk">
    <div class="c_dtjoh">
        <div class="c_aihm6 floating-group">
            <input type="email" id="email" name="email" class="c_xhd5k" required>
            <label for="email" class="c_z3ybu floating-label">Email</label>
        </div>
        <p>На ваш Email будет отправлена ссылка на форму для смены пароля</p>
        <button class="c_aq9et" id="restoreBtn">
            <span class="c_som9s">Отправить</span>
        </button>
        <div style="display: flex; gap:15px">
            <a href="/login{% if next %}?next={{next}}{% endif %}">Вход</a> / <a href="/registration{% if next %}?next={{next}}{% endif %}">Регистрация</a>
        </div>
    </div>
</section>

<script>
window.addEventListener('load', () => {
      const savedEmail = localStorage.getItem('restoreEmail');
      
      if (savedEmail) {
        document.getElementById('email').value = savedEmail;
      }
    });
document.addEventListener('DOMContentLoaded', () => {
  const emailInput = document.getElementById('email');
  const restoreBtn = document.getElementById('restoreBtn');
  const nextUrl = "{{next or '/profile'}}";
  restoreBtn.addEventListener('click', async (e) => {
    e.preventDefault();

    const requiredInputs = document.querySelectorAll('input[required]');
    const requiredTextareas = document.querySelectorAll('textarea[required]');
    const requiredFields = [...requiredInputs, ...requiredTextareas];

    let firstErrorField = null;
    let hasError = false;

    requiredFields.forEach(field => {
      const group = field.closest('.floating-group');
      if (!group) return; // skip if no group wrapper

      let isEmpty = false;
      if (field.type === 'file') {
        isEmpty = !field.files || field.files.length === 0;
      } else {
        isEmpty = !field.value || !field.value.trim();
      }
      
      if (isEmpty) {
        group.classList.add('error');
        hasError = true;
        
        if (!firstErrorField) firstErrorField = field;
      } else {
        group.classList.remove('error');
      }
    });

    if (hasError && firstErrorField) {
      firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
      showToast({message: 'Введите  Email', status: 'error'})
      setTimeout(() => firstErrorField.focus(), 600);
      return;
    }

    // No client-side validation errors — send request
    try {
      const payload = {
        identifier: emailInput ? emailInput.value : '',
        next: nextUrl
      };

      const res = await fetch('/api/restore', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (res.ok) {
        // success (HTTP 2xx). Redirect to /form
        const params = new URLSearchParams(window.location.search);
        const next = params.get('next') || '/login';
        window.location.href = next;

      } else {
        // non-2xx — mark all input groups as error
        const allFields = document.querySelectorAll('.floating-group');
        allFields.forEach(g => g.classList.add('error'));

        // Optional: you can show server message if present
        const errorText = await res.json();
        // console.error('Server error:', errorText);
        showToast({message: errorText.detail, status: 'error'})
      }
    } catch (err) {
      // Network or other unexpected error — mark fields as error
      const allFields = document.querySelectorAll('.floating-group');
      allFields.forEach(g => g.classList.add('error'));
      console.error('Request failed', err);
      showToast({message: err, status: 'error'})
    }
  });

    // Убираем красную подсветку сразу при исправлении пользователем
    document.querySelectorAll('.floating-group input').forEach(input => {
        input.addEventListener('input', function() {
            const group = this.closest('.floating-group');
            if (group) {
                group.classList.remove('error');
            }
        });

        // Для файлов
        if (input.type === 'file') {
            input.addEventListener('change', function() {
                const group = this.closest('.floating-group');
                if (group && this.files.length > 0) {
                    group.classList.remove('error');
                }
            });
        }
    });

});
</script>
{{ footer.section() }}
<script>
fetch('/api/me')
.then(response => {
    if (response.ok) {
        return response.json();
    } else {
        throw new Error('Network response was not ok');
    }
})
.then(data => {
    if (data.username){
        window.location.href = '/'
    }
})
.catch(error => {
    console.error('There was a problem with the fetch operation:', error);
});
</script>
{% endblock %}

{% block head %}
{{ header.style() }}
<style>
.poster-group {position: relative;}
.password-group { position: relative; }
a{color: #5F1798;}
.password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 10px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* remove default button outline but keep focus visible */
.password-toggle:focus { outline: 2px solid rgba(95,23,152,0.25); outline-offset: 2px; }

/* ensure svg size fits */
.password-toggle .eye { width: 24px; height: 24px; display: block; }

.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;}
@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: 50px; }
.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: 50px; }
.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) {
.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: 50px; }
.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; top: 12px; color: #000; 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; width: 355px; 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; top: 12px; color: #000; 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; width: 355px; 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; top: 12px; color: #000; 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; width: 335px; 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: 50px 0; flex-wrap: wrap; background: #FFF; }
}
.c_sbrxk{z-index: 1000;}
#preview_poster{width: 335px;}
</style>
{{ footer.style() }}
{% endblock %}