/* Webnaa forum feedback card + dialog (webnaa-forum-feedback.php). Uses the forum theme's colours (forum.css). */

/* the card: starts folded into a small «+»; both sit right under the header, in the top corner on desktop (absolute with
   top:auto, so they keep their place in the flow without pushing the page down) and in the page flow on smaller
   screens. It is a yellow sticky note: tape on top,
   folded bottom corner (cut by the gradient, so the shadow is a drop-shadow that follows it), a slight tilt only while it
   floats. Text #3b2f08 / #5b4a12 on #fff4a8 = 13:1 / 7.9:1. Dark theme: the same note, dimmed. */
.wnf-fb { --note: #fff4a8; --note-fold: #e3c84f; --note-fold-2: #f4df7c; --note-ink: #3b2f08; --note-ink-2: #5b4a12;
	position: absolute; top: auto; margin-top: 16px; inset-inline-end: 16px; z-index: 30; width: 340px; display: flex; gap: 12px; align-items: flex-start;
	padding: 20px 16px 20px; color: var(--note-ink); border-radius: 6px; background: linear-gradient(-45deg, transparent 18px, var(--note) 18px);
	filter: drop-shadow(0 0 .6px rgba(110, 85, 0, .5)) drop-shadow(0 14px 16px rgba(60, 45, 0, .22)); transform: rotate(-1.2deg); }
[dir="rtl"] .wnf-fb { background: linear-gradient(45deg, transparent 18px, var(--note) 18px); }
.wnf-fb::before { content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 24px; transform: translateX(-50%) rotate(-2.5deg);
	background: rgba(255, 255, 255, .62); box-shadow: 0 1px 2px rgba(60, 45, 0, .12); }
.wnf-fb::after { content: ""; position: absolute; bottom: 0; inset-inline-end: 0; width: 26px; height: 26px; border-start-start-radius: 4px;
	background: linear-gradient(-45deg, transparent 50%, var(--note-fold) 50%, var(--note-fold-2)); }
[dir="rtl"] .wnf-fb::after { background: linear-gradient(45deg, transparent 50%, var(--note-fold) 50%, var(--note-fold-2)); }
@media (prefers-reduced-motion: no-preference) { .wnf-fb { transition: transform .2s; } }
.wnf-fb:hover, .wnf-fb:focus-within { transform: none; }
:root[data-theme="dark"] .wnf-fb { --note: #e9d67f; --note-fold: #b89f3c; --note-fold-2: #d3bf62; }
:root[data-theme="dark"] .wnf-fb::before { background: rgba(255, 255, 255, .35); }
.wnf-fb__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ffe066; color: #6b5200; }
:root[data-theme="dark"] .wnf-fb__ic { background: #d9c260; }
.wnf-fb__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wnf-fb__text b { font-size: 17px; line-height: 1.5; padding-inline-end: 34px; }
.wnf-fb__text p { margin: 0; color: var(--note-ink-2); font-size: 14.5px; line-height: 1.75; }
.wnf-fb__text .wnf-btn { margin-top: 6px; align-self: stretch; }
.wnf-fb__min { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(122, 92, 0, .3); background: rgba(255, 255, 255, .6); color: var(--note-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wnf-fb__min:hover { border-color: rgba(122, 92, 0, .55); background: #fff; }
.wnf-fb-plus { position: absolute; top: auto; margin-top: 16px; inset-inline-end: 16px; z-index: 30; width: 34px; height: 34px; border-radius: 6px; border: 0; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; background: #fff4a8; color: #3b2f08; font: 700 24px/1 system-ui, sans-serif; transform: rotate(-3deg);
	filter: drop-shadow(0 0 .6px rgba(110, 85, 0, .6)) drop-shadow(0 6px 8px rgba(60, 45, 0, .25)); }
.wnf-fb[hidden], .wnf-fb-plus[hidden] { display: none !important; }
.wnf-fb-plus:hover { background: #ffe066; }
:root[data-theme="dark"] .wnf-fb-plus { background: #e9d67f; }
.wnf-fb :focus-visible, .wnf-fb-plus:focus-visible, .wnf-fbm :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 1023px) {
	.wnf-fb { position: relative; top: auto; inset-inline-end: auto; width: auto; max-width: 1152px; margin: 22px auto 0; align-items: center; padding: 18px 16px; transform: none; }
	.wnf-fb__text { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
	.wnf-fb__text b { flex: 1 1 100%; }
	.wnf-fb__text p { flex: 1 1 260px; }
	.wnf-fb__text .wnf-btn { margin: 0; align-self: center; }
	.wnf-fb__min { top: 10px; }
	.wnf-fb-plus { position: relative; inset-inline-end: auto; margin: 14px 16px 0; margin-inline-start: auto; }
}
@media (max-width: 1200px) and (min-width: 641px) { .wnf-fb { margin-inline: 24px; } }
@media (max-width: 640px) {
	.wnf-fb { margin: 20px 16px 0; padding: 18px 14px; gap: 10px; align-items: flex-start; }
	.wnf-fb__ic { width: 38px; height: 38px; }
	.wnf-fb__text .wnf-btn { flex: 1 1 100%; }
}

/* the dialog (the forum's .wnf-modal, a bit wider) */
.wnf-fbm .wnf-modal__sheet { max-width: 600px; max-height: calc(100vh - 32px); overflow-y: auto; gap: 16px; }
/* the dialog is the same yellow sticky note as the card: tape on top and a folded bottom corner, both background layers
   so they stay in place while the note scrolls. Fields stay white. Dark theme: the same note, dimmed. */
.wnf-fbm .wnf-modal__sheet { --note: #fff4a8; --note-fold: #e3c84f; --note-fold-2: #f4df7c; --tape: rgba(255, 255, 255, .62);
	--surface: #fff; --surface-2: rgba(255, 255, 255, .55); --chip-bg: rgba(255, 255, 255, .55); --line: #dcc35a; --line-2: #cdb145;
	--text: #3b2f08; --text-2: #4a3c0c; --muted: #5b4a12; --link: #375a66; --focus: #446e7d;
	padding-top: 34px; border-radius: 6px; box-shadow: none; color: var(--text);
	filter: drop-shadow(0 0 .6px rgba(110, 85, 0, .5)) drop-shadow(0 22px 28px rgba(30, 22, 0, .35));
	background: linear-gradient(var(--tape), var(--tape)) 50% 0 / 130px 18px no-repeat,
		linear-gradient(-45deg, transparent 50%, var(--note-fold) 50%, var(--note-fold-2)) 100% 100% / 32px 32px no-repeat,
		linear-gradient(-45deg, transparent 22px, var(--note) 22px); }
[dir="rtl"] .wnf-fbm .wnf-modal__sheet { background: linear-gradient(var(--tape), var(--tape)) 50% 0 / 130px 18px no-repeat,
		linear-gradient(45deg, transparent 50%, var(--note-fold) 50%, var(--note-fold-2)) 0 100% / 32px 32px no-repeat,
		linear-gradient(45deg, transparent 22px, var(--note) 22px); }
:root[data-theme="dark"] .wnf-fbm .wnf-modal__sheet { --note: #e9d67f; --note-fold: #b89f3c; --note-fold-2: #d3bf62; --tape: rgba(255, 255, 255, .35); --surface: #fbf6dc; color-scheme: light; }
:root[data-theme="dark"] .wnf-fbm .wnf-fbm__in { background: #e3f4ea; color: #1f6b43; }
.wnf-fbm .wnf-modal__x { background: rgba(255, 255, 255, .6); }
.wnf-fbm .wnf-modal__x:hover { background: #fff; }
.wnf-fbm h3 { margin: 0; font-size: 19px; }
.wnf-fbm__about { margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--text-2); font-size: 15px; line-height: 1.7; }
.wnf-fbm__about b, .wnf-fbm__rpage b { color: var(--text); }
.wnf-fbm__sign { display: flex; flex-direction: column; gap: 12px; }
.wnf-fbm__sign p { margin: 0; line-height: 1.8; }
.wnf-fbm__form { display: flex; flex-direction: column; gap: 14px; }
.wnf-fbm__me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.wnf-fbm__me .wnf-av { flex: none; }
.wnf-fbm__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.wnf-fbm__who span { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; text-align: start; }
.wnf-fbm__in { padding: 3px 12px; border-radius: 999px; background: #e3f4ea; color: #1f6b43; font-size: 13px; font-weight: 600; }
:root[data-theme="dark"] .wnf-fbm__in { background: #17302a; color: #8fd3b4; }
.wnf-fbm__types { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wnf-fbm__types legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.wnf-fbm small { color: var(--muted); font-weight: 400; }
.wnf-fbm__types label { position: relative; cursor: pointer; }
.wnf-fbm__types input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wnf-fbm__types span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 500; }
.wnf-fbm__types input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.wnf-fbm__types input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.wnf-fbm .wnf-fbm__q { font-size: 15px; font-weight: 700; color: var(--text); }
.wnf-fbm__more { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; }
.wnf-fbm__more summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.wnf-fbm__phone { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 14px; }
@media (max-width: 520px) { .wnf-fbm__phone { grid-template-columns: 1fr; } }
.wnf-fbm__tel { display: flex; align-items: stretch; }
.wnf-fbm__tel > span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-2); border-inline-end: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: 15px; }
.wnf-fbm__tel input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.wnf-fbm__send { min-height: 52px; font-size: 17px; }
.wnf-fbm__note { margin: -4px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.wnf-fbm__done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.wnf-fbm__done > p { margin: 0; color: var(--text-2); }
.wnf-fbm__ok { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e3f4ea; color: #1f6b43; font-size: 28px; font-weight: 700; }
.wnf-fbm__receipt { align-self: stretch; text-align: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-2); }
.wnf-fbm__rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wnf-fbm__rhead .wnf-muted { margin-inline-start: auto; font-size: 13px; }
.wnf-fbm__rpage { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.wnf-fbm__rtext { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
@media (max-width: 640px) { .wnf-fbm .wnf-modal__sheet { max-height: 92vh; } }

/* «+» follows the visitor (2026-10-30, feedback.js puts the «+» and the card into .wnf-fb-dock). The dock is sticky, full
   width and lets clicks through: the «+» starts where it was under the header, then stays 12px under the sticky header (or
   the top of the screen) while the page scrolls (feedback.js sets the dock's top); the «+» keeps its normal look and place (owner, 2026-10-30: no slim tab at the screen edge on phones).
   .is-away hides it while someone types in a field. The card opens where the «+» is, over the page, at any scroll position. z-index 19:
   under the header (20) and its menus. */
.wnf-fb-dock { position: sticky; top: 0; z-index: 19; height: 0; pointer-events: none; }
.wnf-fb-dock > * { pointer-events: auto; }
.wnf-fb-dock .wnf-fb, .wnf-fb-dock .wnf-fb-plus { position: absolute; top: 16px; inset-inline-end: 16px; margin: 0; }
.wnf-fb-dock .wnf-fb { width: min(340px, calc(100vw - 32px)); max-width: none; }
.wnf-fb-dock.is-away { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.wnf-fb-dock { transition: opacity .2s, visibility .2s; }
	.wnf-fb-dock .wnf-fb-plus { transition: inset-inline-end .2s, width .2s, height .2s, transform .2s; }
}
@media (max-width: 1023px) {
	.wnf-fb-dock { height: 48px; }
	.wnf-fb-dock .wnf-fb, .wnf-fb-dock .wnf-fb-plus { top: 14px; }
	.wnf-fb-dock .wnf-fb { align-items: flex-start; padding: 20px 16px; }
	.wnf-fb-dock .wnf-fb__text { flex-direction: column; gap: 6px; }
	.wnf-fb-dock .wnf-fb__text b, .wnf-fb-dock .wnf-fb__text p { flex: none; }
	.wnf-fb-dock .wnf-fb__text .wnf-btn { flex: none; margin-top: 6px; align-self: stretch; }
}
@media (max-width: 640px) { .wnf-fb-dock .wnf-fb { padding: 18px 14px; } }
@media print { .wnf-fb, .wnf-fb-plus, .wnf-fbm, .wnf-fb-dock { display: none !important; } }

/* visitors (2026-10-31): optional name and email, joined to the mobile box below them */
.wnf-fbm__guest { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.wnf-fbm__guest-h { margin: 0; font-weight: 700; }
.wnf-fbm__guest-p { margin: -6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.wnf-fbm__guest small, .wnf-fbm__more small { font-weight: 500; color: var(--muted); }
.wnf-fbm__more.is-guest { margin-top: -14px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.wnf-fbm__more.is-guest summary { list-style: none; pointer-events: none; padding-bottom: 8px; }
.wnf-fbm__more.is-guest summary::-webkit-details-marker { display: none; }
.wnf-fbm__link { all: unset; cursor: pointer; color: var(--link); font-weight: 700; text-decoration: underline; }