/* ═══════════════════════════════════════════════════════════════════════
   Template: Take the Test (No Banner)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hidden GF fields (form #2) */
.page-template-template-take-the-test-no-banner {
	#input_2_9,
	#field_2_9,
	#field_2_10           { display: none; }
	#field_2_9 > label,
	#field_2_10 > label   { display: none; }
	#field_2_2 > div:nth-of-type(1) { display: none; }
}

@keyframes ttnb-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.5; transform: scale(0.75); }
}

/* page-main margin override */
.page-template-template-take-the-test-no-banner {
	#page-main {
		margin-top: 125px !important;

		@media(min-width: 1024px) {
			margin-top: 175px !important;
		}
	}
}

.page-template-template-take-the-test-no-banner {

	.ttnb-intro {
		background-color: #fff;

		h3 {
			margin-top: 1.5rem;
			font-size: 18px;
			font-weight: 700;
		}

		a {
			color: #559775;
			font-weight: 700;
		}

		p {
			font-size: 18px;
			line-height: 1.4;
			margin: 1rem 0 0 0;
		}

		.heading {
			span {
				display: none;

				@media(min-width: 767px) {
					display: inline-block;
				}
			}
		}

		.ttnb-intro-content {
      margin-top: 1rem;
			@media(min-width: 768px) {
				display: none;
			}
		}
	}

	.ttnb-section {
		background-color: #fff;
		padding: 16px;

		a {
			color: #559775;
			font-weight: 700;
		}

		.ttnb-inner {
			max-width: 700px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			overflow: visible;
			border-radius: 12px;
			box-shadow: 0 4px 32px rgba(16, 79, 53, 0.12);

			@media (min-width: 768px) {
				flex-direction: row;
				min-height: 560px;
				overflow: hidden;
			}

			.gfield--type-hidden {
				display: none;
			}

			/* ── Image column (desktop only) ── */
			.ttnb-image-col {
				display: none;

				@media (min-width: 768px) {
					display: block;
					position: relative;
					flex: 0 0 34%;
					overflow: hidden;
				}

				img.ttnb-bg-img {
					position: absolute;
					inset: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: 8%;
				}

				.ttnb-image-overlay {
					position: absolute;
					inset: 0;
					background: linear-gradient(180deg, rgba(16,79,53,0.18) 0%, rgba(16,79,53,0.82) 100%);
				}

				.ttnb-image-content {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 24px 24px 28px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 8px;

					.ttnb-logo {
						width: 64px;
						height: auto;
						display: block;
						filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
					}

					.ttnb-image-title {
						font-size: 18px;
						font-weight: 800;
						color: #fff;
						line-height: 1.25;
						margin: 0;
						text-shadow: 0 1px 4px rgba(0,0,0,0.35);
					}

					.ttnb-image-subtitle {
						font-size: 12px;
						font-weight: 500;
						color: rgba(255,255,255,0.88);
						margin: 0;
						line-height: 1.4;
						text-shadow: 0 1px 3px rgba(0,0,0,0.3);
					}
				}
			}

			/* ── Form column ── */
			.ttnb-form-col {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				overflow: visible;
				border-radius: 12px;
				padding: 24px;
				position: relative;
				isolation: isolate;
				background-image: url('https://www.patientclaimline.com/wp-content/uploads/2026/04/green-2.webp');
				background-size: cover;
				background-position: center;

				/* Screen overlay — lightens and tints the image green on mobile */
				&::before {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: 12px;
					background-color: #7ecba8;
					mix-blend-mode: screen;
					opacity: 0.25;
					z-index: 0;
					pointer-events: none;
				}

				/* Ensure all direct content sits above the screen layer */
				> * {
					position: relative;
					z-index: 1;
				}

				@media (min-width: 768px) {
					border-radius: 0;
					padding: 40px;
					background-image: none;
					background-color: #fff;
					isolation: auto;

					&::before {
						display: none;
					}

					> * {
						position: static;
						z-index: auto;
					}
				}

				/* Ticker */
				.ttnb-ticker {
					display: inline-flex;
					align-items: center;
					gap: 7px;
					background-color: #a2e4be;
					border-radius: 20px;
					padding: 5px 12px 5px 8px;
					width: fit-content;
					align-self: flex-start;
					margin-top: -38px;
					margin-bottom: 14px;

					@media (min-width: 768px) {
						margin-top: 0;
						margin-bottom: 16px;
					}

					.ttnb-ticker-dot {
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background-color: #559775;
						flex-shrink: 0;
						animation: ttnb-pulse 2s ease-in-out infinite;
					}

					.ttnb-ticker-text {
						font-size: 11px;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 0.06em;
						color: #104f35;
					}
				}

				/* Mobile header: heading + logo side-by-side */
				.ttnb-mobile-header {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					overflow: visible;
					margin-bottom: 4px;
					position: relative;

					@media (min-width: 768px) {
						display: block;
						margin-bottom: 0;
					}
				}

				.ttnb-heading {
					font-size: 0;
					font-weight: 800;
					color: #fff;
					line-height: 1.25;
					flex: 1;

					&::before {
						content: '10-Second Claim Checker';
						font-size: clamp(22px, 6vw, 30px);
						font-weight: inherit;
						line-height: inherit;
						color: inherit;
					}

					@media (min-width: 768px) {
						font-size: clamp(20px, 3vw, 23px);
						color: #104f35;
						flex: unset;

						&::before {
							display: none;
						}
					}
				}

				/* Logo visible on mobile, hidden on desktop */
				.ttnb-mobile-logo {
					display: block;
					width: 68px;
					height: auto;
					flex-shrink: 0;
					margin-left: 10px;
					position: absolute;
					right: -35px;
					top: -15px;
					filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));

					@media (min-width: 768px) {
						display: none;
					}
				}

				/* Subtitle visible on mobile, hidden on desktop */
				.ttnb-mobile-subtitle {
					display: block;
					color: rgba(255,255,255,0.75);
					font-size: 12px;
					font-weight: 400;
					margin: 0;
					line-height: 1.4;

					@media (min-width: 768px) {
						display: none;
					}
				}

				/* Long-form copy hidden on mobile, shown on desktop */
				.ttnb-subtext {
					display: none;

					@media (min-width: 768px) {
						display: block;
						font-size: 14px;
						color: #555;
						margin: 0;
						line-height: 1.5;
					}
				}

				/* ── Gravity Form overrides ── */
				.gform {
					@media (min-width: 768px) {
						margin-top: 15px;
					}
				}

				.gform_wrapper {
					margin: 0 !important;

					.form-fieldset {
						margin-top: 0;
						background-color: transparent !important;
						padding: 0 !important;
						border-radius: 0 !important;

						.form-fieldset-heading,
						.form-fieldset-heading2 {
							display: none !important;
						}
					}

					.gform_fields {
						padding: 0 !important;

						@media (min-width: 768px) {
							padding: 10px 20px !important;
						}
					}

					/* Title (30%) + full name (70%) inline — desktop only */
					#field_2_5,
					#field_2_6 {
						display: block !important;
						width: 100% !important;

						@media (min-width: 768px) {
							display: inline-flex !important;
							flex-direction: column !important;
							vertical-align: top !important;
							margin-bottom: 20px !important;
						}
					}

					#field_2_5 {
						padding-right: 0 !important;

						@media (min-width: 768px) {
							width: 30% !important;
							padding-right: 8px !important;
						}
					}

					#field_2_6 {
						@media (min-width: 768px) {
							width: 70% !important;
						}
					}

					/* Smaller custom arrow on title select */
					#field_2_5 select {
						appearance: none !important;
						-webkit-appearance: none !important;
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23559775' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
						background-repeat: no-repeat !important;
						background-position: right 10px center !important;
						background-size: 10px 6px !important;
						padding-right: 28px !important;
					}

					.gfield {
						margin-bottom: 20px !important;

						.gfield_label {
							font-size: 12px !important;
							font-weight: 600 !important;
							color: rgba(255,255,255,0.82) !important;
							margin-bottom: 4px !important;
							text-transform: uppercase !important;
							letter-spacing: 0.04em !important;

							@media (min-width: 768px) {
								color: #4b6455 !important;
							}

							.gfield_required {
								margin-left: 1px !important;
							}
						}

						input[type="text"],
						input[type="email"],
						input[type="tel"],
						select {
							width: 100% !important;
							max-width: 100% !important;
							height: 45px !important;
							border: 1.5px solid transparent !important;
							border-radius: 6px !important;
							padding: 0 11px !important;
							font-size: 13px !important;
							color: #222 !important;
							background-color: #fff !important;
							transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
							outline: none !important;

							@media (min-width: 768px) {
								border-color: #d6e5dd !important;
								background-color: #eeeeee !important;
							}

							&:focus {
								border-color: #559775 !important;
								box-shadow: 0 0 0 3px rgba(85,151,117,0.15) !important;
							}
						}

						textarea {
							width: 100% !important;
							max-width: 100% !important;
							border: 1.5px solid transparent !important;
							border-radius: 6px !important;
							padding: 11px !important;
							font-size: 13px !important;
							color: #222 !important;
							background-color: #fff !important;
							transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
							outline: none !important;

							@media (min-width: 768px) {
								border-color: #d6e5dd !important;
								background-color: #eeeeee !important;
							}

							&:focus {
								border-color: #559775 !important;
								box-shadow: 0 0 0 3px rgba(85,151,117,0.15) !important;
							}
						}

						.gfield_radio,
						.gfield_checkbox {
							display: flex !important;
							flex-wrap: wrap !important;
							gap: 6px !important;

							li {
								flex: 1 1 calc(50% - 3px) !important;
								min-width: 100px !important;

								label {
									display: flex !important;
									align-items: center !important;
									gap: 7px !important;
									border: 1.5px solid #d6e5dd !important;
									border-radius: 6px !important;
									padding: 8px 10px !important;
									cursor: pointer !important;
									font-size: 13px !important;
									font-weight: 500 !important;
									color: #333 !important;
									background-color: #eeeeee !important;
									transition: border-color 0.2s ease, background-color 0.2s ease !important;
									margin: 0 !important;
								}

								input[type="radio"]:checked + label,
								input[type="checkbox"]:checked + label {
									border-color: #559775 !important;
									background-color: #edf5f0 !important;
									color: #104f35 !important;
									font-weight: 600 !important;
								}
							}
						}
					}

					.gform_footer,
					.gform_page_footer {
						background-color: transparent !important;
						padding: 8px 0 0 !important;
						border-radius: 0 !important;
						margin-top: 6px !important;

						.gform_button,
						input[type="submit"],
						button[type="submit"] {
							background-color: #f05b27 !important;
							color: #fff !important;
							font-size: 16px !important;
							font-weight: 700 !important;
							border: none !important;
							border-radius: 6px !important;
							padding: 14px 32px !important;
							cursor: pointer !important;
							box-shadow: 0 4px 18px rgba(240, 91, 39, 0.35) !important;
							transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
							width: 100% !important;
							letter-spacing: 0.01em !important;

							&:hover {
								background-color: #d44d1f !important;
							}
						}
					}

					.form-note,
					.gform_description {
						display: none !important;
					}
				}

				.ttnb-disclaimer {
					font-size: 12px;
					color: rgba(255,255,255,0.65);
					line-height: 1.5;
					margin: 15px 0 0;

					@media (min-width: 768px) {
						color: #888;
					}

					a {
						color: rgba(255,255,255,0.88);
						text-decoration: underline;

						@media (min-width: 768px) {
							color: #559775;
						}
					}
				}
			}
		}

		@media(min-width: 1024px) {
			padding: 40px 16px;
		}
	}
}