/*
 * Shipping Policy-huvudsidan (page-shipping-policy.php) + varje lands
 * undersida (page-shipping-country.php). Återanvänder samma
 * .np-accordion-*-dragspelsstilar som redan finns i
 * product-info-sections.css (se inc/shipping-policy.php för var de
 * hookas in) - den här filen sköter bara layouten runt omkring: sektions-
 * mellanrum, kort-rutnät för fraktalternativ, regionlistan, och lands-
 * sidans egna block (highlights/duties/brands/import-scheme).
 *
 * Mobil-först rakt igenom: alla rutnät är en kolumn som grundläge, fler
 * kolumner läggs bara till från 768px/1024px.
 */

.np-shipping-policy-page,
.np-shipping-country-page-wrap {
	padding-block: 32px 60px;
}

.np-shipping-policy-page > div,
.np-shipping-country-page > div {
	margin-bottom: 36px;
}

.np-shipping-policy-page > div:last-child,
.np-shipping-country-page > div:last-child {
	margin-bottom: 0;
}

.np-shipping-policy-page h2 {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 800;
}

.np-shipping-country-page h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 800;
}

.np-shipping-policy-page h3,
.np-shipping-country-page h3 {
	margin: 16px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.np-shipping-policy-page p,
.np-shipping-country-page p {
	margin: 0 0 10px;
	color: #444;
	line-height: 1.6;
}

.np-shipping-policy-page ul,
.np-shipping-country-page ul {
	margin: 0 0 10px;
	padding-left: 20px;
	color: #444;
	line-height: 1.7;
}

/* --- Breadcrumb på landssidorna ---------------------------------------- */
.np-shipping-country-breadcrumb {
	margin-bottom: 20px;
}

.np-shipping-country-breadcrumb a {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* --- Shipping Methods-korten -------------------------------------------
   Mobil: en kolumn staplade kort. Från 768px två kolumner, från 1200px
   (desktop-brytpunkten enligt CLAUDE.md) tre. */
.np-shipping-options-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 16px;
}

/* Logga till höger om texten (inte ovanför) - håller varje kort lågt/
   kompakt i höjdled istället för att stapla logga+rubrik+tid vertikalt. */
.np-shipping-option-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #f7f5f2;
}

.np-shipping-option-text {
	min-width: 0;
}

/* Fast bredd på logga-rutan så alla kort får samma "tak" oavsett om
   loggan är bred/liggande (PostNord) eller mer kvadratisk (UPS-skölden,
   jordglob-ikonen) - object-fit: contain behåller varje loggas egna
   proportioner utan att den beskärs eller sträcks ut. */
.np-shipping-option-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 40px;
}

.np-shipping-option-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Breda ordbild-loggor (PostNord, DHL) läses mindre tydligt än UPS-
   skölden/jordglob-ikonen vid samma rutstorlek - samma bredare ruta för
   ALLA ordbild-loggor (se $wordmark_logo_ids i inc/shipping-policy.php),
   oavsett om kortet är ett av de enkla eller ett av DHL:s detaljerade -
   en gemensam regel istället för en egen storlek per kort. */
.np-shipping-option-logo.is-wordmark {
	width: 76px;
	height: 46px;
}

.np-shipping-option-card h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

.np-shipping-option-time {
	margin: 0;
	font-weight: 700;
	color: #111 !important;
}

/* --- Regionrutnätet ------------------------------------------------------
   Mobil: en kolumn (varje region-block staplat, landlistan i regionen en
   enkel kolumn). Från 768px blir landlistan inom varje region två
   kolumner, och regionerna själva läggs i ett två-kolumners rutnät från
   1024px. */
.np-shipping-region {
	margin-bottom: 24px;
}

.np-shipping-region:last-of-type {
	margin-bottom: 0;
}

/* Mobil: en <select> per region istället för att skrolla igenom en lång
   länklista (Europa har ~30 länder) - snabbare att hitta sitt land, och
   ett bekant, inbyggt mönster på små skärmar. Döljs igen från 768px,
   då tar den vanliga länklistan (.np-shipping-region-list) över, se
   nedan. */
.np-shipping-region-select {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 2px solid #e2ded8;
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	font-family: inherit;
	color: #111;
}

.np-shipping-region-list {
	display: none;
	grid-template-columns: 1fr;
	gap: 4px 20px;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.np-shipping-region-list li {
	padding: 4px 0;
	border-bottom: 1px solid #ececec;
}

.np-shipping-region-list a {
	font-weight: 600;
	text-decoration: none;
}

.np-shipping-region-soon {
	color: #999;
}

.np-shipping-missing-country {
	margin-top: 28px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #f7f5f2;
}

.np-shipping-missing-country h3 {
	margin-top: 0;
}

/* --- Additional Information-dragspelet ----------------------------------
   np-accordion-item-skalet kommer från product-info-sections.css, bara ett
   litet mellanrum mellan posterna behövs här. */
.np-shipping-additional-info .np-accordion-item {
	margin-bottom: 10px;
}

.np-shipping-additional-info .np-accordion-item:last-child {
	margin-bottom: 0;
}

/* --- Kontaktblocket (delat mellan huvudsidan och landssidorna) --------- */
.np-shipping-contact-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.np-shipping-contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
}

/* --- Landssidans egna block --------------------------------------------- */
.np-shipping-country-options {
	list-style: none;
	padding-left: 0;
}

.np-shipping-country-options li {
	padding: 6px 0;
	border-bottom: 1px solid #ececec;
}

.np-shipping-country-brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding-left: 0;
}

.np-shipping-country-brand-list li {
	border-radius: 999px;
	background: #f7f5f2;
	font-weight: 700;
	font-size: 13px;
}

.np-shipping-country-brand-list li:not( :has( a ) ) {
	padding: 6px 14px;
}

/* Länkade varumärken (matchar en riktig term i varumärkes-taxonomin, se
   np_get_brand_term_url()) - hela chippen är klickbar (padding ligger på
   länken, inte <li>:et), med en tydlig hover-färg så det syns att den går
   att klicka. Icke-länkade varumärken (ingen matchande term hittades)
   förblir vanlig text utan hover-effekt. */
.np-shipping-country-brand-list a {
	display: inline-block;
	padding: 6px 14px;
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.np-shipping-country-brand-list a:hover {
	color: var( --wd-primary-color, #8a1f1f );
}

.np-shipping-country-import-scheme {
	padding: 20px;
	border-radius: 14px;
	background: #fbf3e7;
	border: 1px solid #efd9ad;
}

.np-shipping-country-import-scheme-risk {
	margin-top: 12px;
	font-weight: 700;
	color: #7a4a00 !important;
}

/* --- Flaggor i regionrutnätet (huvudsidan) ------------------------------
   Lite större än omgivande text så de faktiskt läses som flaggor, inte
   bara små prickar - men inte så stora att raderna blir ojämna. */
.np-shipping-region-flag {
	font-size: 16px;
	margin-right: 2px;
}

/* --- Flagg-hero:n högst upp på varje landssida --------------------------
   Stor flagga + landsnamn + en färgad scope-pill, mobil-först: staplat
   (flagga ovanför namn+pill) tills det får plats sida vid sida från
   768px. Ger sidan en tydlig, "levande" identitet direkt vid toppen
   istället för att bara gå rakt in i brödtext. */
.np-shipping-country-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px !important;
}

.np-shipping-country-hero-flag {
	font-size: 44px;
	line-height: 1;
}

.np-shipping-country-hero-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.np-shipping-country-hero-name {
	font-size: 22px;
	font-weight: 800;
}

.np-shipping-country-hero-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.np-shipping-country-hero-badge.is-full {
	background: #e7f4e8;
	color: #2e7d32 !important;
}

.np-shipping-country-hero-badge.is-caffeine-only {
	background: #fdf0e0;
	color: #a15c00 !important;
}

.np-shipping-country-hero-badge.is-prescription {
	background: #fdebe9;
	color: #b3261e !important;
}

/* --- Lite mer liv i listorna: bockmarkerad highlights-lista och en liten
   ikon framför varje fraktalternativ, istället för default webbläsar-
   punkter. --- */
.np-shipping-country-highlights ul {
	list-style: none;
	padding-left: 0;
}

.np-shipping-country-highlights li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
}

.np-shipping-country-highlights li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #2e7d32;
	font-weight: 800;
}

.np-shipping-country-options li::before {
	content: '📦 ';
}

.np-shipping-country-options li:last-child::before {
	content: '⏱️ ';
}

@media ( min-width: 768px ) {
	.np-shipping-country-hero {
		flex-direction: row;
		align-items: center;
		gap: 18px;
	}

	.np-shipping-country-hero-flag {
		font-size: 56px;
	}

	.np-shipping-country-hero-name {
		font-size: 26px;
	}
}

@media ( min-width: 768px ) {
	.np-shipping-policy-page,
	.np-shipping-country-page-wrap {
		padding-block: 48px 80px;
	}

	.np-shipping-policy-page h2 {
		font-size: 24px;
	}

	.np-shipping-country-page h2 {
		font-size: 23px;
	}

	.np-shipping-options-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Från 768px: tillbaka till den vanliga länklistan, dropdownen (mobil-
	   varianten ovan) döljs. */
	.np-shipping-region-select {
		display: none;
	}

	.np-shipping-region-list {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1200px ) {
	.np-shipping-options-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.np-shipping-region-list {
		grid-template-columns: repeat( 3, 1fr );
	}
}