/* Autopago — Carrocería */

/* ===========================================================
   Formulario: campos de carrocería en UNA sola columna.
   El form del tema usa 2 columnas (width:50%; float:left) sin
   !important; aquí lo forzamos a fila completa (gana !important).
   Selector independiente del contenedor padre.
   =========================================================== */
.cmb-row.apg-carroceria-toggle,
.cmb-row.apg-carroceria-field {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* Encabezado del bloque (checkbox "Es camión con carrocería") */
.cmb-row.apg-carroceria-toggle {
	background: #f3fbf5;
	border: 1px solid #cdeed6;
	border-radius: 12px;
	padding: 14px 16px !important;
	margin-bottom: 14px;
	box-sizing: border-box;
}

/* Cada campo (precio / foto): tarjeta a ancho completo (oculto hasta activar) */
.cmb-row.apg-carroceria-field {
	display: none;
	box-sizing: border-box;
	width: 100% !important;
	border: 1px solid #e3e6ec;
	border-left: 4px solid #25d366;
	border-radius: 10px;
	padding: 14px 16px !important;
	margin-bottom: 10px;
	background: #fff;
}

/* Que el input de precio y el área de subida usen todo el ancho */
.cmb-row.apg-carroceria-field .cmb-td,
.cmb-row.apg-carroceria-field input[type="text"],
.cmb-row.apg-carroceria-field input[type="number"] {
	width: 100%;
	box-sizing: border-box;
}

.cmb-row.apg-carroceria-field .cmb-th label {
	font-weight: 600;
}

/* La zona de subida no necesita ser enorme dentro de la tarjeta */
.cmb-row.apg-carroceria-field .cmb-type-wp-cardealer-file .label-can-drag,
.cmb-row.apg-carroceria-field .wp-cardealer-uploaded-files {
	max-width: 340px;
}

/* ===========================================================
   Detalle: selector de carrocería (tarjetas tipo Material/Bootstrap)
   =========================================================== */
.apg-carroceria-block {
	margin: 0 0 18px;
}

.apg-carroceria-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
	color: #1f2733;
}

.apg-carroceria-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Tarjeta horizontal seleccionable: miniatura | nombre+precio | check */
.apg-carroceria-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	text-align: left;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1.5px solid #e3e6ec;
	border-radius: 14px;
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.apg-carroceria-card:hover {
	border-color: #b3d6b3;
	box-shadow: 0 4px 14px rgba( 16, 24, 40, 0.08 );
}

.apg-carroceria-card:focus-visible {
	outline: none;
	border-color: #45a045;
	box-shadow: 0 0 0 3px rgba( 69, 160, 69, 0.25 );
}

.apg-carroceria-card:active {
	transform: scale( 0.995 );
}

.apg-carroceria-card.is-selected {
	border-color: #45a045;
	box-shadow: 0 0 0 2px rgba( 69, 160, 69, 0.18 );
}

/* Miniatura */
.apg-cc-thumb {
	flex: 0 0 auto;
	width: 68px;
	height: 50px;
	border-radius: 9px;
	overflow: hidden;
	background: #f2f4f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apg-cc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Texto */
.apg-cc-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.apg-cc-label {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	color: #1f2733;
}

.apg-cc-price {
	font-size: 13px;
	color: #475467;
}

/* Indicador tipo radio con check verde */
.apg-cc-check {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #d7dbe2;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.apg-cc-check::after {
	content: "";
	width: 11px;
	height: 6px;
	margin-top: -2px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate( -45deg );
	opacity: 0;
	transition: opacity 0.15s ease;
}

.apg-carroceria-card.is-selected .apg-cc-check {
	background: #45a045;
	border-color: #45a045;
}

.apg-carroceria-card.is-selected .apg-cc-check::after {
	opacity: 1;
}

/* Compat: si se usa el shortcode con <select> */
.apg-carroceria-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.apg-carroceria-select {
	width: 100%;
	max-width: 360px;
	padding: 11px 14px;
	border: 1px solid #d7dbe2;
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

/* Prefijo "Desde" del precio */
.apg-listing-price .apg-price-prefix {
	font-weight: 400;
	opacity: 0.8;
}

/* ===========================================================
   Visibilidad condicional por "modo camión / carrocería".
   En el detalle de un camión con carrocería, el <body> recibe
   la clase .apg-carroceria. Añade a cualquier widget de Elementor
   (pestaña Avanzado → Clases CSS) una de estas clases:

     • apg-only-carroceria  → se ve SOLO en camiones con carrocería.
     • apg-not-carroceria   → se OCULTA en camiones con carrocería.

   Solo añadimos display:none (nunca forzamos un display), así no
   rompemos los layouts flex/grid de Elementor.
   =========================================================== */
body:not(.apg-carroceria) .apg-only-carroceria {
	display: none !important;
}

body.apg-carroceria .apg-not-carroceria {
	display: none !important;
}

/* ===========================================================
   Galería de portada en páginas de carrocería:
   Fija la relación 810×550 solo en la imagen principal
   (.listing-single-gallery-wrapper), sin tocar las miniaturas
   del grid derecho. Así la imagen no se achica al intercambiar
   carrocería aunque la imagen nueva tenga distinto ratio natural.
   =========================================================== */
body.apg-carroceria .listing-single-gallery-wrapper .p-popup-image .image-wrapper img {
	aspect-ratio: 810 / 550 !important;
	object-fit: cover;
	object-position: center;
}