/**
 * LocalXAds Footer Pro - Responsive Stylesheet
 * Strictly scoped under .lxfp-footer.
 */

/* ==========================================================================
   1. Device Visibility Utilities
   ========================================================================== */

@media (min-width: 992px) {
	.lxfp-footer .lxfp-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.lxfp-footer .lxfp-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.lxfp-footer .lxfp-hide-mobile {
		display: none !important;
	}
}

/* ==========================================================================
   2. Tablet Viewport (<= 991px)
   ========================================================================== */

@media (max-width: 991px) {
	.lxfp-footer .lxfp-cta-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 32px;
	}

	.lxfp-footer .lxfp-cta-actions {
		width: 100%;
		flex-wrap: wrap;
	}

	.lxfp-footer .lxfp-col {
		flex: 0 0 calc(50% - (var(--lxfp-col-gap, 36px) * 0.5));
	}
}

/* ==========================================================================
   3. Mobile Viewport (<= 767px)
   ========================================================================== */

@media (max-width: 767px) {
	.lxfp-footer .lxfp-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.lxfp-footer .lxfp-cta-section {
		padding-top: 36px;
	}

	.lxfp-footer .lxfp-cta-card {
		padding: 24px 20px;
		border-radius: 14px;
		text-align: center;
		align-items: center;
	}

	.lxfp-footer .lxfp-cta-headline {
		font-size: 20px;
	}

	.lxfp-footer .lxfp-cta-description {
		font-size: 14px;
	}

	.lxfp-footer .lxfp-cta-actions {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	.lxfp-footer .lxfp-cta-actions .lxfp-btn {
		width: 100%;
	}

	.lxfp-footer .lxfp-main-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.lxfp-footer .lxfp-main-grid {
		gap: 20px;
	}

	.lxfp-footer .lxfp-col {
		flex: 0 0 100%;
	}

	/* Mobile Accordion Mode */
	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-col {
		border-bottom: 1px solid var(--lxfp-border, #1E293B);
		padding-bottom: 14px;
		gap: 0;
	}

	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-col-header {
		cursor: pointer;
		padding: 6px 0;
	}

	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-accordion-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.25s ease;
	}

	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-col-content {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.25s ease;
	}

	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-col.lxfp-col-expanded .lxfp-col-content {
		max-height: 800px;
		opacity: 1;
		margin-top: 14px;
	}

	.lxfp-footer .lxfp-main-grid.lxfp-mobile-accordion .lxfp-col.lxfp-col-expanded .lxfp-accordion-trigger {
		transform: rotate(180deg);
		color: var(--lxfp-primary, #00C6FF);
	}

	/* Bottom Bar Mobile Stacking */
	.lxfp-footer .lxfp-bottom-inner {
		flex-direction: column;
		text-align: center;
		justify-content: center;
		gap: 16px;
	}

	.lxfp-footer .lxfp-legal-list {
		justify-content: center;
		gap: 14px;
	}

	.lxfp-footer .lxfp-bottom-right {
		display: flex;
		justify-content: center;
	}

	#lxfp-back-to-top {
		bottom: 20px;
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	#lxfp-back-to-top.lxfp-pos-right {
		right: 18px;
	}

	#lxfp-back-to-top.lxfp-pos-left {
		left: 18px;
	}
}