/* ==========================================================================
   DekhoBiz — Mobile-First UX Upgrade  (v1.3.0)
   Additive polish for the user journey: login / signup / add + edit listing /
   dashboard / review request / business detail. Desktop layout is preserved:
   heavy changes are wrapped in mobile media queries; only accessibility and
   tap-target improvements apply on all viewports.
   Hooks existing DekhoBiz classes only. Safe to remove by disabling the file.
   ========================================================================== */

:root {
	--db-mfu-tap: 44px;          /* min touch target (WCAG/Google mobile)      */
	--db-mfu-radius: 12px;
	--db-mfu-btn-radius: 10px;
	--db-mfu-accent: #d71920;    /* DekhoBiz red (kept consistent)             */
	--db-mfu-bar-h: 64px;
	--db-mfu-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- Accessibility: visible focus on all viewports (helps UX signals) ---- */
.db-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--db-mfu-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

	/* Prevent iOS auto-zoom on focus: inputs must be >=16px on mobile. */
	.db-public-form input,
	.db-public-form select,
	.db-public-form textarea,
	.db-field input,
	.db-field select,
	.db-field textarea,
	.db-owner-auth-form input,
	.db-add-listing-page input,
	.db-add-listing-page select,
	.db-add-listing-page textarea,
	.db-workspace input,
	.db-workspace select,
	.db-workspace textarea {
		font-size: 16px !important;
		min-height: var(--db-mfu-tap);
		border-radius: 10px;
	}

	/* Comfortable, thumb-friendly buttons everywhere in the flow. */
	.db-btn {
		min-height: var(--db-mfu-tap);
		border-radius: var(--db-mfu-btn-radius);
		font-size: 15px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	/* ---------------------------------------------------------------- AUTH */
	.db-auth-shell,
	.db-auth-app,
	.db-login-page .db-auth-form-wrap,
	.db-signup-page .db-auth-form-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
	.db-auth-image-slot { display: none; }          /* focus on the form on small screens */
	.db-auth-form-wrap { width: 100%; max-width: 100%; }
	.db-auth-tabs {
		position: sticky;
		top: 0;
		z-index: 5;
		background: #fff;
		display: flex;
		gap: 8px;
	}
	.db-auth-tabs > * { flex: 1 1 0; text-align: center; }
	.db-owner-auth-form .db-btn,
	.db-owner-auth-form button[type="submit"] { width: 100%; }
	/* Signup step rail: horizontal scroll instead of squeezing. */
	.db-signup-steps__rail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.db-signup-step-chip { flex: 0 0 auto; }

	/* ------------------------------------------------ ADD / EDIT LISTING */
	.db-add-listing-page,
	.db-add-listing-page--workspace,
	.db-add-listing-builder-slot { padding-left: 14px; padding-right: 14px; }

	/* One column, no nested-card crush on phones. */
	.db-builder-group-grid,
	.db-field-grid,
	.db-two-col { grid-template-columns: 1fr !important; display: grid; gap: 12px; }

	/* Sticky "save / continue" footer so the primary action is always reachable. */
	.db-builder-actions,
	.db-workspace-form-actions,
	.db-form-sticky-actions {
		position: sticky;
		bottom: 0;
		z-index: 6;
		background: #fff;
		padding: 10px 0 calc(10px + var(--db-mfu-safe-b));
		box-shadow: 0 -6px 18px rgba(0,0,0,.06);
		display: flex;
		gap: 10px;
	}
	.db-builder-actions .db-btn,
	.db-workspace-form-actions .db-btn { flex: 1 1 0; }

	/* --------------------------------------------------------- DASHBOARD */
	.db-dashboard-grid,
	.db-account-grid { grid-template-columns: 1fr !important; }
	/* Turn horizontal stat rows into a 2-up grid that reads well on phones. */
	.db-stat-row,
	.db-metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.db-workspace .db-card,
	.db-dashboard-card { border-radius: var(--db-mfu-radius); }

	/* --------------------------------------------- BUSINESS DETAIL PAGE */
	/* Leave room for the injected sticky action bar. */
	body.db-has-mobile-actionbar {
		padding-bottom: calc(var(--db-mfu-bar-h) + var(--db-mfu-safe-b) + 8px);
	}
	.db-business-detail-main .db-profile-actions .db-btn { width: 100%; }

	/* --------------------------------------------------- BOTTOM SHEETS */
	.db-simple-modal .db-simple-modal__panel,
	.db-modal .db-modal-dialog {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: 16px 16px 0 0;
		max-height: 92vh;
		overflow-y: auto;
		padding-bottom: calc(16px + var(--db-mfu-safe-b));
	}
}

/* ==========================================================================
   Injected mobile action bar (built by db-mobile-ux.js on business pages)
   Shown only on mobile; hidden on desktop.
   ========================================================================== */
.db-mobile-action-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	display: none;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	padding: 8px 10px calc(8px + var(--db-mfu-safe-b));
	background: #ffffff;
	border-top: 1px solid #ececec;
	box-shadow: 0 -8px 22px rgba(0,0,0,.10);
}
.db-mobile-action-bar a,
.db-mobile-action-bar button {
	appearance: none;
	border: 0;
	cursor: pointer;
	min-height: var(--db-mfu-tap);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	background: #f5f6f7;
	color: #202124;
}
.db-mobile-action-bar .db-mab-primary { background: var(--db-mfu-accent); color: #fff; }
.db-mobile-action-bar .db-mab-wa { background: #25d366; color: #fff; }
.db-mobile-action-bar svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
	.db-mobile-action-bar { display: grid; }
}

/* ==========================================================================
   Back-to-top button (built by db-mobile-ux.js)
   ========================================================================== */
.db-back-to-top {
	position: fixed;
	right: 14px;
	bottom: calc(var(--db-mfu-bar-h) + 14px + var(--db-mfu-safe-b));
	z-index: 39;
	width: 42px; height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(32,33,36,.82);
	color: #fff;
	font-size: 18px;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
.db-back-to-top.is-visible { opacity: 1; visibility: visible; }
@media (min-width: 769px) {
	.db-back-to-top { bottom: 24px; }
}