/**
 * Mobile View styles (Module 7.1).
 *
 * A self-contained, premium, card-based mobile design — entirely
 * separate from admin/css/desktop-view.css (no shared selectors), so
 * nothing here can ever affect the Desktop View. Inter font, soft
 * shadows, rounded corners, compact spacing, large touch-friendly
 * buttons. Tested down to a 320px viewport with no horizontal scroll.
 */

* {
	box-sizing: border-box;
}

html,
body.y2b-mv-body {
	margin: 0;
	padding: 0;
	background: #f8fafc;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1e293b;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100vw;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.y2b-mv-wrap {
	max-width: 100%;
	padding: 12px 12px 32px;
	margin: 0 auto;
}

.y2b-mv-hidden {
	display: none !important;
}

/* ── HEADER ── */
.y2b-mv-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fff;
	border: 1px solid #e7ebf2;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 );
	padding: 10px 12px;
	margin-bottom: 10px;
}

.y2b-mv-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.y2b-mv-header-icon {
	width: 30px;
	height: 30px;
	background: #2563eb;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* "Click to Home" button (Module 10.1) — sits directly before the
   header icon. */
.y2b-mv-home-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #fff;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	color: #2563eb;
	flex-shrink: 0;
	text-decoration: none;
}

.y2b-mv-home-btn svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
}

.y2b-mv-header-icon svg {
	width: 16px;
	height: 16px;
	color: #fff;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
}

.y2b-mv-header-text {
	min-width: 0;
}

.y2b-mv-header-title {
	font-size: 0.88rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.y2b-mv-header-sub {
	font-size: 0.66rem;
	color: #64748b;
	font-weight: 500;
	white-space: nowrap;
}

.y2b-mv-count {
	background: #eff6ff;
	border: 1px solid #dbeafe;
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 0.68rem;
	font-weight: 700;
	color: #2563eb;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── SEARCH + FILTERS TOGGLE ── */
.y2b-mv-search-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.y2b-mv-search-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}

.y2b-mv-search-input {
	width: 100%;
	height: 44px;
	padding: 0 12px 0 40px;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	font-size: 0.85rem;
	font-family: inherit;
	background: #fff;
	color: #1e293b;
	outline: none;
}

.y2b-mv-search-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.12 );
}

.y2b-mv-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY( -50% );
	width: 15px;
	height: 15px;
	color: #94a3b8;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	pointer-events: none;
}

.y2b-mv-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 14px;
	background: #2563eb;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.y2b-mv-filters-toggle svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

/* ── COLLAPSIBLE FILTERS PANEL ── */
.y2b-mv-filters-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid #e7ebf2;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 );
	padding: 12px;
	margin-bottom: 12px;
}

.y2b-mv-fg {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.y2b-mv-fg label {
	font-size: 0.62rem;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.y2b-mv-fg select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 44px;
	padding: 0 30px 0 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	font-size: 0.85rem;
	font-family: inherit;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px 14px;
	color: #1e293b;
	outline: none;
}

.y2b-mv-fg select:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.12 );
}

.y2b-mv-filter-actions {
	display: flex;
	gap: 8px;
}

.y2b-mv-apply-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	background: #16a34a;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.y2b-mv-apply-btn svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.4;
}

.y2b-mv-clear-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	background: #fff1f2;
	color: #e11d48;
	border: 1.5px solid #f43f5e;
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.y2b-mv-clear-btn svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

/* ── SUMMARY CARDS (Module 7.2) — same colours as Desktop's dashboard.css ── */
.y2b-mv-summary-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	margin-bottom: 10px;
}

.y2b-mv-sumcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 6px;
	border-radius: 12px;
	border: 1.5px solid;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 );
	transition: transform 0.15s ease;
}

.y2b-mv-sumcard:active {
	transform: scale( 0.96 );
}

.y2b-mv-sumcard-count {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.1;
}

.y2b-mv-sumcard-label {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.y2b-mv-sumcard-total { background: linear-gradient( 150deg, #f3f4ff 0%, #fafaff 100% ); border-color: #e0e3fb; }
.y2b-mv-sumcard-total .y2b-mv-sumcard-count, .y2b-mv-sumcard-total .y2b-mv-sumcard-label { color: #4338ca; }

.y2b-mv-sumcard-rent { background: linear-gradient( 150deg, #f2f7ff 0%, #fafcff 100% ); border-color: #dce8fb; }
.y2b-mv-sumcard-rent .y2b-mv-sumcard-count, .y2b-mv-sumcard-rent .y2b-mv-sumcard-label { color: #1d4ed8; }

.y2b-mv-sumcard-sale { background: linear-gradient( 150deg, #f1fbf5 0%, #fafefc 100% ); border-color: #dcf2e3; }
.y2b-mv-sumcard-sale .y2b-mv-sumcard-count, .y2b-mv-sumcard-sale .y2b-mv-sumcard-label { color: #15803d; }

.y2b-mv-sumcard-commercial { background: linear-gradient( 150deg, #fefbf1 0%, #fffdf8 100% ); border-color: #f5e8c8; }
.y2b-mv-sumcard-commercial .y2b-mv-sumcard-count, .y2b-mv-sumcard-commercial .y2b-mv-sumcard-label { color: #a16207; }

.y2b-mv-sumcard-pg { background: linear-gradient( 150deg, #faf6ff 0%, #fdfaff 100% ); border-color: #ecdffc; }
.y2b-mv-sumcard-pg .y2b-mv-sumcard-count, .y2b-mv-sumcard-pg .y2b-mv-sumcard-label { color: #7e22ce; }

.y2b-mv-sumcard-active { box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.25 ); }

/* ── BHK QUICK FILTER TAGS (Module 7.2) — smooth horizontal scroll ── */
.y2b-mv-bhk-tags {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	margin-bottom: 10px;
}

.y2b-mv-bhk-tags::-webkit-scrollbar {
	display: none;
}

.y2b-mv-bhk-tag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 18px;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	color: #334155;
	font-size: 0.76rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.y2b-mv-bhk-tag-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.y2b-mv-bhk-tag-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 5px;
	border-radius: 10px;
	background: #eff6ff;
	color: #2563eb;
	font-size: 0.66rem;
	font-weight: 700;
}

.y2b-mv-bhk-tag-active .y2b-mv-bhk-tag-count {
	background: rgba( 255, 255, 255, 0.25 );
	color: #fff;
}

/* ── POST PROPERTY BUTTON (Module 7.3 item 2) — sits as a 6th item in
   the Summary Cards grid, right after Paying Guest. ── */
.y2b-mv-post-property-btn {
	background: linear-gradient( 150deg, #eefdf3 0%, #fafffb 100% );
	border-color: #86e6ab;
	text-decoration: none;
	color: #15803d;
}

.y2b-mv-post-property-icon {
	width: 18px;
	height: 18px;
	fill: #25d366;
}

.y2b-mv-post-property-btn .y2b-mv-sumcard-label {
	color: #15803d;
	opacity: 1;
}

/* ── SKELETON LOADING ── */
.y2b-mv-skeleton {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.y2b-mv-skeleton-card {
	background: #fff;
	border: 1px solid #eef1f6;
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
}

.y2b-mv-skeleton-line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient( 90deg, #eef1f6 25%, #f8fafc 37%, #eef1f6 63% );
	background-size: 400% 100%;
	animation: y2b-mv-shimmer 1.4s ease infinite;
	margin-bottom: 8px;
}

.y2b-mv-skeleton-line-title {
	width: 55%;
	height: 16px;
}

.y2b-mv-skeleton-line-sub {
	width: 35%;
}

.y2b-mv-skeleton-line-text {
	width: 85%;
}

.y2b-mv-skeleton-buttons {
	height: 40px;
	border-radius: 10px;
	background: linear-gradient( 90deg, #eef1f6 25%, #f8fafc 37%, #eef1f6 63% );
	background-size: 400% 100%;
	animation: y2b-mv-shimmer 1.4s ease infinite;
	margin-top: 10px;
}

@keyframes y2b-mv-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* ── ERROR / EMPTY STATES ── */
.y2b-mv-error,
.y2b-mv-empty {
	text-align: center;
	padding: 36px 16px;
	background: #fff;
	border: 1px solid #e7ebf2;
	border-radius: 12px;
	color: #64748b;
}

.y2b-mv-error {
	color: #be123c;
	border-color: #fecdd3;
	background: #fff1f2;
}

.y2b-mv-error svg,
.y2b-mv-empty svg {
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	display: block;
	opacity: 0.3;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* ── CARDS ── */
.y2b-mv-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ── PROPERTY CARD — redesigned, professional look with a dark orange
   accent border (Module 7.3 item 4) ── */
.y2b-mv-card {
	background: linear-gradient( 180deg, #fffefc 0%, #ffffff 100% );
	border: 2px solid #c2410c;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba( 194, 65, 12, 0.08 ), 0 1px 3px rgba( 15, 23, 42, 0.05 );
}

.y2b-mv-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #fed7aa;
}

/* Posted Date — moved beside Property Type, bold, with "Posted On"
   prefix (Module 7.3 item 6). */
.y2b-mv-posted-date {
	font-size: 0.74rem;
	font-weight: 700;
	color: #1e293b;
	white-space: nowrap;
}

/* Property type badge — enlarged slightly (requirement 11) for more
   prominence. */
.y2b-mv-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
}

.y2b-mv-badge-rent { background: #eff6ff; color: #1d4ed8; }
.y2b-mv-badge-sell { background: #f0fdf4; color: #15803d; }
.y2b-mv-badge-pg { background: #fdf4ff; color: #7e22ce; }
.y2b-mv-badge-commercial { background: #fffbeb; color: #a16207; }
.y2b-mv-badge-default { background: #f1f5f9; color: #475569; }

/* BHK badge (requirement 9) */
.y2b-mv-badge-bhk { background: #eff6ff; color: #1d4ed8; font-size: 0.82rem; }

/* Furnishing badges (requirement 9) */
.y2b-mv-badge-ff { background: #f0fdf4; color: #15803d; }
.y2b-mv-badge-sf { background: #fffbeb; color: #a16207; }
.y2b-mv-badge-uf { background: #fff7ed; color: #c2410c; }

/* Suitable For badges (requirement 5 / 9) */
.y2b-mv-badge-family { background: #f0fdf4; color: #15803d; }
.y2b-mv-badge-bachelor { background: #eff6ff; color: #1d4ed8; }
.y2b-mv-badge-couple { background: #fdf4ff; color: #7e22ce; }
.y2b-mv-badge-ladies { background: #fdf2f8; color: #9d174d; }
.y2b-mv-badge-gents { background: #fff7ed; color: #c2410c; }

.y2b-mv-card-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

/* Price: label above amount (requirement 10) */
.y2b-mv-price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}

.y2b-mv-price-label {
	font-size: 0.6rem;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.y2b-mv-price {
	font-size: 1.1rem;
	font-weight: 800;
	color: #c2410c;
	white-space: nowrap;
}

/* Building Name + Location — both orange, professional typography
   (requirement 12) */
.y2b-mv-building {
	font-size: 0.88rem;
	font-weight: 700;
	color: #c2410c;
	margin-bottom: 3px;
}

.y2b-mv-location {
	font-size: 0.8rem;
	font-weight: 600;
	color: #ea580c;
	margin-bottom: 10px;
}

.y2b-mv-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

/* Description limited to exactly 4 lines, with an ellipsis if longer
   (Module 7.3 item 5, raised from 3 to 4). */
.y2b-mv-description {
	font-size: 0.78rem;
	line-height: 1.5;
	color: #475569;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 4.8em;
}

.y2b-mv-footer-row {
	display: flex;
	align-items: center;
	font-size: 0.72rem;
	color: #94a3b8;
	margin-bottom: 12px;
}

.y2b-mv-posted-by {
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
}

.y2b-mv-posted-by-broker { color: #15803d; background: #f0fdf4; }
.y2b-mv-posted-by-owner { color: #9d174d; background: #fdf2f8; }

/* ── EQUAL-WIDTH BUTTON ROW ── */
.y2b-mv-button-row {
	display: flex;
	gap: 7px;
}

.y2b-mv-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	border-radius: 10px;
	border: 1.5px solid;
	cursor: pointer;
	text-decoration: none;
	background: #fff;
	transition: transform 0.1s ease;
}

.y2b-mv-btn:active {
	transform: scale( 0.96 );
}

.y2b-mv-btn svg {
	width: 17px;
	height: 17px;
	stroke-width: 2;
}

.y2b-mv-btn-whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}
.y2b-mv-btn-whatsapp svg {
	fill: currentColor;
	stroke: none;
}

.y2b-mv-btn-call {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #2563eb;
}
.y2b-mv-btn-call svg {
	fill: none;
	stroke: currentColor;
}

.y2b-mv-btn-share {
	background: #fff;
	border-color: #cbd5e1;
	color: #475569;
}
.y2b-mv-btn-share svg {
	fill: none;
	stroke: currentColor;
}

.y2b-mv-btn-view {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}
.y2b-mv-btn-view svg {
	fill: none;
	stroke: currentColor;
}

.y2b-mv-btn-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ── LOAD MORE ── */
.y2b-mv-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.y2b-mv-load-more-btn {
	width: 100%;
	max-width: 320px;
	height: 46px;
	background: #fff;
	border: 1.5px solid #2563eb;
	color: #2563eb;
	border-radius: 12px;
	font-size: 0.86rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.y2b-mv-load-more-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── RESPONSIVE: 320px through 430px+, no horizontal scroll ── */
@media ( max-width: 359px ) {
	.y2b-mv-wrap {
		padding: 8px 8px 24px;
	}

	.y2b-mv-header-sub {
		display: none;
	}

	.y2b-mv-card-title-row {
		flex-wrap: wrap;
	}
}

@media ( min-width: 431px ) {
	.y2b-mv-wrap {
		max-width: 480px;
	}
}