/* /css/map-modal-lost-animals.css
   Report modals (LOST + FOUND) — premium UI (cream + orange)
   v5.1

   Ten plik styluje:
   - #modalLost  (Zgłoś zaginięcie)
   - #modalFound (Zgłoś znalezione)
   + wszystkie pozostałe modale na mapie w tym samym stylu, ale bez ingerencji w działanie JS.
*/

/* =========================
   THEME TOKENS
========================= */
:root{
  --cream-0:   #fffdf9;
  --cream-1:   #fff7ec; /* główny krem */
  --cream-2:   #ffefd7;
  --cream-3:   #f7e6c8;

  --orange-4:  #f7a13a;
  --orange-5:  #ea8b1a; /* główny pomarańcz */
  --orange-6:  #d97706;

  --brown-9:   #2f2418;
  --brown-8:   #3a2b1b;
  --brown-7:   #5b4631;

  --text:      var(--brown-9);
  --muted:     #6b5a46;

  --line:      rgba(40, 25, 10, .12);
  --line-2:    rgba(40, 25, 10, .08);

  --shadow-lg: 0 28px 80px rgba(0,0,0,.26);
  --shadow-md: 0 14px 34px rgba(0,0,0,.18);
  --shadow-sm: 0 8px 18px rgba(0,0,0,.12);

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --focus:     0 0 0 4px rgba(234, 139, 26, .22);

  /* referencja dla uchwytów croppera */
  --cropper-handle-color: #ea8b1a;
}

/* =========================
   MODAL BASE
========================= */
.has-modal { overflow: hidden; }
.modal[hidden] { display: none !important; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: min(6vh, 56px) 16px 24px;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(2px);
}

.modal-dialog{
  position: relative;
  width: min(980px, 100%);
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(234,139,26,.18), transparent 55%),
    radial-gradient(900px 380px at 92% 0%, rgba(247,161,58,.14), transparent 55%),
    var(--cream-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  animation: modalIn .20s ease-out both;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.modal-dialog::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 5px;
  background: linear-gradient(90deg, var(--orange-6), var(--orange-5), var(--orange-4));
}

.modal-dialog.modal-lg{ width: min(1020px, 100%); }

@keyframes modalIn{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nagłówek */
.modal h3{
  margin: 0;
  padding: 18px 18px 10px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .2px;
  color: var(--brown-8);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
}

/* Close */
.modal .modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.75);
  color: rgba(40,25,10,.85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.modal .modal-close:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
  background: rgba(255,255,255,.92);
}
.modal .modal-close:active{ transform: translateY(0); }

.modal-body{
  padding: 14px 18px 18px;
  max-height: min(74vh, 720px);
  overflow: auto;
}

/* Busy state (np. geokodowanie) */
.modal.is-busy{
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease;
}
.modal.is-busy .modal-dialog{ filter: saturate(.9); }

/* Modale startowe / reminderowe: ładne odstępy */
.modal p{ color: var(--muted); margin: 8px 0; }
.modal small.hint, .modal .hint{ color: var(--muted); }

/* Przyciski w akcjach (grid) */
.modal .modal-actions.two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

/* Responsive */
@media (max-width: 720px){
  .modal{ padding: 4vh 12px 18px; }
  .modal-body{ max-height: 72vh; padding: 12px 14px 14px; }
  .modal h3{ padding: 16px 14px 9px; }
}

/* =========================
   BUTTONS (map + modals)
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  color: var(--brown-9);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(.99);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.btn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary{
  background: linear-gradient(180deg, rgba(247,161,58,1), rgba(234,139,26,1));
  border-color: rgba(217,119,6,.65);
  color: #2b1f12;
}
.btn-primary:hover{ filter: brightness(.98); }

.btn-ghost{
  background: rgba(255,255,255,.55);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn-secondary{
  background: rgba(247,247,247,.9);
  border-color: var(--line-2);
  color:#111;
  box-shadow: none;
}
.btn-danger{
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-color: rgba(220,38,38,.85);
  color:#fff;
}

.btn-icon{
  width: 34px;
  height: 34px;
  padding:0;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
}
.btn-icon svg{ width: 18px; height: 18px; }

.btn.btn-pin{
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.72);
}
.btn.btn-pin svg{ width: 18px; height: 18px; display:block; }

/* =========================
   FORM LAYOUT (LOST + FOUND)
========================= */
.report-form--compact .grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.report-form--compact .field{
  grid-column: span 6;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.report-form--compact .field-wide{ grid-column: span 12; }

/* zdjęcie zdecydowanie lepiej jako szerokie pole */
.report-form--compact .photo-field{
  grid-column: span 12;
}

/* lepsza responsywność kolumn */
@media (max-width: 980px){
  .report-form--compact .field{ grid-column: span 12; }
}

/* label: nowocześnie, czytelnie */
.report-form--compact label{
  display:block;
  font-weight: 800;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(47,36,24,.92);
}

/* inputs */
.report-form--compact input[type="text"],
.report-form--compact input[type="email"],
.report-form--compact input[type="tel"],
.report-form--compact input[type="number"],
.report-form--compact input[type="datetime-local"],
.report-form--compact select,
.report-form--compact textarea{
  width:100%;
  padding: 10px 12px;
  border: 1px solid rgba(40,25,10,.14);
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.95);
  font-size: 14px;
  color: var(--text);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.report-form--compact textarea{ resize: vertical; min-height: 84px; }

.report-form--compact input:focus,
.report-form--compact select:focus,
.report-form--compact textarea:focus{
  border-color: rgba(234,139,26,.85);
  box-shadow: var(--focus);
  background: #fff;
}

/* select: subtelna strzałka (bez psucia natywnych) */
.report-form--compact select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(47,36,24,.75) 50%),
    linear-gradient(135deg, rgba(47,36,24,.75) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* checkbox/radio accent */
.report-form--compact input[type="checkbox"],
.report-form--compact input[type="radio"]{ accent-color: var(--orange-5); }

/* =========================
   INPUT + BUTTON (adres)
========================= */
.input-with-btn{
  display:flex;
  gap: 8px;
  align-items: center;
  position: relative;
}

.input-with-btn input[type="text"],
.input-with-btn input[type="search"]{
  flex: 1 1 auto;
  min-width: 0;
}

.input-with-btn .btn{ flex: 0 0 auto; white-space: nowrap; }

/* inline hint przy pinezce */
.input-with-btn .pin-inline-hint{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255,247,236,.95);
  border: 1px dashed rgba(234,139,26,.55);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.input-with-btn .pin-inline-hint::before{
  content:"";
  width: 14px; height: 14px;
  background: var(--orange-5);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>') center/contain no-repeat;
}

/* Na węższych ekranach hint pod inputem */
@media (max-width: 820px){
  .input-with-btn.with-suggest{ flex-wrap: wrap; }
  .input-with-btn .pin-inline-hint{ order: 4; width: 100%; margin-top: 6px; }
}
@media (max-width: 420px){
  .input-with-btn .pin-inline-hint{ display:none; }
}

/* =========================
   CONSENT (RODO)
========================= */
.consent{
  margin-top: 12px;
  background: rgba(255,247,236,.92);
  border: 1px dashed rgba(234,139,26,.55);
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--muted);
}

.consent label{
  display:grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 10px;
  line-height: 1.45;
  margin: 0;
}

.consent input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  justify-self: center;
}

/* =========================
   CONTACT VISIBILITY CARDS
========================= */
.contact-visibility{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
}

@media (max-width: 720px){
  .contact-visibility{ grid-template-columns: 1fr; }
}

.contact-visibility label{
  position: relative;
  display:grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 12px;
  padding: 12px;
  border: 1px solid rgba(40,25,10,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  cursor:pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}

.contact-visibility label:hover{
  transform: translateY(-1px);
  border-color: rgba(234,139,26,.38);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.contact-visibility input[type="radio"]{
  width: 18px; height: 18px;
  margin-top: 2px;
  justify-self: center;
}

.contact-visibility label.selected{
  border-color: rgba(234,139,26,.72);
  box-shadow: 0 0 0 4px rgba(234,139,26,.18), 0 12px 24px rgba(0,0,0,.10);
}

.contact-visibility .cv-content{ display:flex; flex-direction:column; gap: 3px; }
.contact-visibility .cv-title{
  font-weight: 900;
  font-size: 13px;
  color: var(--brown-8);
}
.contact-visibility .cv-desc{
  font-size: 12px;
  color: var(--muted);
}

/* =========================
   ACTIONS (sticky footer inside modal scroll)
========================= */
.actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,253,249,.92) 35%, rgba(255,253,249,.98));
  border: 1px solid var(--line-2);
  box-shadow: 0 -10px 26px rgba(0,0,0,.08);
  display:flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.actions .btn-primary{
  padding: 10px 14px;
  border-radius: 13px;
}

.note{
  color: var(--muted);
  font-size: 12px;
}

/* =========================
   HONEYPOT
========================= */
.hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* =========================
   AUTOCOMPLETE LIST
========================= */
.addr-suggest{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(40,25,10,.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow-md);
  list-style: none;
  z-index: 30;
}

.addr-suggest[hidden]{ display:none; }

.addr-suggest li{
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1.2;
  outline: none;
  border: 1px solid transparent;
}

.addr-suggest li:hover,
.addr-suggest li.active{
  background: rgba(255,239,215,.75);
  border-color: rgba(234,139,26,.30);
}

/* =========================
   LOCATION FIXED (PIN mode)
========================= */
/* LOST */
#modalLost .report-form.location-fixed .location-fields{ display:none !important; }
/* FOUND */
#modalFound .report-form.location-fixed .location-fields{ display:none !important; }

/* =========================
   PHOTO UPLOADER
========================= */
.photo-field .hint{
  display:block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.photo-uploader{
  position: relative;
  display: none;
  margin-top: 10px;
}
.photo-uploader.show{ display: inline-block; }

.photo-uploader img{
  display:block;
  max-width: 240px;
  border-radius: 14px;
  border: 1px solid rgba(40,25,10,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.photo-uploader .pu-actions{
  position:absolute;
  top: 8px;
  right: 8px;
  display:flex;
  gap: 8px;
}
.photo-uploader .btn-icon{
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
}

/* =========================
   CROPPER MODAL
========================= */
.modal-crop .modal-dialog{ width: min(1020px, 100%); }

.crop-wrap{ display:flex; flex-direction:column; gap: 10px; }
.crop-area{
  position: relative;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
#cropCanvas{
  display:block;
  width:100%;
  height:520px;
  background:#111;
  touch-action:none;
}

.crop-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.crop-toolbar .left,
.crop-toolbar .right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.crop-toolbar .label{
  font-size: 12px;
  color: var(--muted);
}

.crop-toolbar input[type="range"]{
  width: 190px;
}

/* =========================
   PLACING HINT (pin mode)
========================= */
#lost-map{ position: relative; }

.placing-hint{
  position:absolute !important;
  z-index: 12 !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  display:inline-flex;
  align-items:center;
  gap: 10px;

  width: max-content;
  max-width: min(760px, calc(100% - 24px));
  padding: 10px 14px;

  background: rgba(255,255,255,.92);
  color: var(--brown-8);
  border: 1px solid rgba(40,25,10,.12);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.placing-hint .ph-ic{
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 999px;
  background: var(--orange-5);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.10);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M11 17h2v-6h-2v6Zm1-8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 12 9Z"/></svg>') center/14px 14px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M11 17h2v-6h-2v6Zm1-8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 12 9Z"/></svg>') center/14px 14px no-repeat;
}

/* Popup img (zostawiamy kompatybilność) */
.popup img, .lost-popup .lp-img, .found-popup .fp-img{
  display:block;
  max-width: 240px;
  margin-top: 6px;
  border-radius: 12px;
}

/* =====================================================================
   ✅ SEARCH LOST MODAL: “Lokalizacja z pinezki” tylko gdy PIN + bardziej w lewo
===================================================================== */

/* twarde ukrywanie, nawet jeśli gdzieś globalnie nadpisano [hidden] */
#modalSearchLost .sl-pin-status[hidden]{
  display: none !important;
}

#modalSearchLost .sl-col--location{
  text-align: left;
}

/* ułóż label + status po lewej (nie na środku) */
#modalSearchLost .sl-label-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* wygląd “Lokalizacja z pinezki” (pill) */
#modalSearchLost .sl-pin-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,247,236,.95);
  border: 1px dashed rgba(234,139,26,.55);
  color: var(--brown-8);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

#modalSearchLost .sl-pin-status::before{
  content:"";
  width: 14px;
  height: 14px;
  background: var(--orange-5);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>') center/contain no-repeat;
}

/* =========================
   TAGS BUILDER (map-description.js)
   - jeden box do klikania i pisania
   - chipsy + input w środku
   - "+" pojawia się dopiero po 1 znaku i "lata" ~20px za ostatnią literą
   - chmurka czerwona "Max 4 słowa"
========================= */

.tags-builder .tb-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;

  padding: 8px 10px;
  border: 1px solid rgba(40,25,10,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.95);

  min-height: 46px;
  cursor: text;
}

.tags-builder .tb-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,239,215,.85);
  border: 1px solid rgba(234,139,26,.28);
  color: var(--brown-8);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.tags-builder .tb-chip-remove{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(40,25,10,.12);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}
.tags-builder .tb-chip-remove:hover{ filter: brightness(.98); }

.tags-builder .tb-entry{
  position: relative;
  display:inline-flex;
  align-items:center;

  flex: 1 1 220px;
  min-width: 180px;
}

/* input "wtopiony" w box
   Dajemy duży padding-right, żeby + nigdy nie zasłaniał wpisywanego tekstu */
.tags-builder .tb-input{
  flex: 1 1 auto;
  min-width: 120px;

  border: 0 !important;
  outline: none !important;
  background: transparent !important;

  padding: 6px 6px;
  padding-right: 64px; /* kluczowe: miejsce na + (żeby nie zasłaniał liter) */
  border-radius: 10px;

  font-size: 14px;
  color: var(--text);
}

.tags-builder .tb-input:focus{
  box-shadow: none;
}

/* "+" absolutnie, JS ustawia left */
.tags-builder .tb-add{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;

  border-radius: 10px !important;
  border: 1px solid rgba(40,25,10,.12) !important;

  background: rgba(255,239,215,.92) !important;
  color: var(--brown-8) !important;
  font-weight: 900 !important;

  box-shadow: none !important;
  margin: 0 !important;
}

/* ukrywanie + gdy input pusty */
.tags-builder .tb-add[hidden]{
  display: none !important;
}

.tags-builder .tb-add:hover{ filter: brightness(.98); }

/* chmurka czerwona */
.tags-builder .tb-tip{
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  display: none;
  padding: 6px 8px;
  border-radius: 10px;

  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;

  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  white-space: nowrap;
}

.tags-builder .tb-tip::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #dc2626;
  rotate: 45deg;
  border-radius: 2px;
}

.tags-builder .tb-tip.is-visible{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* textarea hidden */
.tags-builder .tb-hidden{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}