/* ══════════════════════════════════════════════════════════════
   Wild Konfiguration  ·  assets/css/model.css
   Live-modellen oven på produktbilledet. Samme sprog som K360 Shop:
   Poppins, sort tekst, grå felter, teal til det valgte, bløde hjørner.
   Farven kan sættes med --wild-model-brand på siden.
   ══════════════════════════════════════════════════════════════ */

.wild-model-scene { --wild-model-brand: var(--teal, #007083); }

/* Fotoet og K360's zoom-knap gemmer sig bag modellen, men bliver i
   siden, så variantbilleder og zoom virker som før når man skifter. */
.wild-model-on > img,
.wild-model-on > .k3-pp-bill,
.wild-model-on > .woocommerce-product-gallery__wrapper,
.wild-model-on .k3-pp-zoom,
.wild-model-on .woocommerce-product-gallery__trigger { visibility: hidden; }

.wild-model {
	position: absolute;
	inset: 0;
	z-index: 3;
	font-family: 'Poppins', system-ui, sans-serif;
	color: #141414;
	-webkit-tap-highlight-color: transparent;
}

.wild-model[hidden] { display: none; }

.wild-model__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	outline: none;
	touch-action: pan-y;
}

.wild-model__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--wild-model-brand); border-radius: inherit; }
.wild-model.er-traek .wild-model__canvas { cursor: grabbing !important; }

/* ── Øverst: skift til foto ─────────────────────────────── */

.wild-model__top {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	gap: 6px;
}

.wild-model__chip {
	appearance: none;
	margin: 0;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 0 rgba(20, 20, 20, .06), 0 4px 14px -6px rgba(20, 20, 20, .25);
	font: 500 12.5px/1.2 'Poppins', system-ui, sans-serif;
	color: #141414;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.wild-model__chip:focus-visible { outline: 2px solid var(--wild-model-brand); outline-offset: 2px; }

@media (hover: hover) {
	.wild-model__chip:hover { background-color: #141414; color: #fff; }
}

/* Tilbage til modellen, når man ser foto. Står i scenen, over billedet. */
.wild-model__tilbage {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	background-color: #141414;
	color: #fff;
}

.wild-model__tilbage[hidden] { display: none; }

/* ── Tippet om at trække lydhullet ──────────────────────── */

.wild-model__tip {
	position: absolute;
	top: 18px;
	left: 50%;
	max-width: calc(100% - 180px);
	padding: 0;
	transform: translate(-50%, -4px);
	font-size: 12.5px;
	line-height: 1.35;
	text-align: center;
	color: rgba(20, 20, 20, .56);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s, transform .35s;
}

.wild-model__tip.er-synlig { opacity: 1; transform: translate(-50%, 0); }

/* ── Nederst: mål, hjælpelinjer og juster design ────────── */

.wild-model__bund {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	pointer-events: none;
}

.wild-model__bund > * { pointer-events: auto; }

.wild-model__info {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(20, 20, 20, .62);
	font-variant-numeric: tabular-nums;
}

.wild-model__vaerktoej {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.wild-model__vaerktoej[hidden],
.wild-model__knap[hidden] { display: none; }

.wild-model__knap,
.wild-model__rund {
	appearance: none;
	margin: 0;
	border: 0;
	background-color: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 0 rgba(20, 20, 20, .06), 0 4px 14px -6px rgba(20, 20, 20, .25);
	font: 500 12.5px/1.2 'Poppins', system-ui, sans-serif;
	color: #141414;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.wild-model__knap { padding: 8px 13px; border-radius: 999px; }
.wild-model__rund { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 17px; line-height: 1; }

.wild-model__knap[aria-pressed="true"],
.wild-model__knap--fyldt { background-color: var(--wild-model-brand); color: #fff; }

.wild-model__knap:focus-visible,
.wild-model__rund:focus-visible { outline: 2px solid var(--wild-model-brand); outline-offset: 2px; }

@media (hover: hover) {
	.wild-model__knap:hover,
	.wild-model__rund:hover { background-color: #141414; color: #fff; }
}


/* ── Lille model på telefon ─────────────────────────────── */
/* Står over K360's bjælke i bunden, og kun mens man konfigurerer
   og selve modellen er rullet ud af syne. */

.wild-model-mini {
	position: fixed;
	right: 14px;
	bottom: calc(86px + env(safe-area-inset-bottom, 0px));
	z-index: 41;
	width: 84px;
	height: 84px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #F1F0EE;
	box-shadow: 0 0 0 3px #fff, 0 10px 28px -10px rgba(20, 20, 20, .45);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px) scale(.9);
	pointer-events: none;
	transition: opacity .25s, transform .3s cubic-bezier(.23, 1, .32, 1);
}

.wild-model-mini canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.wild-model-mini.er-synlig { opacity: 1; transform: none; pointer-events: auto; }
.wild-model-mini:focus-visible { outline: 2px solid var(--teal, #007083); outline-offset: 3px; }

@media (max-width: 560px) {
	.wild-model__top,
	.wild-model__tilbage { top: 10px; right: 10px; }
	.wild-model__bund { right: 10px; bottom: 10px; left: 10px; }
	.wild-model__tip { top: 48px; max-width: calc(100% - 40px); }
	.wild-model__info { flex: 1 1 100%; text-align: center; order: 2; }
	.wild-model__vaerktoej { margin: 0 auto; }
}

/* ── Beskæring efter skabelonen ─────────────────────────── */

html.wild-besk-aaben { overflow: hidden; }

.wild-besk {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: rgba(20, 20, 20, .55);
	font-family: 'Poppins', system-ui, sans-serif;
	color: #141414;
	--wild-model-brand: var(--teal, #007083);
}

.wild-besk__dialog {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(560px, 100%);
	max-height: 100%;
	overflow: auto;
	padding: 22px 22px 20px;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5);
}

.wild-besk__titel { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.wild-besk__under { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: rgba(20, 20, 20, .58); }

.wild-besk__dialog > * { flex-shrink: 0; }

.wild-besk__scene {
	display: flex;
	justify-content: center;
	width: 100%;
	border-radius: 12px;
	background-color: #262626;
	overflow: hidden;
}

.wild-besk__canvas { display: block; cursor: grab; touch-action: none; outline: none; }
.wild-besk__canvas:active { cursor: grabbing; }
.wild-besk__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--wild-model-brand); }

.wild-besk__forklaring { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: rgba(20, 20, 20, .62); }
.wild-besk__forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.wild-besk__prik { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.wild-besk__prik--synlig { border: 1.5px solid #141414; }
.wild-besk__prik--bleed { border: 1.5px dashed #141414; background-color: rgba(20, 20, 20, .35); }
.wild-besk__prik--hul { background-color: #141414; }

.wild-besk__zoom { display: flex; align-items: center; gap: 8px; }
.wild-besk__slider { flex: 1 1 auto; min-width: 0; accent-color: var(--wild-model-brand); }
.wild-besk__zoom .wild-model__rund,
.wild-besk__hurtig .wild-model__knap,
.wild-besk__handling .wild-model__knap { background-color: #F1F0EE; box-shadow: none; }
.wild-besk__handling .wild-model__knap--fyldt { background-color: var(--wild-model-brand); color: #fff; }

.wild-besk__hurtig { display: flex; flex-wrap: wrap; gap: 6px; }

.wild-besk__dpi { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.wild-besk__dpi--ok { background-color: rgba(0, 112, 131, .09); color: #005866; }
.wild-besk__dpi--mid { background-color: #FBF3DC; color: #6B4E00; }
.wild-besk__dpi--lav { background-color: #FBE7E5; color: #8C1D16; }

.wild-besk__handling { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.wild-besk__handling .wild-model__knap { padding: 11px 18px; font-size: 14px; }

@media (max-width: 560px) {
	.wild-besk { padding: 0; align-items: flex-end; }
	.wild-besk__dialog { width: 100%; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
	.wild-besk__handling .wild-model__knap { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wild-model__tip,
	.wild-model-mini { transition: none; }
}

@media print {
	.wild-model__top,
	.wild-model__bund,
	.wild-model__tip,
	.wild-model-mini { display: none !important; }
}