/**
 * Standalone styles for the front-end "Spot something?" feedback bubble.
 *
 * Kept separate from vgt-bikes.css because the bubble renders on every
 * page (not just bike-context pages), and we don't want to ship the
 * full bike-archive stylesheet on, e.g., the homepage just to style
 * this widget.
 */

:root {
	--vgt-fb-accent:       #46C3E1;
	--vgt-fb-accent-hover: #2eaecf;
}

.vgt-feedback-bubble {
	position: fixed;
	right: 1.25em;
	bottom: 6em;
	z-index: 9998;
	font-family: inherit;
}
@media (max-width: 600px) {
	.vgt-feedback-bubble { bottom: 5.25em; }
}
.vgt-feedback-bubble__toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5em;
	background: var(--vgt-fb-accent) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0.65em 1.1em 0.65em 0.9em !important;
	border-radius: 999px !important;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(70,195,225,0.32), 0 2px 6px rgba(0,0,0,0.08) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vgt-feedback-bubble__toggle:hover {
	background: var(--vgt-fb-accent-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(70,195,225,0.4), 0 2px 6px rgba(0,0,0,0.08) !important;
	color: #fff !important;
}
.vgt-feedback-bubble__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: #fff;
	color: var(--vgt-fb-accent);
	font-weight: 700;
	font-style: italic;
	font-size: 0.92em;
}
.vgt-feedback-bubble__label { white-space: nowrap; }

.vgt-feedback-panel {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 0.75em;
	width: 360px;
	max-width: calc(100vw - 2.5em);
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 14px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06);
	padding: 1.1em 1.1em 0.9em;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.vgt-feedback-bubble.is-open .vgt-feedback-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.vgt-feedback-panel .vgt-feedback-panel__close,
button.vgt-feedback-panel__close {
	position: absolute !important;
	top: 0.5em !important;
	right: 0.5em !important;
	left: auto !important;
	width: 1.8em !important;
	height: 1.8em !important;
	min-width: 1.8em;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #888 !important;
	font-size: 1.4em !important;
	line-height: 1 !important;
	cursor: pointer;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	z-index: 2;
}
.vgt-feedback-panel .vgt-feedback-panel__close:hover,
button.vgt-feedback-panel__close:hover {
	background: #f4f4f4 !important;
	color: #222 !important;
}
.vgt-feedback-panel__title {
	margin: 0 0 0.25em;
	font-size: 1em;
	font-weight: 700;
	color: #222;
}
.vgt-feedback-panel__sub {
	margin: 0 0 1em;
	color: #666;
	font-size: 0.85em;
	line-height: 1.4;
}
.vgt-feedback-panel__field {
	display: block;
	margin-bottom: 0.75em;
	font-size: 0.85em;
	color: #444;
}
.vgt-feedback-panel__field > span {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 600;
	color: #333;
}
.vgt-feedback-panel__field small { color: #999; font-weight: 400; }
.vgt-feedback-panel__field input[type="text"],
.vgt-feedback-panel__field input[type="email"],
.vgt-feedback-panel__field textarea {
	width: 100%;
	padding: 0.5em 0.65em;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.92em;
	font-family: inherit;
	background: #fff;
	box-sizing: border-box;
}
.vgt-feedback-panel__field input[type="file"] { font-size: 0.85em; }
.vgt-feedback-panel__field textarea { resize: vertical; min-height: 80px; }
.vgt-feedback-panel__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.vgt-feedback-panel__actions {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-top: 0.25em;
}
.vgt-feedback-panel__submit {
	background: var(--vgt-fb-accent) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0.55em 1.4em !important;
	border-radius: 999px !important;
	font-weight: 700;
	font-size: 0.85em;
	cursor: pointer;
	text-transform: none;
	box-shadow: none !important;
}
.vgt-feedback-panel__submit:hover { background: var(--vgt-fb-accent-hover) !important; color: #fff !important; }
.vgt-feedback-panel__status { font-size: 0.85em; }

@media (max-width: 480px) {
	.vgt-feedback-bubble__label { display: none; }
	.vgt-feedback-bubble__toggle { padding: 0.65em !important; }
}