/*
 * Mobile app mode (Settings -> Mobile App): bottom tab bar + install chip.
 * Phones only - nothing here shows above 767px.
 */

.hbm-appbar,
.hbm-app-install {
	display: none;
}

@media (max-width: 767px) {

	/* Native-feeling taps: no grey flash, no double-tap zoom delay. */
	body.hbm-app {
		-webkit-tap-highlight-color: transparent;
		/* room for the bar so the footer is never hidden behind it */
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	body.hbm-app a,
	body.hbm-app button {
		touch-action: manipulation;
	}

	.hbm-appbar {
		position: fixed;
		z-index: 9990;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: stretch;
		height: calc(62px + env(safe-area-inset-bottom, 0px));
		padding: 0 4px env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--hbm-border, #ece6d9);
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
		box-shadow: 0 -6px 24px rgba(20, 24, 31, 0.07);
		transition: transform 0.2s ease;
	}

	/* The on-screen keyboard is up: a fixed bar would float over the field. */
	body.hbm-app-kb .hbm-appbar {
		transform: translateY(110%);
	}

	/* Doubled class: themes / Elementor restyle plain a / a:hover. */
	.hbm-appbar .hbm-appbar-item.hbm-appbar-item {
		position: relative;
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 6px 2px 4px;
		color: var(--hbm-text-light, #6b7280);
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0;
		text-decoration: none;
		text-transform: none;
		background: transparent;
		border: 0;
	}

	.hbm-appbar .hbm-appbar-item .hbm-icon {
		width: 22px;
		height: 22px;
		stroke-width: 1.7;
		transition: transform 0.15s ease;
	}

	.hbm-appbar .hbm-appbar-item.hbm-appbar-item:active .hbm-icon {
		transform: scale(0.88);
	}

	.hbm-appbar .hbm-appbar-item.hbm-appbar-item.is-active {
		color: var(--hbm-primary-dark, #9a6b1c);
	}

	.hbm-appbar .hbm-appbar-item.is-active .hbm-icon {
		stroke-width: 2.2;
	}

	/* small gold pill above the active icon */
	.hbm-appbar .hbm-appbar-item.is-active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 26px;
		height: 3px;
		margin-left: -13px;
		border-radius: 0 0 3px 3px;
		background: var(--hbm-primary, #d4a656);
	}

	/* Centre "Book Now": raised gold button. It opens the availability form. */
	.hbm-appbar .hbm-appbar-item.hbm-appbar-check.hbm-appbar-check {
		color: #14181f;
		font-weight: 700;
		overflow: visible;
	}

	.hbm-appbar .hbm-appbar-check .hbm-icon {
		box-sizing: content-box;
		width: 24px;
		height: 24px;
		margin-top: -22px;
		padding: 13px;
		border: 4px solid #fff;
		border-radius: 50%;
		background: var(--hbm-primary, #d4a656);
		color: #fff;
		box-shadow: 0 6px 16px rgba(154, 107, 28, 0.4);
	}

	/* The page's own fixed "Check Availability" strip would sit exactly under
	   the tab bar; the centre button replaces it (the form sheet is the same). */
	body.hbm-app .hbm-af-mobile-fixed:not(.hbm-af-expanded) .hbm-af-mobile-trigger {
		display: none;
	}

	/* The availability sheet is open: it owns the screen. */
	body.hbm-app:has(.hbm-af-expanded) .hbm-appbar,
	body.hbm-app:has(.hbm-af-expanded) .hbm-wa,
	body.hbm-app:has(.hbm-af-expanded) .hbm-app-install {
		display: none;
	}

	/* Floating WhatsApp button: sit above the bar instead of under it. */
	body.hbm-app .hbm-wa {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	/* Install chip: one dismissible line just above the bar. */
	.hbm-app-install {
		position: fixed;
		z-index: 9991;
		right: 12px;
		bottom: calc(74px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px 10px 14px;
		border-radius: 14px;
		background: #14181f;
		color: #fff;
		font-size: 13.5px;
		line-height: 1.35;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	}

	.hbm-app-install[hidden] {
		display: none;
	}

	.hbm-app-install-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.hbm-app-install .hbm-app-install-btn.hbm-app-install-btn {
		flex: 0 0 auto;
		padding: 8px 14px;
		border: 0;
		border-radius: 9px;
		background: var(--hbm-primary, #d4a656);
		color: #14181f;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
	}

	.hbm-app-install .hbm-app-install-x.hbm-app-install-x {
		flex: 0 0 auto;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
		font-size: 16px;
		line-height: 1;
		cursor: pointer;
	}
}

/* Opened from the home screen: no browser chrome, so the page itself should
   not be selectable / long-press-callout like a web page. */
@media (display-mode: standalone) and (max-width: 767px) {
	body.hbm-app {
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
	}

	body.hbm-app input,
	body.hbm-app textarea,
	body.hbm-app .post-content,
	body.hbm-app .hbm-od-code {
		-webkit-user-select: text;
		user-select: text;
	}
}