/* ==========================================================================
   Vinduet — 2026-09-14

   Portalens ene modale vindu. Det er to steder som trenger ett i dag:

     – hva som lå i en bestilling (kontoen, css/konto.css)
     – størrelsesguiden (produktsiden, css/pdp.css)

   og de skal ikke være to forskjellige vinduer. Rammen står her; det som
   ligger inne i den står der den hører hjemme.

   Samme målte verdier som resten: flate 12, felt 9, pilleknapp 999/58/16.
   Kortet er hvitt og ikke grått, fordi det ligger *over* siden og ikke i den.
   ========================================================================== */

.opsis-vindu {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* Uten denne lukkes ikke vinduet.
 *
 * `hidden` er et attributt nettleseren slår av med `[hidden] { display: none }`
 * i sitt eget stilark — og et stilark fra siden slår nettleserens eget. `display:
 * flex` over her vant altså, `steng()` satte `hidden` uten at noe skjedde, og
 * krysset, Escape og klikket på bakgrunnen så alle sammen ut som om de ikke
 * virket. De virket; vinduet ble bare stående.
 *
 * Feilen var usynlig i verkstedet fordi ingenting der målte et vindu som var
 * blitt lukket igjen — bare et som var åpent. */
.opsis-vindu[hidden] {
	display: none;
}

.opsis-vindu__bak {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .45);
}

body.opsis-vindu-apent {
	overflow: hidden;
}

.opsis-vindu__boks {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: 82vh;
	border-radius: 12px;
	background: var(--page, #fff);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
	overflow: hidden;
}

/* Et vindu som viser et dokument trenger mer plass enn et som viser en liste.
   Bredden settes av den som åpner, gjennom `bredt`. */
.opsis-vindu--bredt .opsis-vindu__boks {
	max-width: 1000px;
	height: 88vh;
	max-height: 88vh;
}

.opsis-vindu__topp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 26px 16px;
	border-bottom: 1px solid var(--rule, #E5E5E5);
}

/* `body` er med fordi både kontosiden og produktsiden setter `h2` med en
   klasse og et element — `.woocommerce-account h2` er en clamp mellom 22 og 26
   piksler — og det slår en naken klasse. Uten dette ble vindustittelen 26 og
   sto større enn sidens egen overskrift. */
body .opsis-vindu__tittel {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink, #111);
}

/* Lukkeknappen er ingen handling som fullfører noe, så den er ingen pille: en
   rund flate på det grå, som ikonene i toppen. Organisasjons-pluginen maler
   alle knapper i bedriftens farge med «!important» — se css/kurv.css — så
   bunnen må svare med det samme. */
.opsis-vindu__lukk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--stage, #F4F4F5) !important;
	color: var(--ink, #111);
	cursor: pointer;
	transition: background .12s ease;
}

.opsis-vindu__lukk:hover {
	background: var(--rule, #E5E5E5) !important;
}

.opsis-vindu__kropp {
	flex: 1 1 auto;
	padding: 6px 26px 22px;
	overflow-y: auto;
}

/* Et dokument fyller vinduet selv og skal ikke ha luft rundt seg. */
.opsis-vindu--bredt .opsis-vindu__kropp {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.opsis-vindu__melding {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--ink-soft, #6E6E6E);
}


@media (max-width: 600px) {
	.opsis-vindu {
		padding: 0;
		align-items: flex-end;
	}

	.opsis-vindu__boks,
	.opsis-vindu--bredt .opsis-vindu__boks {
		max-width: none;
		height: auto;
		max-height: 92vh;
		border-radius: 12px 12px 0 0;
	}

	.opsis-vindu--bredt .opsis-vindu__boks {
		height: 92vh;
	}

	.opsis-vindu__topp,
	.opsis-vindu__kropp {
		padding-left: 18px;
		padding-right: 18px;
	}

	.opsis-vindu--bredt .opsis-vindu__kropp {
		padding: 0;
	}
}