/**
 * WP-Cadastre Public Stylesheet
 * Premium, Modern and Fully Responsive Layout System.
 */

:root {
	--wp-cadastre-accent: #2563eb;
	--wp-cadastre-accent-hover: #1d4ed8;
	--wp-cadastre-border-radius: 14px;
	--wp-cadastre-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--wp-cadastre-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

/* 1. Sistemes de Temes */
.theme-glassmorphic {
	--wpc-bg: #f8fafc;
	--wpc-card-bg: rgba(255, 255, 255, 0.85);
	--wpc-card-border: #cbd5e1;
	--wpc-text: #0f172a;
	--wpc-text-muted: #334155;
	--wpc-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.06);
	--wpc-blur: blur(12px);
	--wpc-badge-bg: #eff6ff;
	--wpc-badge-text: var(--wp-cadastre-accent);
}

.theme-light {
	--wpc-bg: #ffffff;
	--wpc-card-bg: #f8fafc;
	--wpc-card-border: #cbd5e1;
	--wpc-text: #0f172a;
	--wpc-text-muted: #334155;
	--wpc-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	--wpc-blur: none;
	--wpc-badge-bg: #f1f5f9;
	--wpc-badge-text: #334155;
}

.theme-dark {
	--wpc-bg: #0f172a;
	--wpc-card-bg: #1e293b;
	--wpc-card-border: #334155;
	--wpc-text: #f8fafc;
	--wpc-text-muted: #94a3b8;
	--wpc-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
	--wpc-blur: none;
	--wpc-badge-bg: #334155;
	--wpc-badge-text: #f8fafc;
}

/* Estils Generals del Contenidor */
.wp-cadastre-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--wpc-text);
	background-color: var(--wpc-bg);
	border-radius: var(--wp-cadastre-border-radius);
	padding: 24px;
	box-shadow: var(--wpc-shadow);
	margin-bottom: 30px;
	position: relative;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	transition: var(--wp-cadastre-transition);
}

/* 2. Cercador d'Adreces (Autocomplete) */
.wp-cadastre-search-bar {
	position: relative;
	margin-bottom: 20px;
	z-index: 1000;
}

.wp-cadastre-input-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: var(--wpc-card-bg);
	border: 1.5px solid var(--wpc-card-border);
	border-radius: var(--wp-cadastre-border-radius);
	padding: 10px 18px;
	box-shadow: var(--wpc-shadow);
	backdrop-filter: var(--wpc-blur);
	transition: var(--wp-cadastre-transition);
}

/* El input de texto nunca debería encogerse por debajo de un ancho legible,
   aunque el botón "Consultar" (RC) o el de borrar aparezcan a su lado: si no
   caben todos en la misma línea, que el botón "Consultar" baje de línea en
   lugar de comerse el espacio del propio campo de búsqueda (esto es lo que
   dejaba el input en ~20px de ancho en móvil, y el desplegable de Google
   Places -que copia el ancho del input- truncaba todas las direcciones). */
#wp-cadastre-search-input {
	min-width: 140px;
}

.wp-cadastre-input-wrapper:focus-within {
	border-color: var(--wp-cadastre-accent);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.wp-cadastre-search-icon {
	font-size: 20px;
	margin-right: 12px;
	color: var(--wpc-text-muted);
}

#wp-cadastre-search-input {
	flex-grow: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	color: var(--wpc-text) !important;
	font-size: 16px !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	width: 100%;
}

#wp-cadastre-clear-btn {
	background: none;
	border: none;
	color: var(--wpc-text-muted);
	font-size: 20px;
	cursor: pointer;
	padding: 0 8px;
	transition: var(--wp-cadastre-transition);
}

#wp-cadastre-clear-btn:hover {
	color: var(--wpc-text);
}

.wp-cadastre-spinner {
	width: 20px;
	height: 20px;
	border: 2.5px solid var(--wpc-card-border);
	border-top-color: var(--wp-cadastre-accent);
	border-radius: 50%;
	animation: wpc-spin 0.8s linear infinite;
	margin-left: 8px;
}

/* Dropdown de resultats d'adreces */
#wp-cadastre-autocomplete-results,
.wp-cadastre-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 12px !important;
	margin-top: 6px;
	box-shadow: 0 14px 32px rgba(10, 30, 60, 0.18) !important;
	max-height: 280px;
	overflow-y: auto;
	z-index: 9999;
	text-align: left;
}

.wp-cadastre-autocomplete-item {
	padding: 11px 15px;
	cursor: pointer;
	font-size: 13.8px;
	color: #0f172a !important;
	background: #ffffff;
	border-bottom: 1px solid #f1f5f9;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-cadastre-autocomplete-item .wpc-ac-main {
	font-weight: 700;
	font-size: 13.8px;
	color: #0a1e3c !important;
	line-height: 1.3;
}

.wp-cadastre-autocomplete-item .wpc-ac-sub {
	font-size: 11.8px;
	color: #64748b !important;
	margin-top: 2px;
	line-height: 1.25;
}

.wp-cadastre-autocomplete-item:last-child {
	border-bottom: none;
}

.wp-cadastre-autocomplete-item:hover {
	background-color: #eff6ff !important;
}

.wp-cadastre-autocomplete-item:hover .wpc-ac-main {
	color: #0072BC !important;
}

/* 3. Cos Principal: Mapa + Barra lateral */
.wp-cadastre-main-content {
	display: flex;
	gap: 24px;
	height: 680px;
	min-height: 600px;
}

.wp-cadastre-map-wrapper {
	flex: 1;
	border-radius: var(--wp-cadastre-border-radius);
	overflow: hidden;
	border: 1px solid var(--wpc-card-border);
	box-shadow: var(--wpc-shadow);
	position: relative;
	min-height: 400px;
}

#wp-cadastre-map {
	width: 100%;
	height: 100%;
	z-index: 5;
}

/* 4. Barra lateral Ampliada (Drawer 460px) */
.wp-cadastre-drawer {
	flex: 0 0 460px;
	width: 460px;
	background: var(--wpc-card-bg);
	border: 1px solid var(--wpc-card-border);
	border-radius: var(--wp-cadastre-border-radius);
	padding: 22px;
	overflow-y: auto;
	box-shadow: var(--wpc-shadow);
	backdrop-filter: var(--wpc-blur);
	display: flex;
	flex-direction: column;
	box-sizing: border-radius;
	transition: var(--wp-cadastre-transition);
}

/* Scrollbar personalitzat i suau */
.wp-cadastre-drawer::-webkit-scrollbar {
	width: 6px;
}
.wp-cadastre-drawer::-webkit-scrollbar-track {
	background: transparent;
}
.wp-cadastre-drawer::-webkit-scrollbar-thumb {
	background: var(--wpc-card-border);
	border-radius: 999px;
}

/* Estats del Drawer */
.wp-cadastre-info-helper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	height: 100%;
	color: var(--wpc-text-muted);
}

.wp-cadastre-icon-large {
	font-size: 52px;
	margin-bottom: 16px;
}

.wp-cadastre-info-helper h3 {
	margin: 0 0 8px 0;
	color: var(--wpc-text);
	font-size: 18px;
}

.wp-cadastre-info-helper p {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* 5. Selector de Divisions */
.wp-cadastre-building-header {
	border-bottom: 1px solid var(--wpc-card-border);
	padding-bottom: 16px;
	margin-bottom: 18px;
}

.wp-cadastre-building-header h3 {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.wp-cadastre-b-meta {
	font-size: 13px;
	color: var(--wpc-text-muted);
}

.wp-cadastre-div-btn {
	background: var(--wpc-bg);
	border: 1px solid var(--wpc-card-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	color: var(--wpc-text);
	transition: var(--wp-cadastre-transition);
	width: 100%;
	box-sizing: border-box;
}

.wp-cadastre-div-btn:hover {
	border-color: var(--wp-cadastre-accent);
	background-color: var(--wpc-badge-bg);
	color: var(--wp-cadastre-accent);
	transform: translateY(-1px);
}

.wp-cadastre-div-btn.active {
	background-color: var(--wp-cadastre-accent);
	border-color: var(--wp-cadastre-accent);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.wp-cadastre-div-btn.active div {
	color: #ffffff !important;
}

/* 6. Fitxa de Detalls de la Unitat */
.wp-cadastre-unit-details-card {
	animation: wpc-fade-in 0.35s ease-out;
}

.wp-cadastre-details-header h4 {
	margin: 18px 0 14px 0;
	font-size: 17px;
	font-weight: 700;
	border-left: 4px solid var(--wp-cadastre-accent);
	padding-left: 10px;
}

.wp-cadastre-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.wp-cadastre-detail-item {
	background: var(--wpc-bg);
	border: 1px solid var(--wpc-card-border);
	padding: 12px 14px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}

.wp-cadastre-detail-item .label {
	font-size: 11px;
	color: var(--wpc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.wp-cadastre-detail-item .value {
	font-size: 15px;
	font-weight: 700;
}

.wp-cadastre-detail-item .value.mono {
	font-family: var(--wp-cadastre-font-mono);
	font-size: 12px;
	letter-spacing: -0.2px;
	word-break: break-all;
}

/* Copiar Referència */
.wp-cadastre-copy-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.wp-cadastre-copy-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	padding: 4px 6px;
	border-radius: 6px;
	transition: var(--wp-cadastre-transition);
}

.wp-cadastre-copy-btn:hover {
	background-color: var(--wpc-card-border);
}

/* Imatge de Street View */
.wp-cadastre-streetview-box {
	border-radius: var(--wp-cadastre-border-radius);
	overflow: hidden;
	height: 190px;
	background: #cbd5e1;
	border: 1px solid var(--wpc-card-border);
	margin-bottom: 18px;
	position: relative;
}

.wp-cadastre-streetview-box iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.wp-cadastre-streetview-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: 20px;
	background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
	color: #ffffff;
}

.wp-cadastre-streetview-placeholder h5 {
	margin: 0 0 6px 0;
	font-size: 15px;
	font-weight: 700;
}

.wp-cadastre-streetview-placeholder p {
	margin: 0 0 12px 0;
	font-size: 12px;
	color: #94a3b8;
}

.wp-cadastre-btn-sm {
	background-color: #ffffff;
	color: #0f172a;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	transition: var(--wp-cadastre-transition);
}

.wp-cadastre-btn-sm:hover {
	background-color: #f1f5f9;
	transform: translateY(-1px);
}

/* 7. Desplegable natiu de Google Places (.pac-container / .pac-item)
   Google copia l'amplada del propi input de cerca i, per defecte, trunca
   cada suggeriment a una sola línia amb "...". En mòbil, quan l'input queda
   estret, això feia il·legible l'adreça sencera i impossibilitava distingir
   entre resultats semblants (p. ex. "Gran Vía, 1, Madrid" vs "..., Majadahonda").
   Deixem que el text faci salt de línia en lloc de tallar-se. */
.pac-container {
	font-family: inherit !important;
	border-radius: 10px !important;
	margin-top: 4px !important;
	overflow: hidden !important;
}

.pac-item {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	padding: 10px 12px !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
}

.pac-item-query {
	font-size: 13.5px !important;
}

/* 8. Animacions */
@keyframes wpc-spin {
	to { transform: rotate(360deg); }
}

@keyframes wpc-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 9. Disseny Adaptive i Responsive (Desktop & Mobile) */
@media (max-width: 1024px) {
	.wp-cadastre-main-content {
		height: 620px;
		gap: 16px;
	}
	.wp-cadastre-drawer {
		flex: 0 0 380px;
		width: 380px;
	}
}

@media (max-width: 768px) {
	.wp-cadastre-wrap {
		padding: 14px;
		border-radius: 12px;
	}

	.wp-cadastre-main-content {
		flex-direction: column;
		height: auto;
		min-height: auto;
		gap: 16px;
	}

	.wp-cadastre-map-wrapper {
		height: 340px;
		min-height: 340px;
		width: 100%;
		border-radius: 10px;
	}

	.wp-cadastre-drawer {
		flex: 1 1 100%;
		width: 100%;
		height: auto;
		max-height: none;
		overflow: visible;
		padding: 16px;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.wp-cadastre-group-pill {
		flex: 1 1 calc(50% - 6px);
		justify-content: center;
		text-align: center;
		padding: 10px 12px !important;
		font-size: 13px !important;
		min-height: 42px;
	}

	.wp-cadastre-unit-quick-filter {
		max-width: 100% !important;
		min-height: 44px !important;
		font-size: 14px !important;
	}

	.wp-cadastre-details-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.wp-cadastre-btn {
		min-height: 48px;
		font-size: 15px;
	}
}


/* Spinner Gran de Càrrega */
.wp-cadastre-spinner-large {
	width: 42px;
	height: 42px;
	border: 4px solid var(--wpc-card-border);
	border-top-color: var(--wp-cadastre-accent);
	border-radius: 50%;
	animation: wpc-spin 0.8s linear infinite;
	margin: 0 auto;
}

.wp-cadastre-step-title {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: var(--wpc-text) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 12px !important;
}


/* Barra de Selecció de Mode de Cerca (Adreça vs RC) */
.wp-cadastre-search-mode-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.wp-cadastre-mode-btn {
	padding: 8px 16px;
	border: 1px solid var(--wpc-card-border);
	border-radius: 8px;
	background: var(--wpc-card-bg);
	color: var(--wpc-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wp-cadastre-mode-btn:hover {
	border-color: var(--wp-cadastre-accent, #2563eb);
	color: var(--wp-cadastre-accent, #2563eb);
}

.wp-cadastre-mode-btn.active {
	background: var(--wp-cadastre-accent, #2563eb) !important;
	color: #ffffff !important;
	border-color: var(--wp-cadastre-accent, #2563eb) !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Botó de Consulta per RC */
.wp-cadastre-rc-submit-btn {
	padding: 6px 16px;
	background: var(--wp-cadastre-accent, #2563eb);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	margin-right: 6px;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.wp-cadastre-rc-submit-btn:hover {
	background: #1d4ed8;
}

/* High Contrast Modal Form & Input Fix */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select,
.modal input,
.hsm-modal input,
.lightbox_form input,
div[class*="popup"] input,
div[class*="modal"] input,
div[id*="modal"] input,
div[id*="popup"] input {
	color: #FFFFFF !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 8px !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder,
.modal input::placeholder,
.hsm-modal input::placeholder,
.lightbox_form input::placeholder,
div[class*="popup"] input::placeholder,
div[class*="modal"] input::placeholder,
div[id*="modal"] input::placeholder,
div[id*="popup"] input::placeholder,
input::placeholder {
	color: #CBD5E1 !important;
	opacity: 1 !important;
}

.gform_wrapper .gfield_required,
.gfield_required,
label .gfield_required,
span.gfield_required {
	color: #FF5252 !important;
	font-weight: bold !important;
	opacity: 1 !important;
}

.gform_wrapper .gfield_label,
.gform_wrapper label,
.modal label,
.hsm-modal label,
.lightbox_form label,
div[class*="modal"] label,
div[class*="popup"] label,
div[id*="modal"] label,
div[id*="popup"] label {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* ==========================================================================
   6. Wizard: indicador de pasos + Paso 1 "¿Qué piso quieres analizar?"
   ========================================================================== */

/* El contenedor exterior (.wp-cadastre-wrap) traía su propia caja oscura con
   borde/sombra/padding (pensada para el layout antiguo de mapa+drawer siempre
   visible). Ahora que cada paso es su propia tarjeta blanca, esa caja exterior
   solo añade una "tarjeta dentro de otra tarjeta": la neutralizamos y dejamos
   que las tarjetas del wizard floten directamente sobre el fondo de la página.
   Usamos el id (más específico que la clase de inspeccion.css) para ganar
   ese pulso de especificidad incluso con !important en ambos lados. */
#wp-cadastre-container.wp-cadastre-wrap {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* El Paso 2 (drawer de resultados) usaba el mismo fondo azul marino oscuro que
   inspeccion.css impone al resto del widget antiguo. Para mantener el mismo
   lenguaje visual que los Pasos 1, 3 y 4 (tarjeta blanca), lo forzamos aquí
   con el id (gana el pulso de especificidad frente al !important de la clase). */
#wp-cadastre-drawer {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	color: #0f172a !important;
	box-shadow: 0 20px 50px rgba(10, 30, 60, 0.2) !important;
}

#wp-cadastre-drawer .wp-cadastre-building-header h3,
#wp-cadastre-drawer .wp-cadastre-info-helper h3 {
	color: #0a1e3c !important;
}

.wpc-steps-bar {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 480px;
	margin: 0 auto 22px;
}

.wpc-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 100px;
}

.wpc-step-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	color: #dbeafe;
	font-size: 14px;
	font-weight: 700;
	transition: all 0.2s ease;
}

.wpc-step-label {
	font-size: 12px;
	font-weight: 600;
	color: #b8cce6;
	text-align: center;
	line-height: 1.25;
}

.wpc-step.active .wpc-step-icon {
	background: linear-gradient(135deg, #2E9BFF 0%, #1E6FD0 100%);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(46, 155, 255, 0.45);
}

.wpc-step.active .wpc-step-label {
	color: #ffffff;
	font-weight: 800;
}

.wpc-step.done .wpc-step-icon {
	background: #10b981;
	border-color: #10b981;
	color: #ffffff;
}

.wpc-step-line {
	flex: 1 1 auto;
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	margin-top: 16px;
	min-width: 18px;
}

.wpc-step-line.done {
	background: #2E9BFF;
}

.wpc-step1-card {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 20px;
	padding: 28px 30px 22px;
	box-shadow: 0 20px 48px rgba(6, 19, 41, 0.28);
}

.wpc-step1-head {
	margin-bottom: 16px;
}

.wpc-step1-card h2 {
	font-size: 22px;
	font-weight: 800;
	color: #0a1e3c;
	margin: 0 0 4px;
	line-height: 1.2;
}

.wpc-step1-subtitle {
	color: #526580;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

/* Segmented Mode Tabs (Dirección vs Referencia Catastral) */
.wpc-mode-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	background: #EFF5FC;
	border: 1px solid #D8E6F6;
	padding: 4px;
	border-radius: 12px;
	margin-bottom: 12px;
}

.wpc-mode-tabs .wp-cadastre-mode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 12px;
	border-radius: 9px;
	border: none !important;
	background: transparent !important;
	color: #475C7A !important;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.18s ease;
	text-decoration: none !important;
	box-shadow: none !important;
	line-height: 1.2;
}

.wpc-mode-tabs .wp-cadastre-mode-btn svg {
	flex: 0 0 auto;
	stroke: currentColor;
	opacity: 0.85;
}

.wpc-mode-tabs .wp-cadastre-mode-btn:hover {
	color: #0a1e3c !important;
}

.wpc-mode-tabs .wp-cadastre-mode-btn.active {
	background: #ffffff !important;
	color: #0a1e3c !important;
	box-shadow: 0 2px 8px rgba(10, 30, 60, 0.1) !important;
}

.wpc-mode-tabs .wp-cadastre-mode-btn.active svg {
	stroke: #0072BC !important;
	opacity: 1;
}

.wpc-step1-card .wp-cadastre-search-bar {
	text-align: left;
	margin-bottom: 0;
}

.wpc-step1-card .wp-cadastre-input-wrapper {
	padding: 9px 14px;
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 13px !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
	flex-wrap: nowrap;
	gap: 8px;
}

.wpc-step1-card .wp-cadastre-input-wrapper:focus-within {
	background: #ffffff !important;
	border-color: #2E9BFF !important;
	box-shadow: 0 0 0 4px rgba(46, 155, 255, 0.15) !important;
}

.wpc-step1-card .wp-cadastre-search-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-right: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072BC' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wpc-step1-card #wp-cadastre-search-input {
	font-size: 16px !important;
	color: #0f172a !important;
	padding: 6px 0 !important;
	min-width: 0;
}

.wpc-step1-card #wp-cadastre-search-input::placeholder {
	color: #8496ae !important;
}

.wpc-step1-card .wp-cadastre-rc-submit-btn {
	background: linear-gradient(135deg, #2E9BFF 0%, #1E6FD0 100%) !important;
	color: #ffffff !important;
	padding: 8px 16px !important;
	border-radius: 9px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	margin-right: 0 !important;
	box-shadow: 0 4px 12px rgba(46, 155, 255, 0.3) !important;
}

/* Compact Inline Map Footer inside Step 1 Card */
.wpc-step1-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid #eef2f7;
}

.wpc-step1-footer-text {
	font-size: 12.8px;
	color: #64748b;
	font-weight: 500;
}

.wpc-btn-map-picker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: #F0F7FF;
	border: 1px solid #BFDBFE;
	color: #0072BC;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.18s ease;
	white-space: nowrap;
}

.wpc-btn-map-picker svg {
	flex: 0 0 auto;
	stroke: currentColor;
}

.wpc-btn-map-picker:hover {
	background: #E0EFFE;
	border-color: #2E9BFF;
	color: #0A1E3C;
	transform: translateY(-1px);
}

.wpc-step2-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp-cadastre-accent, #2563eb);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	margin-bottom: 16px;
	background: none;
	border: none;
	padding: 0;
}

.wpc-step2-back-link:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.wpc-steps-bar {
		max-width: 100%;
		margin: 0 auto 14px;
	}
	.wpc-step {
		width: 72px;
		gap: 4px;
	}
	.wpc-step-icon {
		width: 28px;
		height: 28px;
		font-size: 12.5px;
	}
	.wpc-step-line {
		margin-top: 13px;
		min-width: 12px;
	}
	.wpc-step-label {
		font-size: 10.5px;
	}
	.wpc-step1-card {
		padding: 18px 14px 15px;
		border-radius: 16px;
	}
	.wpc-step1-head {
		margin-bottom: 12px;
	}
	.wpc-step1-card h2 {
		font-size: 18px;
		margin-bottom: 2px;
	}
	.wpc-step1-subtitle {
		font-size: 12.5px;
	}
	.wpc-mode-tabs {
		padding: 3px;
		border-radius: 10px;
		margin-bottom: 10px;
		gap: 4px;
	}
	.wpc-mode-tabs .wp-cadastre-mode-btn {
		padding: 8px 6px;
		font-size: 11.5px;
		gap: 5px;
		border-radius: 8px;
	}
	.wpc-mode-tabs .wp-cadastre-mode-btn svg {
		width: 13px;
		height: 13px;
	}
	.wpc-step1-card .wp-cadastre-input-wrapper {
		padding: 7px 11px;
		border-radius: 11px !important;
	}
	.wpc-step1-card #wp-cadastre-search-input {
		font-size: 16px !important;
		padding: 5px 0 !important;
	}
	.wpc-step1-footer {
		margin-top: 11px;
		padding-top: 10px;
		gap: 8px;
	}
	.wpc-step1-footer-text {
		font-size: 11.8px;
	}
	.wpc-btn-map-picker {
		padding: 7px 11px;
		font-size: 12px;
		border-radius: 8px;
	}
}

/* ==========================================================================
   7. Wizard: Paso 2 sin mapa por defecto, acordeón de plantas, Pasos 3-4
   ========================================================================== */

/* El mapa queda oculto por defecto en el Paso 2 (ya se ha encontrado el
   inmueble por dirección/RC); el drawer pasa a ocupar todo el ancho, como
   una tarjeta más del wizard, sin la altura fija de 680px del layout mapa+drawer. */
.wp-cadastre-main-content.wpc-no-map {
	height: auto;
	display: block;
}
.wp-cadastre-main-content.wpc-no-map .wp-cadastre-map-wrapper {
	display: none;
}
.wp-cadastre-main-content.wpc-no-map .wp-cadastre-drawer {
	flex: none;
	width: auto;
	max-width: 560px;
	margin: 0 auto;
	max-height: none;
}

.wpc-toggle-map-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	margin-top: 10px;
	color: var(--wp-cadastre-accent, #2563eb);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}
.wpc-toggle-map-inline:hover { text-decoration: underline; }

/* Acordeón de plantas dentro del listado de divisiones */
.wpc-floor-header {
	cursor: pointer;
	user-select: none;
}
.wpc-floor-chevron {
	display: inline-block;
	transition: transform 0.2s ease;
	font-size: 10px;
}
.wpc-floor-section.open .wpc-floor-chevron {
	transform: rotate(90deg);
}
.wpc-floor-grid {
	display: none;
}
.wpc-floor-section.open .wpc-floor-grid {
	display: grid;
}

/* Tarjeta blanca reutilizable del wizard (Paso 3: Datos e Informe) */
.wpc-wizard-card {
	max-width: 620px;
	margin: 0 auto 20px;
	background: #ffffff;
	border-radius: 20px;
	padding: 22px 24px 20px;
	box-shadow: 0 20px 50px rgba(10, 30, 60, 0.22);
	color: #0f172a;
	container-type: inline-size;
}

/* Top bar del Paso 3: Enlace Volver + Píldora Catastro Oficial */
.wpc-step3-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f5f9;
}

.wpc-step3-topbar .wpc-step2-back-link {
	margin-bottom: 0;
	font-size: 13px;
}

.wpc-step3-verified-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ECFDF5;
	border: 1px solid #A7F3D0;
	color: #047857;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.wpc-wizard-card .wp-cadastre-streetview-box,
.wpc-wizard-card .wp-cadastre-details-header h4,
.wpc-wizard-card .wp-cadastre-details-grid,
.wpc-wizard-card .wp-cadastre-detail-item {
	color: #0f172a;
}

/* Cabecera del inmueble seleccionado + Badge Ref separado */
.wpc-wizard-card .wp-cadastre-details-header h4 {
	color: #0a1e3c;
	margin: 0 0 10px 0;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.3;
	border-left: 3.5px solid #2E9BFF;
	padding-left: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

.wpc-u-ref-tag {
	display: inline-flex;
	align-items: center;
	background: #EFF6FF;
	border: 1px solid #BFDBFE;
	color: #1D4ED8;
	font-family: var(--wp-cadastre-font-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 6px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Visor Street View compacto */
.wpc-wizard-card .wp-cadastre-streetview-box {
	height: 150px;
	border-radius: 12px;
	margin-bottom: 12px;
	border: 1px solid #e2e8f0;
}

/* Graella Bento de KPIs: 2 columnes per defecte (mòbil), 3 columnes en contenidor ample */
.wpc-wizard-card .wp-cadastre-details-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

@media (min-width: 600px) {
	.wpc-wizard-card .wp-cadastre-details-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

@supports (container-type: inline-size) {
	@container (min-width: 440px) {
		.wpc-wizard-card .wp-cadastre-details-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 10px;
		}
	}
}

/* Targetes individuals de KPI dins del Bento */
.wpc-wizard-card .wp-cadastre-detail-item {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	padding: 9px 11px !important;
	border-radius: 10px !important;
	min-width: 0;
}

.wpc-wizard-card .wp-cadastre-detail-item .label {
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 2px !important;
	line-height: 1.2 !important;
}

.wpc-wizard-card .wp-cadastre-detail-item .value {
	color: #0a1e3c !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.wpc-wizard-card .wp-cadastre-detail-item .value.mono {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: -0.3px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpc-wizard-card .wp-cadastre-copy-btn {
	color: #0072BC;
	background: #EFF6FF;
	border: 1px solid #BFDBFE;
	padding: 3px 5px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.wpc-wizard-card .wp-cadastre-copy-btn:hover {
	background: #DBEAFE;
}

/* Desglose de superficies (Elementos constructivos): graella compacta de 2 columnes */
.wpc-wizard-card .wp-cadastre-components-section {
	margin-top: 4px !important;
	margin-bottom: 14px !important;
}

.wpc-components-title {
	color: #475569 !important;
	font-size: 10.5px !important;
	margin: 0 0 6px 0 !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

.wpc-wizard-card .wp-cadastre-components-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 6px !important;
}

.wpc-wizard-card .wp-cadastre-components-list li {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px 9px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px !important;
	min-width: 0;
}

.wpc-wizard-card .wp-cadastre-components-list li .use {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	line-height: 1.2 !important;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpc-wizard-card .wp-cadastre-components-list li .surface-badge {
	flex: 0 0 auto;
	font-size: 11px !important;
	font-weight: 800 !important;
	color: #0072BC !important;
	background: #E0F2FE !important;
	border: 1px solid #BAE6FD !important;
	padding: 2px 7px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

/* Botó Principal CTA: Descargar informe */
.wpc-step-continue-btn,
.wpc-upsell-download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: 2px;
	padding: 14px 20px;
	font-size: 15.5px;
	font-weight: 800;
	background: linear-gradient(135deg, #2E9BFF 0%, #1E6FD0 100%);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(30, 111, 208, 0.34);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wpc-step-continue-btn:hover,
.wpc-upsell-download-btn:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(30, 111, 208, 0.44);
}

/* Peu de notes legals i explicació m² sota el CTA */
.wpc-step3-footnotes {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #f1f5f9;
}

.wpc-info-note {
	margin-top: 0;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 7px 11px;
	background: #f8fafc;
}
.wpc-info-note summary {
	cursor: pointer;
	font-size: 11.8px;
	font-weight: 600;
	color: #2563eb;
	list-style: none;
}
.wpc-info-note summary::-webkit-details-marker { display: none; }
.wpc-info-note summary::before {
	content: 'ⓘ ';
}
.wpc-info-note p {
	font-size: 11.5px;
	line-height: 1.45;
	color: #475569;
	margin: 6px 0 0;
	text-align: left;
}

.wpc-taxes-disclaimer-small {
	margin: 6px 0 0;
	font-size: 10.5px;
	color: #94a3b8;
	line-height: 1.35;
	font-style: italic;
	text-align: left;
}

/* Optimització ultra-compacta per a Mobile (<= 768px) */
@media (max-width: 768px) {
	.wpc-wizard-card {
		padding: 14px 13px 13px;
		border-radius: 16px;
		margin-bottom: 12px;
	}
	.wpc-step3-topbar {
		margin-bottom: 8px;
		padding-bottom: 7px;
	}
	.wpc-step3-topbar .wpc-step2-back-link {
		font-size: 12px;
	}
	.wpc-step3-verified-pill {
		font-size: 10px;
		padding: 2px 7px;
	}
	.wpc-wizard-card .wp-cadastre-details-header h4 {
		font-size: 13.5px;
		margin: 0 0 8px 0;
		padding-left: 8px;
	}
	.wpc-wizard-card .wp-cadastre-streetview-box {
		height: 112px;
		margin-bottom: 9px;
		border-radius: 10px;
	}
	.wpc-wizard-card .wp-cadastre-details-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
		margin-bottom: 9px !important;
	}
	.wpc-wizard-card .wp-cadastre-detail-item {
		padding: 7px 9px !important;
		border-radius: 8px !important;
	}
	.wpc-wizard-card .wp-cadastre-detail-item .label {
		font-size: 9.5px !important;
	}
	.wpc-wizard-card .wp-cadastre-detail-item .value {
		font-size: 13.5px !important;
	}
	.wpc-wizard-card .wp-cadastre-detail-item .value.mono {
		font-size: 9.5px !important;
	}
	.wpc-wizard-card .wp-cadastre-components-section {
		margin-bottom: 10px !important;
	}
	.wpc-wizard-card .wp-cadastre-components-list {
		gap: 5px !important;
	}
	.wpc-wizard-card .wp-cadastre-components-list li {
		padding: 5px 7px !important;
	}
	.wpc-wizard-card .wp-cadastre-components-list li .use {
		font-size: 10px !important;
	}
	.wpc-wizard-card .wp-cadastre-components-list li .surface-badge {
		font-size: 10px !important;
		padding: 1.5px 6px !important;
	}
	.wpc-step-continue-btn,
	.wpc-upsell-download-btn {
		padding: 12px 16px;
		font-size: 14.5px;
		border-radius: 11px;
	}
	.wpc-step3-footnotes {
		margin-top: 9px;
		padding-top: 8px;
	}
}