/* G Tech Customer Feedback — front-end form styles (site-matched) */

.gtf-wrap {
	--gtf-blue: #2563eb;          /* site bright blue */
	--gtf-teal: #0891b2;          /* site teal (gradient end) */
	--gtf-navy: #0a1e3f;          /* headline navy */
	--gtf-muted: #6b7280;
	--gtf-border: #d7dEE8;
	--gtf-vial-empty: #dbe4f0;    /* unfilled vial */
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: 8px;
	isolation: isolate;
}

/* Light blue aura behind the form */
.gtf-aura {
	position: absolute;
	z-index: -2;
	top: 50%;
	left: 50%;
	width: 115%;
	height: 115%;
	transform: translate(-50%, -50%);
	background: radial-gradient( ellipse at center, rgba(37, 99, 235, .18) 0%, rgba(8, 145, 178, .10) 42%, rgba(37, 99, 235, 0) 72% );
	filter: blur(8px);
	pointer-events: none;
}

/* Scattered floating vials */
.gtf-scatter {
	position: absolute;
	z-index: -1;
	width: 90px;
	height: auto;
	opacity: .5;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow( 0 8px 16px rgba(10, 30, 63, .12) );
	animation: gtf-bob 6s ease-in-out infinite;
}

.gtf-scatter--1 { top: -52px;  left: -64px;  width: 80px;  animation-delay: 0s;    transform: rotate(-12deg); }
.gtf-scatter--2 { top: 10px;   right: -74px; width: 116px; animation-delay: 1.2s;  transform: rotate(10deg); }
.gtf-scatter--3 { bottom: -44px; left: -44px; width: 68px; animation-delay: 2.1s;  transform: rotate(8deg); }
.gtf-scatter--4 { bottom: -60px; right: 20px;  width: 98px; animation-delay: .6s;   transform: rotate(-6deg); }

@keyframes gtf-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -12px; }
}

/* Form card */
.gtf-form {
	position: relative;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(215, 222, 232, .8);
	border-radius: 18px;
	padding: 30px 28px;
	box-shadow: 0 20px 50px -20px rgba(10, 30, 63, .22);
}

.gtf-field { margin-bottom: 22px; }

.gtf-label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: var(--gtf-navy);
	margin-bottom: 8px;
}

.gtf-optional { font-weight: 400; color: var(--gtf-muted); }

.gtf-form textarea,
.gtf-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--gtf-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--gtf-navy);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gtf-form textarea { resize: vertical; min-height: 84px; }

.gtf-form textarea:focus,
.gtf-form input[type="email"]:focus {
	outline: none;
	border-color: var(--gtf-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Vial rating */
.gtf-stars { display: inline-flex; gap: 6px; }

.gtf-star {
	background: none;
	border: none;
	padding: 3px;
	cursor: pointer;
	line-height: 0;
	border-radius: 8px;
}

.gtf-star svg {
	width: 30px;
	height: 30px;
	display: block;
	transition: transform .1s ease;
}

.gtf-star .gtf-vial-body,
.gtf-star .gtf-vial-cap {
	fill: var(--gtf-vial-empty);
	transition: fill .12s ease;
}

.gtf-star:hover svg { transform: translateY(-2px) scale(1.06); }

/* Filled vials use the site's blue→teal gradient (defined in JS-injected <defs>) */
.gtf-star.is-active .gtf-vial-body { fill: url(#gtf-grad); }
.gtf-star.is-active .gtf-vial-cap  { fill: var(--gtf-navy); }

.gtf-star:focus-visible {
	outline: 2px solid var(--gtf-blue);
	outline-offset: 2px;
}

/* Gradient submit button — matches site "Shop All" button */
.gtf-submit {
	background: linear-gradient( 135deg, var(--gtf-blue) 0%, var(--gtf-teal) 100% );
	color: #fff;
	border: none;
	border-radius: 40px;
	padding: 14px 34px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .55);
	transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

.gtf-submit:hover { filter: brightness(1.06); box-shadow: 0 14px 26px -8px rgba(37, 99, 235, .6); }
.gtf-submit:active { transform: translateY(1px); }
.gtf-submit:disabled { opacity: .6; cursor: default; }

.gtf-message { margin-top: 14px; font-size: 15px; min-height: 1.2em; }
.gtf-message.is-success { color: var(--gtf-teal); font-weight: 600; }
.gtf-message.is-error { color: #b91c1c; font-weight: 600; }

@media (max-width: 600px) {
	.gtf-scatter--1 { left: -14px; width: 60px; }
	.gtf-scatter--2 { right: -10px; width: 78px; }
	.gtf-scatter--3, .gtf-scatter--4 { display: none; }
	.gtf-form { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.gtf-scatter { animation: none; }
	.gtf-star svg, .gtf-submit { transition: none; }
}