/**
 * Footer Improvements
 * Enhanced styling for better visual appeal and user experience
 * styles/footer-improvements.css
 */

/* When footer is inside #main-signin - only force full width on tablet/mobile (centered column on desktop) */
@media only screen and (max-width: 1024px) {
	#main-signin.main,
	.main#main-signin {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow-x: visible !important;
	}

	#main-signin .footer {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		box-sizing: border-box !important;
	}

	#main-signin .footer-content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Login/register pages DESKTOP: entire page in one centered column with white space left/right */
@media only screen and (min-width: 1025px) {
	#main-signin.main,
	.main#main-signin {
		width: 100% !important;
		max-width: 1170px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box !important;
		overflow-x: visible !important;
	}

	#main-signin .header-container {
		width: 100% !important;
		max-width: 100% !important;
	}

	#main-signin .footer {
		width: 100% !important;
		max-width: 100% !important;
		padding: 30px 0 35px 0;
		box-sizing: border-box !important;
	}

	#main-signin .footer-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	#main-signin ul.footer-menu {
		justify-content: flex-start;
		gap: 20px;
	}
}

/* Footer improvements for ALL screen sizes - 4 Columns Layout */
/* Large screens (above 1024px) */
@media only screen and (min-width: 1025px) {
	
	/* Footer Container for Large Screens */
	.footer {
		overflow-x: hidden;
		width: 100%;
		box-sizing: border-box;
		padding: 30px 0 35px 0;
	}

	.footer-content {
		width: 92%;
		max-width: 1170px;
		margin: 0 auto;
		padding: 0 30px;
		box-sizing: border-box;
		overflow: visible;
	}

	/* Footer Menu - 4 Columns on Large Screens */
	ul.footer-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 20px;
		margin: 0 auto 25px auto;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
		clear: both;
		overflow: visible;
	}

	ul.footer-menu li {
		float: none !important;
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: none !important;
		padding: 0 8px;
		box-sizing: border-box;
		overflow: visible;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-list {
		width: 100% !important;
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: none !important;
		padding: 0 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: visible;
		box-sizing: border-box;
	}

	.footer-list.edge {
		width: 100% !important;
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: none !important;
		padding: 0 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: visible;
		box-sizing: border-box;
	}

	.footer-list-video {
		width: 100% !important;
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: none !important;
		padding: 0 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: visible;
		box-sizing: border-box;
	}

	/* Ensure video column title is visible on large screens */
	.footer-list-video > .footer-menu-title {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100%;
		margin-top: 0 !important;
		margin-bottom: 10px !important;
		order: 1;
	}

	.footer-list-video #video-support-section {
		order: 2;
		width: 100%;
		margin-top: 0;
	}

	/* Footer Menu Title - Consistent styling and alignment (no uppercase) */
	.footer-menu-title {
		color: #333;
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 10px;
		margin-top: 0 !important;
		padding-top: 0 !important;
		text-transform: none;
		letter-spacing: 0.3px;
		padding-bottom: 6px;
		border-bottom: 2px solid #e0e0e0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.3;
		display: block !important;
		width: 100%;
		min-height: 25px;
		height: auto;
		align-self: flex-start;
	}

	/* Ensure all titles align at same height */
	.footer-list .footer-menu-title,
	.footer-list.edge .footer-menu-title,
	.footer-list-video .footer-menu-title {
		margin-top: 0 !important;
		padding-top: 0 !important;
		vertical-align: top;
	}

	/* Video Support Section on Large Screens - Use 100% of column width */
	#video-support-section {
		margin-top: 0;
		width: 100% !important;
		max-width: 100% !important;
		display: block;
		box-sizing: border-box;
	}

	#video-support-section dt {
		font-weight: 600;
		color: #444;
		font-size: 12px;
		margin: 12px 0 8px 0;
		padding-bottom: 5px;
		border-bottom: 1px solid #d0d0d0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.5;
		text-transform: none;
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		white-space: normal;
	}

	#video-support-section dt:first-child {
		margin-top: 0;
	}

	#video-support-section dd {
		margin: 8px 0;
		padding: 0;
		line-height: 1.6;
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		white-space: normal;
	}

	#video-support-section dd.video-element {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0;
	}

	#video-support-section dd.video-element a {
		color: #555;
		text-decoration: none;
		font-size: 13px;
		transition: color 0.2s ease;
		display: block !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.6;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		white-space: normal;
	}

	#video-support-section dd.video-element a:hover {
		color: var(--primary-color, #f7941e);
		text-decoration: underline;
	}

	/* Footer List Container - Use 100% width */
	.footer-list-container {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0;
		box-sizing: border-box;
	}

	.footer-list-container ul.footer-menu-sub {
		margin-top: 0;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Ensure no text overlapping and use 100% width */
	.footer-list * {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
	}

	/* Better spacing for all footer elements - Use 100% width */
	.footer-list > * {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.footer-list.edge > * {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.footer-list-video > * {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* Only apply improvements to screens 1024px and below */
@media only screen and (max-width: 1024px) {
	
	/* Footer Container Improvements - extra side padding at 1024 to prevent right column crop */
	.footer {
		background: #f8f8f8;
		padding: 25px 24px 20px;
		margin-top: 0;
		overflow-x: hidden;
		width: 100%;
		box-sizing: border-box;
	}

	.footer-content {
		max-width: 1024px;
		margin: 0 auto;
		padding: 0 16px;
		width: 100%;
		box-sizing: border-box;
	}

	/* Footer Menu Improvements - 4 Columns with Better Spacing */
	ul.footer-menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 20px;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.footer-list {
		width: auto !important;
		flex: 1 1 0;
		min-width: 0;
		max-width: calc(25% - 6px);
		padding: 0 4px;
		margin-bottom: 0;
		box-sizing: border-box;
		overflow: visible;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-list.edge {
		flex: 1 1 0;
		min-width: 0;
		max-width: calc(25% - 6px);
		padding: 0 4px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-list-video {
		flex: 1 1 0;
		min-width: 0;
		max-width: calc(25% - 6px);
		padding: 0 4px;
		overflow: visible;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Ensure video column title is visible and aligned - Force display */
	.footer-list-video > .footer-menu-title {
		order: 1;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		min-height: 20px;
		width: 100% !important;
		margin-bottom: 8px !important;
		margin-top: 0 !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: normal !important;
		text-indent: 0 !important;
	}

	.footer-list-video > .footer-menu-title::before,
	.footer-list-video > .footer-menu-title::after {
		content: none !important;
	}

	.footer-list-video #video-support-section {
		order: 2;
		margin-top: 0;
		width: 100%;
	}

	/* Footer Menu Title Improvements - All Titles Aligned at Same Height (no uppercase) */
	.footer-menu-title {
		color: #333;
		font-size: 13px;
		font-weight: 700;
		margin-bottom: 8px;
		margin-top: 0;
		text-transform: none;
		letter-spacing: 0.2px;
		padding-bottom: 5px;
		border-bottom: 2px solid #e0e0e0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.3;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100%;
		min-height: 20px;
		height: auto;
		position: relative;
		top: 0;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: normal !important;
	}

	/* Ensure all column titles align at the same height */
	.footer-list .footer-menu-title,
	.footer-list.edge .footer-menu-title,
	.footer-list-video .footer-menu-title {
		margin-top: 0 !important;
		padding-top: 0 !important;
		vertical-align: top;
		align-self: flex-start;
	}

	/* Make sure video column title text is fully visible */
	.footer-list-video .footer-menu-title {
		text-indent: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}

	/* Footer Menu Sub Items - Use 100% of column width */
	ul.footer-menu-sub {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100% !important;
		max-width: 100% !important;
		display: block;
		box-sizing: border-box;
	}

	ul.footer-menu-sub li {
		padding: 8px 0;
		margin: 0;
		transition: transform 0.2s ease;
		line-height: 1.6;
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		clear: both;
		box-sizing: border-box;
		white-space: normal;
	}

	ul.footer-menu-sub li:hover {
		transform: translateX(-3px);
	}

	ul.footer-menu-sub li a {
		color: #555;
		text-decoration: none;
		font-size: 13px;
		transition: color 0.2s ease;
		display: block !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.6;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		white-space: normal;
	}

	ul.footer-menu-sub li a:hover {
		color: var(--primary-color, #f7941e);
		text-decoration: underline;
	}

	/* Video Support Section - Now in Fourth Column - Use 100% width */
	.footer-list-container {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.footer-list-video {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		max-width: 100% !important;
	}

	#video-support-section {
		margin-top: 0;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Video Section Sub-titles (dt) - Should NOT look like main column titles */
	#video-support-section dt {
		font-weight: 600;
		color: #444;
		font-size: 11px;
		margin: 10px 0 6px 0;
		padding-bottom: 4px;
		border-bottom: 1px solid #d0d0d0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.3;
		text-transform: none;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#video-support-section dt:first-child {
		margin-top: 8px;
	}

	#video-support-section dd {
		margin: 4px 0 4px 0;
		padding: 0;
		line-height: 1.4;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#video-support-section dd.video-element {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0;
	}

	#video-support-section dd.video-element a {
		color: #555;
		text-decoration: none;
		font-size: 12px;
		transition: color 0.2s ease;
		display: block !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.4;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}

	#video-support-section dd.video-element a:hover {
		color: var(--primary-color, #f7941e);
		text-decoration: underline;
	}

	/* Separator Improvements */
	.separator {
		margin: 20px 0;
		padding: 0;
	}

	.separator-line1 {
		height: 1px;
		background: linear-gradient(to right, transparent, #d0d0d0, transparent);
		margin: 0 auto;
		max-width: 100%;
	}

	/* Partner Logos Container Improvements - 4 Columns Per Row, No White Background */
	.conatiner-logos {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 15px !important;
		margin-top: 20px;
		padding: 15px 0;
		width: 100% !important;
	}

	.conatiner-logos .partner-logos {
		width: calc((100% - 45px) / 4) !important;
		flex: 0 0 calc((100% - 45px) / 4) !important;
		min-width: calc((100% - 45px) / 4) !important;
		max-width: calc((100% - 45px) / 4) !important;
		padding: 0 !important;
		text-align: center;
		background: transparent !important;
		border-radius: 0;
		box-shadow: none !important;
		transition: none;
		margin: 0 !important;
	}

	.partner-logos {
		width: calc((100% - 45px) / 4) !important;
		flex: 0 0 calc((100% - 45px) / 4) !important;
		min-width: calc((100% - 45px) / 4) !important;
		max-width: calc((100% - 45px) / 4) !important;
		padding: 0 !important;
		text-align: center;
		background: transparent !important;
		border-radius: 0;
		box-shadow: none !important;
		transition: none;
		margin: 0 !important;
	}

	.partner-logos:hover {
		transform: none;
		box-shadow: none !important;
	}

	.partner-logos h3 {
		font-size: 12px;
		font-weight: 600;
		color: #666;
		margin: 0 0 8px 0;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.partner-logos img {
		width: 100%;
		height: auto;
		object-fit: contain;
		max-height: 70px;
		transition: none;
	}

	.partner-logos:hover img {
		transform: none;
	}

	/* Implemented Section */
	#implemented {
		width: calc((100% - 45px) / 4) !important;
		flex: 0 0 calc((100% - 45px) / 4) !important;
		min-width: calc((100% - 45px) / 4) !important;
		max-width: calc((100% - 45px) / 4) !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#implemented h3 {
		margin-bottom: 8px;
	}

	#implemented img {
		width: 45% !important;
		float: none !important;
		margin: 0;
	}

	/* Copyright Section - Separate Line, Alone, No White Background */
	.footer-social {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #e0e0e0;
		background: transparent !important;
		text-align: center !important;
		clear: both;
	}

	.copyright {
		float: none !important;
		text-align: center !important;
		font-size: 14px;
		color: #666;
		margin: 0 auto !important;
		background: transparent !important;
		padding: 0;
		border: none;
		box-shadow: none;
		width: 100%;
		display: block !important;
		clear: both;
	}

	/* Footer Align */
	.footer-align {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px 0;
	}

	/* Remove white background from all partner logos */
	.conatiner-logos .partner-logos {
		background: transparent !important;
		box-shadow: none !important;
	}

	/* Responsive adjustments for tablets - stack footer only below 768px */
	@media only screen and (max-width: 767px) {
		.footer {
			padding: 20px 15px 15px;
		}

		.footer-content {
			padding: 0 5px;
		}

		.footer-list {
			flex: 1 1 100%;
			min-width: 100%;
			max-width: 100%;
			margin-bottom: 20px;
			padding: 0;
		}

		.footer-list.edge {
			flex: 1 1 100%;
			min-width: 100%;
			max-width: 100%;
		}

		.footer-list-video {
			flex: 1 1 100%;
			min-width: 100%;
			max-width: 100%;
		}

		ul.footer-menu {
			flex-direction: column;
			gap: 0;
		}

		.footer-menu-title {
			font-size: 15px;
			cursor: pointer;
			position: relative;
			padding-right: 20px;
		}

		.footer-menu-title::after {
			content: '+';
			position: absolute;
			right: 0;
			font-size: 18px;
			font-weight: 300;
			transition: transform 0.3s ease;
		}

		.footer-menu-title.active::after {
			content: '−';
			transform: rotate(0deg);
		}

		ul.footer-menu-sub {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
		}

		.footer-menu-title.active + ul.footer-menu-sub,
		.footer-menu-title.active + .footer-list-container > ul.footer-menu-sub {
			max-height: 1000px;
		}

		.conatiner-logos {
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			gap: 15px;
		}

		.partner-logos {
			flex: 0 0 calc(50% - 8px);
			min-width: calc(50% - 8px);
			max-width: calc(50% - 8px);
		}

		#implemented {
			flex: 0 0 calc(50% - 8px);
			min-width: calc(50% - 8px);
			max-width: calc(50% - 8px);
		}

		#implemented img {
			width: 45% !important;
		}
	}

	/* 768px up to 830px - compact 4 columns so footer is not cropped (override ids_responsive_style) */
	@media only screen and (min-width: 768px) and (max-width: 830px) {
		.footer {
			padding: 22px 16px 18px;
		}
		.footer-content {
			padding: 0 8px;
		}
		ul.footer-menu {
			gap: 6px;
			padding: 0;
			flex-direction: row !important;
			flex-wrap: nowrap !important;
		}
		ul.footer-menu li,
		.footer-list,
		.footer-list.edge,
		.footer-list-video {
			width: auto !important;
			flex: 1 1 0;
			max-width: calc(25% - 5px);
			min-width: 0;
			padding: 0 2px;
			margin-bottom: 0 !important;
		}
		.footer-menu-title {
			font-size: 12px;
		}
		ul.footer-menu-sub {
			max-height: none !important;
		}
		ul.footer-menu-sub li a {
			font-size: 12px;
		}
		.conatiner-logos {
			display: flex !important;
			flex-wrap: wrap !important;
		}
		.partner-logos,
		#implemented {
			width: calc(25% - 8px) !important;
			min-width: 0;
			max-width: calc(25% - 8px);
		}
	}

	/* Responsive adjustments for iPad 1024 - Keep 4 columns, prevent right column crop */
	@media only screen and (min-width: 1000px) and (max-width: 1024px) {
		.footer {
			padding: 25px 20px 20px;
		}
		.footer-content {
			padding: 0 12px;
		}
		ul.footer-menu {
			gap: 6px;
			padding: 0;
		}
		.footer-list,
		.footer-list.edge,
		.footer-list-video {
			max-width: calc(25% - 5px);
			padding: 0 2px;
			min-width: 0;
		}
		.footer-menu-title {
			font-size: 12px;
		}
		ul.footer-menu-sub li a {
			font-size: 12px;
		}
	}

	/* Responsive adjustments for smaller tablets - Keep 4 columns for menu, 4 for logos (includes 768px) */
	@media only screen and (min-width: 768px) and (max-width: 999px) {
		ul.footer-menu {
			gap: 10px;
		}

		.footer-list,
		.footer-list.edge,
		.footer-list-video {
			flex: 1 1 0;
			max-width: calc(25% - 8px);
			min-width: 0;
		}

		.conatiner-logos {
			gap: 12px !important;
		}

		.conatiner-logos .partner-logos,
		.partner-logos {
			width: calc((100% - 36px) / 4) !important;
			flex: 0 0 calc((100% - 36px) / 4) !important;
			min-width: calc((100% - 36px) / 4) !important;
			max-width: calc((100% - 36px) / 4) !important;
		}

		#implemented {
			width: calc((100% - 36px) / 4) !important;
			flex: 0 0 calc((100% - 36px) / 4) !important;
			min-width: calc((100% - 36px) / 4) !important;
			max-width: calc((100% - 36px) / 4) !important;
		}
	}
}

/* Mobile (430px and below): remove plus signs and show all footer content expanded */
@media only screen and (max-width: 430px) {
	.footer-menu-title::after,
	.footer-menu-title.active::after {
		content: none !important;
		display: none !important;
	}

	.footer-menu-title {
		cursor: default;
		padding-right: 0;
	}

	ul.footer-menu-sub,
	.footer-list-container ul.footer-menu-sub,
	.footer-list-video .footer-menu-sub,
	.footer-list-video #video-support-section {
		max-height: none !important;
		overflow: visible !important;
	}
}