/* ============================================================
   Home Page – Modern UI overrides (CSS-only)
   Covers:
     1. .lw-home-empty-filter-container  (inline empty-state filter card)
     2. #emptyStateFilterDialog          (modal version opened via search icon)
     3. .frame article / .article__content (profile swiping cards)
   ============================================================ */

/* ── Shared token layer ─────────────────────────────────── */
:root {
	--hm-primary:      var(--lw-primary-color, #e10b2d);
	--hm-primary-rgb:  225, 11, 45;
	--hm-dark-1:       #1a1a2e;
	--hm-dark-2:       #16213e;
	--hm-dark-3:       #0f3460;
	--hm-surface:      #f4f5f8;
	--hm-surface-2:    #ffffff;
	--hm-border:       rgba(0,0,0,0.07);
	--hm-radius:       18px;
	--hm-radius-sm:    12px;
	--hm-radius-xs:    8px;
	--hm-shadow-sm:    0 2px 8px  rgba(0,0,0,0.07);
	--hm-shadow-md:    0 8px 24px rgba(0,0,0,0.11);
	--hm-transition:   all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--hm-glass:        rgba(255,255,255,0.11);
	--hm-glass-border: rgba(255,255,255,0.20);
}

/* ============================================================
   1. EMPTY-STATE / INLINE FILTER CARD
   ============================================================ */

/* Outer card */
.lw-home-empty-filter-container.card {
	border-radius: var(--hm-radius) !important;
	border: none !important;
	overflow: hidden;
	box-shadow: var(--hm-shadow-md);
	background: var(--hm-surface-2);
}

/* Card body: dark gradient header feel via background split */
.lw-home-empty-filter-container .card-body {
	padding: 0;
	background: var(--hm-surface);
}

/* "No users" message bar – sticky pill on top of the dark gradient area */
.lw-home-empty-filter-container .empty-message {
	margin: 0 !important;
	padding: 16px 20px 18px;
	background: linear-gradient(135deg, var(--hm-dark-1), var(--hm-dark-2) 60%, var(--hm-dark-3)) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 0.88rem;
	line-height: 1.5;
	text-align: center;
}
.lw-home-empty-filter-container .empty-message,
.lw-home-empty-filter-container .empty-message *,
.lw-home-empty-filter-container .empty-message a,
.lw-home-empty-filter-container .empty-message strong,
.lw-home-empty-filter-container .empty-message span {
	color: #ffffff !important;
}

/* Alert warning locks inside the dark area */
.lw-home-empty-filter-container .alert-warning {
	background: rgba(255,193,7,0.14);
	border-color: rgba(255,193,7,0.30);
	color: #ffe082;
	border-radius: var(--hm-radius-xs);
	font-size: 0.82rem;
}
.lw-home-empty-filter-container .alert-info {
	background: rgba(23,162,184,0.15) !important;
	border-color: rgba(23,162,184,0.40) !important;
	color: #0c4a6e !important;
	border-radius: var(--hm-radius-xs);
	font-size: 0.82rem;
}
.lw-home-empty-filter-container .alert-info small,
.lw-home-empty-filter-container .alert-info i {
	color: #0c4a6e !important;
}

/* Filter form wrapper */
.lw-home-empty-filter-container form#lwHomeEmptyStateFilterForm {
	padding: 16px 20px 20px;
	background: var(--hm-surface);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}

/* Each filter chip group */
.lw-home-empty-filter-container .lw-basic-filter-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

/* Labels */
.lw-home-empty-filter-container .lw-basic-filter-field label,
.lw-home-empty-filter-container form label {
	font-size: 0.73rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8a8aab;
	margin-bottom: 0;
}

/* Inputs & selects */
.lw-home-empty-filter-container .form-control,
.lw-home-empty-filter-container .custom-select {
	background: var(--hm-surface-2);
	border: 1.5px solid rgba(0,0,0,0.09);
	border-radius: var(--hm-radius-xs) !important;
	font-size: 0.85rem;
	color: var(--hm-dark-1);
	height: 38px;
	padding: 6px 12px;
	box-shadow: var(--hm-shadow-sm);
	transition: var(--hm-transition);
}
.lw-home-empty-filter-container .form-control:focus,
.lw-home-empty-filter-container .custom-select:focus {
	border-color: var(--hm-primary);
	box-shadow: 0 0 0 3px rgba(var(--hm-primary-rgb), 0.18);
	outline: none;
}
.lw-home-empty-filter-container .form-control:disabled,
.lw-home-empty-filter-container .custom-select:disabled {
	background: rgba(0,0,0,0.05);
	color: #aaa;
	cursor: not-allowed;
}

/* Change Location button */
.lw-home-empty-filter-container .btn-outline-primary#lwEmptyStateShowMapBtn {
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.82rem;
	padding: 8px 18px;
	border-width: 1.5px;
	transition: var(--hm-transition);
}
.lw-home-empty-filter-container .btn-outline-primary#lwEmptyStateShowMapBtn:hover {
	background: var(--hm-primary);
	border-color: var(--hm-primary);
	color: #fff;
}

/* Submit button (filter apply) */
.lw-home-empty-filter-container .btn-primary,
.lw-home-empty-filter-container button[type="submit"] {
	background: linear-gradient(135deg, var(--hm-primary), #ff6b6b);
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 8px 22px;
	box-shadow: 0 4px 14px rgba(var(--hm-primary-rgb), 0.35);
	transition: var(--hm-transition);
}
.lw-home-empty-filter-container .btn-primary:hover,
.lw-home-empty-filter-container button[type="submit"]:hover {
	opacity: 0.9;
	box-shadow: 0 6px 20px rgba(var(--hm-primary-rgb), 0.50);
}

/* Map container area */
.lw-home-empty-filter-container #lwEmptyStateMapContainer {
	border-radius: var(--hm-radius-sm);
	overflow: hidden;
	margin: 0 20px 16px;
	box-shadow: var(--hm-shadow-sm);
}
.lw-home-empty-filter-container #lwEmptyStateLocationMap {
	border-radius: var(--hm-radius-sm);
}

/* ============================================================
   2. SEARCH MODAL (#emptyStateFilterDialog)
   ============================================================ */

#emptyStateFilterDialog .modal-dialog {
	border-radius: var(--hm-radius);
	overflow: hidden;
}

#emptyStateFilterDialog .modal-content {
	border: none;
	border-radius: var(--hm-radius);
	overflow: hidden;
	box-shadow: var(--hm-shadow-md);
	background: var(--hm-surface-2);
}

/* Modal header → dark gradient matching near-me/filter style */
#emptyStateFilterDialog .modal-header {
	background: linear-gradient(135deg, var(--hm-dark-1), var(--hm-dark-2) 60%, var(--hm-dark-3));
	border-bottom: none;
	padding: 18px 24px;
}
#emptyStateFilterDialog .modal-header .modal-title {
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.2px;
}
#emptyStateFilterDialog .modal-header .close {
	color: rgba(255,255,255,0.70);
	text-shadow: none;
	opacity: 1;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0;
	transition: var(--hm-transition);
}
#emptyStateFilterDialog .modal-header .close:hover {
	color: #ffffff;
}

/* Modal body */
#emptyStateFilterDialog .modal-body {
	background: var(--hm-surface);
	padding: 0;
}

/* The filter card inside the modal body – flatten its wrapping */
#emptyStateFilterDialog .modal-body .lw-home-empty-filter-container.card {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* "No users" message inside modal → remove gradient (header already dark) */
#emptyStateFilterDialog .modal-body .empty-message,
#emptyStateFilterDialog .modal-body .empty-message *,
#emptyStateFilterDialog .modal-body .empty-message a,
#emptyStateFilterDialog .modal-body .empty-message strong,
#emptyStateFilterDialog .modal-body .empty-message span {
	background: transparent !important;
	color: var(--hm-dark-1) !important;
	padding: 0;
}
#emptyStateFilterDialog .modal-body .empty-message {
	padding: 16px 24px 10px !important;
}

/* Apply same modern form inside modal */
#emptyStateFilterDialog .modal-body form#lwHomeEmptyStateFilterForm {
	padding: 12px 24px 20px;
}

/* ============================================================
   3. PROFILE SWIPE CARDS (article / .article__content)
   ============================================================ */

/* Make cards themselves have a deeper, more polished look */
.frame article {
	border-radius: 20px !important;
	border: none !important;
	outline: none !important;
	/* No shadow – the full-bleed photo fills the card edge-to-edge */
	box-shadow: none !important;
	/* Promote to its own GPU layer so transform during swipe is free */
	will-change: transform;
	transform: translateZ(0);
}

/* Hide the white gradient pseudo-element that bleeds around card edges
   and looks like a shadow/border behind the swipe card */
.frame .container::before {
	background: transparent !important;
}

/* Bottom info overlay: true glassmorphism gradient */
.frame .article__content {
	background: linear-gradient(
		to top,
		rgba(10, 10, 20, 0.92) 0%,
		rgba(10, 10, 20, 0.70) 40%,
		rgba(10, 10, 20, 0.25) 70%,
		rgba(10, 10, 20, 0.00) 100%
	) !important;
	padding: 20px 16px 14px !important;
	border-radius: 0 0 20px 20px;
}

/* Name */
.frame .article__content h2 {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: #ffffff !important;
	text-shadow: 0 1px 6px rgba(0,0,0,0.40);
	margin-bottom: 8px;
}

/* Premium badge */
.cards .premium-tag {
	background: linear-gradient(135deg, #f7971e, #ffd200) !important;
	color: #1a1a2e !important;
	padding: 2px 10px !important;
	font-weight: 800 !important;
	font-size: 0.62rem !important;
	letter-spacing: 0.6px;
	border-radius: 999px !important;
	box-shadow: 0 2px 8px rgba(247,151,30,0.45);
}

/* Info rows */
.frame .article__content div {
	font-size: 0.78rem !important;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 3px rgba(0,0,0,0.30);
	gap: 6px !important;
	margin-bottom: 3px !important;
}

/* Online status badge */
.article__content .user-status {
	background: rgba(56,202,120,0.25);
	border: 1px solid rgba(56,202,120,0.45);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	color: #38ca78 !important;
	letter-spacing: 0.3px;
}

/* Photo indicator bar – thicker + elevated */
.photo-indicator-bar {
	padding: 10px 14px !important;
	gap: 4px !important;
}
.photo-indicator {
	height: 3px !important;
	border-radius: 3px !important;
	background-color: rgba(255,255,255,0.35) !important;
}
.photo-indicator:hover {
	background-color: rgba(255,255,255,0.65) !important;
	height: 4px !important;
}
.photo-indicator.active {
	background-color: #ffffff !important;
	height: 4px !important;
}

/* Photo prev/next arrows – no backdrop-filter to avoid per-frame repaint */
.photo-arrow {
	background: rgba(0,0,0,0.45) !important;
	border: 1px solid rgba(255,255,255,0.18);
	transition: background 0.15s ease;
}
.photo-arrow:hover {
	background: rgba(0,0,0,0.65) !important;
}

/* Choice stamp buttons (LIKE / NOPE overlay) – text-shadow instead of filter */
.frame .choice-btn.like {
	text-shadow: 0 4px 10px rgba(99,255,104,0.55);
}
.frame .choice-btn.nope {
	text-shadow: 0 4px 10px rgba(255,110,99,0.55);
}

/* Dock action bar (footer) – subtle floating card look */
.frame footer {
	background: rgba(255,255,255,0.96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 999px;
	padding: 6px 12px;
	box-shadow: 0 -4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
	margin: 8px 0 10px;
}

body.lw-home-page .frame footer {
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
	border-radius: 0;
}

/* ============================================================
   5. RESPONSIVE – mobile card sizing & overflow guard
   ============================================================ */

/* On mobile, constrain the empty-state container to the
   visible viewport so the filter card never slides under
   the action bar. The card becomes internally scrollable. */
@media (max-width: 768px) {

	/* Contain the filter card height so the page grid stays intact */
	.empty-state-container {
		max-height: calc(100dvh - 170px); /* leave room for nav + footer */
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* Slimmer outer card radius on small screens */
	.lw-home-empty-filter-container.card {
		border-radius: var(--hm-radius-sm) !important;
	}

	/* Compact header / empty-message bar */
	.lw-home-empty-filter-container .empty-message {
		padding: 12px 14px 14px;
		font-size: 0.82rem;
	}

	/* Compact form padding */
	.lw-home-empty-filter-container form#lwHomeEmptyStateFilterForm {
		padding: 12px 14px 16px;
		gap: 10px;
	}

	/* Compact filter labels */
	.lw-home-empty-filter-container .lw-basic-filter-field label,
	.lw-home-empty-filter-container form label {
		font-size: 0.68rem;
	}

	/* Compact inputs */
	.lw-home-empty-filter-container .form-control,
	.lw-home-empty-filter-container .custom-select {
		font-size: 0.82rem;
		padding: 6px 10px;
		height: 34px;
	}

	/* Compact apply button */
	.lw-home-empty-filter-container .lw-home-filter-apply-btn {
		padding: 8px 18px;
		font-size: 0.83rem;
		border-radius: var(--hm-radius-sm);
	}

	/* Location section padding */
	.lw-distance-location-container {
		padding: 10px 14px 14px;
	}

	/* Alert text compact */
	.lw-home-empty-filter-container .alert-info,
	.lw-home-empty-filter-container .alert-warning {
		font-size: 0.78rem;
		padding: 8px 10px;
	}

	/* Ensure footer action bar stays opaque and above card on home page.
	   Solid bg – no backdrop-filter on mobile to keep compositing cheap */
	.frame footer {
		position: relative;
		z-index: 20;
		background: rgba(255,255,255,0.98) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-radius: 999px !important;
		box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
	}
}

/* Extra-small phones */
@media (max-width: 480px) {
	.empty-state-container {
		max-height: calc(100dvh - 160px);
	}

	.lw-home-empty-filter-container .empty-message {
		padding: 10px 12px 12px;
		font-size: 0.80rem;
	}

	.lw-home-empty-filter-container form#lwHomeEmptyStateFilterForm {
		padding: 10px 12px 14px;
		gap: 8px;
	}
}

/* ============================================================
   iOS PWA – Safe-area inset fixes
   body.ios-standalone is set by JS in footer.blade.php when
   the app runs as a home-screen PWA on iPhone/iPad.
   The status bar overlaps the top of the viewport, so we
   must push content down by env(safe-area-inset-top).
   ============================================================ */

/* ── Filter modal: push entire dialog below the status bar ── */
body.ios-standalone #emptyStateFilterDialog .modal-dialog {
	margin-top: calc(env(safe-area-inset-top, 20px) + 8px) !important;
}

/* Extra safety: add the inset directly into the header padding
   so the title and close button are always fully visible */
body.ios-standalone #emptyStateFilterDialog .modal-header {
	padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

/* ── All other Bootstrap modals (premium, boost, etc.) ───── */
body.ios-standalone .modal-dialog {
	margin-top: calc(env(safe-area-inset-top, 20px) + 4px) !important;
}

/* ── Top-bar: give it room above the status bar ──────────── */
body.ios-standalone .topbar {
	padding-top: env(safe-area-inset-top, 0px) !important;
}

/* The top-bar dropdown filter box naturally opens below the
   padded navbar so no extra tweak needed for it.
   But on very small viewports the filter dropdown can clip
   the screen horizontally; keep it fully in-bounds. */
body.ios-standalone .lw-basic-filter-container {
	max-width: calc(100vw - 16px) !important;
	right: 0 !important;
	left: auto !important;
}