/* Gruppering av paketets ingående varor i varukorgen.
   Rör inga färger eller typsnitt — temat äger utseendet. */

.ltpaket-child > td.product-name {
	position: relative;
	padding-left: 2.2em;
}

.ltpaket-child > td.product-name::before {
	content: "";
	position: absolute;
	left: 1em;
	top: 0;
	bottom: 50%;
	width: 0.7em;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	opacity: 0.35;
}

/*
 * Paketradens antalstext.
 *
 * INGEN white-space: nowrap. Den fanns här och tvingade "1 Paket med följande
 * produkter" till en enda rad på 181px, vilket sköt ut kassans ordertabell
 * utanför skärmen på mobil: 384px bred mot 320px utan oss, på en 393px-skärm.
 * Delsumma och totalsumma hamnade utanför synfältet. Uppmätt på live
 * 2026-09-22, rapporterat av Johannes med skärmbild.
 *
 * Siffran hålls ändå ihop med första ordet via   i markupen, så "1" och
 * "Paket" kan aldrig hamna på olika rader. Resten får radbrytas fritt — det är
 * precis vad en smal kolumn behöver.
 */
.ltpaket-qty {
	font-variant-numeric: tabular-nums;
	/* Tål en smal kolumn utan att bredda tabellen. */
	overflow-wrap: anywhere;
}

.ltpaket-qty-note {
	display: block;
	font-size: 0.78em;
	line-height: 1.3;
	opacity: 0.65;
}

/* Ihopfällning. Klassen sätts per barnrad av paket.js. */
.ltpaket-child.ltpaket-hidden {
	display: none;
}

.ltpaket-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-top: 0.4em;
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
	text-decoration: underline;
	opacity: 0.75;
}

.ltpaket-toggle:hover,
.ltpaket-toggle:focus-visible {
	opacity: 1;
}

/* Dialogen. Egen ruta, inte temats modal, så inget kan krocka. */
.ltpaket-dialog {
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	padding: 0;
	max-width: 26em;
	width: calc(100% - 2em);
}

.ltpaket-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.ltpaket-dialog-in {
	padding: 1.4em 1.5em 1.2em;
}

.ltpaket-dialog h3 {
	margin: 0 0 0.5em;
	font-size: 1.15em;
}

.ltpaket-dialog p {
	margin: 0 0 0.6em;
}

.ltpaket-dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 1.1em;
}

.ltpaket-dialog-actions button {
	appearance: none;
	font: inherit;
	font-weight: 600;
	padding: 0.6em 1em;
	border-radius: 2px;
	cursor: pointer;
	flex: 1 1 auto;
}

/* Notisen när ett paket saknar varor. Stillsam, inte skällande. */
.ltpaket-notice {
	display: flex;
	gap: 0.85em;
	align-items: flex-start;
	margin: 1.2em 0;
	padding: 0.9em 1em;
	border: 1px solid currentColor;
	border-left-width: 3px;
	border-radius: 3px;
}

.ltpaket-notice-mark {
	flex: none;
	line-height: 1.4;
	opacity: 0.75;
}

.ltpaket-notice h3 {
	margin: 0 0 0.3em;
	font-size: 1em;
}

.ltpaket-notice p {
	margin: 0;
	font-size: 0.92em;
}

.ltpaket-missing {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.ltpaket-missing li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	justify-content: space-between;
}

.ltpaket-missing-name {
	font-size: 0.92em;
}

.ltpaket-missing-name em {
	font-style: normal;
	opacity: 0.7;
}

.ltpaket-restore {
	appearance: none;
	font: inherit;
	font-size: 0.85em;
	font-weight: 600;
	padding: 0.4em 0.9em;
	border: 1px solid currentColor;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.ltpaket-restore[disabled] {
	opacity: 0.5;
	cursor: default;
}

/*
 * Raden kunden just valt att ta bort.
 *
 * Borttagningen laddar om sidan, och som inloggad butiksadministratör tar det
 * flera sekunder (inloggade går förbi sidcachen). Utan detta står sidan still
 * och ser ut som att klicket inte gjorde något.
 *
 * Ingen animation: sidan byts ändå ut inom ett par sekunder, och en snurra som
 * hinner visas halvt är sämre än ett tydligt tillstånd.
 */
.ltpaket-tas-bort {
	opacity: .4;
	pointer-events: none;
}