/* ============================================================
   getVIRTUAL Listing Cards
   Design concept: certificate / registration-document counterfoil.
   Warm paper, deep ink, brass seal accent. See design plan notes.
   ============================================================ */

:root {
	--gv-ink: #16213D;
	--gv-paper: #FBF8F2;
	--gv-seal: #A97C50;
	--gv-slate: #5B6472;
	--gv-line: #DAD2C0;
	--gv-check: #2F6F4E;
}

.gv-results-intro {
	font-family: 'IBM Plex Sans', sans-serif;
	color: var(--gv-slate);
	font-size: 14px;
	margin-bottom: 20px;
}

.gv-results-message {
	font-family: 'IBM Plex Sans', sans-serif;
	background: #FBF3DF;
	border: 1px solid #E8D9AE;
	color: var(--gv-ink);
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	margin-bottom: 20px;
}
.gv-unavailable-message {
	border-left: 4px solid #B32D2E;
	font-weight: 500;
}

/* Fix: the results grid was centered (margin:0 auto) inside a
   wider container while the headings/banners above and below it
   are flush-left -- causing the cards to look indented/misaligned.
   Left-align the grid to match, and add breathing room below it
   so the "Other options..." banner doesn't touch the last row. */
.gv-card-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 820px;
	margin: 0 0 32px;
}

.gv-card {
	position: relative;
	display: flex;
	background: var(--gv-paper);
	border: 1px solid var(--gv-ink);
	border-radius: 5px;
	overflow: visible;
	box-shadow: 0 2px 0 rgba(22, 33, 61, 0.06);
}

/* ---- Verified stamp ---- */
.gv-verified-stamp {
	position: absolute;
	top: -10px;
	left: 20px;
	background: var(--gv-seal);
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	transform: rotate(-4deg);
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ---- Thumbnail image ---- */
.gv-card-thumb {
	flex: 0 0 140px;
	overflow: hidden;
}
.gv-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Left: info block ---- */
.gv-card-info {
	flex: 1 1 auto;
	padding: 26px 24px 20px;
	min-width: 0;
}

.gv-card-name {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--gv-ink);
	margin: 0 0 4px;
	line-height: 1.25;
}

.gv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.gv-tag {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--gv-ink);
	border: 1px solid var(--gv-line);
	background: rgba(169, 124, 80, 0.06);
	padding: 3px 10px;
	border-radius: 3px;
	white-space: nowrap;
}

.gv-card-turnaround {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 13px;
	color: var(--gv-slate);
	display: flex;
	align-items: center;
	gap: 6px;
}

.gv-card-turnaround strong {
	font-family: 'IBM Plex Mono', monospace;
	color: var(--gv-ink);
	font-weight: 500;
}

.gv-card-missing {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 12.5px;
	color: #92400E;
	background: #FEF6E7;
	border: 1px solid #F5DFAE;
	border-radius: 4px;
	padding: 6px 10px;
	margin-bottom: 10px;
}
.gv-card-missing strong {
	font-weight: 600;
}

/* ---- Perforated divider (the signature element) ---- */
.gv-perforation {
	position: relative;
	width: 0;
	border-left: 2px dashed var(--gv-line);
	margin: 0;
	flex-shrink: 0;
}
.gv-perforation::before,
.gv-perforation::after {
	content: '';
	position: absolute;
	left: -8px;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 1px solid var(--gv-ink);
	border-radius: 50%;
}
.gv-perforation::before { top: -9px; }
.gv-perforation::after { bottom: -9px; }

/* ---- Right: price + actions stub ---- */
.gv-card-stub {
	flex: 0 0 220px;
	padding: 26px 22px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.gv-price-eyebrow {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gv-slate, #5B6472) !important;
	margin: 0 0 2px;
}

.gv-price-figure {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 26px;
	font-weight: 500;
	color: var(--gv-ink, #16213D) !important;
	margin: 0 0 18px;
}
.gv-price-figure span {
	font-size: 13px;
	color: var(--gv-slate, #5B6472) !important;
	font-weight: 400;
}

.gv-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gv-btn {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--gv-ink);
	transition: background 0.15s ease, color 0.15s ease;
}
.gv-btn-primary {
	background: var(--gv-ink);
	color: var(--gv-paper);
}
.gv-btn-primary:hover {
	background: #0d1730;
}
.gv-btn-secondary {
	background: transparent;
	color: var(--gv-ink);
}
.gv-btn-secondary:hover {
	background: rgba(22, 33, 61, 0.06);
}

/* ---- Responsive: stack vertically on narrow screens ---- */
@media (max-width: 640px) {
	.gv-card {
		flex-direction: column;
	}
	.gv-card-thumb {
		flex: 0 0 160px;
		width: 100%;
	}
	.gv-perforation {
		width: auto;
		height: 0;
		border-left: none;
		border-top: 2px dashed var(--gv-line);
	}
	.gv-perforation::before,
	.gv-perforation::after {
		top: -8px;
		left: auto;
	}
	.gv-perforation::before { left: -9px; }
	.gv-perforation::after { right: -9px; }
	.gv-card-stub {
		flex: 1 1 auto;
	}
}

/* ---- Reduced motion / focus visibility ---- */
.gv-btn:focus-visible {
	outline: 2px solid var(--gv-seal);
	outline-offset: 2px;
}

/* --- Card v2: photo on top, masked name as a single-line overlay
   caption, details + price + actions stacked full-width below --- */

.gv-card2 {
	display: flex;
	flex-direction: column;
	background: var(--gv-paper, #FBF8F2);
	border: 1px solid var(--gv-ink, #16213D);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 0 rgba(22, 33, 61, 0.06);
}
.gv-card2-best-match {
	border-color: var(--gv-check, #2F6F4E);
	border-width: 2px;
	box-shadow: 0 3px 0 rgba(47, 111, 78, 0.15);
}
.gv-best-match-banner {
	background: #eef8f3;
	border: 1px solid #2F6F4E;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 0 0 12px;
}
.gv-best-match-star {
	display: inline-block;
	background: #2F6F4E;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 6px;
}
.gv-best-match-banner p {
	margin: 6px 0 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	color: #16213D !important;
	opacity: 1 !important;
}

.gv-card2-photo {
	display: block;
	position: relative;
	width: 100%;
	height: 190px;
	overflow: hidden;
	background: #f2efe8;
	text-decoration: none;
	cursor: pointer;
}
.gv-card2-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gv-card2-photo-placeholder {
	width: 100%;
	height: 100%;
}

.gv-card2-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(22, 33, 61, 0.88), rgba(22, 33, 61, 0));
	color: #fff;
	font-family: 'IBM Plex Serif', serif;
	font-weight: 600;
	font-size: 15px;
	padding: 22px 14px 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gv-verified-stamp2 {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

/* Fix: cards in a row stretch to match the tallest one (e.g. a
   card with a "Turnaround" line, or a best-match banner). A shorter
   card then had all that extra height dumped as dead space below
   its price/buttons row. Making the body a column flexbox that
   fills the stretched card -- with the footer pushed to its bottom
   via margin-top: auto below -- keeps every card's price/buttons
   row flush with the bottom edge instead, regardless of how much
   content sits above it. */
.gv-card2-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Locality badge — clearly shows which city/sub-locality each card is
   in, especially important for "elsewhere in [State]" fallback results
   where every card may be in a different city. */
.gv-card-locality {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: var(--gv-ink, #16213D) !important;
	background: rgba(0, 183, 179, 0.10);
	padding: 3px 10px;
	border-radius: 999px;
	margin: 12px 0 14px;
	position: relative;
	z-index: 2;
}

.gv-card2-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--gv-line, #DAD2C0);
}
.gv-card2-price {
	flex: 1 1 160px;
}
.gv-card2-footer .gv-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 170px;
}

/* Fix: this fixed 900px cap left a visible blank strip on the
   right whenever the results column was wider than 900px (e.g. the
   "Elsewhere in Uttar Pradesh" 2-card rows), since the grid did not
   stretch to fill its container and was not centered. Filling the
   container width instead keeps two even columns that always match
   the available space, on any screen size. */
.gv-card-list {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	max-width: 100% !important;
}
@media (max-width: 700px) {
	.gv-card-list {
		grid-template-columns: 1fr !important;
	}
	.gv-card2-name {
		font-size: 13.5px;
		padding: 18px 12px 8px;
	}
}