/* Obsługa klienta: formularz kontaktowy (/kontakt, na home.css), rozmowa pod kluczem (/wiadomosc, na landing.css
   i client.css) oraz widżet na stronie odbioru. Kolory z bezpiecznymi wartościami domyślnymi, bo arkusz jedzie
   na dwóch różnych zestawach tokenów. */

/* home.css nie ma reguły dla atrybutu hidden, a własne `display` by go nadpisało. */
[hidden]{display:none !important}

/* Na telefonie najpierw formularz, potem zasady — odwrotnie niż w kasie, gdzie najpierw widać, co się kupuje. */
@media(max-width:900px){.contact-layout .buy-summary{order:0}}

/* Pole-pułapka: poza ekranem, a nie display:none — część automatów pomija ukryte pola. */
.contact-trap{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

.buy-form textarea,.contact-widget textarea,#reply-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-strong,#cdd8c7); border-radius:9px; background:#fff;
  font:inherit; font-size:16px; line-height:1.6; color:inherit; resize:vertical; min-height:120px;
}
.buy-form textarea:focus,.contact-widget textarea:focus,#reply-form textarea:focus{outline:none; border-color:var(--brand,#77985c); box-shadow:0 0 0 3px rgba(24,160,90,.15)}

.contact-sent{display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line,#e1e6dc); border-left:3px solid var(--brand,#18A05A); border-radius:var(--radius,12px); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-sm,none)}
.contact-sent p{font-size:15px; color:var(--muted,#5D7067); line-height:1.65}
.contact-sent #sent-reference{font-variant-numeric:tabular-nums; color:var(--brand-dark,#0F7A43)}

.contact-rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.contact-rules li{display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.55; padding-left:14px; border-left:2px solid var(--line-strong,#CBDBD0)}
.contact-rules b{font-family:Manrope,system-ui,sans-serif; font-size:14.5px}
.contact-rules span{color:var(--muted,#5D7067)}
.contact-rules a,.summary-fine a{color:var(--brand-dark,#0F7A43); border-bottom:1px solid #A9D6BC}

/* Rozmowa */
.conversation{list-style:none; margin:26px 0 8px; padding:0; display:flex; flex-direction:column; gap:14px}
.conversation li{max-width:88%; border:1px solid var(--line,#e1e6dc); border-radius:12px; padding:14px 16px; background:#fcfdf9}
.conversation li.from-client{align-self:flex-end; background:#f2f5e9; border-bottom-right-radius:4px}
.conversation li.from-firma{align-self:flex-start; background:#fff; border-bottom-left-radius:4px}
.conversation .meta{display:block; font-size:11px; color:var(--muted,#6a7970); margin-bottom:6px; letter-spacing:.2px}
.conversation .body{margin:0; font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere}
.conversation .pending{font-style:italic; color:var(--muted,#6a7970)}
.conversation-empty{font-size:13px; color:var(--muted,#6a7970)}
#reply-form{border-top:1px solid var(--line,#e1e6dc); margin-top:22px; padding-top:6px}
#reply-form .button{width:100%; margin-top:14px}
.thread-status{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.3px; padding:5px 10px; border-radius:999px; background:#edf4e3; color:#335e28}

/* Widżet na stronie odbioru */
.contact-widget{border-top:1px solid var(--line,#e1e6dc); margin-top:28px; padding-top:22px}
.contact-widget h3{margin:0 0 6px; font-size:17px}
.contact-widget .consent{margin-top:14px}
.contact-widget .button{width:100%; margin-top:14px}
.contact-widget .contact-done{margin:12px 0 0; padding:14px; border-radius:8px; background:#edf4e3; font-size:13px; line-height:1.7}
.contact-widget .contact-done a{text-decoration:underline; text-underline-offset:3px}
.contact-widget .contact-error{margin:12px 0 0; color:#a33728; font-size:13px; line-height:1.6}

@media(max-width:600px){.conversation li{max-width:100%}}