/* SAR Feedback - Frontend-Widget */
:root{
	--sar-fb-navy:#1d3c5c;
	--sar-fb-navy-dark:#152e47;
	--sar-fb-accent:#2f7dc2;
	--sar-fb-line:#d9dee4;
	--sar-fb-text:#1f2933;
	--sar-fb-muted:#6b7682;
	--sar-fb-error:#b3261e;
}

/* Schwebender Button */
.sar-fb-launch{
	position:fixed; right:0; top:50%; transform:translateY(-50%);
	z-index:99990;
	display:flex; align-items:center; gap:.5em;
	background:var(--sar-fb-navy); color:#fff;
	border:0; cursor:pointer;
	padding:12px 14px; border-radius:8px 0 0 8px;
	font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	box-shadow:0 2px 10px rgba(0,0,0,.22);
	writing-mode:vertical-rl; text-orientation:mixed;
	transition:background .15s ease;
}
.sar-fb-launch:hover{ background:var(--sar-fb-navy-dark); }
.sar-fb-launch-icon{ writing-mode:horizontal-tb; display:inline-flex; }
.sar-fb-launch-text{ letter-spacing:.04em; }
@media (max-width:767px){
	/* Button seitlich (rechte Mitte) lassen, damit das Screenshot-Overlay
	   am unteren Bildrand ihn nicht verdeckt. */
	.sar-fb-launch{ padding:14px 12px; }
}

/* Modal */
.sar-fb-modal[hidden]{ display:none; }
.sar-fb-step[hidden]{ display:none; }
.sar-fb-error[hidden]{ display:none; }
.sar-fb-modal{
	position:fixed; inset:0; z-index:99999;
	display:flex; align-items:center; justify-content:center;
	font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	color:var(--sar-fb-text);
}
.sar-fb-backdrop{ position:absolute; inset:0; background:rgba(15,23,32,.55); }
.sar-fb-dialog{
	position:relative; background:#fff; width:calc(100vw - 24px);
	max-height:calc(100vh - 48px); overflow:auto;
	border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.35);
	padding:26px 26px 22px;
}
/* Desktop: 40% Breite (mobile-first, damit Handys die Standardbreite behalten) */
@media (min-width:768px){
	.sar-fb-dialog{ width:40%; }
}
.sar-fb-x{
	position:absolute; top:10px; right:12px;
	background:none; border:0; font-size:26px; line-height:1;
	color:var(--sar-fb-muted); cursor:pointer; padding:4px 8px;
}
.sar-fb-x:hover{ color:var(--sar-fb-text); }

.sar-fb-h{ margin:0 0 6px; font-size:20px; color:var(--sar-fb-navy); }
.sar-fb-lead{ margin:0 0 16px; color:var(--sar-fb-muted); }
.sar-fb-label{ display:block; font-weight:600; margin:14px 0 5px; }
.sar-fb-opt{ font-weight:400; color:var(--sar-fb-muted); }
.sar-fb-input{
	width:100%; box-sizing:border-box;
	border:1px solid var(--sar-fb-line); border-radius:8px;
	padding:10px 12px; font:inherit; color:inherit; background:#fff;
}
.sar-fb-input:focus{ outline:2px solid var(--sar-fb-accent); outline-offset:1px; border-color:var(--sar-fb-accent); }
.sar-fb-textarea{ resize:vertical; min-height:90px; }

.sar-fb-whoami{ margin:0 0 6px; color:var(--sar-fb-muted); }
.sar-fb-link{ background:none; border:0; padding:0 0 0 6px; color:var(--sar-fb-accent); cursor:pointer; text-decoration:underline; font:inherit; }

/* Drop / Paste */
.sar-fb-drop{
	border:2px dashed var(--sar-fb-line); border-radius:10px;
	padding:16px; text-align:center; color:var(--sar-fb-muted);
	background:#f7f9fb; transition:border-color .15s ease,background .15s ease;
}
.sar-fb-drop:focus,.sar-fb-drop.is-over{ outline:none; border-color:var(--sar-fb-accent); background:#eef5fc; }
.sar-fb-drop-text{ margin:0; }
.sar-fb-drop-or{ display:block; margin:6px 0; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.sar-fb-filebtn{
	display:inline-block; cursor:pointer; color:var(--sar-fb-navy);
	border:1px solid var(--sar-fb-navy); border-radius:8px; padding:6px 12px; font-weight:600;
}
.sar-fb-filebtn:hover{ background:var(--sar-fb-navy); color:#fff; }

/* "Screenshot erstellen": nur mobil sinnvoll, gefüllt mit weißer Schrift */
.sar-fb-shotbtn{ display:none; margin-left:8px; background:var(--sar-fb-navy); color:#fff; border-color:var(--sar-fb-navy); }
.sar-fb-shotbtn:hover{ background:var(--sar-fb-navy-dark); color:#fff; }
@media (max-width:767px){
	.sar-fb-shotbtn{ display:inline-block; margin-left:0; margin-top:8px; }
	/* Mobil: Strg+V-Tipp und die Windows-Screenshot-Erklärung ausblenden */
	.sar-fb-paste-tip{ display:none; }
	.sar-fb-help{ display:none; }
}

/* Grüne Hinweis-Box im oberen Drittel, mit OK-Button. Erscheint, wenn das
   Popup zum Screenshot geschlossen wird. Schließt sich nur per OK. */
.sar-fb-toast{
	position:fixed; left:50%; top:18%; transform:translateX(-50%);
	z-index:100000; max-width:88vw; width:340px; box-sizing:border-box;
	background:#1e7e45; color:#fff;
	padding:16px 18px; border-radius:12px; font-size:14px; line-height:1.5;
	box-shadow:0 8px 26px rgba(0,0,0,.32); text-align:center;
}
.sar-fb-toast p{ margin:0 0 13px; }
.sar-fb-toast-ok{
	background:#fff; color:#1e7e45; border:0; border-radius:8px;
	padding:9px 22px; font:600 14px/1 inherit; cursor:pointer;
}
.sar-fb-toast-ok:hover{ background:#eafaf0; }

/* Thumbnails */
.sar-fb-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sar-fb-thumb{ position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid var(--sar-fb-line); }
.sar-fb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sar-fb-thumb-x{
	position:absolute; top:2px; right:2px; width:20px; height:20px;
	border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff;
	font-size:14px; line-height:1; cursor:pointer; padding:0;
}

/* Hinweis: Popup schliessbar, Inhalt bleibt erhalten */
.sar-fb-hint{ margin:10px 0 0; padding:9px 12px; background:#eef5fc; border-left:3px solid var(--sar-fb-accent); border-radius:4px; color:var(--sar-fb-muted); font-size:12.5px; }

/* Hilfe */
.sar-fb-help{ margin:16px 0 4px; border-top:1px solid var(--sar-fb-line); padding-top:12px; }
.sar-fb-help summary{ cursor:pointer; color:var(--sar-fb-accent); font-weight:600; }
.sar-fb-help-body{ margin-top:8px; color:var(--sar-fb-muted); }
.sar-fb-help-body p{ margin:6px 0; }

/* Honeypot */
.sar-fb-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Buttons / Aktionen */
.sar-fb-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.sar-fb-btn{
	border:1px solid var(--sar-fb-line); background:#fff; color:var(--sar-fb-text);
	border-radius:8px; padding:11px 18px; font:600 14px/1 inherit; cursor:pointer;
}
.sar-fb-btn:hover{ background:#f1f4f7; }
.sar-fb-btn-primary{ background:var(--sar-fb-navy); border-color:var(--sar-fb-navy); color:#fff; }
.sar-fb-btn-primary:hover{ background:var(--sar-fb-navy-dark); }
.sar-fb-btn-primary[disabled]{ opacity:.65; cursor:default; }

.sar-fb-error{ color:var(--sar-fb-error); margin:12px 0 0; font-weight:600; }

/* Login: Abstand zwischen (evtl.) Fehlermeldung und Button */
.sar-fb-loginform .sar-fb-btn{ margin-top:18px; }

/* Footer: Hilfe-Hinweis bei Problemen mit dem Tool selbst */
.sar-fb-footer{ margin-top:18px; padding-top:14px; border-top:1px solid var(--sar-fb-line); color:var(--sar-fb-muted); font-size:12.5px; line-height:1.5; }
.sar-fb-footer a{ color:var(--sar-fb-accent); }

body.sar-fb-open{ overflow:hidden; }