/**
 * Footer styles — multi-column layout, social, payment strip.
 */

.xm-footer {
	background: var(--xm-color-bg-alt);
	border-top: 1px solid var(--xm-color-border);
	margin-top: 0;
}

.xm-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--xm-space-xl);
	padding-top: var(--xm-space-2xl);
	padding-bottom: var(--xm-space-2xl);
}

.xm-footer__column-title {
	font-size: clamp(0.9375rem, 1.2vw + 0.75rem, 1.0625rem);
	font-weight: var(--xm-font-weight-bold);
	margin: 0 0 var(--xm-space-md);
	color: var(--xm-color-text);
}

.xm-footer__link {
	color: var(--xm-color-text-muted);
	transition: color var(--xm-transition);
}

.xm-footer__link:hover {
	color: var(--xm-color-primary);
}

/* Brand — logo centered with labels, social list, Rate Us */
.xm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--xm-space-lg);
	max-width: 100%;
}

.xm-footer__brand-top {
	width: 100%;
}

.xm-footer__brand-link {
	display: flex;
	align-items: center;
	gap: var(--xm-space-md);
	color: var(--xm-color-text);
	text-decoration: none;
}

.xm-footer__brand-link:hover {
	color: var(--xm-color-text);
	text-decoration: none;
}

.xm-footer__brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	max-width: 140px;
}

.xm-footer__brand-logo {
	display: block;
	width: auto;
	max-width: 140px;
	max-height: 52px;
	height: auto;
	object-fit: contain;
}

.xm-footer__brand-fallback {
	font-size: clamp(1rem, 1.5vw + 0.75rem, 1.125rem);
	font-weight: var(--xm-font-weight-bold);
}

.xm-footer__brand-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.15rem;
	min-width: 0;
}

.xm-footer__brand-title {
	font-size: clamp(0.9375rem, 1.2vw + 0.75rem, 1.0625rem);
	font-weight: var(--xm-font-weight-bold);
	line-height: 1.2;
	color: var(--xm-color-text);
}

.xm-footer__brand-tagline {
	font-size: clamp(0.8125rem, 1vw + 0.65rem, 0.9375rem);
	color: var(--xm-color-text-muted);
	font-weight: var(--xm-font-weight-normal);
	line-height: 1.3;
}

.xm-footer__brand-social {
	display: flex;
	flex-direction: column;
	gap: var(--xm-space-sm);
	width: 100%;
}

.xm-footer__brand-social-title {
	margin: 0;
	font-size: clamp(0.8125rem, 1vw + 0.65rem, 0.9375rem);
	font-weight: var(--xm-font-weight-bold);
	color: var(--xm-color-text);
}

.xm-footer__brand-social-list {
	display: flex;
	flex-direction: column;
	gap: var(--xm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.xm-footer__brand-social-item {
	margin: 0;
	padding: 0;
}

.xm-footer__brand-social-link {
	display: flex;
	align-items: center;
	gap: var(--xm-space-sm);
	padding: var(--xm-space-xs) 0;
	color: var(--xm-color-text);
	text-decoration: none;
	transition: color var(--xm-transition), transform var(--xm-transition);
}

.xm-footer__brand-social-link:hover {
	color: var(--xm-color-primary);
	text-decoration: none;
	transform: translateX(4px);
}

.xm-footer__brand-social-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.xm-footer__brand-social-icon {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.xm-footer__brand-social-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.xm-footer__brand-social-name {
	font-size: var(--xm-font-size-sm);
	font-weight: var(--xm-font-weight-medium);
	line-height: 1.2;
}

.xm-footer__brand-social-handle {
	font-size: var(--xm-font-size-xs);
	color: var(--xm-color-text-muted);
	line-height: 1.2;
}

/* Contact list — full-row clickable links */
.xm-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--xm-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.xm-footer__contact-list > li {
	margin: 0;
	padding: 0;
}

.xm-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--xm-space-sm);
}

.xm-footer__contact-item--link {
	padding: var(--xm-space-sm);
	margin: calc(var(--xm-space-sm) * -1);
	border-radius: var(--xm-radius-md);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--xm-transition), transform var(--xm-transition), color var(--xm-transition);
}

.xm-footer__contact-item--link:hover {
	background: var(--xm-color-bg);
	transform: translateX(4px);
	color: inherit;
	text-decoration: none;
}

.xm-footer__contact-item--link:hover .xm-footer__contact-value {
	color: var(--xm-color-primary);
}

.xm-footer__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
}

.xm-footer__contact-icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.xm-footer__contact-icon--svg {
	color: var(--xm-color-primary);
}

.xm-footer__contact-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-size: clamp(0.8125rem, 1vw + 0.65rem, 0.9375rem);
	color: var(--xm-color-text-muted);
	line-height: 1.5;
}

.xm-footer__contact-label {
	font-weight: var(--xm-font-weight-bold);
	color: var(--xm-color-text);
}

.xm-footer__contact-value {
	transition: color var(--xm-transition);
}

/* Customer Service | About — always side by side */
.xm-footer__nav-row {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--xm-space-lg);
	width: 100%;
}

.xm-footer__nav-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	column-gap: var(--xm-space-md);
	width: 100%;
}

.xm-footer__nav-divider {
	display: block;
	width: 1px;
	min-height: 6rem;
	height: 100%;
	align-self: stretch;
	background: var(--xm-color-border);
	flex-shrink: 0;
}

.xm-footer__nav-group {
	min-width: 0;
}

.xm-footer__nav-group--payment {
	flex: 0 0 auto;
}

.xm-footer__nav-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xm-footer__nav-item {
	margin: 0;
	padding: 0;
	width: 100%;
}

.xm-footer__nav-link {
	display: inline-block;
	font-size: clamp(0.8125rem, 1.2vw + 0.6rem, 0.9375rem);
	color: var(--xm-color-text-muted);
	line-height: 1.45;
	text-decoration: none;
	transition: color var(--xm-transition), transform var(--xm-transition);
}

.xm-footer__nav-link:hover {
	color: var(--xm-color-primary);
	transform: translateX(4px);
	text-decoration: none;
}

/* Payment methods — centered horizontal row */
.xm-footer__payment {
	grid-column: 1 / -1;
	width: 100%;
	text-align: center;
	padding-top: var(--xm-space-sm);
}

.xm-footer__payment-title {
	font-size: clamp(0.9375rem, 1.2vw + 0.75rem, 1.0625rem);
	font-weight: var(--xm-font-weight-bold);
	color: var(--xm-color-text);
	margin: 0 0 var(--xm-space-sm);
	text-align: center;
}

.xm-footer__payment-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--xm-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.xm-footer__payment-item {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.xm-footer__payment-icon {
	display: block;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	object-fit: contain;
	object-position: center;
	opacity: 0.92;
	transition: opacity var(--xm-transition), transform var(--xm-transition);
}

.xm-footer__payment-item:hover .xm-footer__payment-icon {
	opacity: 1;
	transform: scale(1.05);
}

/* Social icon links (brand column) */
.xm-footer__social-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--xm-space-sm);
}

.xm-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--xm-radius-full);
	background: var(--xm-color-bg);
	border: 1px solid var(--xm-color-border);
	transition: transform var(--xm-transition), box-shadow var(--xm-transition);
	overflow: hidden;
}

.xm-footer__social-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--xm-shadow-sm);
}

.xm-footer__social-icon {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Payment methods block removed — lives in nav row */

.xm-footer__bottom {
	padding: var(--xm-space-lg) 0;
	border-top: 1px solid var(--xm-color-border);
	text-align: center;
}

.xm-footer__copyright {
	font-size: clamp(0.8125rem, 1vw + 0.65rem, 0.9375rem);
	color: var(--xm-color-text-muted);
	margin: 0;
}

@media (max-width: 767px) {
	.xm-footer__brand-social-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--xm-space-md);
	}

	.xm-footer__brand-social-item {
		flex: 1 1 calc(50% - var(--xm-space-md) / 2);
		min-width: 0;
	}

	.xm-footer__brand-social-link:hover {
		transform: none;
	}
}

@media (min-width: 768px) {
	.xm-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xm-footer__nav-pair {
		column-gap: var(--xm-space-xl);
		flex: 1 1 auto;
		max-width: none;
	}

	.xm-footer__nav-row {
		width: 100%;
	}

	.xm-footer__nav-divider {
		min-height: 8rem;
	}
}

@media (min-width: 1024px) {
	.xm-footer__columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

/* Floating WhatsApp */
.xm-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: var(--xm-space-sm);
	background: var(--xm-color-whatsapp);
	color: var(--xm-color-white);
	padding: var(--xm-space-sm) var(--xm-space-md);
	border-radius: var(--xm-radius-full);
	box-shadow: var(--xm-shadow-lg);
	min-height: var(--xm-touch-min);
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
	overflow: visible;
	transition:
		opacity 0.32s ease,
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--xm-transition);
}

.xm-whatsapp-float__ring {
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	border: 2px solid rgba(37, 211, 102, 0.55);
	opacity: 0;
	pointer-events: none;
}

.xm-whatsapp-float.is-popping .xm-whatsapp-float__ring {
	animation: xm-whatsapp-ring 0.9s ease-out;
}

.xm-whatsapp-float.is-popping .xm-whatsapp-float__ring--delayed {
	animation-delay: 0.18s;
}

.xm-whatsapp-float.is-engage {
	animation: xm-whatsapp-engage 0.72s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes xm-whatsapp-ring {
	0% {
		opacity: 0.85;
		transform: scale(0.92);
	}

	100% {
		opacity: 0;
		transform: scale(1.55);
	}
}

@keyframes xm-whatsapp-engage {
	0%,
	100% {
		transform: scale(1) translateY(0);
	}

	20% {
		transform: scale(1.14) translateY(-4px) rotate(-4deg);
	}

	40% {
		transform: scale(1.06) translateY(-2px) rotate(3deg);
	}

	60% {
		transform: scale(1.12) translateY(-3px) rotate(-2deg);
	}

	80% {
		transform: scale(1.04) translateY(-1px) rotate(1deg);
	}
}

.xm-whatsapp-float.is-hidden {
	opacity: 0;
	transform: scale(0.72) translateY(14px);
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.15);
}

.xm-whatsapp-float.is-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.xm-whatsapp-float.is-popping {
	animation: xm-whatsapp-pop 0.52s cubic-bezier(0.34, 1.45, 0.64, 1);
	box-shadow: 0 10px 32px rgba(37, 211, 102, 0.5);
}

.xm-whatsapp-float.is-popping.is-engage {
	box-shadow: 0 14px 40px rgba(37, 211, 102, 0.62);
}

@keyframes xm-whatsapp-pop {
	0% {
		opacity: 0;
		transform: scale(0.55) translateY(18px);
	}

	65% {
		opacity: 1;
		transform: scale(1.08) translateY(-3px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.xm-whatsapp-float.is-visible:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
	color: var(--xm-color-white);
}

.xm-whatsapp-float.is-hidden:hover {
	transform: scale(0.72) translateY(14px);
	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.15);
}

.xm-whatsapp-float__icon {
	display: flex;
	flex-shrink: 0;
}

.xm-whatsapp-float__label {
	font-size: var(--xm-font-size-sm);
	font-weight: var(--xm-font-weight-medium);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.xm-whatsapp-float {
		bottom: 16px;
		right: 16px;
		padding: var(--xm-space-sm);
		border-radius: var(--xm-radius-full);
		width: var(--xm-touch-min);
		height: var(--xm-touch-min);
		justify-content: center;
	}

	.xm-whatsapp-float__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xm-whatsapp-float {
		transition: opacity 0.2s ease;
	}

	.xm-whatsapp-float.is-popping {
		animation: none;
	}

	.xm-whatsapp-float.is-engage {
		animation: none;
	}

	.xm-whatsapp-float.is-popping .xm-whatsapp-float__ring {
		animation: none;
	}
}