/**
 * Filmabonito Companion – Mobile bottom bar
 * Shown only on mobile (max-width: 768px), fixed to bottom.
 */

/* Hide on desktop */
@media (min-width: 769px) {
	.filmabonito-mobile-bottom-bar {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.filmabonito-mobile-bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		background: #1a1a1a;
		border-top: 1px solid #333;
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
	}

	.filmabonito-mobile-bottom-bar-inner {
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		max-width: 100%;
		padding: 8px 4px 4px;
	}

	.filmabonito-mobile-bar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-width: 0;
		padding: 6px 4px;
		color: #afaba6;
		text-decoration: none;
		font-size: 11px;
		transition: color 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.filmabonito-mobile-bar-item:hover,
	.filmabonito-mobile-bar-item:focus {
		color: #fff;
	}

	.filmabonito-mobile-bar-item.active {
		color: #fd0;
	}

	.filmabonito-mobile-bar-icon {
		display: block;
		font-size: 22px;
		line-height: 1;
		margin-bottom: 4px;
	}

	.filmabonito-mobile-bar-icon-wrap {
		position: relative;
		display: block;
		margin-bottom: 4px;
	}

	.filmabonito-mobile-bar-icon-wrap .filmabonito-mobile-bar-icon {
		margin-bottom: 0;
	}

	.filmabonito-mobile-bar-count {
		position: absolute;
		top: -8px;
		right: -10px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 10px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
		color: #1a1a1a;
		background: #fd0;
		border-radius: 10px;
	}

	.filmabonito-mobile-bar-label {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Add bottom padding to body so content isn’t hidden behind the bar */
	body.filmabonito-mobile-bar-visible {
		padding-bottom: 60px;
	}
	body.filmabonito-mobile-bar-visible .filmabonito-mobile-bottom-bar {
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
	}
}

/* Ensure bar doesn’t cover modals / sticky elements that use high z-index */
.filmabonito-mobile-bottom-bar {
	z-index: 9998;
}

/* Hide the bottom bar when the fullscreen search map is open */
body.ser-mobile-map-open .filmabonito-mobile-bottom-bar {
	display: none !important;
}