/* Köp-kolumnens "reassurance"-innehåll direkt under Bundle & Save-rutan -
   se inc/single-product-purchase-info.php. */

/* --- Mörk nedräkningsruta ("Same Day Dispatch") ------------------------
   Basen (.np-delivery-countdown) är redan definierad i
   product-info-sections.css (ljus variant i "Delivery Information"-fliken) -
   den här filen lägger bara till en mörk modifier-klass ovanpå, så
   flikens egna utseende/JS (initCountdown() letar upp ALLA
   .np-delivery-countdown på sidan) rörs inte alls. */
.np-delivery-countdown--dark {
	display: block;
	background: linear-gradient( 135deg, #0d1b1a, #16302d );
	padding: 18px 20px;
	margin-top: 20px;
}

.np-delivery-countdown-tag {
	display: inline-block;
	background: rgba( 255, 255, 255, 0.12 );
	color: #7fd6cf;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.np-delivery-countdown-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.np-delivery-countdown--dark .np-delivery-countdown-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	background: rgba( 127, 214, 207, 0.18 );
	border-radius: 50%;
	font-size: 19px;
}

.np-delivery-countdown--dark .np-delivery-countdown-label {
	color: #fff;
	font-size: 15px;
}

.np-delivery-countdown--dark .np-delivery-countdown-sub {
	color: rgba( 255, 255, 255, 0.65 );
}

.np-delivery-countdown--dark .np-delivery-countdown-clock {
	background: rgba( 0, 0, 0, 0.35 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	color: #fff;
}

/* Kompakt layout på mobil - för trångt/högt med taggen, den runda
   ikon-cirkeln och klockan var för sig på egna rader (se skärmdump i
   konversationen). Görs om till ett grid med två rader istället:
   tagg+klocka bredvid varandra överst, texten under - den runda
   ikon-cirkeln tas bort helt (döljer .np-delivery-countdown-icon) och
   ersätts av samma klock-emoji direkt efter taggens text istället
   (::after), enligt önskemål.

   .np-delivery-countdown-row (annars en egen flex-rad för
   ikon/text/klocka) sätts till display:contents - den försvinner då
   som EGEN box och lämnar sina barn (ikon/text/klocka) som direkta
   grid-barn till .np-delivery-countdown--dark istället, så de kan
   placeras fritt i grid:et tillsammans med taggen. Ingen HTML-ändring
   behövs - samma markup, bara omplacerad via CSS. */
@media ( max-width: 768px ) {
	.np-delivery-countdown--dark {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'tag   clock'
			'text  text';
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
		padding: 14px 16px;
	}

	.np-delivery-countdown-tag {
		grid-area: tag;
		justify-self: start;
		margin-bottom: 0;
	}

	.np-delivery-countdown-tag::after {
		content: '🕐';
		margin-left: 6px;
	}

	.np-delivery-countdown-row {
		display: contents;
	}

	.np-delivery-countdown--dark .np-delivery-countdown-icon {
		display: none;
	}

	.np-delivery-countdown-text {
		grid-area: text;
	}

	.np-delivery-countdown--dark .np-delivery-countdown-label {
		font-size: 14px;
	}

	.np-delivery-countdown--dark .np-delivery-countdown-clock {
		grid-area: clock;
		justify-self: end;
	}
}

/* --- Förtroende-badges -------------------------------------------------- */

.np-trust-badges {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	margin-top: 14px;
	padding: 18px 8px;
	background: #f7f7f7;
	border-radius: 10px;
}

.np-trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	text-align: center;
	border-left: 1px solid #e2e2e2;
}

.np-trust-badge:first-child {
	border-left: none;
}

.np-trust-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: #fff;
	border-radius: 10px;
	font-size: 17px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

.np-trust-badge-title {
	font-size: 12px;
	font-weight: 700;
	color: #111;
	line-height: 1.3;
}

.np-trust-badge-text {
	font-size: 11px;
	color: #777;
	line-height: 1.4;
}

@media ( max-width: 480px ) {
	.np-trust-badges {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.np-trust-badge {
		border-left: none;
		flex-direction: row;
		text-align: left;
		gap: 12px;
	}

	.np-trust-badge-icon {
		flex: 0 0 auto;
	}
}