/* contact-modal.css — the one contact/report dialog, shared by every page that has a footer. Moved out of review.css on 2026-08-20, when the footer gained a "napisz do nas" button: the same markup (templates/_contact_modal.html) now renders on review.html, settings.html AND auth_gate.html, so its styling cannot live in a page stylesheet. review.css keeps only what is specific to the review page (the .report-btn triggers, the tile-popup z-index layering the overlay has to clear). Selectors are UNPREFIXED (.modal, .modal-field, .consent-field…) because that is what the markup already used and what the shop form on the review page shares — renaming them would have touched two forms and their JS for nothing. Nothing else on any page uses `.modal-*`; the review page's delete dialog is `.rv-modal-*` and the onboarding overlay `.onb-*`. Tokens (--card, --line, --brand…) come from _ui_polish.html, which every consumer includes. Load order: AFTER the page stylesheet, so a page can still override. The overlay is a sibling of , not a child of any card: in the review page's tile view the open card is fixed at z-index 119, so the overlay MUST clear that whole layer (backdrop 118 / card 119 / close button 121) — hence 130. */ @keyframes cm-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .modal-overlay { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12,20,36,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: cm-fade .2s ease; } .modal-overlay[hidden] { display: none; } .modal { position: relative; width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px clamp(20px, 4vw, 30px) 22px; } .modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: 22px; line-height: 1; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .modal-close:hover { background: var(--line-soft); color: var(--ink); } .modal-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .modal-sub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .modal-context { margin: 0 0 18px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--brand-ghost); border: 1px solid var(--brand-line); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); } .modal-context[hidden] { display: none; } .modal-context .mc-kind { font-weight: 800; color: var(--brand-strong); } .modal-context .mc-ref { font-weight: 700; color: var(--ink); } .modal-field { display: block; margin-bottom: 14px; } .modal-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .modal-input, .modal-textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .modal-textarea { resize: vertical; min-height: 110px; } /* Required-field marker. The form is `novalidate` (the JS owns validation), so nothing else tells the client which field they cannot skip. aria-hidden — `aria-required` on the input is what a screen reader should hear, not a floating asterisk. */ .modal-label .req { margin-left: 3px; color: var(--err); font-weight: 800; } /* Adres strony + telefon stoją w jednym rzędzie, a na ciasnym ekranie wracają jeden pod drugi (`flex-wrap` + `flex-basis` na dziecku — nie grid, bo wtedy trzeba by drugiego media query). Pionowy odstęp zostaje na `.modal-field`, dlatego `gap` ma tylko oś poziomą. */ .field-pair { display: flex; flex-wrap: wrap; gap: 0 12px; } .field-pair > .modal-field { flex: 1 1 190px; min-width: 0; } .modal-input:focus, .modal-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); } /* Zgoda RODO we WSZYSTKICH formularzach kontaktowych (makro consent_field). Checkbox rysujemy sami (ten sam powód co przy .xrow-box: natywny box wygląda inaczej w każdej przeglądarce), a `.is-missing` — dokładane przez JS przy próbie wysyłki bez zgody — jest jedynym sygnałem, bo formularze są `novalidate` i nie pokażą własnego komunikatu przeglądarki. */ .consent-field { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; } .consent-box { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); background-repeat: no-repeat; background-position: center; background-size: 13px; } .consent-box:checked { background-color: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.2' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .consent-box:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .consent-text { font-size: 12px; line-height: 1.45; color: var(--muted); cursor: pointer; } .consent-text a { color: var(--brand-strong); font-weight: 700; text-decoration: underline; } .consent-text .req { margin-left: 2px; color: var(--err); font-weight: 800; } .consent-field.is-missing .consent-box { border-color: var(--err); background-color: var(--err-bg); } .consent-field.is-missing .consent-text { color: var(--err); } .modal-error { margin-top: 14px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--err-bg); border: 1px solid color-mix(in srgb, var(--err) 30%, var(--card)); color: var(--err); font-size: 13px; font-weight: 600; line-height: 1.45; } .modal-error[hidden] { display: none; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* Honeypot. Off-screen rather than display:none — a bot that skips hidden inputs would sail past the trap. Also used by the shop form on the review page. */ .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Fallback toast, created by contact-modal.js ONLY on a page that has no #toast of its own (auth_gate). review.css and settings.css each style their own `.toast` at a different height — the save bar moves settings' one up — so this must not restyle theirs, hence the extra class and the position living here rather than in a shared `.toast`. */ .cm-toast { bottom: 24px; z-index: 140; } .toast.cm-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; box-shadow: 0 12px 34px rgba(0,0,0,.3); } .toast.cm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }