/* ==================================================================
   OGŁOSZENIA - komponenty specyficzne dla stron /announcements.
   Łączony <link>-iem z samych szablonów stron (nie z layoutu main.hbs).
   Bloki wspólne (panel/chip/empty-state/tokeny) żyją w style.css.
   Ikony: Font Awesome.
   ================================================================== */

/* --- chip ceny (wykluczające się: TFP / Płatna / kwota) --- */
.chip-price{border-color:rgba(68,157,82,.4);background:rgba(68,157,82,.10);color:#a6d6ad;font-weight:600}
.chip-price i{color:#6fb877}
.chip-price.is-tfp{border-color:rgba(137,184,217,.4);background:rgba(137,184,217,.10);color:#aacbe4}
.chip-price.is-tfp i{color:#8fb8d9}

/* --- pasek narzędzi listy --- */
.list-toolbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0 0 1rem}

/* --- pasek filtrów --- */
.filterbar{display:flex;gap:.75rem;align-items:stretch;flex-wrap:wrap}
.filterbar .fb-search{flex:1 1 260px;min-width:180px;position:relative}
.filterbar .fb-search i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.95rem}
.filterbar .fb-search .tf-input{padding-left:2.6rem}
.filterbar .fb-field{flex:0 1 190px;min-width:150px}
/* Filtr lokalizacji: dropdown autocomplete (position:absolute, wystaje poza
   pasek) nie może być przycięty przez .panel{overflow:hidden} - ten panel
   nie ma glow, więc zdjęcie overflow jest bezpieczne. */
#ann-filters{overflow:visible}

/* --- układ: lista + panel boczny --- */
.ann-layout{display:flex;gap:2rem;align-items:flex-start}
.ann-main{flex:1 1 auto;min-width:0}
.ann-aside{flex:0 0 260px}
@media (max-width:900px){
    .ann-layout{flex-direction:column}
    .ann-aside{width:100%;order:-1}
}

/* --- karta na liście: autor | treść | wygasanie --- */
.ann-card{display:flex;gap:1.25rem;padding:1.25rem;border:1px solid var(--border-soft);
    border-radius:var(--radius-panel);background:var(--surface-1);align-items:stretch;
    transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ann-card:hover{border-color:rgba(181,113,200,.35);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.ann-card.is-promoted{border-color:rgba(201,168,106,.35);background:
    linear-gradient(180deg,rgba(201,168,106,.045),transparent 40%),var(--surface-1)}

/* karta autora (lewa kolumna) */
.ann-author{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;
    padding-right:1.25rem;border-right:1px solid var(--border-hair);text-decoration:none}
.ann-author .ann-author-name{font-weight:600;color:var(--text-1);font-size:.82rem;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ann-author .ann-author-name:hover{color:#fff}
.ann-author span.ann-author-name{cursor:default}
/* status "promowane" — dosunięty do dołu kolumny autora, spójny ze złotą ramką karty */
.ann-promoted{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;
    font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-seal)}
.ann-promoted i{font-size:.72rem}

/* treść (środek) */
.ann-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.ann-badges{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.ann-cat{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.ann-cat.cat-photographer{color:#8fb8d9}
.ann-cat.cat-model{color:#d98fc4}
.ann-cat.cat-events{color:#e0b56b}
.ann-cat.cat-sale{color:#8fd9b0}
.ann-cat.cat-services{color:#7fb0e6}
.ann-cat.cat-other{color:#9a94a6}
/* Legacy rows written before the category set changed - keep them colored. */
.ann-cat.cat-collab{color:#c79bff}

/* category pills in the form: only the checked state gets the category color,
   unchecked stays neutral (inherits from .radio-group.pill in style.css) */
#ann-category input[value="photographer"]:checked + label{background:rgba(143,184,217,.12);border-color:#8fb8d9;color:#8fb8d9}
#ann-category input[value="model"]:checked + label{background:rgba(217,143,196,.12);border-color:#d98fc4;color:#d98fc4}
#ann-category input[value="events"]:checked + label{background:rgba(199,155,255,.12);border-color:#c79bff;color:#c79bff}
#ann-category input[value="sale"]:checked + label{background:rgba(143,217,176,.12);border-color:#8fd9b0;color:#8fd9b0}
#ann-category input[value="services"]:checked + label{background:rgba(217,201,143,.12);border-color:#d9c98f;color:#d9c98f}
#ann-category input[value="other"]:checked + label{background:rgba(154,148,166,.12);border-color:#9a94a6;color:#9a94a6}
.ann-title{font-family:"Raleway",sans-serif;font-weight:400;font-size:1.15rem;color:#fff;line-height:1.3}
a.ann-title:hover{color:var(--color-theme-light)}
.ann-excerpt{font-size:.83rem;color:var(--text-3);line-height:1.55;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-meta{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;margin-top:.15rem}
.ann-meta-item{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--text-3)}
.ann-meta-item i{font-size:.9rem}

/* prawa kolumna karty: wygasanie */
.ann-expiry{flex:0 0 120px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
    text-align:right;gap:.5rem}
.ann-expiry-count{font-family:"Raleway",sans-serif;font-weight:200;font-size:1.6rem;color:var(--text-1);
    line-height:1;font-variant-numeric:tabular-nums}
.ann-expiry-count small{font-size:.42em;font-weight:400;color:var(--text-3);letter-spacing:.1em;
    text-transform:uppercase;display:block;margin-top:.3rem}
.ann-expiry.is-soon .ann-expiry-count{color:var(--color-seal)}
.ann-expiry-date{font-size:.68rem;color:var(--text-3);font-variant-numeric:tabular-nums}

@media (max-width:640px){
    .ann-card{flex-wrap:wrap;gap:1rem}
    .ann-author{flex-direction:row;flex-basis:100%;border-right:none;border-bottom:1px solid var(--border-hair);
        padding-right:0;padding-bottom:1rem;justify-content:flex-start;text-align:left;gap:.8rem}
    .ann-author .avatar-round{width:44px;height:44px}
    .ann-promoted{margin-top:0;margin-left:auto;align-self:center}
    .ann-expiry{flex-basis:100%;flex-direction:row;align-items:center;justify-content:space-between;
        border-top:1px solid var(--border-hair);padding-top:.8rem;text-align:left}
    .ann-expiry-count{font-size:1.25rem}
    .ann-expiry-count small{display:inline;margin:0 0 0 .3rem;font-size:.5em}
}

/* --- kategorie w panelu bocznym --- */
.ann-catlist{list-style:none;margin:0;padding:0}
.ann-catlist li a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.6rem .75rem;border-radius:8px;font-size:.84rem;color:var(--text-2);transition:all .2s ease}
.ann-catlist li a:hover{background:rgba(255,255,255,.03);color:#fff}
.ann-catlist li a.active{background:rgba(181,113,200,.12);color:var(--color-theme-light);font-weight:500}
.ann-catlist .ann-cat-count{font-size:.72rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.ann-catlist li a.active .ann-cat-count{color:var(--color-theme-light)}

/* --- widok szczegółów --- */
.ann-detail-head{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.ann-detail-title{font-family:"Raleway",sans-serif;font-weight:400;font-size:1.7rem;color:#fff;line-height:1.25}
.ann-detail-text{font-size:.95rem;color:var(--text-1);line-height:1.7;white-space:pre-line;
    font-family:"Raleway",sans-serif;font-weight:300}
.ann-detail-meta{display:flex;flex-direction:column;gap:.85rem}

/* --- komentarze --- */
.ann-comment{display:flex;gap:.9rem;padding:1.1rem 0}
.ann-comment-body{flex:1;min-width:0}
.ann-comment-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;flex-wrap:wrap}
.ann-comment-author{font-weight:600;color:var(--text-1);font-size:.85rem;text-decoration:none}
.ann-comment-author:hover{color:#fff}
.ann-comment-date{font-size:.68rem;color:var(--text-3)}
.ann-comment-text{font-size:.86rem;color:var(--text-2);line-height:1.6;margin:0}

/* --- lokalizacja w modalu (autocomplete wtopiony w kontener .tf-input) --- */
.an-loc{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-height:46px}
/* Bootstrapowy .form-control (także :focus) wnosi tło/ramkę/padding/box-shadow.
   Neutralizujemy z !important - bootstrap.min.css jest agresywny i przy zwykłej
   specyficzności wygrywa. Tło i ramkę robi kontener .tf-input, input ma być
   "gołym" polem tekstowym wtopionym w niego (jak input w .tags-input). */
.an-loc .form-control{background:transparent!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;color:var(--text-1)!important;font-size:.88rem;line-height:1.5;
    padding:0!important;min-height:0;width:auto;flex:1 1 150px;appearance:none;-webkit-appearance:none}
.an-loc .form-control:focus{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;outline:none}
.an-loc .form-control::placeholder{color:var(--text-3);opacity:1}

/* --- pola kwoty (kwota/waluta/jednostka): tylko dla "Konkretna kwota" ---
   Sterowane klasą .is-visible z JS; celowo NIE bootstrap d-flex/d-none (oba
   display:...!important - inline i klasy przełączane przez JS nie miałyby priorytetu). */
.ann-amounts{display:none}
.ann-amounts.is-visible{display:flex}

/* --- Modale ogłoszeń: "unoszący panel" w języku designu strony ---
   Tło strony to #131111 + fioletowe akcenty; bootstrapowy .modal-content jest
   szary/neutralny i się od nich odpina. Nadajemy mu powierzchnię jak .panel
   (var(--surface-1) + subtelny poblask jak .panel-glow) i włosowe obwódki -
   ciemno i spójnie, bez kolorowych akcentów. Zasięg: tylko modale ogłoszeń. */
#new-announcement-modal .modal-content,
#ann-message-modal .modal-content{
    position:relative;overflow:hidden;
    background:var(--surface-1);
    border:1px solid var(--border-soft)!important; /* !important wygrywa z globalnym .modal-content w style.css */
    border-radius:16px;
    box-shadow:0 24px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}
/* Poblask jak w .panel-glow, ale rozlany szerzej - mały okrąg czytał się jak
   plama; szeroki gradient z prawego górnego rogu daje głębię bez widocznej krawędzi. */
#new-announcement-modal .modal-content::before,
#ann-message-modal .modal-content::before{
    content:'';position:absolute;inset:0;
    pointer-events:none;
    background:
        radial-gradient(120% 90% at 88% -20%,rgba(181,113,200,.14) 0%,transparent 60%),
        linear-gradient(180deg,rgba(255,255,255,.022),transparent 220px);
}
#new-announcement-modal .modal-header,
#ann-message-modal .modal-header{
    border-bottom:1px solid var(--border-hair);
    padding:1.1rem 1.4rem;
}
#new-announcement-modal .modal-title,
#ann-message-modal .modal-title{
    font-family:"Raleway",sans-serif;font-weight:400;letter-spacing:.02em;color:var(--text-1);
}
#new-announcement-modal .modal-body,
#ann-message-modal .modal-body{padding:1.4rem;}
#new-announcement-modal .modal-footer,
#ann-message-modal .modal-footer{
    border-top:1px solid var(--border-hair);
    padding:1rem 1.4rem;background:transparent;
}
#new-announcement-modal .form-text,
#ann-message-modal .form-text{color:var(--text-3);}
#new-announcement-modal .btn-close,
#ann-message-modal .btn-close{filter:invert(1) opacity(.6);}

/* --- rytm pionowy formularza ogłoszenia --- */
.ann-form .ann-field{margin-bottom:1.5rem}
.ann-form .ann-field:last-child{margin-bottom:0}
.ann-form-row{display:flex;gap:1.5rem;flex-wrap:wrap}
.ann-form-row>*{flex:1 1 240px;min-width:0}
.ann-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.ann-count{font-size:.68rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.ann-count.is-over{color:var(--color-danger)}

/* ==================================================================
   Sugestie (podpowiedzi systemu) - warstwa niezależna od stanu wyboru.
   Wybór niesie kolor kategorii (wypełnienie + ramka). Sugestia nie może
   użyć żadnej barwy, bo paleta jest w całości rozdana między kategorie,
   więc niesie ją forma: neutralna poświata bez ramki i bez wypełnienia.

   API dla skryptu:
     .is-suggested   - jedna klasa na widocznej kontrolce (dla .radio-group
                       jest nią <label>, nie <input>). Samowystarczalna.
     .ann-sugbar     - opcjonalny podpis pod grupą, atrybut [hidden] steruje
                       widocznością.
     .ann-sug-tag    - tag proponowany do dołożenia (osobny wzorzec: tagi się
                       dokłada, a nie wybiera jeden z zestawu).

   Puls gra 3 razy. Ponowne odpalenie po zdjęciu klasy wymaga wymuszenia
   reflow (void el.offsetWidth) przed jej ponownym dodaniem.
   ================================================================== */

:root{
    --ann-sug-tint:rgba(230,225,239,.055);
    --ann-sug-halo:rgba(230,225,239,.10);
    --ann-sug-glow:rgba(230,225,239,.30);
}

.is-suggested{
    background-image:linear-gradient(var(--ann-sug-tint),var(--ann-sug-tint));
    outline:3px solid var(--ann-sug-halo);
    outline-offset:0;
    color:var(--text-2);
    animation:ann-sug-pulse 1600ms cubic-bezier(.32,.72,.35,1) 3;
}

@keyframes ann-sug-pulse{
    from{box-shadow:0 0 0 0 var(--ann-sug-glow)}
    to{box-shadow:0 0 0 12px rgba(0,0,0,0)}
}

/* Fokus zawsze wygrywa z poświatą - inaczej sugestia zjadałaby obrys fokusa. */
:is(.radio-group, .checkbox-group) input:focus-visible + label.is-suggested{
    outline:2px solid var(--color-theme-light);
    outline-offset:2px;
}

/* Interakcja z grupą = użytkownik przejął stery, puls milknie. */
:is(.radio-group, .checkbox-group, .tags-input, .ann-sug-tags):is(:hover, :focus-within) .is-suggested,
:is(.radio-group, .checkbox-group):is(:hover, :focus-within) + .ann-sugbar .is-suggested{animation:none}

/* --- podpis sugestii pod grupą --- */
.ann-sugbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.6rem;
    font-size:.76rem;color:var(--text-3);animation:ann-sugbar-in 220ms cubic-bezier(.32,.72,.35,1) both}
.ann-sugbar[hidden]{display:none}
.ann-sugbar b{color:var(--text-1);font-weight:600}
.ann-sugbar-actions{display:flex;gap:.35rem;margin-left:auto}
.ann-sugbar button{background:transparent;border:1px solid transparent;border-radius:99px;
    padding:.25rem .7rem;font-size:.72rem;color:var(--text-2);cursor:pointer;transition:all .2s ease}
.ann-sugbar button:hover{border-color:var(--border-soft);color:#fff;background:rgba(255,255,255,.04)}

@keyframes ann-sugbar-in{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:none}
}

/* --- tagi proponowane --- */
.ann-sug-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.ann-sug-tags:empty{display:none}
.ann-sug-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:99px;
    border:1px dashed var(--border-soft);background:transparent;color:var(--text-3);
    font-size:.72rem;line-height:1.4;cursor:pointer;transition:all .2s ease;
    animation:ann-sug-pulse 1600ms cubic-bezier(.32,.72,.35,1) 3}
.ann-sug-tag:hover{border-style:solid;border-color:var(--border-soft);
    background:rgba(255,255,255,.04);color:var(--text-1)}
.ann-sug-tag:focus-visible{outline:2px solid var(--color-theme-light);outline-offset:2px}
.ann-sug-tag::before{content:'+';opacity:.7}

@media (prefers-reduced-motion: reduce){
    .is-suggested,
    .ann-sug-tag,
    .ann-sugbar{animation:none}
    .is-suggested{outline-width:4px}
}

/* ==================================================================
   Powierzchnie pól w modalach ogłoszeń.
   Globalne .tf-input (#191A1F) i .tags-input (#1e1e1e) pochodzą ze starszej,
   neutralnie szarej palety i odcinają się od podbitej fioletem powierzchni
   modalu (--surface-1). Podmieniamy je lokalnie - globalnych reguł nie
   ruszamy, żeby nie przemalować reszty serwisu.
   ================================================================== */

#new-announcement-modal,
#ann-message-modal{
    --ann-field:#1c1826;
    --ann-field-hover:#201b2c;
}

#new-announcement-modal :is(.tf-input, .tags-input),
#ann-message-modal :is(.tf-input, .tags-input){
    background:var(--ann-field);
    border:1px solid var(--border-soft);
    border-radius:10px;
    color:var(--text-1);
}

#new-announcement-modal :is(.tf-input, .tags-input):hover,
#ann-message-modal :is(.tf-input, .tags-input):hover{
    border-color:#382f47;
}

#new-announcement-modal :is(.tf-input:focus, .tags-input:focus-within),
#ann-message-modal :is(.tf-input:focus, .tags-input:focus-within){
    background:var(--ann-field-hover);
    border-color:var(--color-theme-light);
    box-shadow:0 0 0 3px rgba(181,113,200,.15);
}

#new-announcement-modal .tags-input,
#ann-message-modal .tags-input{padding:.45rem .5rem}

#new-announcement-modal .tf-input::placeholder,
#ann-message-modal .tf-input::placeholder{color:var(--text-3)}

#new-announcement-modal select.tf-input option,
#ann-message-modal select.tf-input option{background:var(--ann-field)}

/* --- suwak ważności ---
   Natywny accent-color daje płaski pasek bez wypełnienia po lewej stronie
   uchwytu. Track rysujemy sami: gradient przycięty do --fill (ustawianego
   z JS przy każdym input), reszta toru neutralna. */
#new-announcement-modal input[type="range"]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:20px;margin:0;background:transparent;cursor:pointer;
}
#new-announcement-modal input[type="range"]::-webkit-slider-runnable-track{
    height:5px;border-radius:99px;
    background:linear-gradient(90deg,#d9469f,var(--color-theme-light)) 0 / var(--fill,50%) 100% no-repeat,
        var(--border-soft);
}
#new-announcement-modal input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;height:16px;margin-top:-5.5px;border-radius:50%;
    background:#f4f1f8;box-shadow:0 1px 5px rgba(0,0,0,.55);
    transition:transform .15s ease;
}
#new-announcement-modal input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12)}
#new-announcement-modal input[type="range"]:active::-webkit-slider-thumb{transform:scale(.95)}
#new-announcement-modal input[type="range"]::-moz-range-track{
    height:5px;border-radius:99px;background:var(--border-soft);
}
#new-announcement-modal input[type="range"]::-moz-range-progress{
    height:5px;border-radius:99px;background:linear-gradient(90deg,#d9469f,var(--color-theme-light));
}
#new-announcement-modal input[type="range"]::-moz-range-thumb{
    width:16px;height:16px;border:0;border-radius:50%;
    background:#f4f1f8;box-shadow:0 1px 5px rgba(0,0,0,.55);
}
#new-announcement-modal input[type="range"]:focus-visible{
    outline:2px solid var(--color-theme-light);outline-offset:6px;border-radius:99px;
}