html {
	scroll-behavior: smooth;
}

body {
	@media(max-width: 1024px) {
		padding: 0 !important;
	}
}

/* Colour Classes */
.green-bg {
	background-color: #104f35;
}

.white-bg {
	background-color: #fff;
}

.text-dark-grey {
	color: #333333;
}

.text-light-green {
	color: #559775;
}

/* Width */

.max-w-lg {
	max-width: 1400px;
	padding: 0 1rem;
	margin: 0 auto;
}

.max-w-md {
	max-width: 1024px;
	padding: 0 1rem;
	margin: 0 auto;
}

.max-w-sm {
	max-width: 768px;
	padding: 0 1rem;
	margin: 0 auto;
}

/* Utilities */

.medneg-row {
	display: flex;
	flex-direction: column;

	@media(min-width: 1024px) {
		flex-direction: row;
	}
}

.medneg-col {
	&.w-50 {
		@media(min-width: 1024px) {
			width: 50%;
		}
	}
}

.medneg-items-center {
	align-items: center;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.bordered-green {
	border-top: 1px solid #104f35;
	border-bottom: 1px solid #104f35;
	padding: 4rem 0;
	margin: 0 1rem;

	@media(min-width: 1024px) {
		margin: auto;
	}
}

/* Buttons */
.medneg-btn {
	display: block;
	background-color: #f05b27;
	color: white;
	transition: .3s ease-in-out all;
	border-radius: 5px;
	font-weight: 700;
	width: 100%;
	padding: 10px;
	text-align: center;
	max-width: 300px;
	margin: 0 auto;

	&:hover {
		background-color: #d94e1f;
		transition: .3s ease-in-out all;
	}
}

.medneg-btn-green {
	background-color: #104f35 !important;

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

.medneg-free-advice-btn {
	display: inline-block;
	background-color: #f5f5f5;
	color: #333;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px 20px;
	text-align: center;
	transition: .3s ease-in-out all;

	&:hover {
		background-color: #e8e8e8;
		transition: .3s ease-in-out all;
	}

	strong {
		font-weight: 700;
	}
}

/* Global */

/* Accordion Styles */
.medneg-accordion {
	margin: 2rem 0;
	.pcl-accordion {
		border-radius: 8px;
		background: #f8faf9;
		margin-bottom: 1rem;
		box-shadow: 0 2px 8px rgba(16,79,53,0.06);
		border: 1px solid #e0e7e3;
		overflow: hidden;
		transition: box-shadow 0.2s;
	}
	.pcl-accordion[open] {
		box-shadow: 0 4px 16px rgba(16,79,53,0.10);
		background: #fff;

		.pcl-accordion__chev {
			transform: scale(-1);
		}
	}
	.pcl-accordion__summary {
		cursor: pointer;
		padding: 1.25rem 1.5rem;
		font-weight: 600;
		color: #104f35;
		background: none;
		outline: none;
		display: flex;
		align-items: center;
		font-size: 1.1rem;
		border: none;
		transition: background 0.2s;
	}
	.pcl-accordion__summary:hover {
		background: #e6f2ed;
	}
	.pcl-accordion__title {
		flex: 1;
	}
	.pcl-accordion__chev {
		margin-left: 1rem;
		display: flex;
		align-items: center;
	}
	.pcl-accordion__panel {
		padding: 1.25rem 1.5rem 1.5rem 1.5rem;
		color: #333;
		background: #fff;
		border-top: 1px solid #e0e7e3;
		font-size: 1rem;

		ul, p {
			margin-bottom: 1rem;
		}
		
	}
}

/* Sections */

.page-template-template-medical-negligence {

	header {
		margin-top: auto !important;
	}

	.medneg {
		padding-top: 100px;
		padding-bottom: 80px;

		@media(min-width: 768px) {
			padding-top: 120px;
		}

		@media(min-width: 1024px) {
			padding-top: 175px;
			padding-bottom: 0;
		}
	}

	.medneg-banner {
		padding: 4rem 0 2rem 0;

		@media(min-width: 1024px) {
			padding: 4rem 0;
		}

		.medneg-banner-intro-container {
			padding-bottom: 2rem;
			.medneg-banner-intro {
				.banner-title {
					font-size: 2rem;
					margin-bottom: 1rem;
					text-align: center;

					@media(min-width: 1024px) {
						font-size: 2.5rem;
						text-align: left;
					}
				}
				.banner-subtitle {
					font-size: 1.2rem;
					text-align: center;

					@media(min-width: 1024px) {
						text-align: left;
						font-size: 1.5rem;
					}
				}
			}
			.medneg-banner-image {
				padding: 2rem;

				&.medneg-banner-image-mobile-only {
					display: block;
					padding: 2rem .5rem;

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

				&.medneg-banner-image-desktop-only {
					display: none;
					@media(min-width: 1024px) {
						display: block;
					}
				}
			}
			.medneg-banner-checks {
				margin: 1rem 0 2rem 0;

				&.medneg-row {
					flex-direction: row;
				}

				.medneg-banner-check {
					&.medneg-row {
						flex-direction: row;
					}
					&:first-child::after {
						content: '';
						display:block;
						height: 25px;
						width: 1px;
						background-color: #fff;
						margin-left: 1.5rem;
						margin-right: 1rem;
					}
					.medneg-banner-check-tick {
						height: 30px;
						width: 30px;

						@media(min-width: 1024px) {
							height: 50px;
							width: 50px;
						}
					}
					.medneg-banner-check-text {
						font-size: 1rem;

						@media(min-width: 1024px) {
							font-size: 1.2rem;
						}
					}
				}
			}
		}
		.medneg-claim-buttons {
			.medneg-btn {
				margin: 0 auto;
				width: 100%;
				max-width: none;

				&:last-child {
					margin-top: 1rem;
				}

				@media(min-width: 1024px) {
					margin-left: 0;
					max-width: 300px;

					&:last-child {
						margin-top: 0;
					}
				}
			}
			img {
				margin-top: 1rem;

				@media(min-width: 1024px) {
					margin-top: 0;
					margin-left: .5rem;
				}
			}
		}
	}

	.medneg-medical-negligence-claims {
		padding: 4rem 0;
		.medneg-medical-negligence-claims-intro {
			.medneg-medical-negligence-claims-intro-title {
				margin-bottom: 1.5rem;
				text-align: left;

				@media(min-width: 1024px) {
					text-align: center;
				}
			}

			.medneg-medical-negligence-claims-intro-subtitle {
				font-size: 1.1rem;
				text-align: left;

				@media(min-width: 1024px) {
					text-align: center;
				}
			}
		}

		.medneg-medical-negligence-claims-slider {
			position: relative;
			padding: 2rem .5rem;
			overflow-x: hidden;

			.medneg-medical-negligence-claims-slider-title {
				margin-bottom: 2rem;
				text-align: left !important;

				@media(min-width: 1024px) {
					text-align: center !important;
				}
			}

			.swiper-wrapper {
				.swiper-slide {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: auto;
					padding: 2rem 1rem;
					width: 100%;
					box-sizing: border-box;
					box-shadow: 0 2px 8px rgba(0,0,0,0.08);
					border-radius: 10px;

					.medneg-medical-negligence-claims-card-title {
						width: 100%;
						margin-bottom: 1rem;
					}

					.medneg-medical-negligence-claims-card-content {
						font-size: 1rem;
					}

					&.swiper-slide-active {
						padding-left: 3rem;
					}

					&.swiper-slide-next {
						padding-right: 3rem;
					}
				}
			}

			.claims-swiper-next,
			.claims-swiper-prev {
				position: absolute;
				top: 60%;
				transform: translateY(-50%);
				z-index: 10;
				background-color: #fff;

				img {
					height: 25px;
					width: 25px;
					object-fit: contain;
				}
			}

			.claims-swiper-prev {
				left: 15px;
			}

			.claims-swiper-next {
				margin-top: -12px;
				right: 15px;
				transform: scale(-1);
			}
		}
	}

	.medneg-customer-reviews {

		.medneg-customer-reviews-title {
			margin-bottom: 2rem;
		}
	}

	.medneg-compensation-overview {
		padding: 0;

		.max-w-md {
			border-top: 1px solid #559775;
			border-bottom: 1px solid #559775;
			padding-top: 4rem;
			padding-bottom: 3rem;
		}

		.medneg-compensation-amounts {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			margin-bottom: 0.75rem;

			.medneg-compensation-amount-item {
				flex: 1 1 calc(50% - 0.5rem);
				padding: 1.25rem 1.5rem;
				background-color: #f5f5f5;
				border-radius: 10px;
				text-align: left;

				@media(min-width: 768px) {
					flex: 1;
				}

				.medneg-compensation-amount-label {
					font-size: 0.8rem;
					font-weight: 400;
					color: #555;
					margin-bottom: 0.5rem;
				}

				.medneg-compensation-amount-value {
					font-size: 1.15rem;
					font-weight: 700;
				}
			}
		}

		.medneg-compensation-disclaimer {
			font-size: 0.8rem;
			color: #666;
			margin-top: 2rem;
			margin-bottom: 1.5rem;
		}

		.medneg-compensation-actions {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 1rem;
			padding-bottom: 2rem;
			max-width: 600px;
			margin: 0 auto;

			@media(min-width: 768px) {
				flex-direction: row;
				align-items: center;
			}

			.medneg-btn,
			.medneg-free-advice-btn {
				margin: 0;
				max-width: none;
				width: 100%;
				flex: 1;
			}
		}
	}

	.medneg-claims-and-form {
		padding: 4rem 0;

		.medneg-claims-form-inner {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			align-items: flex-start;

			@media(min-width: 1024px) {
				flex-direction: row;
			}
		}

		.medneg-process-col {
			flex: 1;
			width: 100%;

			.medneg-claims-process-intro {
				margin-bottom: 2rem;
			}
		}

		.medneg-form-col {
			width: 100%;
			text-align: center;

			@media(min-width: 1024px) {
				width: 420px;
				flex-shrink: 0;
			}

			.medneg-form-inner {
				border-radius: 12px;
				padding: 2rem;
			}
		}
	}

	.medneg-about-medical-negligence {
		padding: 4rem 0;

		.medneg-about-medical-negligence-title {
			padding-bottom: 4rem;
			border-bottom: 2px solid #fff;
		}

		.about-medical-negligence-slider {
			position: relative;
			margin-top: 2rem;
			overflow-x: hidden;

			.swiper-slide {
				height: auto;
				border-radius: 15px;
				box-shadow: 0 2px 12px rgba(16, 79, 53, 0.08);

				.slide-title {
					margin: 2rem 1rem 1rem 1rem;
				}

				.slide-content {
					font-size: 1rem;
					width: 90%;
					margin: 0 auto;
					padding-bottom: 2rem;
				}
			}

			.med-neg-swiper-pagination {
				text-align: center;
				margin-top: 2rem;

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

				.swiper-pagination-bullet {
					width: 30px;
					height: 16px;
					border-radius: 7px;
					background: #559775;
					border: 2px solid white;
					opacity: 1;
					margin: 0 5px;
					transition: all 0.3s;
				}

				.swiper-pagination-bullet-active {
					background: white;
					border: 2px solid #559775;
					width: 50px;
					height: 16px;
					border-radius: 7px;
				}
			}
		}

		.about-medical-negligence-bottom-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			margin-top: 4rem;

			.about-medical-negligence-bottom-content-text {
				font-weight: 700;
				font-size: 1.2rem;
				margin-bottom: 2rem;
			}

			.about-medical-negligence-bottom-buttons {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 1rem;
				padding-bottom: 2rem;
				width: 100%;
				max-width: 600px;
				margin: 0 auto;

				@media(min-width: 768px) {
					flex-direction: row;
					align-items: center;
				}

				.medneg-btn,
				.medneg-free-advice-btn {
					margin: 0;
					max-width: none;
					width: 100%;
					flex: 1;
				}
			}

			.trustpilot-logo {
				margin: 1rem auto 0 auto;
			}
		}
	}

	.medneg-videos {
		padding: 4rem 0;

		.medneg-videos-title {
			font-weight: 700;
			margin-bottom: 4rem;
			font-size: 1.5rem;
		}

		.video-container {
			position: relative;
			cursor: pointer;
			display: inline-block;
			width: 100%;
			margin-bottom: 1rem;
		}

		.video-cover {
			width: 100%;
			height: 300px;
			display: block;
			border-radius: 15px 15px 0 0;
			object-fit: cover;
		}

		.play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(16, 79, 53, 0.8); /* Green with transparency */
			border-radius: 50%;
			width: 80px;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background-color 0.3s;
		}

		.play-button:hover {
			background-color: rgba(16, 79, 53, 1);
		}

		.play-button svg {
			width: 30px;
			height: 30px;
			fill: white;
		}

		/* Lightbox Styles */
		.video-lightbox {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
		}

		.lightbox-content {
			position: relative;
			margin: auto;
			top: 50%;
			transform: translateY(-50%);
			width: 80%;
			max-width: 800px;
		}

		.lightbox-content iframe {
			width: 100%;
			height: 450px;
		}

		.close-lightbox {
			position: absolute;
			top: -27px;
			right: -27px;
			cursor: pointer;
			height: 30px;
			width: 30px;
		}

		.medneg-videos-slider {
			overflow-x: hidden;
			.swiper-slide {
				height: auto;
				background-color: #559775;
				border-radius: 15px;
				text-align: left;

				.video-content {
					padding: 1rem 2rem 2rem 2rem;
				}

				.video-content-title {
					font-weight: 700;
					font-size: 1.2rem;
				}

				.video-content-text {
					font-weight: 400;
					font-size: 1rem;
				}

				.medneg-btn {
					margin: 2rem 0 0 0;
					width: auto;
					cursor: pointer;

					@media(min-width: 1024px) {
						width: 100%;
					}
				}
			}

			.videos-swiper-pagination {
				text-align: center;
				margin-top: 2rem;

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

				.swiper-pagination-bullet {
					width: 30px;
					height: 16px;
					border-radius: 7px;
					background: #559775;
					border: 2px solid white;
					opacity: 1;
					margin: 0 5px;
					transition: all 0.3s;
				}

				.swiper-pagination-bullet-active {
					background: white;
					border: 2px solid #559775;
					width: 50px;
					height: 16px;
					border-radius: 7px;
				}
			}
		}
	}

	.medneg-about-your-compensation {
		padding: 4rem 0;

		figure {
			margin-bottom: 2rem;
		}

		.medneg-col {
			padding: 0 0 2rem 0;

			@media(min-width: 1024px) {
				padding: 0 2rem;
			}
		}

		.medneg-accordion {
			margin: 0;
		}

		.medneg-about-your-compensation-title {
			margin-bottom: 2rem;
		}

		.medneg-about-compensation-bottom-content {
			margin-top: 0;

			@media(min-width: 1024px) {
				margin-top: 4rem;
			}

			.medneg-about-compensation-bottom-content-title {
				font-size: 1.2rem;
				font-weight: 700;
				margin: 0 1rem 1rem 1rem;
			}
			
			.medneg-about-compensation-bottom-content-buttons {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					margin: 1rem auto 0 auto;
				}
			}
		}
	}

	.medneg-medical-negligence-claims-faqs {
		padding: 4rem 0;

		.max-w-lg {
			margin: 0 1rem;
			border-bottom: 1px solid #333;

			@media(min-width: 1024px) {
				margin: 0 auto;
			}
		}

		.medneg-medical-negligence-claims-faqs-title {
			padding-bottom: 2rem;

			@media(min-width: 1024px) {
				padding-bottom: 4rem;
			}
		}

		.medneg-accordion {
			margin-top: 4rem;
		}

		.medneg-medical-negligence-claims-faqs-bottom-content {
			margin-top: 2rem;

			@media(min-width: 1024px) {
				margin-top: 4rem;
			}

			.about-medical-negligence-bottom-content-text {
				font-size: 1.2rem;
				font-weight: 700;
				margin-bottom: 1rem;
			}
			
			img {
				margin: 1rem auto 0 auto;
			}
			
		}
	}

	.medneg-mobile-sticky-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #4d976c;
		padding: 0.75rem 1rem;
		gap: 0.75rem;

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

		.medneg-mobile-sticky-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.75rem 1rem;
			border-radius: 8px;
			font-weight: 700;
			font-size: 1rem;
			text-align: center;

			&.btn-call {
				background-color: #f05b27;
				color: #fff;

				&:hover {
					background-color: #d94e1f;
				}
			}

			&.btn-eligibility {
				background-color: transparent;
				color: #fff;
				border: 2px solid #fff;

				&:hover {
					background-color: rgba(255,255,255,0.1);
				}
			}
		}
	}

	.medneg-form-col {

		.medneg-start-your-claim-title {
			font-size: 1.5rem;
			font-weight: 700;
			margin-bottom: 1rem;
		}

		.gform {

			input,
			textarea {
				max-width: none !important;
				transition: box-shadow .3s ease-in-out;

				&:focus {
					box-shadow: 0 0 10px rgba(85, 151, 117, 0.8);
					outline: none;
				}
			}

			.gfield {
				margin-bottom: 1.5rem;
			}

			.gfield_label {
				text-align: left !important;
			}

			&.form--flush {
				max-width: none !important;
			}

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

			.form-fieldset {
				background-color: transparent !important;
				margin: 0 !important;
				padding: 0 !important;
			}

			.form-note {
				text-align: left !important;
			}

			.gform_button {
				display: block;
				background-color: #f05b27;
				color: white;
				transition: .3s ease-in-out all;
				border-radius: 5px;
				font-weight: 700;
				width: 100%;
				padding: 10px;
				text-align: center;
				max-width: 300px !important;
				margin: 0 auto;

				&:hover {
					background-color: #d94e1f;
					transition: .3s ease-in-out all;
				}
			}
		}
	}
}