/* ============================================================
   getVIRTUAL Office Detail Page
   Shares tokens with listing-cards.css (--gv-ink, --gv-paper, etc.)
   ============================================================ */

/* ---- Request Site Visit modal: deliberately its own distinct
   overlay rather than an inline form section, with a quick flash-in
   entrance so opening it reads as a real action, not a page jump. ---- */
.gv-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(22, 33, 61, 0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.18s ease;
}
.gv-modal.gv-modal-flash-in {
	opacity: 1;
}
.gv-modal-inner {
	background: var(--gv-paper, #FBF8F2);
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(22, 33, 61, 0.3);
	max-width: 440px;
	width: 92%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	transform: scale(0.9) translateY(12px);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gv-modal.gv-modal-flash-in .gv-modal-inner {
	transform: scale(1) translateY(0);
}
.gv-visit-modal-inner {
	padding: 28px 26px 24px;
}
.gv-visit-modal-inner h3 {
	font-family: 'IBM Plex Serif', serif;
	font-size: 20px;
	margin: 0 0 6px;
	color: var(--gv-primary, #00B7B3);
}
.gv-modal-close-x {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: var(--gv-slate, #5B6472);
	cursor: pointer;
	padding: 4px;
}
.gv-modal-close-x:hover {
	color: var(--gv-ink, #16213D);
}

.gv-detail-page {
	max-width: 980px;
	margin: 40px auto;
	padding: 0 20px;
	font-family: 'IBM Plex Sans', sans-serif;
	color: var(--gv-ink);
}

.gv-form-section-heading {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 24px 0 12px !important;
	color: var(--gv-ink);
}

.gv-photo-upload-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
@media (max-width: 700px) {
	.gv-photo-upload-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.gv-photo-upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px dashed var(--gv-line);
	border-radius: 8px;
	padding: 16px 8px;
	min-height: 90px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.gv-photo-upload-box:hover {
	border-color: var(--gv-primary, #00B7B3);
	background: rgba(0, 183, 179, 0.05);
}
.gv-photo-upload-box.gv-photo-filled {
	border-style: solid;
	border-color: var(--gv-check, #2F6F4E);
	background: rgba(47, 111, 78, 0.05);
}
.gv-photo-upload-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--gv-ink);
	margin-bottom: 4px;
}
.gv-photo-upload-filename {
	font-size: 11px;
	color: var(--gv-slate);
	word-break: break-word;
}

.gv-listing-pill {
	font-weight: 400;
	font-size: 13px;
	font-family: 'IBM Plex Sans', sans-serif;
	border: 1px solid var(--gv-line);
	border-radius: 20px;
	padding: 6px 14px;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
}
.gv-listing-pill input[type="checkbox"] {
	display: inline-block !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 6px 0 0 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

.gv-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0, 183, 179, 0.2);
	border-top-color: var(--gv-primary, #00B7B3);
	border-radius: 50%;
	animation: gv-spin 0.7s linear infinite;
	vertical-align: middle;
}
@keyframes gv-spin {
	to { transform: rotate(360deg); }
}

.gv-gallery-section {
	margin-bottom: 24px;
}
.gv-gallery-main {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--gv-line);
	background: #f2efe8;
}
.gv-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gv-gallery-nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(22, 33, 61, 0.55);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.15s ease;
}
.gv-gallery-nav-arrow:hover {
	background: rgba(22, 33, 61, 0.85);
}
.gv-gallery-nav-prev {
	left: 12px;
}
.gv-gallery-nav-next {
	right: 12px;
}
.gv-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.gv-gallery-thumb {
	width: 84px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.75;
	flex-shrink: 0;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gv-gallery-thumb:hover {
	opacity: 1;
}
.gv-gallery-thumb.gv-thumb-active {
	opacity: 1;
	border-color: var(--gv-seal);
}

.gv-detail-header {
	position: relative;
	padding-top: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gv-line);
	margin-bottom: 30px;
}

.gv-detail-header .gv-verified-stamp {
	position: absolute;
	top: 0;
	left: 0;
}

.gv-detail-name {
	font-family: 'IBM Plex Serif', serif;
	font-weight: 700;
	font-size: 34px;
	margin: 10px 0 6px;
	color: var(--gv-primary, #00B7B3);
}

.gv-detail-tagline {
	font-style: italic;
	color: var(--gv-slate);
	margin: 0 0 8px;
	font-size: 15px;
}

.gv-detail-locality {
	color: var(--gv-slate, #5B6472) !important;
	font-size: 14px;
	margin: 0;
}
.gv-property-type-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--gv-line, #E4E1D9);
	color: var(--gv-ink, #16213D);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: middle;
}

.gv-detail-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 36px;
}

@media (max-width: 800px) {
	.gv-detail-grid {
		grid-template-columns: 1fr;
	}
}

.gv-detail-section {
	margin-bottom: 34px;
}

.gv-detail-description {
	font-size: 15px;
	line-height: 1.65;
	color: var(--gv-ink);
	margin: 0;
}
.gv-mailing-note {
	font-size: 13px;
	color: var(--gv-slate, #5B6472);
	font-style: italic;
	margin: -8px 0 12px;
}

.gv-detail-section h2 {
	font-family: 'IBM Plex Serif', serif;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
	color: var(--gv-primary, #00B7B3);
}

.gv-compat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.gv-compat-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--gv-line);
}
.gv-compat-table td:first-child {
	color: var(--gv-ink);
	/* Fixed rather than shrink-to-fit (was width: 1%) -- this table
	   markup is reused for both the Compatibility list and the
	   Business Types Supported list below it, and letting each table
	   size its own first column to its own longest label put the
	   "Supported" column at a different x-position in each one. A
	   shared width, wide enough for either table's longest label,
	   keeps both tables' checkmarks lined up on one edge. */
	width: 232px;
	white-space: nowrap;
	padding-right: 24px;
}
.gv-compat-table td:last-child {
	text-align: left;
	/* Keep "\u2713 Supported" / "\u2713 Available" from wrapping onto a
	   second line if the column ever gets squeezed narrower. */
	white-space: nowrap;
}
.gv-check {
	color: var(--gv-check);
	font-weight: 500;
}
.gv-cross {
	color: var(--gv-slate);
}

.gv-faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.gv-faq-item {
	border-left: 2px solid var(--gv-line);
	padding-left: 16px;
}
.gv-faq-q {
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--gv-ink);
}
.gv-faq-a {
	margin: 0;
	color: var(--gv-slate);
	font-size: 14px;
	line-height: 1.6;
}

/* ---- Sidebar cards ---- */
.gv-price-card,
.gv-enquiry-card {
	background: var(--gv-paper);
	border: 1px solid var(--gv-ink);
	border-radius: 5px;
	padding: 22px;
	margin-bottom: 24px;
}

.gv-price-figure {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 6px;
}
.gv-price-figure span {
	font-size: 14px;
	color: var(--gv-slate);
	font-weight: 400;
}
.gv-price-range-note {
	font-size: 13px;
	color: var(--gv-slate);
	margin: 0 0 12px;
}
.gv-price-breakdown {
	font-size: 12.5px;
	color: var(--gv-slate);
	border-top: 1px dashed var(--gv-line);
	padding-top: 10px;
	margin-top: 10px;
}
.gv-price-breakdown p {
	margin: 3px 0;
}
.gv-price-breakdown-main {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
	font-size: 14px;
	color: var(--gv-ink);
}
.gv-price-breakdown-main strong {
	font-family: 'IBM Plex Mono', monospace;
}

.gv-price-disclaimer {
	font-size: 12.5px;
	color: var(--gv-slate);
	line-height: 1.5;
	border-top: 1px dashed var(--gv-line);
	padding-top: 12px;
	margin-top: 12px;
}
.gv-fast-doc {
	color: var(--gv-check);
	font-size: 13px;
	font-weight: 500;
	margin: 10px 0 0;
}
.gv-turnaround {
	font-size: 13px;
	color: var(--gv-slate);
	margin: 6px 0 0;
}
.gv-turnaround strong {
	font-family: 'IBM Plex Mono', monospace;
	color: var(--gv-ink);
}

.gv-enquiry-card h3 {
	font-family: 'IBM Plex Serif', serif;
	font-size: 18px;
	margin: 0 0 16px;
	color: var(--gv-primary, #00B7B3);
}
.gv-requirement-summary {
	background: rgba(169, 124, 80, 0.08);
	border: 1px solid var(--gv-line);
	border-radius: 4px;
	padding: 12px 10px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--gv-ink);
}
.gv-requirement-summary p {
	margin: 0 0 4px;
}
.gv-requirement-summary p:last-child {
	margin-bottom: 0;
}
.gv-requirement-summary strong {
	color: var(--gv-slate);
	font-weight: 500;
}
.gv-form-field {
	margin-bottom: 12px;
}
.gv-form-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
}
.gv-form-field input:not([type="checkbox"]):not([type="radio"]),
.gv-form-field textarea,
.gv-form-field select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--gv-line);
	border-radius: 4px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}
.gv-form-field input[type="checkbox"],
.gv-form-field input[type="radio"] {
	width: auto;
	margin-right: 6px;
	vertical-align: middle;
}
.gv-checkbox-inline {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	cursor: pointer;
}
.gv-visit-hours-note {
	font-size: 12px;
	color: var(--gv-slate);
	margin: 6px 0 0;
}
.gv-enquiry-status {
	font-size: 13px;
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 4px;
}
.gv-enquiry-status.gv-success {
	background: #E8F3EC;
	color: var(--gv-check);
}
.gv-enquiry-status.gv-error {
	background: #FBEAEA;
	color: #A33;
}

.gv-not-supported {
	color: #B32D2E;
	font-weight: 500;
	font-size: 13px;
}
.gv-not-applicable {
	color: var(--gv-slate, #5B6472);
	font-style: italic;
	font-size: 13px;
}

.gv-support-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 6px 0 4px;
	font-size: 13px;
}
.gv-support-table th:first-child,
.gv-support-table td:first-child {
	width: 56%;
	padding-right: 10px;
	word-wrap: break-word;
}
.gv-support-table th:last-child,
.gv-support-table td:last-child {
	width: 44%;
	white-space: nowrap;
}
.gv-support-table th {
	text-align: left;
	font-weight: 600;
	color: var(--gv-slate);
	padding: 4px 8px 4px 0;
	border-bottom: 1px solid var(--gv-line);
}
.gv-support-table td {
	padding: 4px 8px 4px 0;
	border-bottom: 1px solid var(--gv-line);
	color: var(--gv-ink);
}
.gv-support-table tr:last-child td {
	border-bottom: none;
}
.gv-support-yes {
	color: var(--gv-check);
	font-weight: 500;
	white-space: nowrap;
}
.gv-support-no {
	color: #B32D2E;
	font-weight: 500;
	white-space: nowrap;
}