/* ================================================
Component: Membership Applications
Path: components/flexible/membership_applications/style.css
================================================ */
:is(body, .is-preview) {
	.membership-applications__title {
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		color: var(--color-white);
		background-color: var(--color-kale);
		padding: 15px var(--gap-lg);
		border-radius: 8px 8px 0 0;
		text-align: center;
		letter-spacing: 0.15px;
	}
	.membership-applications {
		.container {
			display: flex;
			flex-wrap: wrap;
		}
	}
	.membership-applications__inner {
		display: flex;
		flex-direction:column;
		gap: var(--gap-2xl);

		@media (max-width: 1200px) {
			width: 100% !important;
		}
	}
	.membership-applications__main,
	.membership-applications__sidebar {
		width:100%;
	}
	.membership-applications__tab-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		border-radius: 0 0 8px 8px;
		background: var(--grass-25, #DBEFD2);
		padding: 12px;

		@media screen and (max-width: 768px) {
			flex-direction: column;
			gap: 0;
			padding: 12px;
		}
	}
	.membership-applications__tab-btn {
		background: none;
		border: none;
		padding: var(--gap-sm);
		font-family: var(--font-primary);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.8px;
		text-transform: uppercase;
		color: var(--color-kale);
		cursor: pointer;
		transition: background-color var(--transition-fast), color var(--transition-fast);
		border-radius: var(--radius-sm);
		width: calc((100% / 3) - 20px);

		@media screen and (max-width: 768px) {
			width: 100%;
			border-radius: 8px;
			margin-bottom: 12px;
			font-size: 14px;
			text-align: center;
		}
		&:last-of-type {
			@media screen and (max-width: 768px) {
				margin-bottom: 0;
			}
		}
	}
	.membership-applications__tab-btn:hover {
		color: var(--color-kale);
		background-color: rgb(36 69 23 / 40%);
	}
	.membership-applications__tab-btn--active {
		color: var(--color-white);
		background-color: var(--color-kale);
	}
	.membership-applications__tab-btn--active:hover {
		color: var(--color-white);
		background-color: var(--color-kale);
	}
	.membership-applications__tab-panel[hidden] {
		display: none;
	}
	.membership-applications__tabs {
		background-color: var(--color-white);
		border-radius: 0 0 8px 8px;
	}
	.membership-applications__tab-panel {
		padding: 40px;

		@media screen and (max-width: 768px) {
			padding: 30px 40px 40px;
		}
		@media screen and (max-width: 650px) {
			padding: 16px 15px 30px;
		}
	}
	.membership-applications__tab-content {
		font-family: var(--font-secondary);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		color: var(--color-text-body);
	}
	.membership-applications__tab-content p {
		margin-bottom: var(--gap-md);
	}
	.membership-applications__tab-content h3,
	.membership-applications__tab-content h4 {
		font-family: var(--font-primary);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-dark);
		margin-bottom: var(--gap-sm);
		margin-top: var(--gap-lg);
	}
	.membership-applications__tab-content ul,
	.membership-applications__tab-content ol {
		list-style: disc;
		padding-left: var(--gap-lg);
		margin-bottom: var(--gap-md);
	}
	.membership-applications__tab-content li {
		margin-bottom: var(--gap-xs);
		line-height: var(--line-height-normal);
	}
	.membership-applications__tab-content iframe {
		max-width: 100%;
		border: none;
	}
	.membership-applications__subtab-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		border-bottom: 4px solid var(--color-denim);

		@media screen and (max-width: 768px) {
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			gap: 12px;
			padding-bottom: 0;
			width: calc(100% + 80px);
			margin-left: -40px;
			padding: 0 10px;

			&::-webkit-scrollbar {
				display: none;
			}
		}
		@media screen and (max-width: 650px) {
			width: calc(100% + 30px);
			margin-left: -15px;
		}
	}
	.membership-applications__subtab-btn {
		background: none;
		border: none;
		border-radius: 12px 12px 0 0;
		padding: 12px 24px;
		font-family: var(--font-primary);
		font-size: 20px !important;
		font-weight: 900 !important;
		line-height: initial !important;
		letter-spacing: 0.15px;
		color: var(--color-denim);
		cursor: pointer;
		transition: .3s ease-in-out;
		white-space: nowrap;

		@media screen and (max-width: 768px) {
			flex-shrink: 0;
			font-size: 16px !important;
			padding: 10px 16px;
			position: relative;
			top: 1px;
		}
	}
	.membership-applications__subtab-btn:hover {
		background-color: #CED0D5;
	}
	.membership-applications__subtab-btn--active {
		color: var(--color-white);
		background-color: var(--color-denim);
	}
	.membership-applications__subtab-btn--active:hover {
		color: var(--color-white);
		background-color: var(--color-denim);
	}
	.membership-applications__subtab-panel {
		padding-top: 24px;
	}
	.membership-applications__subtab-panel[hidden] {
		display: none;
	}
	.membership-applications__sidebar {
		padding-top: var(--gap-2xl);
		padding-left: 40px;

		@media (max-width: 1200px) {
			padding-left: 0;
			width: 100% !important;
		}
	}
	.membership-applications__sidebar-title {
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: 700;
		line-height: 1.4;
		color: var(--color-text-heading);
		margin-bottom: 16px;
	}
	.membership-applications__sidebar-content {
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		font-weight: 400;
		line-height: normal;
		color: var(--color-text-body);
		border-radius: var(--radius-md);
		background-color: var(--color-white);
		padding: 20px;
		letter-spacing: 0.135px;
	}
	.membership-applications__sidebar-content--second {
		margin-top: var(--gap-md);
	}
	.membership-applications__sidebar-content p {
		margin-bottom: 8px;
		font-size: inherit;
		line-height: inherit;

		&:last-of-type {
			margin-bottom: 4px;
		}
	}
	.membership-applications__sidebar-content a:not(.btn):not([class*="btn-"]):not(.button) {
		color: var(--color-grass);
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: 10%; /* 1.8px */
		text-underline-offset: 15%; /* 2.7px */
		text-underline-position: from-font;
		text-decoration-color: var(--color-grass);
		transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
	}
	.membership-applications__sidebar-content a:not(.btn):not([class*="btn-"]):not(.button):hover,
	.membership-applications__sidebar-content a:not(.btn):not([class*="btn-"]):not(.button):focus-visible {
		color: var(--color-kale);
		text-decoration-color: var(--color-kale);
	}
	.membership-applications__sidebar-content strong,
	.membership-applications__sidebar-content b {
		font-weight: 700;
	}
	.gform-theme--framework table {
		margin: 0 !important;
	}
	.gform-theme--framework table font, .gform-theme--framework table td {
		font-family: var(--font-secondary) !important;
		font-size: 16px !important;
	}
	.gform-theme--framework table tr, .gform-theme--framework table td {
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
	}
	@media (min-width: 768px) {
		.membership-applications__title {
			font-size: var(--font-size-sm);
		}
		.membership-applications__tab-btn {
			font-size: var(--font-size-sm);
			padding: var(--gap-sm);
		}
	}
	@media (min-width: 1024px) {
		.membership-applications__inner {
			flex-direction:row;
		}
		.membership-applications__tab-nav {
			justify-content:space-between;
		}
		.membership-applications__inner{
			width:861px;
		}
		.membership-applications__sidebar {
			width:calc(100% - 861px);
		}
	}
	.steps {
		margin-bottom: 8px;

		@media screen and (max-width: 768px) {
			margin-top: 5px;
		}
		&.step-1 {
			@media screen and (max-width: 768px) {
				margin-top: 10px;
			}
		}
		.steps-desktop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;

			@media (max-width: 650px) {
				display: none;
			}
		}
		.steps-mobile {
			display: none;

			@media (max-width: 650px) {
				display: block;
			}
			.step-buttons {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				margin-bottom: 12px;
			}
			.step-title {
				display: block;
				color: var(--color-denim);
				font-family: var(--font-primary);
				font-size: 20px;
				font-weight: 900;
				letter-spacing: 0.15px;
				text-align: center;
			}
		}
		.left, .right {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.previous-step {
			&:hover, &:focus-visible {
				opacity: 1 !important;
			}
		}
		.current-step {
			display: flex;
			align-items: center;
			gap: 10px;

			.step-number {
				display: inline-block;
				padding: 8px 16px;
				border-radius: 12px;
				background-color: #A6D78E;
				color: var(--color-denim);
				font-family: var(--font-primary);
				font-size: 20px;
				font-weight: 900;
				letter-spacing: 0.15px;
				text-transform: uppercase;

				@media screen and (max-width: 650px) {
					font-size: 16px;
					padding: 6px 10px;
				}
			}
			.step-title {
				display: inline-block;
				color: var(--color-denim);
				font-family: var(--font-primary);
				font-size: 20px;
				font-weight: 900;
				letter-spacing: 0.15px;
			}
		}
		.btn-step {
			padding: 8px 12px !important;
			border-radius: 12px !important;
			background-color: #DBEFD2 !important;
			color: var(--color-denim) !important;
			font-family: var(--font-primary) !important;
			font-size: 20px !important;
			font-weight: 900 !important;
			line-height: normal !important;
			letter-spacing: 0.15px !important;
			opacity: .5 !important;
			box-shadow: none !important;
			outline: none !important;
			border: none !important;
			transition: .3s ease-in-out !important;

			@media screen and (max-width: 650px) {
				font-size: 16px !important;
				padding: 6px 10px !important;
			}
			svg {
				@media screen and (max-width: 650px) {
					display: none;
				}
			}
		}
	}
	.gform_wrapper.gform-theme #gform_page_3_1 .gform_fields, .gform_wrapper.gform-theme #gform_page_4_1 .gform_fields, .gform_wrapper.gform-theme #gform_page_15_1 .gform_fields, .gform_wrapper.gform-theme #gform_page_16_1 .gform_fields {
		display: flex !important;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}
	.form-section {
		width: calc(100% - 230px);
		display: grid;
		grid-row-gap: 20px;
		grid-column-gap: 40px;
		align-items: start;

		@media screen and (max-width: 767px) {
			width: 100%;
			order: 3;
		}
	}
	.form-section > .gfield {
		align-self: start !important;
	}
	.useful-links {
		width: 190px !important;

		@media screen and (max-width: 767px) {
			width: 100% !important;
			order: 1;
			margin-top: -24px !important;
			margin-left: -80px !important;
			width: calc(100% + 80px) !important;
			position: relative;
			left: 40px;

			@media screen and (max-width: 650px) {
				margin-left: -30px !important;
				width: calc(100% + 30px) !important;
				left: 15px;
			}
		}
		&.open {
			.required-documents-toggle {
				background-color: var(--color-denim) !important;
				color: var(--color-white) !important;

				&:after {
					background-image: url('../../../assets/images/icons/minus-square.svg') !important;
				}
			}
			.required-documents-dropdown {
				@media screen and (max-width: 767px) {
					padding: 24px 16px 0;
					max-height: 1000px;
				}
			}
		}
		&.closed {
			.required-documents-toggle {
				background-color: #CED0D5 !important;
				color: var(--color-denim) !important;
				
				&:after {
					background-image: url('../../../assets/images/icons/plus-square.svg') !important;
				}
			}
			.required-documents-dropdown {
				@media screen and (max-width: 767px) {
					padding: 0 16px;
					max-height: 0;
				}
			}
		}
		.useful-links-heading {
			font-size: 18px !important;
			font-weight: 700 !important;
			line-height: normal;
			letter-spacing: 0.135px;
			border-bottom: 1px solid #ADADAD;
			padding-bottom: 8px;
			margin-bottom: 16px;

			@media screen and (max-width: 767px) {
				display: none;
			}
		}
		.required-documents-toggle {
			position: relative !important;
			width: 100% !important;
			border-radius: 0 !important;
			padding: 15px !important;
			text-align: left !important;
			font-family: var(--font-primary) !important;
			font-size: 20px !important;
			font-weight: 900 !important;
			border: none !important;
			outline: none !important;
			display: none !important;
			transition: .2s ease-in-out !important;
			
			@media screen and (max-width: 767px) {
				display: block !important;
			}
			&:hover, &:focus-visible {
				background-color: #4E5668 !important;
				color: var(--color-white) !important;
			}
			&:after {
				content: '' !important;
				display: block !important;
				width: 24px !important;
				height: 24px !important;
				background-repeat: no-repeat !important;
				background-size: cover !important;
				position: absolute !important;
				right: 15px !important;
				top: 50% !important;
				transform: translateY(-50%) !important;
				transition: .2s ease-in-out !important;
			}
		}
		.required-documents-dropdown {
			overflow: hidden;
			transition: 1s ease-in-out;			
		}
		ul {
			li {
				font-size: 16px;
				font-weight: 400;
				margin-bottom: 12px;
				
				&:last-child {
					margin-bottom: 0;
				}
				a {
					text-decoration: underline;
					
					&:hover, &:focus-visible {
						text-decoration: none;
					}
				}
			}
		}
	}
	#gform_page_3_1, #gform_page_15_1 {
		#field_3_15, #field_15_15 {
			@media screen and (max-width: 767px) {
				order: 2;
			}
		}
		#field_3_13, #field_15_13 {
			@media screen and (max-width: 767px) {
				order: 4;
			}
		}
	}
	#gform_page_4_1, #gform_page_16_1 {
		#field_4_27, #field_16_27 {
			@media screen and (max-width: 767px) {
				order: 2;
			}
		}
		#field_4_28, #field_16_28 {
			@media screen and (max-width: 767px) {
				order: 4;
			}
		}
	}
	#gform_3, #gform_4, #gform_5, #gform_15, #gform_16, #gform_17 {
		.gform_page_footer, .gform_footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;
			border-top: 2px solid #DEDEDE;
			padding: 30px 30px 0;
			width: calc(100% + 80px);
			margin-left: -40px;
			margin-bottom: -10px;

			@media screen and (max-width: 650px) {
				padding: 30px 15px 0;
				width: calc(100% + 30px);
				margin-left: -15px;
				margin-bottom: 0;
			}
		}
		.footer-navigation {
			width: auto !important;

			@media screen and (max-width: 830px) {
				width: 100% !important;
				text-align: center;
				order: 1 !important;
			}
			p {
				font-size: 16px !important;
				font-weight: 500 !important;
				margin-bottom: 0;				
			}
		}
	}
	#gform_5, #gform_17 {
		.gform_footer {
			justify-content: flex-end;

			button[type="submit"] {
				@media screen and (max-width: 500px) {
					width: 100% !important;
				}
			}
		}
	}
	[class*=cs-theme--] .gsection.collapsible-sections-field {
		border: none !important;
		border-radius: 12px !important;
		padding: 20px !important;
		cursor: pointer !important;
		transition: .3s ease-in-out;

		&:after {
			content: '' !important;
			display: block !important;
			width: 30px !important;
			height: 30px !important;
			background-color: transparent !important;
			background-image: url('../../../assets/images/icons/plus-square.svg') !important;
			background-repeat: no-repeat !important;
			background-size: cover !important;
			position: absolute !important;
			right: 20px !important;
			top: 50% !important;
			transform: translateY(-50%) !important;
			transition: .2s ease-in-out !important;
			mask-image: none !important;
		}
		.gsection_title {
			font-family: var(--font-primary) !important;
			font-size: 20px !important;
			font-weight: 900 !important;
			letter-spacing: .15px !important;
			color: var(--color-denim) !important;
			transition: .3s ease-in-out;

			@media screen and (max-width: 650px) {
				font-size: 18px !important;
			}
		}
		&.collapsible-sections-open {			
			&:after {
				background-image: url('../../../assets/images/icons/minus-square.svg') !important;
			}
		}
		&.kale {
			background-color: #C8D0C5 !important;

			&:hover, &:focus-visible {
				background-color: #38562D !important;

				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			&.collapsible-sections-open {
				background-color: #244517 !important;
				
				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			+ .collapsible-sections-collapsible-body {
				.gfield--type-section {
					background-color: #C8D0C5 !important;
				}
			}
		}
		&.sand {
			background-color: #E6E1D1 !important;

			&:hover, &:focus-visible {
				background-color: #DBD3BD !important;
			}
			&.collapsible-sections-open {
				background-color: #D7CFB6 !important;
			}
			+ .collapsible-sections-collapsible-body {
				.gfield--type-section {
					background-color: #F5F3ED !important;
				}
			}
		}
		&.earth {
			background-color: #D5D0D1 !important;

			&:hover, &:focus-visible {
				background-color: #675658 !important;

				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			&.collapsible-sections-open {
				background-color: #584547 !important;
				
				.gsection_title {
					color: var(--color-white) !important;
				}
			}
		}
		&.yellow {
			background-color: #FCECCD !important;

			&:hover, &:focus-visible {
				background-color: #F4BA48 !important;
			}
			&.collapsible-sections-open {
				background-color: #F4B335 !important;
			}
		}
		&.denim {
			background-color: #CED0D5 !important;

			&:hover, &:focus-visible {
				background-color: #4E5668 !important;

				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			&.collapsible-sections-open {
				background-color: #3C4559 !important;
				
				.gsection_title {
					color: var(--color-white) !important;
				}
			}
		}
		&.grass {
			background-color: #DBEFD2 !important;

			&:hover, &:focus-visible {
				background-color: #7DC55B !important;
			}
			&.collapsible-sections-open {
				background-color: #70BF4A !important;
			}
		}
		&.concrete {
			background-color: #DEDEDE !important;

			&:hover, &:focus-visible {
				background-color: #898989 !important;

				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			&.collapsible-sections-open {
				background-color: #7D7D7D !important;
				
				.gsection_title {
					color: var(--color-white) !important;
				}
			}
		}
		&.rust {
			background-color: #F0CECC !important;

			&:hover, &:focus-visible {
				background-color: #C44C47 !important;

				.gsection_title {
					color: var(--color-white) !important;
				}
			}
			&.collapsible-sections-open {
				background-color: #C33C32 !important;
				
				.gsection_title {
					color: var(--color-white) !important;
				}
			}
		}
		&.white {
			background-color: var(--color-white) !important;
			border: 1px solid #DEDEDE !important;

			&:hover, &:focus-visible {
				background-color: #ededed !important;
				border: 1px solid #ededed !important;
			}
			&.collapsible-sections-open {
				background-color: #ededed !important;
				border: 1px solid #ededed !important;
			}
		}
		
	}
	.collapsible-sections-collapsible-body {
		padding: 24px 0 0 !important;
		border: none !important;

		.gfield--type-section {
			border: none !important;
			border-radius: 8px !important;
			padding: 12px 16px !important;
			display: inline-block !important;
			width: fit-content !important;
			justify-self: start !important;
			margin-top: 16px !important;

			@media screen and (max-width: 650px) {
				display: block !important;
				width: 100% !important;
			}
			&:first-of-type {
				margin-top: 0 !important;
			}
			.gsection_title {
				font-family: var(--font-primary) !important;
				font-size: 20px !important;
				font-weight: 900 !important;
				letter-spacing: .15px !important;
				color: var(--color-denim) !important;
				margin: 0 !important;

				@media screen and (max-width: 650px) {
					font-size: 18px !important;
					text-align: center !important;
				}
			}
		}
	}
	.csc-upload-trigger {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.csc-upload-btn {
		width: 220px !important;
		border: 2px solid var(--color-denim) !important;
		background-color: var(--color-white) !important;
		color: var(--color-denim) !important;
		padding: 13px 66px 13px 20px !important;
		border-radius: 8px !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		letter-spacing: .8px !important;
		outline: none !important;
		cursor: pointer !important;
		position: relative;
		transition: .2s ease-in-out !important;
		
		&:hover, &:focus-visible {
			background-color: var(--color-denim) !important;
			color: var(--color-white) !important;
		}
		&:after {
			content: '' !important;
			display: block !important;
			width: 46px !important;
			height: 46px !important;
			background-color: var(--color-denim) !important;
			background-image: url('../../../assets/images/icons/paperclip.svg') !important;
			background-size: 16px 18px !important;
			background-repeat: no-repeat !important;
			background-position: center !important;
			border-radius: 8px !important;
			position: absolute !important;
			top: 50% !important;
			right: 0 !important;
			transform: translateY(-50%) !important;
		}
	}
	.csc-outside-files {
		width: calc(100% - 220px);
		padding-left: 10px;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		@media screen and (max-width: 650px) {
			width: 100%;
			padding-left: 0;
			padding-top: 10px;
		}
		.csc-outside-file {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border: 1px solid var(--color-grass);
			border-radius: 4px;
			padding: 6px 10px;
			width: fit-content;

			.csc-outside-file__name {
				font-size: 12px;
				font-weight: 400;
				margin-right: 8px;
				color: var(--color-denim);
			}
			.csc-outside-file__remove {
				display: inline-flex !important;
				flex-shrink: 0 !important;
				background-color: transparent !important;
				border: none !important;
				font-size: 0 !important;
				padding: 0 !important;
				border-radius: 0 !important;
				min-height: 0 !important;
				width: 24px !important;
				height: 24px !important;
				background-image: url('../../../assets/images/icons/trash.svg') !important;
				background-size: cover !important;
				background-repeat: no-repeat !important;
				box-shadow: none !important;
				outline: none !important;
				cursor: pointer !important;
			}
		}
	}
	.summary.gfield--type-html {
		p, ul {
			font-size: 16px !important;
			color: #7C7E77 !important;
		}
		.blue-heading {
			color: var(--color-denim) !important;
			font-family: var(--font-primary) !important;
			font-size: 20px !important;
			font-weight: 900 !important;
			margin-top: 24px !important;
			margin-bottom: 0px !important;

			&:first-child {
				margin-top: 0 !important;
			}
		}
		.btn-edit {
			border: 2px solid var(--color-denim) !important;
			background-color: var(--color-white) !important;
			color: var(--color-denim) !important;
			padding: 10px 12px !important;
			border-radius: 8px !important;
			font-size: 16px !important;
			font-weight: 700 !important;
			letter-spacing: .12px !important;
			outline: none !important;
			cursor: pointer !important;
			transition: .2s ease-in-out !important;
			
			&:hover, &:focus-visible {
				background-color: var(--color-denim) !important;
				color: var(--color-white) !important;
			}
		}
		.produce-sell {
			.heading-area {
				+ .summary-section {
					.section-heading {
						margin-top: 0;
					}
				}
			}
		}
		.section-heading {
			font-family: var(--font-primary) !important;
			font-size: 18px !important;
			font-weight: 900 !important;
			letter-spacing: .15px !important;
			border-radius: 8px !important;
			padding: 8px 14px !important;
			display: inline-block;
			width: fit-content !important;
			color: var(--color-denim) !important;
			margin-top: 10px;
			margin-bottom: 10px;

			&.kale {
				background-color: #C8D0C5 !important;
			}
			&.sand {
				background-color: #E6E1D1 !important;
			}
			&.earth {
				background-color: #D5D0D1 !important;
			}
			&.yellow {
				background-color: #FCECCD !important;
			}
			&.denim {
				background-color: #CED0D5 !important;
			}
			&.grass {
				background-color: #DBEFD2 !important;
			}
			&.concrete {
				background-color: #DEDEDE !important;
			}
			&.rust {
				background-color: #F0CECC !important;
			}
			&.white {
				background-color: var(--color-white) !important;
				border: 1px solid #DEDEDE;
			}
		}
		.section-subheading {
			font-family: var(--font-primary) !important;
			font-size: 16px !important;
			font-weight: 900 !important;
			letter-spacing: .15px !important;
			border-radius: 8px !important;
			padding: 8px 14px !important;
			display: inline-block;
			width: fit-content !important;
			color: var(--color-denim) !important;
			margin-top: 5px;
			margin-bottom: 10px;

			&.kale {
				background-color: #E6EAE4 !important;
			}
			&.sand {
				background-color: #F5F3ED !important;
			}
		}
	}
	.heading-area {
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
		margin-bottom: 10px;
	}
	.blue-heading {
		color: var(--color-denim) !important;
		font-family: var(--font-primary) !important;
		font-size: 20px !important;
		font-weight: 900 !important;
		margin-top: 24px !important;
		margin-bottom: 10px !important;

		&:first-child {
			margin-top: 0 !important;
		}
	}
	.summary-file {
		display: block;
		max-width: 445px;
		padding: 7px 10px;
		border: 1px solid var(--color-grass);
		border-radius: 4px;
		font-family: var(--font-secondary);
		font-size: 13px;
		color: var(--color-denim);
		line-height: 1.3;
		margin-top: 10px;
	}
	.logos {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 30px;
		margin-top: 16px;

		.logo {
			width: 150px;

			@media screen and (max-width: 767px) {
				width: 100%;
			}
			img {
				width: 100%;
				height: auto;

				@media screen and (max-width: 767px) {
					width: auto;
					max-width: 100%;
				}
			}
		}
		.logo-desc {
			width: calc(100% - 150px - 30px);

			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}
	}
	label a {
		text-decoration: underline;
		color: var(--color-denim);

		&:hover, &:focus-visible {
			text-decoration: none;
		}
	}
}

/* ============================================================
   Custom GF File Upload Modal
   ============================================================ */

/* ── Trigger (button + icon outside the modal) ─────────────── */
.csc-upload-trigger {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 4px;
}

.csc-upload-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 2px solid var(--color-denim);
	border-radius: 8px;
	background: transparent;
	color: var(--color-denim);
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;

	&:hover, &:focus-visible {
		background: var(--color-denim);
		color: var(--color-white);
	}
}


/* ── Outside file chips (shown after modal closes with files) ─ */
.csc-outside-files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.csc-outside-file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px 7px 14px;
	border: 1.5px solid var(--color-grass);
	border-radius: var(--radius-pill);
	background: var(--color-white);
}

.csc-outside-file__name {
	font-family: var(--font-secondary);
	font-size: 13px;
	color: var(--color-denim);
	line-height: 1.3;
}

.csc-outside-file__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(194, 59, 51, 0.12);
	border: none;
	color: var(--color-red);
	cursor: pointer;
	padding: 0;
	transition: background-color var(--transition-fast);

	&:hover, &:focus-visible {
		background: rgba(194, 59, 51, 0.25);
	}
}

/* ── Modal container overrides ─────────────────────────────── */
.csc-upload-modal .modal__container {
	padding: 30px 40px;
	max-width: 540px;
	width: 90vw;
	min-height: 625px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	display: flex;
	flex-direction: column;

	@media screen and (max-width: 650px) {
		padding: 30px;
	}
}
.modal__close {
	z-index: 1;
}

/* ── Modal body (states 1–3) ───────────────────────────────── */
.csc-upload-modal__body {
	position: relative;
}

/* ── Success screen (state 4) ──────────────────────────────── */
.csc-upload-modal__success {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px 0 4px;
	position: relative;
	flex: 1;
}


/* ── Modal title ───────────────────────────────────────────── */
.csc-upload-modal__title {
	font-size: 22px !important;
	font-weight: 700;
	color: var(--color-denim);
	text-align: center;
	margin: 0 0 20px !important;
	padding: 0 32px;
}

/* ── Dropzone ──────────────────────────────────────────────── */
.csc-dropzone {
	background: #DBEFD2;
	border: 2px dashed #858A97;
	border-radius: 4px;
	padding: 20px;
	text-align: center;
	position: relative;
	transition: background-color var(--transition-fast);
	height: 450px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.csc-dropzone--compact {
	height: 200px;
}

.csc-dropzone--drag {
	background: #c5e5ae;
	border-color: var(--color-kale);
}

.csc-dropzone__icon {
	display: block;
	margin: 0 auto 12px;
}

.csc-dropzone__text {
	font-size: 16px !important;
	color: var(--color-denim) !important;
	font-weight: 700 !important;
	margin: 0 0 5px !important;
}

.csc-browse-label {
	display: inline;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-denim);
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
	font-weight: 600;

	&:hover {
		text-decoration: none;
	}
}

.csc-dropzone__formats {
	font-size: 12px !important;
	color: #7D7D7D !important;
	font-weight: 400 !important;
	margin: 0;
}

.csc-file-input {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ── File list ─────────────────────────────────────────────── */
.csc-file-list {
	display: none;
	margin-top: 20px !important;
}

.csc-file-list--visible {
	display: block;
}

.csc-file-list__uploading,
.csc-file-list__uploaded {
	display: none;
	margin-bottom: 20px;
}

.csc-file-list__section--visible {
	display: block;
}

.csc-file-list__label {
	font-size: 14px !important;
	color: #7D7D7D;
	margin: 0 0 10px !important;
}

.csc-file-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ── Individual file items ─────────────────────────────────── */
.csc-file-item {
	display: flex;
	align-items: center;
	border-radius: var(--radius-pill);
	padding: 7px 10px 7px 14px;
	font-family: var(--font-secondary);
	font-size: 13px;
}

.csc-file-item--uploading {
	background: #dbefd2;
	border: 1px solid var(--color-grass);
}

.csc-file-item--uploaded {
	background: transparent;
	border: 1px solid var(--color-grass);
	border-radius: 4px;
	padding: 6px 10px;
	flex-wrap: wrap;

	.csc-file-item__name {
		font-size: 12px;
		font-weight: 400;
		margin-right: 8px;
		color: var(--color-denim);
	}

	.csc-file-item__x {
		display: inline-flex !important;
		flex-shrink: 0 !important;
		background-color: transparent !important;
		background-image: url('../../../assets/images/icons/trash.svg') !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		border: none !important;
		border-radius: 0 !important;
		min-height: 0 !important;
		width: 24px !important;
		height: 24px !important;
		padding: 0 !important;
		font-size: 0 !important;
		box-shadow: none !important;
		outline: none !important;
		cursor: pointer !important;
	}
}

.csc-file-item--error {
	flex-wrap: wrap;
	background: rgba(194, 59, 51, 0.07);
	border: 1px solid var(--color-red);
	border-radius: 8px;
	padding: 8px 10px 8px 14px;
}

.csc-file-item__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-denim);
}

.csc-file-item__x {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-red);
	border: none;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color var(--transition-fast);

	&:hover, &:focus-visible {
		background: #a32b24;
	}
}

.csc-file-item__error-msg {
	width: 100%;
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--color-red);
}

/* ── UPLOAD FILES submit button ────────────────────────────── */
.csc-modal-submit {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 14px 16px;
	background: var(--color-denim);
	color: var(--color-white);
	border: none;
	font-family: var(--font-secondary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity var(--transition-fast), background-color var(--transition-fast);

	&[disabled] {
		cursor: not-allowed;
	}
}

.csc-modal-submit--ready,
.csc-modal-submit:not([disabled]) {
	opacity: 1;

	&:hover, &:focus-visible {
		background: var(--color-dark-alt);
	}
}

/* ── Success screen elements ───────────────────────────────── */
.csc-success__check {
	margin-bottom: 24px;
}

.csc-success__title {
	color: var(--color-kale) !important;
	font-family: var(--font-primary) !important;
	font-size: 36px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	letter-spacing: 3.6px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin-bottom: 8px !important;

	@media screen and (max-width: 768px) {
		font-size: 28px !important;
		letter-spacing: 2.8px !important;
	}
}

.csc-success__text {
	color: var(--color-denim) !important;
	font-weight: 400 !important;
	text-align: center !important;
	line-height: normal !important;
	letter-spacing: .135px !important;
	margin-bottom: 24px !important;
}

.csc-success__close-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--gap-xs) !important;
	padding: 12px 16px !important;
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: var(--font-weight-medium) !important;
	text-align: center !important;
	border: 2px solid transparent !important;
	border-radius: var(--radius-sm) !important;
	cursor: pointer !important;
	transition: var(--transition-slow) !important;
	text-decoration: none !important;
	letter-spacing: 0.9px !important;
	text-transform: uppercase !important;
	position: relative !important;
	background-color: var(--color-denim) !important;
	color: var(--color-white) !important;
	border-color: var(--color-denim) !important;
	outline: none !important;
	box-shadow: none !important;

	&:hover, &:focus-visible {
		background-color: var(--color-grass) !important;
		border-color: var(--color-grass) !important;
		color: var(--color-denim) !important;
	}
}

/* ================================================
   Bootstrap Tooltips
   ================================================ */

.gform_wrapper button.tooltip-icon,
.gform-theme--framework button.tooltip-icon,
.tooltip-container button.tooltip-icon {
	display: inline-block !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	width: 16px !important;
	height: 16px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: transparent !important;
	background-image: url('../../../assets/images/icons/tooltip.svg') !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	margin-left: 8px !important;
	position: relative !important;
	top: -2px !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

.tooltip {
	--tooltip-bg: var(--color-denim);
	--tooltip-color: var(--color-white);
	font-size: 14px;
	letter-spacing: .105px;
	line-height: 1.2;
	z-index: 998;
	opacity: 1 !important;

	p {
		margin-top: 0;
		margin-bottom: 5px;

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

.tooltip .tooltip-inner {
	max-width: 240px;
	padding: 1rem;
	font-family: var(--font-primary);
	font-weight: 400;
	color: var(--tooltip-color);
	text-align: left;
	background-color: var(--tooltip-bg);
	border-radius: var(--radius-sm);
}

.tooltip .tooltip-arrow {
	position: absolute;
	display: block;
	width: 0.8rem;
	height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
	position: absolute;
	content: "";
	border-color: transparent;
	border-style: solid;
}

/* Top */
.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] {
	padding: 0.4rem 0;
}

.tooltip.bs-tooltip-top .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
	bottom: 0;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
	top: -1px;
	border-width: 0.4rem 0.4rem 0;
	border-top-color: var(--tooltip-bg);
}

/* Right / End */
.tooltip.bs-tooltip-right,
.tooltip.bs-tooltip-end,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] {
	padding: 0 0.4rem;
}

.tooltip.bs-tooltip-right .tooltip-arrow,
.tooltip.bs-tooltip-end .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
	left: 0;
	width: 0.4rem;
	height: 0.8rem;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	right: -1px;
	border-width: 0.4rem 0.4rem 0.4rem 0;
	border-right-color: var(--tooltip-bg);
}

/* Bottom */
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] {
	padding: 0.4rem 0;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
	top: 0;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
	bottom: -1px;
	border-width: 0 0.4rem 0.4rem;
	border-bottom-color: var(--tooltip-bg);
}

/* Left / Start */
.tooltip.bs-tooltip-left,
.tooltip.bs-tooltip-start,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] {
	padding: 0 0.4rem;
}

.tooltip.bs-tooltip-left .tooltip-arrow,
.tooltip.bs-tooltip-start .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
	right: 0;
	width: 0.4rem;
	height: 0.8rem;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	left: -1px;
	border-width: 0.4rem 0 0.4rem 0.4rem;
	border-left-color: var(--tooltip-bg);
}

/* ============================================================
   Subtab Content Styles - Glossary, Resources, Example
   ============================================================ */

/* Subtab Heading */
.subtab-heading {
	font-family: var(--font-primary) !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	color: var(--color-denim) !important;
	margin-bottom: 24px !important;
	letter-spacing: 0.15px;
}

/* ── Glossary Styles ────────────────────────────────────── */
.glossary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: -16px;

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.glossary-column {
	display: flex;
	flex-direction: column;
}

.glossary-term {
	border: none;
	border-bottom: 1px solid #ADADAD;
	border-radius: 0;
	background-color: transparent;
	transition: none;
	overflow: hidden;
}

.glossary-term__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	position: relative;
}

.glossary-term__title {
	font-family: var(--font-secondary) !important;
	font-size: 20px !important;
	font-weight: bold !important;
	color: var(--color-denim) !important;
	margin: 0 !important;
	letter-spacing: 0.15px;
	padding-right: 10px;
}

.glossary-term__icon {
	position: relative;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-image: url('../../../assets/images/icons/plus-small.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: opacity 0.3s ease-in-out;
}

.glossary-term__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
	padding: 0;

	p {
		font-family: var(--font-secondary) !important;
		font-weight: 400 !important;
		color: var(--color-denim) !important;
		line-height: 1.5 !important;
		
		&:last-of-type {
			margin-bottom: 0 !important;
		}
	}
}

.glossary-term--open {
	.glossary-term__icon {
		background-image: url('../../../assets/images/icons/minus-small.svg');
	}

	.glossary-term__content {
		max-height: 500px;
		padding: 0 0 20px 0;
	}
}

/* ── Resources Styles ───────────────────────────────────── */
.resources {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;

	@media screen and (max-width: 991px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (max-width: 576px) {
		grid-template-columns: 1fr;
	}
}

.resource {
	border-radius: 12px;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--color-white);

	h3 {
		font-family: var(--font-primary) !important;
		font-size: 20px !important;
		font-weight: 900 !important;
		text-transform: uppercase;
		color: var(--color-denim) !important;
		margin: 0 0 16px !important;
		letter-spacing: 0.15px;
		line-height: 1.3 !important;
	}
	.button-wrapper {
		margin-bottom: 12px;

		@media screen and (max-width: 576px) {
			margin-bottom: 0;
		}
		&:last-of-type {
			margin-bottom: 0;
		}
	}
	.resource-buttons {
		@media screen and (max-width: 576px) {
			display: flex;
			gap: 16px;
		}
	}
	.btn-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 12px 20px;
		border: 2px solid var(--color-denim);
		border-radius: 8px;
		background-color: var(--color-denim);
		color: var(--color-white);
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 1px;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
	}
	.btn-primary-outline {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 12px 20px;
		border: 2px solid var(--color-denim);
		border-radius: 8px;
		background-color: var(--color-white);
		color: var(--color-denim);
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 1px;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
		
		.call-number {
			position: relative;
			left: -8px;
			
			@media screen and (max-width: 576px) {
				display: none;
			}
		}
	}
}

/* ── Example Styles ─────────────────────────────────────── */
.membership-applications__subtab-panel[data-subtab="example"] {
	img {
		max-width: 100%;
		height: auto;
		border-radius: 12px;
		box-shadow: 0 0 12px 0 rgba(66, 66, 66, 0.50);
	}
}

/* ── Tab Footer & Back Button ──────────────────────────── */
.tab-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border-top: 2px solid #DEDEDE;
	padding: 30px 30px 0;
	width: calc(100% + 80px);
	margin-left: -40px;
	margin-bottom: -10px;
	margin-top: 40px;

	@media screen and (max-width: 650px) {
		padding: 30px 15px 0;
		width: calc(100% + 30px);
		margin-left: -15px;
		margin-bottom: 0;
		margin-top: 30px;
	}
}

.back-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--gap-xs) !important;
	padding: 12px 16px !important;
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: center !important;
	border: 2px solid transparent !important;
	border-radius: var(--radius-sm) !important;
	cursor: pointer !important;
	transition: var(--transition-slow) !important;
	text-decoration: none !important;
	letter-spacing: 0.9px !important;
	text-transform: uppercase !important;
	position: relative !important;
	background-color: var(--color-white) !important;
	color: var(--color-denim) !important;
	border-color: var(--color-white) !important;
	outline: none !important;
	box-shadow: none !important;

	&:hover,
	&:focus-visible {
		background-color: #DEDEDE !important;
		border-color: #DEDEDE !important;
	}
}

/* ================================================
   Social Dropdown - Multi-Select Checkbox Styling
   ================================================ */

.social-dropdown {
	position: relative !important;

	legend.gfield_label {
		font-family: var(--font-primary) !important;
		font-weight: 400 !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
		color: #7C7E77 !important;
		margin-bottom: 6px !important;
		display: block !important;
		text-transform: none !important;
	}
	/* Dropdown trigger button (created by JS) */
	.social-dropdown-trigger {
		display: block !important;
		width: 100% !important;
		padding: 12px 44px 12px 16px !important;
		font-family: var(--font-primary) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.5 !important;
		color: #7C7E77 !important;
		background-color: #FCF7F3 !important;
		border: 1px solid transparent !important;
		border-radius: var(--radius-sm) !important;
		cursor: pointer !important;
		transition: .2s ease-in-out !important;
		position: relative !important;
		text-align: left !important;
		box-shadow: 0 2px 4px 0 rgba(74, 74, 104, 0.10) inset !important;
		outline: none !important;

		&:focus {
			border: 1px solid #7C7E77 !important;
			outline: none !important;
		}

		/* Dropdown arrow - using same icon as select */
		&::after {
			content: '' !important;
			position: absolute !important;
			right: 16px !important;
			top: 50% !important;
			transform: translateY(-50%) !important;
			width: 12px !important;
			height: 14px !important;
			background-image: url("../../../assets/images/icons/down-arrow.svg") !important;
			background-repeat: no-repeat !important;
			background-position: center !important;
			background-size: 12px 14px !important;
			transition: transform 0.2s ease-in-out !important;
			border: none !important;
		}
	}

	/* Rotate arrow when open */
	&.dropdown-open .social-dropdown-trigger::after {
		transform: translateY(-50%) rotate(180deg) !important;
	}

	/* Hide the default checkbox container initially */
	.gfield_checkbox {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 100 !important;
		display: none !important;
		flex-direction: column !important;
		gap: 0 !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
		border: 1px solid #DEDEDE !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		background-color: var(--color-white) !important;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
		overflow-y: auto !important;
		list-style: none !important;
	}

	/* Show dropdown when open */
	&.dropdown-open .gfield_checkbox {
		display: flex !important;
	}

	/* Individual checkbox options */
	.gchoice {
		display: block !important;
		position: relative !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid #F0F0F0 !important;
		width: 100% !important;
		flex-shrink: 0 !important;

		&:last-child {
			border-bottom: none !important;
		}
	}

	/* Hide actual checkbox */
	.gchoice input[type="checkbox"] {
		position: absolute !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Style labels to look like select options */
	.gchoice label {
		display: block !important;
		width: 100% !important;
		padding: 14px 16px !important;
		margin: 0 !important;
		font-family: var(--font-secondary) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		color: var(--color-denim) !important;
		cursor: pointer !important;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
		background-color: var(--color-white) !important;
		line-height: 1.4 !important;

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

	/* Selected state - brand blue background with white text */
	.gchoice input[type="checkbox"]:checked + label {
		background-color: var(--color-denim) !important;
		color: var(--color-white) !important;
		font-weight: 500 !important;
	}

	/* Focus state for accessibility */
	.gchoice input[type="checkbox"]:focus-visible + label {
		background-color: #F5F5F5 !important;
	}
}

/* More specific overrides for Gravity Forms */
.gform_wrapper .social-dropdown legend.gfield_label,
.gform-theme--framework .social-dropdown legend.gfield_label,
.gform-theme--framework .social-dropdown.gfield--type-choice legend.gfield_label {
	font-family: var(--font-primary) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #7C7E77 !important;
	margin-bottom: 6px !important;
	display: block !important;
	text-transform: none !important;
}

.gform-theme--framework .social-dropdown .gfield--type-choice .gfield_checkbox,
.gform-theme--framework .social-dropdown.gfield--type-choice .gfield_checkbox {
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}

.gform_wrapper .social-dropdown .gchoice label,
.gform-theme--framework .social-dropdown .gfield--type-choice .gchoice label,
.gform-theme--framework .social-dropdown.gfield--type-choice .gchoice label {
	padding: 14px 16px !important;
}