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

{% block title %}Анкета{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_dg3k4">
    <div class="c_gtoe9">
        {{ profile_card.profile_card(user) }}
        <div class="c_ru432">
            {{ profile_nav.profile_nav(user, 'form') }}
            <div class="c_tihtk" id="main">
<div class="c_aihm6 floating-group">
    <label for="female_name_lastname" class="c_z3ybu floating-label">ФИО<span style="color:red">*</span></label>
    <input name="female_name_lastname" id="female_name_lastname"  class="c_xhd5k" required />
    <span></span>
</div>


    <label for="birthday" class="c_z3ybu floating-label">Дата рождения<span style="color:red">*</span></label>

<div class="c_aihm6 floating-group birthday">
            <select id="day">
                <option>1</option>
                <option>2</option>
            </select>
            <select id="month">
                <option>Январь</option>
                <option>Февраль</option>
            </select>
            <select id="year">
                <option>2000</option>
                <option>2001</option>
            </select>
            <input type="date" id="birthday" name="birthday" class="c_xhd5k" required data-toast="Поле Дата рождения должно быть заполнено">
        </div>

<div class="c_aihm6 floating-group">
    <label for="living_place" class="c_z3ybu floating-label">Место проживания<span style="color:red">*</span></label>
    <input name="living_place" id="living_place"  class="c_xhd5k" required />
    <span>Указать город</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="social_media" class="c_z3ybu floating-label">Социальные сети</label>
    <textarea type="text" id="social_media" name="social_media" class="c_4ykpn" ></textarea>
    <span>Вписать ссылки на аккаунт через запятую</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="marketplaces" class="c_z3ybu floating-label">Маркетплейсы</label>
    <textarea type="text" id="marketplaces" name="marketplaces" class="c_4ykpn" ></textarea>
    <span>Озон, Культмост, Яндекс и т.д.</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="email" class="c_z3ybu floating-label">Электронная почта<span style="color:red">*</span></label>
    <input name="email" id="email"  class="c_xhd5k" required />
    <span></span>
</div>

<div class="c_aihm6 floating-group">
    <label for="phone" class="c_z3ybu floating-label">Телефон<span style="color:red">*</span></label>
    <input name="phone" id="phone"  class="c_xhd5k" required />
    <span></span>
</div>

<div class="c_nb6gy floating-group">
    <label for="messengers" class="c_z3ybu floating-label">Мессенджеры<span style="color:red">*</span></label>
    <textarea type="text" id="messengers" name="messengers" class="c_4ykpn" ></textarea>
    <span>Перечислить через запятую</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="specialization" class="c_z3ybu floating-label">Специализация<span style="color:red">*</span></label>
    <textarea type="text" id="specialization" name="specialization" class="c_4ykpn"  required ></textarea>
    <span>Например, графика, живопись, фотография скульптура, иллюстрация и т.д.</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="grade" class="c_z3ybu floating-label">Звание<span style="color:red">*</span></label>
    <input name="grade" id="grade"  class="c_xhd5k" required />
    <span>Например, Член РСХ, ТСХ, МСХ</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="style" class="c_z3ybu floating-label">Стиль<span style="color:red">*</span></label>
    <textarea type="text" id="style" name="style" class="c_4ykpn"  required ></textarea>
    <span>Например, реализм, натурализм, импрессионизм, символизм</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="art_types" class="c_z3ybu floating-label">Виды искусства<span style="color:red">*</span></label>
    <textarea type="text" id="art_types" name="art_types" class="c_4ykpn"  required ></textarea>
    <span>Например, графика, живопись, фотография скульптура, иллюстрация и т.д.</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="genres" class="c_z3ybu floating-label">Жанры<span style="color:red">*</span></label>
    <textarea type="text" id="genres" name="genres" class="c_4ykpn"  required ></textarea>
    <span>Например, пейзаж, иллюстрации, пейзаж природы, каллиграфия, натюрморт овощной, пейзаж архитектурный, пейзаж лесной, пейзаж парковый и т.д.</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="education" class="c_z3ybu floating-label">Образование<span style="color:red">*</span></label>
    <textarea type="text" id="education" name="education" class="c_4ykpn"  required ></textarea>
    <span>Последовательно указывать художественную школу, училище, академию, творческую мастерскую , факультет и т.д., годы учебы и название заведения</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="unions" class="c_z3ybu floating-label">Творческие союзы и объединения<span style="color:red">*</span></label>
    <textarea type="text" id="unions" name="unions" class="c_4ykpn" ></textarea>
    <span>В каких союзах и творческих обществах состоите (перечислить)</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="rewards" class="c_z3ybu floating-label">Звания и награды</label>
    <textarea type="text" id="rewards" name="rewards" class="c_4ykpn" ></textarea>
    <span>Призы, грамоты, гранты и годы получения</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="projects" class="c_z3ybu floating-label">Участие в проектах, выставках и событиях</label>
    <textarea type="text" id="projects" name="projects" class="c_4ykpn" ></textarea>
    <span>Персональные, групповые, совместные: указать персональные выставки и участие в групповых выставках, совместных - указать жанр, год, место -город, название выставки или события, организатор, куратор - вверху последние выставки, внизу первые</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="publications" class="c_z3ybu floating-label">Публикации о художнике в СМИ</label>
    <textarea type="text" id="publications" name="publications" class="c_4ykpn" ></textarea>
    <span>Название издания публикации, год, на какой странице, социальная сеть в группах, интернет ресурсах, изданиях, сообществах, можно указывать ссылки на публикации</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="site" class="c_z3ybu floating-label">Сайт (если есть)</label>
    <input name="site" id="site"  class="c_xhd5k"/>
    <span></span>
</div>

<div class="c_nb6gy floating-group">
    <label for="material_manufacturer" class="c_z3ybu floating-label">Каких производителями материалов пользуетесь?<span style="color:red">*</span></label>
    <textarea type="text" id="material_manufacturer" name="material_manufacturer" class="c_4ykpn"  required ></textarea>
    <span>Указать производителей материалов… Гамма, Луч, Невская палитра и т.д.</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="material_use" class="c_z3ybu floating-label">Какими материалами пользуетесь?<span style="color:red">*</span></label>
    <textarea type="text" id="material_use" name="material_use" class="c_4ykpn"  required ></textarea>
    <span>Масло, акрил, гуашь, пастель, акварель, маркеры, линеры, карандаши, тушь  и т.д.</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="buying_materials" class="c_z3ybu floating-label">Где в основном Вы покупаете художественные материалы?</label>
    <textarea type="text" id="buying_materials" name="buying_materials" class="c_4ykpn"  required ></textarea>
    <span>Розничные магазины (указать названия), интернет магазины, сайты производителей худ. материалов, маркетплейсы( указать названия)</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="collaborate" class="c_z3ybu floating-label">С какими сотрудничаете галереями? если сотрудничаете</label>
    <textarea type="text" id="collaborate" name="collaborate" class="c_4ykpn" ></textarea>
    <span>Указать названия галерей или ничего не писать</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="meta_data.wishes" class="c_z3ybu floating-label">Чтобы Вы еще хотели видеть в нашем сервисе?</label>
    <textarea type="text" id="meta_data.wishes" name="meta_data.wishes" class="c_4ykpn"  required ></textarea>
    <span>Указать пожелания или проблемы, которые беспокоят художника</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="master_classes" class="c_z3ybu floating-label">Проводите ли Вы мастер-классы и в каком направлении?<span style="color:red">*</span></label>
    <textarea type="text" id="master_classes" name="master_classes" class="c_4ykpn" ></textarea>
    <span>Указать перечень в каком направлении проводите мастер-классы</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="materials_use_in_master_classes" class="c_z3ybu floating-label">Какие материалы используете на мастер-классах?</label>
    <textarea type="text" id="materials_use_in_master_classes" name="materials_use_in_master_classes" class="c_4ykpn" ></textarea>
    <span>Указать список названий материалов на мастер-классы</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="print_merch" class="c_z3ybu floating-label">Готовы ли Вы печатать мерч на свои произведения с подписанием договора о сотрудничестве с отчислением авторского вознаграждения?</label>
    <input name="print_merch" id="print_merch"  class="c_xhd5k" required />
    <span>Указать Да или Нет или если нет, то по какой причине</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="own_workshop" class="c_z3ybu floating-label">Имеете ли Вы собственную мастерскую в своем городе?</label>
    <input name="own_workshop" id="own_workshop"  class="c_xhd5k" required />
    <span>Указать да или нет и площадь</span>
</div>

<div class="c_aihm6 floating-group">
    <label for="workshop_tour" class="c_z3ybu floating-label">Готовы ли Вы принимать экскурсии туристов в свою мастерскую, как потенциальных покупателей?<span style="color:red">*</span></label>
    <input name="workshop_tour" id="workshop_tour"  class="c_xhd5k" required />
    <span>Указать Да или Нет</span>
</div>

<div class="c_nb6gy floating-group">
    <label for="biography" class="c_z3ybu floating-label">Биография<span style="color:red">*</span></label>
    <textarea type="text" id="biography" name="biography" class="c_4ykpn" ></textarea>
    <span></span>
</div>

<button class="c_aq9et" id="createBtn">
            <span class="c_som9s">{% if notify %}Продолжить{% else %}Сохранить{% endif %}</span>
        </button>
            </div>
        </div>
    </div>
</section>
<script>
document.getElementById('female_name_lastname').value = `{% if user.get('female_name_lastname') is not none %}{{user.get('female_name_lastname','') }}{% endif %}`
document.getElementById('birthday').value = `{% if user.get('birthday') is not none %}{{user.get('birthday','') }}{% endif %}`
document.getElementById('living_place').value = `{% if user.get('living_place') is not none %}{{user.get('living_place','') }}{% endif %}`
document.getElementById('social_media').value = `{% if user.get('social_media') is not none %}{{user.get('social_media','') }}{% endif %}`
document.getElementById('marketplaces').value = `{% if user.get('marketplaces') is not none %}{{user.get('marketplaces','') }}{% endif %}`
document.getElementById('email').value = `{% if user.get('email') is not none %}{{user.get('email','') }}{% endif %}`
document.getElementById('phone').value = `{% if user.get('phone') is not none %}{{user.get('phone','') }}{% endif %}`
document.getElementById('messengers').value = `{% if user.get('messengers') is not none %}{{user.get('messengers','') }}{% endif %}`
document.getElementById('specialization').value = `{% if user.get('specialization') is not none %}{{user.get('specialization','') }}{% endif %}`
document.getElementById('grade').value = `{% if user.get('grade') is not none %}{{user.get('grade','') }}{% endif %}`
document.getElementById('style').value = `{% if user.get('style') is not none %}{{user.get('style','') }}{% endif %}`
document.getElementById('art_types').value = `{% if user.get('art_types') is not none %}{{user.get('art_types','') }}{% endif %}`
document.getElementById('genres').value = `{% if user.get('genres') is not none %}{{user.get('genres','') }}{% endif %}`
document.getElementById('education').value = `{% if user.get('education') is not none %}{{user.get('education','') }}{% endif %}`
document.getElementById('unions').value = `{% if user.get('unions') is not none %}{{user.get('unions','') }}{% endif %}`
document.getElementById('rewards').value = `{% if user.get('rewards') is not none %}{{user.get('rewards','') }}{% endif %}`
document.getElementById('projects').value = `{% if user.get('projects') is not none %}{{user.get('projects','') }}{% endif %}`
document.getElementById('publications').value = `{% if user.get('publications') is not none %}{{user.get('publications','') }}{% endif %}`
document.getElementById('site').value = `{% if user.get('site') is not none %}{{user.get('site','') }}{% endif %}`
document.getElementById('material_manufacturer').value = `{% if user.get('material_manufacturer') is not none %}{{user.get('material_manufacturer','') }}{% endif %}`
document.getElementById('material_use').value = `{% if user.get('material_use') is not none %}{{user.get('material_use','') }}{% endif %}`
document.getElementById('buying_materials').value = `{% if user.get('buying_materials') is not none %}{{user.get('buying_materials','') }}{% endif %}`
document.getElementById('collaborate').value = `{% if user.get('collaborate') is not none %}{{user.get('collaborate','') }}{% endif %}`
document.getElementById('meta_data.wishes').value = `{% if user.get('meta_data.wishes') is not none %}{{user.get('meta_data.wishes','') }}{% endif %}`
document.getElementById('master_classes').value = `{% if user.get('master_classes') is not none %}{{user.get('master_classes','') }}{% endif %}`
document.getElementById('materials_use_in_master_classes').value = `{% if user.get('materials_use_in_master_classes') is not none %}{{user.get('materials_use_in_master_classes','') }}{% endif %}`
document.getElementById('print_merch').value = `{% if user.get('print_merch') is not none %}{{user.get('print_merch','') }}{% endif %}`
document.getElementById('own_workshop').value = `{% if user.get('own_workshop') is not none %}{{user.get('own_workshop','') }}{% endif %}`
document.getElementById('workshop_tour').value = `{% if user.get('workshop_tour') is not none %}{{user.get('workshop_tour','') }}{% endif %}`
document.getElementById('biography').value = `{% if user.get('biography') is not none %}{{user.get('biography','') }}{% endif %}`

</script>
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("day"),t=document.getElementById("month"),l=document.getElementById("year"),n=document.getElementById("birthday"),a=new Date().getFullYear(),u=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];function i(t=31){e.innerHTML="";for(let l=1;l<=t;l++){let n=document.createElement("option");n.value=String(l),n.text=String(l),e.appendChild(n)}}function o(){t.innerHTML="",u.forEach((e,l)=>{let n=document.createElement("option");n.value=String(l+1),n.text=e,t.appendChild(n)})}function v(e=1900,t=a){l.innerHTML="";for(let n=t;n>=e;n--){let u=document.createElement("option");u.value=String(n),u.text=String(n),l.appendChild(u)}}let d=e=>String(e).padStart(2,"0");function p(e){if(!e)return;let n=e.split("-");if(3!==n.length)return;let[a,u,i]=n.map(Number);g(l,String(a)),g(t,String(u)),s(a,u,i)}function r(){let a=Number(l.value)||1900,u=Number(t.value)||1,o=Number(e.value)||1,v=new Date(a,u,0).getDate();e.options.length!==v&&i(v),o>v&&(o=v);let p=`${a}-${d(u)}-${d(o)}`;n.value=p,g(e,String(o))}function s(t,l,n){let a=new Date(Number(t),Number(l),0).getDate(),u=Number(e.value)||1;i(a),g(e,String(Math.min(n||u,a)))}function g(e,t){let l=Array.from(e.options).find(e=>e.value===t||e.text===t);if(l)e.value=l.value;else{let n=document.createElement("option");n.text=t,n.value=t,e.appendChild(n),e.value=t}}o(),v();let h=n.value?Number(n.value.split("-")[0]):l.options.length?Number(l.options[0].value):a,c=n.value?Number(n.value.split("-")[1]):1;n.value&&n.value.split("-")[2];let f=new Date(h,c,0).getDate();i(f),n.value?p(n.value):(!l.value&&l.options.length&&(l.value=l.options[0].value),!t.value&&t.options.length&&(t.value=t.options[0].value),!e.value&&e.options.length&&(e.value=e.options[0].value),r()),n.addEventListener("change",()=>{p(n.value)}),l.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),t.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),e.addEventListener("change",r)});
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const createBtn = document.getElementById('createBtn');

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

payload = {
'female_name_lastname': document.getElementById('female_name_lastname').value,
'birthday': document.getElementById('birthday').value,
'living_place': document.getElementById('living_place').value,
'social_media': document.getElementById('social_media').value,
'marketplaces': document.getElementById('marketplaces').value,
'email': document.getElementById('email').value,
'phone': document.getElementById('phone').value,
'messengers': document.getElementById('messengers').value,
'specialization': document.getElementById('specialization').value,
'grade': document.getElementById('grade').value,
'style': document.getElementById('style').value,
'art_types': document.getElementById('art_types').value,
'genres': document.getElementById('genres').value,
'education': document.getElementById('education').value,
'unions': document.getElementById('unions').value,
'rewards': document.getElementById('rewards').value,
'projects': document.getElementById('projects').value,
'publications': document.getElementById('publications').value,
'site': document.getElementById('site').value,
'material_manufacturer': document.getElementById('material_manufacturer').value,
'material_use': document.getElementById('material_use').value,
'buying_materials': document.getElementById('buying_materials').value,
'collaborate': document.getElementById('collaborate').value,
'meta_data.wishes': document.getElementById('meta_data.wishes').value,
'master_classes': document.getElementById('master_classes').value,
'materials_use_in_master_classes': document.getElementById('materials_use_in_master_classes').value,
'print_merch': document.getElementById('print_merch').value,
'own_workshop': document.getElementById('own_workshop').value,
'workshop_tour': document.getElementById('workshop_tour').value,
'biography': document.getElementById('biography').value}



            try {
                const res = await fetch(`/api/user/form`, { 
                    method: 'PUT', 
                    // headers:{
                        
                    // }
                    body: JSON.stringify(payload) 
                });

                if (res.ok) {
                    showToast({message: 'Анкета сохранена!', duration:2500});
                    {% if notify %}
const targetHash = window.location.hash;  
  if (targetHash) {
    const el = document.querySelector(targetHash);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  }
window.location.reload();
                    {% endif %}
                } else {
                    showToast({message: 'Ошибка при сохранение!', status: 'error', duration:2500});
                }
            } catch (err) {
                console.error(err);
                showToast({message: 'Ошибка соединения с сервером!', status: 'error',  duration:2500});
            }
        });


    });


</script>
{{ footer.section(user) }}
{% endblock %}

{% block head %}
{{ header.style() }}
{{ profile_nav.style() }}
<style>
    .birthday{position: relative;}
    .birthday>svg{position: absolute; right: 12px;}
    .birthday>input{padding-left: 22px;}
    .birthday>select{all:unset;position: absolute;
  background: white;}
    .birthday>#day{left: 22px;
  width: 25%;
  text-align: center;}
    .birthday>#month{left: calc(22px + 25%);
  width: 25%;
  text-align: center;}
    .birthday>#year{left: calc(22px + 50%);
  width: 25%;
  text-align: center;}
</style>
<style>
.c_aq9et { position: sticky;
  bottom: 115px;
  z-index: 5;display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }

.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;}


/* Красная ошибка */
.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 {margin-bottom: 1.5rem;}

.floating-label {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_aihm6 { display: flex; justify-content: center; align-items: baseline; border-radius: 5px; background: #FFF; }
.c_aihm6{display: flex; flex-direction: column;flex-wrap: nowrap;}
.floating-group{width: 100%;
  gap: 7px;
  display: flex;
  flex-direction: column;}
.floating-group>input{box-sizing: border-box;}
/* Mobile */
@media (max-width: 699px) {
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }


.c_iiehk { align-items: flex-end; align-self: stretch; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; }
.c_nnsh6 { align-content: center; align-items: baseline; display: flex; flex-shrink: 0; justify-content: space-around; padding: 3px 0; row-gap: 8px; width: 315px; flex-direction: column;}.c_3ihvi { align-items: center; background: #FFF; display: flex; flex-direction: column; flex-shrink: 0; gap: 15px; justify-content: center; padding: 15px 10px; width: 335px; }
.c_nnsh6>a, .c_nnsh6>a>span{width: 100%;box-shadow: none;}
.c_nnsh6>a:hover{background: #f7f7f7;border-radius: 8px;}
.c_nnsh6>a:active{background: #f7f7f7;border-radius: 8px;}
.c_tihtk { padding: 10px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }

.c_ru432 { align-content: flex-start; align-items: flex-start; background: #FFF; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 0; width: 335px; }
.c_gtoe9 { align-items: center; display: flex; flex-direction: column; gap: 30px; width: 335px; }
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_nnsh6>a>img{display: none;}
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: center; padding: 3px 0; }
.c_3ihvi { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 15px 85px; }
.c_tihtk { padding: 10px 30px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_ru432 { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; padding: 15px 0; }
.c_gtoe9 { align-items: center; align-self: stretch; display: flex; flex-direction: column; gap: 30px; padding: 0 49px; }
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
}
.floating-label{font-weight: 700; color: #111;}
.floating-group>span{color: #666; font-style: italic;}
/* Desktop */
@media (min-width: 901px) {
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
.c_nnsh6>a>img{display: none;}
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding-bottom: 5px; }
.c_3ihvi { align-items: flex-start; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; width: 1045px; }
.c_tihtk { padding: 10px 100px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }

}</style>
{{ footer.style() }}
{% endblock %}