/* ---- Frontend: slider en la ficha de producto ---- */

/* El formulario de añadir al carrito. Muchos temas lo montan como fila (flex),
   así que el bloque del slider se les quedaba pegado a la cantidad y al botón
   en la misma línea. Con esto la fila puede partirse. */
.tdp-pm-form {
	flex-wrap: wrap !important;
}

/* La cantidad sobra: la línea siempre es 1 y son los metros los que mandan.
   WooCommerce ya la oculta con "sold individually", pero los temas que pintan
   su propio selector de +/- se la saltan. */
.tdp-pm-form .quantity {
	display: none !important;
}

.tdp-pm-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
	/* Ocupar la fila entera sea cual sea el padre: flex, grid o normal. */
	flex: 0 0 100%;
	grid-column: 1 / -1;
	box-sizing: border-box;
	margin: 16px 0 20px;
	padding: 16px;
	background: #F3F8EA;
	border: 1px solid #E7EBEF;
	border-radius: 16px;
}

.tdp-pm-wrap * {
	box-sizing: border-box;
}

.tdp-pm-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.tdp-pm-label {
	font-weight: 600;
	color: #141A20;
}

.tdp-pm-number-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #E7EBEF;
	border-radius: 8px;
	padding: 4px 10px;
}

.tdp-pm-number {
	width: 64px;
	border: none;
	text-align: right;
	font-size: 15px;
	font-weight: 600;
	color: #141A20;
}

.tdp-pm-number:focus {
	outline: none;
}

.tdp-pm-unit {
	color: #5B6672;
	font-size: 14px;
}

.tdp-pm-slider {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 4px;
	background: #E7EBEF;
	outline: none;
	margin: 10px 0;
}

.tdp-pm-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #8CC63F;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #8CC63F;
}

.tdp-pm-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #8CC63F;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #8CC63F;
}

.tdp-pm-range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #5B6672;
	margin-bottom: 12px;
}

.tdp-pm-total-wrap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px dashed #E7EBEF;
}

.tdp-pm-total-label {
	color: #5B6672;
	font-size: 14px;
}

.tdp-pm-total {
	font-size: 22px;
	font-weight: 700;
	color: #5F8F22;
}

.tdp-pm-per-unit {
	font-size: 13px;
	color: #5B6672;
}

/* Lo que costarían estos metros sin el descuento por volumen. */
.tdp-pm-was {
	display: none;
	font-size: 15px;
	color: #5B6672;
	text-decoration: line-through;
}

.tdp-pm-was.is-visible {
	display: inline;
}

/* "Has ahorrado X € por llevar N m" */
.tdp-pm-saving {
	display: none;
	margin-top: 8px;
	padding: 6px 12px;
	background: #E4F7C7;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #3F6A12;
}

.tdp-pm-saving.is-visible {
	display: inline-block;
}

/* En móvil la etiqueta y la casilla no caben en la misma fila. */
@media ( max-width: 480px ) {
	.tdp-pm-row {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.tdp-pm-total-wrap {
		flex-wrap: wrap;
	}
}

/* ---- Admin: tabla de tramos ---- */
#tdp-pm-tiers-table th {
	font-weight: 600;
}