/* ============================================================
   Пропозиції точок інтересу від користувачів — RECRE-545.

   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ main.css: правка main.css заблокована
   паралельним незакоміченим WIP — той самий випадок і та сама причина,
   що дали notification-optin.css і photo-suggestions.css (див.
   коментар у base.html). Перевизначень наявних селекторів тут немає,
   лише нові класи .psg-*, тож перенесення буде механічним.

   ЧОМУ НЕ ДОПИСАЛИ В photo-suggestions.css, який теж «про
   пропозиції»: той файл належить RECRE-541 і описує ІНШУ форму
   (файловий інпут, ліцензійна згода, мініатюри). Спільним у двох фіч
   є лише список кабінету, і його класи (.psl-*) саме тому й
   перевикористані як є, без жодного рядка тут. Змішувати в одному
   файлі стилі двох фіч заради слова в назві — рівно той спосіб, яким
   main.css і став неторкáнним.

   Токени — з main.css (:root). Власної палітри файл не вводить.
   ============================================================ */

/* Картка форми — та сама ширина, що .fbk-card/.mloc-form-card:
   пікер потребує місця, а решта полів однорядкові. */
.psg-card { max-width: 560px; }

/* ------------------------------------------------------------
   Пікер точки на схемі парку
   ------------------------------------------------------------ */

.psg-pick {
    position: relative;
    border: 1px solid var(--border-2);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
}

/* Висота фіксована, а не аспектна: контур парку вписується через
   fitBounds, тож від пропорцій полотна він не залежить, а от
   «стрибок» висоти при завантаженні тайлів помітний одразу. */
.psg-pick__map {
    height: 320px;
    width: 100%;
}

/* Чип координат — підтвердження «точку зафіксовано» ТЕКСТОМ, не лише
   піктограмою маркера (прецедент .mloc-pick__coords, main.css).
   БАГА (ПВ, 2026-09-16): чип народився в правому верхньому куті — тому
   самому, де сидить .mloc-pick__layer (тумблер «Супутник», спільний
   контрол з map-picker-controls.js), і після кліку на схемі обидва
   накладались. Перша спроба (top:54 left:10) наступила на ІНШИЙ
   контрол: зум Leaflet у лівому куті двоповерховий (~82px разом із
   відступом), і чип сів прямо на кнопку «−» (ПВ, 2026-09-17, другий
   скріншот). Виміряні зайняті кути: зум зліва до ~92px, тумблер
   справа до ~46px. Тому чип — СПРАВА ПІД тумблером: top 54 очищає
   тумблер, правий стовпчик нижче нього вільний. */
.psg-pick__coords {
    position: absolute;
    top: 54px;
    right: 10px;
    z-index: 500; /* над полотном Leaflet, під його ж контролами */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* display:flex вище перебиває браузерне [hidden]{display:none} —
   специфічність класу вища за атрибут. Без цього рядка чип координат
   висів би на карті порожнім ще до першого кліку (і так само —
   .psg-nearby нижче). Гасимо явно, а не через .is-hidden-клас: атрибут
   hidden лишається джерелом правди і для JS, і для скрін-рідера. */
.psg-pick__coords[hidden] { display: none; }

.psg-pick__coords i,
.psg-pick__coords svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--green);
}

.psg-pick__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-top: 1px solid var(--border-2);
    background: var(--surface);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted);
}

.psg-pick__hint i,
.psg-pick__hint svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--sage);
}

/* Позначка поза контуром. Це попередження, а не відмова (серверний
   ST_Contains — джерело істини), тому терракота як у .psl-item__reason,
   а не червона «помилкова» палітра форми. */
.psg-pick__hint--warn {
    background: rgba(193, 109, 69, .08);
    color: var(--terracotta);
    font-weight: 600;
}

.psg-pick__hint--warn i,
.psg-pick__hint--warn svg { color: var(--terracotta); }

/* ------------------------------------------------------------
   Дедуплікаційна підказка «поруч уже є»
   ------------------------------------------------------------ */

/* Свідомо НЕ виглядає як помилка: підказка попереджає про можливий
   дубль, але надіслати заявку не заважає (два кіоски за десять метрів
   один від одного — реальність парку). Тому нейтральна шавлієва рамка
   на світлому тлі, а не терракота .acct-error поруч. */
.psg-nearby {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(126, 148, 102, .38);
    border-radius: 12px;
    background: rgba(126, 148, 102, .08);
}

/* Те саме, що для чипа координат вище: клас із display:flex сильніший
   за [hidden], і без цього рядка підказка «поруч уже є» показувала б
   свій хвіст («Це не заважає надіслати заявку…») ще до того, як
   з'явиться бодай одна знайдена точка. */
.psg-nearby[hidden] { display: none; }

.psg-nearby > i,
.psg-nearby > svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: var(--green);
}

.psg-nearby__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.psg-nearby__list {
    margin: 5px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink);
}

.psg-nearby__note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
}

/* Заголовок секції .psl-section (RECRE-545) пішов разом із секціями:
   RECRE-571 злив три списки «Моїх пропозицій» в один табличний реєстр
   (.pslt-*, photo-suggestions.css), і вид заявки став колонкою «Тип». */

/* ------------------------------------------------------------
   Підтвердження після надсилання (sent=True)
   ------------------------------------------------------------ */

.psg-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 520px) {
    /* Три кнопки підтвердження в рядок на телефоні дають три обрізані
       підписи — краще колонкою на всю ширину. */
    .psg-done__actions { flex-direction: column; }
    .psg-done__actions .pdc-btn { justify-content: center; }
    .psg-pick__map { height: 260px; }
}

/* ------------------------------------------------------------
   Повноекранний режим пікера НА ДЕСКТОПІ (правка ПВ 2026-09-17)

   main.css показує кнопку .mloc-pick__expand лише ≤680px (мобільний
   сценарій RECRE-311). ПВ попросив кнопку і на широких екранах саме
   для пікера заявки на точку: полотно 320px замале, щоб точно
   поставити позначку у великому парку. Селектор сусідства
   (#psg-pick + …) зумисно вузький: кнопку вставляє
   rmPickerFullscreen одразу ПІСЛЯ контейнера, тож правило вмикає
   десктоп-режим ЛИШЕ цьому пікеру, не чіпаючи форму власної локації
   (.mloc-pick), чия кнопка керується main.css як і раніше.
   Сама модалка .mloc-fs — звичайний fixed-оверлей, їй байдуже до
   ширини екрана. */
#psg-pick + .mloc-pick__expand { display: flex; }

/* ------------------------------------------------------------
   Пікер точки ВСЕРЕДИНІ модалки .mloc-fs (RECRE-573, ПВ 2026-09-19)

   rmPickerFullscreen переносить у .mloc-fs__map ВСІ дочірні вузли
   контейнера. У пікера власної локації вони абсолютні (полотно
   inset:0, хінт і чип — оверлеї), тож модалка заповнюється сама. Діти
   .psg-pick інші: полотно СТАТИЧНЕ з жорсткими 320px (стрибок висоти
   при завантаженні тайлів, коментар вище), а хінт — статична смуга
   ПІД полотном. У модалці це давало карту-стрічку зверху, смугу хінта
   посеред екрана і порожній градієнт на дві третини висоти. Тут — і
   ЛИШЕ тут, під .mloc-fs__map — обидва перевдягаються в геометрію
   mloc-еталона: полотно на весь простір, хінт — плаваюча пігулка
   внизу (рецепт .mloc-pick__hint, main.css). Inline-вигляд пікера не
   змінюється жодним правилом.
   ------------------------------------------------------------ */

/* height, а не position:absolute+inset: Leaflet при ініціалізації
   виставив полотну inline position:relative (Map._initContainer), і
   класове правило його не переб'є без !important. Висота ж у модалці
   визначена (.mloc-fs__map — flex:1 колонки фіксованої висоти), тож
   відсотка достатньо. */
.mloc-fs__map .psg-pick__map {
    height: 100%;
}

.mloc-fs__map .psg-pick__hint {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1200;               /* над панелями Leaflet — як у mloc */
    pointer-events: none;        /* клік крізь хінт = клік по карті */
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: rgba(251, 245, 233, 0.92);
    backdrop-filter: blur(4px);
}

/* Терракотове попередження «поза контуром» лишається читабельним і на
   пігулці: фон уже світлий, потрібна лише його тепла версія. */
.mloc-fs__map .psg-pick__hint--warn {
    background: rgba(247, 233, 220, 0.94);
}

@media (max-width: 900px) {
    /* Той самий урок, що RECRE-251 п.7 у mloc: хінт при bottom:10
       сідає на смугу атрибуції Leaflet і закриває © OpenStreetMap. */
    .mloc-fs__map .psg-pick__hint { bottom: 30px; }
}