/* ================================================================
   FRONT DESK WIDGET — EASY MANAGEMENT NOTES
   ================================================================
   Every class here is namespaced with the prefix "fdw-" (Front Desk
   Widget), so it will NOT clash with your theme's own styles or any
   other forms on your site, even if they use generic names like
   .field or #submitBtn.

   COLOR PALETTE — matched to your site's navy + coral brand colors.
   Change these 7 variables to reskin the whole widget:
     --fdw-ink        #0D2F65   Header bar, launcher button, headings
     --fdw-ink-soft   #163D80   Header inner accents (avatar circle)
     --fdw-brass      #E6504E   Buttons, links, focus outline, captcha
     --fdw-brass-soft #EF8482   Small accents (notification dot, icons)
     --fdw-paper      #EFF3F8   Page/panel background
     --fdw-card       #FFFFFF   Message bubble / info background
     --fdw-danger     #C23B3B   Error text and borders

   RESPONSIVE: the launcher and panel resize for small screens via
   the @media rules near the bottom — panel becomes near full-width
   under 480px viewports.
   ================================================================ */

.fdw-widget {
	--fdw-ink: #0D2F65;
	--fdw-ink-soft: #163D80;
	--fdw-brass: #E6504E;
	--fdw-brass-soft: #EF8482;
	--fdw-paper: #EFF3F8;
	--fdw-card: #FFFFFF;
	--fdw-ink-text: #1A2333;
	--fdw-muted: #586376;
	--fdw-line: #DCE3ED;
	--fdw-danger: #C23B3B;
	font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}
.fdw-widget * { box-sizing: border-box; }

/* ---------- launcher ---------- */
.fdw-widget .fdw-launcher {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--fdw-ink);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(13,47,101,0.35);
	transition: transform .18s ease, box-shadow .18s ease;
	z-index: 9999;
}
.fdw-widget .fdw-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,47,101,0.45); }
.fdw-widget .fdw-launcher svg { width: 26px; height: 26px; }

.fdw-widget .fdw-lamp {
	position: absolute;
	top: -3px; right: -3px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--fdw-brass-soft);
	box-shadow: 0 0 0 3px var(--fdw-paper);
}
.fdw-widget .fdw-lamp::after {
	content: '';
	position: absolute; inset: 0;
	border-radius: 50%;
	background: var(--fdw-brass-soft);
	animation: fdw-pulse 2.2s ease-out infinite;
}
@keyframes fdw-pulse {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fdw-widget .fdw-lamp::after { animation: none; }
}

/* ---------- panel ---------- */
.fdw-widget .fdw-panel {
	position: fixed;
	right: 24px;
	bottom: 92px;
	width: 360px;
	max-height: calc(100vh - 120px);
	background: var(--fdw-paper);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
	z-index: 9998;
	border: 1px solid var(--fdw-line);
	color: var(--fdw-ink-text);
}
.fdw-widget .fdw-panel.fdw-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.fdw-widget .fdw-panel-header {
	background: var(--fdw-ink);
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.fdw-widget .fdw-avatar-ring {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--fdw-ink-soft);
	border: 1px solid rgba(255,255,255,0.15);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.fdw-widget .fdw-avatar-ring svg { width: 20px; height: 20px; }
.fdw-widget .fdw-title { font-family: 'Georgia', 'Iowan Old Style', serif; font-size: 16.5px; line-height: 1.15; }
.fdw-widget .fdw-status {
	font-size: 12px;
	color: var(--fdw-brass-soft);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.fdw-widget .fdw-status .fdw-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: #7FBF8E;
}
.fdw-widget .fdw-close-btn {
	margin-left: auto;
	background: none; border: none; cursor: pointer;
	color: rgba(255,255,255,0.75);
	padding: 4px;
	display: flex;
}
.fdw-widget .fdw-close-btn:hover { color: #fff; }

.fdw-widget .fdw-form-area {
	padding: 20px 18px 6px;
	overflow-y: auto;
}
.fdw-widget .fdw-intro {
	font-size: 13.5px;
	color: var(--fdw-muted);
	line-height: 1.5;
	margin: 0 0 16px;
}

.fdw-widget .fdw-field { margin-bottom: 14px; }
.fdw-widget .fdw-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--fdw-ink);
	margin-bottom: 5px;
	letter-spacing: 0.01em;
}
.fdw-widget .fdw-field label .fdw-req {
	color: var(--fdw-brass);
	margin-left: 2px;
}
.fdw-widget .fdw-field input,
.fdw-widget .fdw-field textarea {
	width: 100%;
	border: 1px solid var(--fdw-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--fdw-ink-text);
	outline: none;
	transition: border-color .15s ease;
}
.fdw-widget .fdw-field input:focus,
.fdw-widget .fdw-field textarea:focus { border-color: var(--fdw-brass); }
.fdw-widget .fdw-field textarea { resize: vertical; min-height: 90px; }
.fdw-widget .fdw-error-msg {
	display: none;
	font-size: 11.5px;
	color: var(--fdw-danger);
	margin-top: 4px;
}
.fdw-widget .fdw-field.fdw-invalid input,
.fdw-widget .fdw-field.fdw-invalid textarea { border-color: var(--fdw-danger); }
.fdw-widget .fdw-field.fdw-invalid .fdw-error-msg { display: block; }

/* captcha row */
.fdw-widget .fdw-captcha-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.fdw-widget .fdw-captcha-question {
	background: var(--fdw-card);
	border: 1px solid var(--fdw-line);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: 'IBM Plex Mono', 'Courier New', monospace;
	font-size: 15px;
	font-weight: 600;
	color: var(--fdw-ink);
	white-space: nowrap;
}
.fdw-widget .fdw-captcha-row input { flex: 1; min-width: 0; }
.fdw-widget .fdw-refresh-captcha {
	background: none;
	border: 1px solid var(--fdw-line);
	border-radius: 8px;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fdw-muted);
	transition: border-color .15s ease, color .15s ease;
}
.fdw-widget .fdw-refresh-captcha:hover { border-color: var(--fdw-brass); color: var(--fdw-brass); }

.fdw-widget .fdw-submit-btn {
	width: 100%;
	border: none;
	border-radius: 10px;
	background: var(--fdw-ink);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	padding: 12px;
	cursor: pointer;
	transition: background .15s ease;
	margin-top: 4px;
	font-family: inherit;
}
.fdw-widget .fdw-submit-btn:hover { background: var(--fdw-ink-soft); }
.fdw-widget .fdw-submit-btn:disabled { background: var(--fdw-line); cursor: not-allowed; }
.fdw-widget .fdw-submit-btn:focus-visible,
.fdw-widget .fdw-close-btn:focus-visible,
.fdw-widget .fdw-launcher:focus-visible,
.fdw-widget .fdw-refresh-captcha:focus-visible { outline: 2px solid var(--fdw-brass); outline-offset: 2px; }

.fdw-widget .fdw-foot-note {
	text-align: center;
	font-size: 10.5px;
	color: var(--fdw-muted);
	padding: 10px 0 16px;
	font-family: 'IBM Plex Mono', monospace;
}
.fdw-widget .fdw-foot-note.fdw-note-error { color: var(--fdw-danger); }

/* ---------- confirmation state ---------- */
.fdw-widget .fdw-confirm-area {
	display: none;
	padding: 34px 26px;
	text-align: center;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.fdw-widget .fdw-confirm-area .fdw-check {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--fdw-card);
	border: 1px solid var(--fdw-brass-soft);
	display: flex; align-items: center; justify-content: center;
}
.fdw-widget .fdw-confirm-area h3 {
	margin: 0;
	font-family: 'Georgia', serif;
	font-size: 18px;
	color: var(--fdw-ink);
}
.fdw-widget .fdw-confirm-area p {
	margin: 0;
	font-size: 13.5px;
	color: var(--fdw-muted);
	line-height: 1.5;
}
.fdw-widget .fdw-confirm-area button {
	margin-top: 6px;
	background: none;
	border: 1px solid var(--fdw-line);
	color: var(--fdw-ink-soft);
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 12.5px;
	cursor: pointer;
	font-family: inherit;
}
.fdw-widget .fdw-confirm-area button:hover { border-color: var(--fdw-brass); color: var(--fdw-brass); }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
	.fdw-widget .fdw-panel {
		width: calc(100vw - 20px);
		right: 10px;
		left: 10px;
		max-height: 82vh;
		bottom: 84px;
	}
	.fdw-widget .fdw-launcher { right: 14px; bottom: 14px; width: 54px; height: 54px; }
	.fdw-widget .fdw-captcha-question { font-size: 13.5px; padding: 9px 10px; }
}
@media (max-width: 340px) {
	.fdw-widget .fdw-captcha-row { flex-wrap: wrap; }
	.fdw-widget .fdw-captcha-row input { width: 100%; }
}