/* Skjul land/fylke i fraktkalkulatoren - bare postnummer skal vises */
.shipping-calculator-form #calc_shipping_country_field,
.shipping-calculator-form #calc_shipping_state_field {
	display: none;
}


/*
 * FULL BREDDE PÅ FRAKTSEKSJONEN, UNDER HANDLEKURV-TABELLEN
 * (i stedet for en smal sidekolonne ved siden av) - inspirert av
 * getFit sitt oppsett, der frakt/hentested-valget får like mye plass som
 * resten av innholdet.
 *
 * WooCommerce sin klassiske handlekurv-mal legger "cart-collaterals"
 * (som inneholder cart_totals/frakt) RETT ETTER handlekurv-skjemaet i selve
 * HTML-koden - de fleste temaer flyter/begrenser den til en smal
 * side-kolonne med CSS (width/float) for å få et to-kolonners utseende.
 * Siden elementet allerede kommer etter tabellen i kildekoden, holder det å
 * fjerne float/bredde-begrensningen for at den skal falle ned under
 * tabellen i full bredde helt av seg selv - ingen mal-fil trenger å endres.
 *
 * MERK: !important er nødvendig siden temaets egen CSS typisk er mer
 * spesifikk. Dette er skrevet mot WooCommerce sine EGNE kjerne-klassenavn
 * (cart-collaterals/cart_totals), ikke temaspesifikke klasser, så det bør
 * fungere uavhengig av hvilket tema som er i bruk - men noen temaer kan ha
 * egne wrapper-elementer rundt som også må nulles ut manuelt om dette ikke
 * er nok alene.
 */
.woocommerce-cart .cart-collaterals {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-cart .cart-collaterals .shop_table {
	width: 100% !important;
}

.woocommerce-cart ul#shipping_method {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce-cart ul#shipping_method > li {
	padding: 14px 0;
	border-bottom: 1px solid #eee;
}

.woocommerce-cart ul#shipping_method > li:last-child {
	border-bottom: none;
}

/*
 * Mange temaers CSS for fraktvalg-listen (ul#shipping_method) er skrevet
 * for enkel, ren tekst på én linje og setter derfor gjerne fast høyde
 * og/eller skjult overflow på <li>/<label>. Vårt innhold (navn + pris +
 * logo + en hel dropdown-rad under) er høyere enn det - dette resetter
 * de vanligste årsakene til at innholdet vårt overlapper naboelementer,
 * uten å måtte kjenne til akkurat dette temaets egne klassenavn, siden
 * ul#shipping_method/li/label er WooCommerce sin egen kjerne-markup.
 */
ul#shipping_method li,
ul#shipping_method li label {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
}

/*
 * Radioknapp og label skal stå PÅ SAMME LINJE (knapp til venstre for
 * navnet), ikke knapp over navnet. WooCommerce sin native markup er
 * <li><input type="radio">Label-innhold</li> (input og innhold er ikke
 * pakket i en egen wrapper) - display:block på label alene ville tvunget
 * innholdet ned på en ny linje under den frittstående radioknappen, siden
 * blokk-elementer alltid brytes til egen linje. Gjør derfor selve <li>
 * til en flex-rad i stedet, med radioknappen låst til toppen og resten
 * av innholdet fylle bredden ved siden av den.
 */
ul#shipping_method li {
	display: flex !important;
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	gap: 10px;
}

/* Mindre avstand mellom radioknapp og innhold på mobil - frigjør noen
 * ekstra piksler til selve teksten/dropdown-boksen, som trenger dem mer
 * enn den luftige avstanden gjør på en smal skjerm. */
@media (max-width: 420px) {
	ul#shipping_method li {
		gap: 3px;
	}
}

ul#shipping_method li input[type="radio"] {
	margin-top: 4px !important;
	flex-shrink: 0;
}

ul#shipping_method li label {
	display: block !important;
	flex: 1;
	min-width: 0;
}

.woocommerce-shipping-calculator.sps-loading {
	opacity: 0.5;
	pointer-events: none;
}

.sps-error-notice {
	margin-bottom: 1em;
}

/* Kart-modal */
.sps-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.sps-modal.sps-modal-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sps-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.sps-modal-content {
	position: relative;
	display: flex;
	width: 800px;
	height: 460px;
	max-width: 95vw;
	max-height: 90vh;
	margin: 0;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}

/* Venstre kolonne: kartet, i full høyde */
.sps-modal-map-col {
	flex: 1 1 60%;
	min-width: 0;
	position: relative;
}

/* Høyre kolonne: overskrift + rullbar liste + bekreft-knapp */
.sps-modal-list-col {
	flex: 0 0 360px;
	max-width: 40%;
	display: flex;
	flex-direction: column;
	border-left: 1px solid #eee;
	min-height: 0;
}

.sps-modal-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 12px;
	flex-shrink: 0;
}

.sps-modal-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sps-modal-close {
	all: unset;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #f0f0f0 !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 15px !important;
	line-height: 1 !important;
	color: #555 !important;
	cursor: pointer;
	flex-shrink: 0;
	flex-grow: 0;
	box-shadow: none !important;
}

.sps-modal-close:hover {
	background: #e2e2e2 !important;
}

.sps-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sps-agent-list {
	list-style: none;
	margin: 0;
	padding: 0 10px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.sps-agent-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 10px;
	margin: 0 -10px;
	border-radius: 4px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.sps-agent-item:hover {
	background-color: #f7f7f7 !important;
}

.sps-agent-item-selected {
	background-color: #eef4fb !important;
}

.sps-modal-confirm {
	display: block !important;
	width: calc(100% - 40px) !important;
	margin: 12px 20px 20px !important;
	flex-shrink: 0;
	background: #1a1a1a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 12px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	cursor: pointer;
	box-shadow: none !important;
}

.sps-modal-confirm:hover:not(:disabled) {
	background: #333 !important;
}

.sps-modal-confirm:disabled {
	opacity: 0.4 !important;
	cursor: default;
}

/* Under ~700px bredde: fall tilbake til stablet (kart over, liste under) - to kolonner blir for smalt til å være lesbart på mobil. */
@media (max-width: 700px) {
	.sps-modal-content {
		flex-direction: column;
		width: 95vw;
		height: 90vh;
	}

	.sps-modal-map-col {
		flex: 0 0 240px;
	}

	.sps-modal-list-col {
		flex: 1 1 auto;
		max-width: 100%;
		border-left: none;
		border-top: 1px solid #eee;
	}
}

.sps-agent-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.sps-agent-radio {
	width: 16px;
	height: 16px;
	border: 1.5px solid #bbb;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
	position: relative;
	transition: border-color 0.1s ease;
}

.sps-agent-item-selected .sps-agent-radio {
	border-color: #2271b1;
}

.sps-agent-item-selected .sps-agent-radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: #2271b1;
	border-radius: 50%;
}

.sps-agent-name {
	font-weight: bold;
	font-size: 0.9rem;
	line-height: 1.4;
}

.sps-agent-address {
	color: #707070;
	font-size: 0.82em;
	line-height: 1.4;
	margin-top: 2px;
}

.sps-agent-description,
.sps-agent-hours {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: #888;
	font-size: 0.76em;
	line-height: 1.4;
	margin-top: 6px;
}

.sps-agent-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: #aaa;
}

/* Fraktrate-rad: logo, navn, beskrivelse, pris */
.sps-rate-row {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.sps-rate-main {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.sps-rate-text {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-width: 0 !important;
	text-align: left !important;
	float: none !important;
}

.sps-rate-name-price {
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sps-rate-name {
	font-weight: bold;
}

.sps-rate-description {
	display: block !important;
	color: #707070 !important;
	font-size: 0.85em !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	text-align: left !important;
}

.sps-rate-price {
	font-weight: normal;
}

/* Mellomrom mellom valutategnet ("kr") og selve beløpet - WooCommerce sin
 * egen prisformatering setter ikke inn dette som standard. */
.sps-rate-price .woocommerce-Price-currencySymbol {
	margin-right: 3px;
}

@media (max-width: 420px) {
	.sps-rate-name-price {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.sps-rate-price-bullet {
		display: none;
	}
}

.sps-rate-logo {
	width: auto !important;
	max-width: 70px !important;
	height: auto !important;
	max-height: 50px !important;
	object-fit: contain;
	flex-shrink: 1;
	min-width: 0;
	display: block;
}

/* Inline hentested-rad under valgt rate - fremstår som en dropdown */
.sps-inline-pickup {
	display: none;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden !important;
	margin-top: 6px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1.3;
	transition: border-color 0.15s ease;
}

.sps-inline-pickup:hover {
	border-color: #999;
}

.sps-inline-pickup-error {
	display: flex !important;
	color: #a04b00;
	background: #fff8e5 !important;
	border-color: #f0c36d !important;
	cursor: default;
}

.sps-inline-pickup-error:hover {
	border-color: #f0c36d !important;
}

/* Kassesiden: valget er allerede låst, ikke klikkbart - ingen håndkurs
 * eller hover-endring, og vises alltid (ingen JS til å skjule/vise den her). */
.sps-inline-pickup-locked {
	display: flex !important;
	cursor: default;
}

.sps-inline-pickup-locked:hover {
	border-color: #ccc;
}

/* Egen "Hentested"-rad på kassesiden (helt separat fra fraktrate-raden) */
.sps-checkout-pickup-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 0.9em;
}

.sps-checkout-pickup-address {
	color: #707070;
}


.sps-inline-pickup-text {
	display: block;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	flex: 1 1 auto;
}

.sps-inline-pickup-line {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.3;
}

/*
 * Sikkerhetsnett for mobil: uansett hva som skjer lenger oppe i
 * elementkjeden (li/label/tema-CSS vi ikke har full kontroll over), setter
 * vi en HARD, absolutt maks-bredde her, slik at teksten garantert får en
 * konkret bredde å avkortes mot. 337px er valgt ut ifra faktisk observert
 * skjermbredde minus kortets innvendige polstring - juster om dere ser at
 * det ikke stemmer på andre telefonstørrelser.
 */
@media (max-width: 420px) {
	.sps-inline-pickup {
		max-width: 320px !important;
	}
}

.sps-inline-pickup-name {
	font-weight: 600;
}

.sps-inline-pickup-address {
	color: #707070;
}

.sps-inline-pickup-chevron {
	color: #999;
	flex-shrink: 0;
	display: block;
}

.sps-inline-pickup-prompt {
	color: #2271b1;
	font-weight: 600;
}

/*
 * Tredjeparts "Instabox for WooCommerce"-plugin (brukes midlertidig i
 * stedet for vår egen Instabox-integrasjon) legger sin egen hentested-
 * dropdown (.instabox_services_container, med en <select> inni) som et
 * SØSKENELEMENT rett etter selve <label>-en i fraktrate-raden, via
 * WooCommerce sin native "woocommerce_after_shipping_rate"-handling.
 * Siden vår egen ul#shipping_method-li-regel over gjør hver rad til en
 * flex-rad (bygget for å vinne over ulike temaers egne CSS-konflikter),
 * havner denne boksen som standard ved siden av i stedet for under -
 * denne regelen retter opp akkurat det, og gir boksen samme visuelle stil
 * som vår egen hentested-boks (.sps-inline-pickup) for et konsekvent
 * utseende på tvers av transportørene.
 */
ul#shipping_method li .instabox_services_container.form-row {
	flex-basis: calc( 100% - 26px ) !important;
	width: auto !important;
	max-width: calc( 100% - 26px ) !important;
	box-sizing: border-box !important;
	order: 99 !important;
	margin: 6px 0 0 26px !important; /* Rykk inn til samme startpunkt som selve teksten (forbi radioknappen), akkurat som vår egen hentested-boks. */
	padding: 0 !important;
}

/* Samme fete skrift på selve fraktmetode-navnet som PostNord/Bring sine
 * rate-navn (.sps-rate-name) - :has() støttes av alle moderne nettlesere. */
ul#shipping_method li:has(.instabox_services_container) label {
	font-weight: bold;
}

ul#shipping_method li .instabox_services_container.form-row select.instabox-service {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 6px 10px !important;
	background: #fff !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	font-size: 0.85em !important;
	line-height: 1.3 !important;
	height: 36px !important;
	color: #333 !important;
	appearance: auto;
}

ul#shipping_method li .instabox_services_container.form-row select.instabox-service option {
	color: #333 !important;
	background: #fff !important;
}

/*
 * "Map"-visningen i Instabox-pluginen (alternativ til select-varianten
 * over, se instabox_checkout_template-innstillingen i deres plugin) viser
 * i stedet en boks med valgt hentested + en "Change"/"Endre"-lenke som
 * åpner en modal. Bygges om til å matche PostNord/Bring sin boks EKSAKT -
 * gjenbruker samme .sps-inline-pickup-text/-line/-name/-address-klasser
 * (satt av SPS.enhanceInstaboxSelectedLocation() i sps-cart.js), alt på
 * én linje med tekst-avkorting, IKKE stablet på egne rader. "Endre"-
 * teksten skjules (font-size:0) og erstattes med samme pil-tegn (›) som
 * resten av pluginen bruker.
 */
ul#shipping_method li .instabox_services_container.form-row .instabox-service-selected-location {
	height: 36px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 6px 10px !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	background: #fff !important;
	font-size: 0.85em !important;
	line-height: 1.3 !important;
	color: #333 !important;
	cursor: pointer;
}

ul#shipping_method li .instabox-service-selected-location-title {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	flex: 1 1 auto !important;
}

ul#shipping_method li .instabox-service-selected-location-change {
	flex-shrink: 0 !important;
	font-size: 0 !important; /* Skjuler "Change"/"Endre"-teksten - erstattes av ::after under. */
}

ul#shipping_method li .instabox-service-selected-location-change::after {
	content: '\203A'; /* › - samme pil-tegn som .sps-inline-pickup-chevron. */
	font-size: 18px;
	line-height: 1;
	color: #999;
}

/*
 * Rotårsaken til at siden hopper til toppen ved klikk på "Endre": Instabox-
 * pluginen legger klassen "instabox-modal-open" på <body> når modalen
 * åpnes, med "height: 100vh; overflow-y: hidden;" i sin egen CSS. Er
 * siden allerede scrollet ned, tvinger dette body til å brått vise KUN
 * de øverste 100vh av innholdet (resten klippes av egen overflow), som
 * visuelt ser ut som et hopp til toppen - selve </body> "krymper" i
 * stedet for at siden faktisk scrolles. Nullstiller kun høyde-
 * begrensningen (ikke overflow-y, som fortsatt bidrar til å holde
 * bakgrunnen fra å scrolle mens modalen er åpen).
 */
body.instabox-modal-open {
	height: auto !important;
}