/**
 * Uploadsiden /share-with-us/
 *
 * Siden står helt for sig selv – ingen temaheader og ingen temastylesheets – så
 * alt hvad den skal bruge, ligger her. Farverne er sitets egne brandfarver, men
 * skrives som var(--wp--preset--…, #fallback), så de automatisk følger med hvis
 * siden en dag alligevel indlæses i temaets kontekst.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.cc-ugc-body {
	margin: 0;
	font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #181818);
	background: #fff;
}

.cc-ugc-main {
	--cc-ugc-accent: var(--wp--preset--color--custom-knap-farve, #009942);
	--cc-ugc-accent-hover: var(--wp--preset--color--custom-hover, #07bf54);
	--cc-ugc-surface: var(--wp--preset--color--base, #f7f7f7);
	--cc-ugc-ink: var(--wp--preset--color--contrast, #181818);
	--cc-ugc-line: color-mix(in srgb, var(--cc-ugc-ink) 15%, transparent);
	--cc-ugc-radius: 14px;

	padding: clamp(1rem, 4vw, 2.5rem) 1rem 3rem;
	color: var(--cc-ugc-ink);
}

.cc-ugc-shell {
	max-width: 40rem;
	margin: 0 auto;
}

/* --- Top: logo og sprog ------------------------------------------------ */

.cc-ugc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.cc-ugc-logo {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.cc-ugc-logo img {
	height: 44px;
	width: auto;
	display: block;
}

/* Sprogskifteren efterligner den på hovedsitet (cc-language-switcher), men
   siden står alene, så reglerne skal findes her. Flagene er inline SVG i
   stedet for emoji, fordi Windows ikke har glyffer til flag-emoji. */
.language-switcher {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
}

.language-switcher .flag {
	display: inline-flex;
	align-items: center;
	padding: 0.25em;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.16s ease;
}

.language-switcher .flag svg {
	display: block;
	width: 30px;
	height: 21px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.language-switcher .flag.current {
	outline: 2px solid var(--cc-ugc-accent);
}

.language-switcher .flag.other {
	opacity: 0.65;
}

.language-switcher .flag.other:hover,
.language-switcher .flag.other:focus-visible {
	opacity: 1;
	background-color: color-mix(in srgb, var(--cc-ugc-accent) 15%, transparent);
}

/* Synligt for skærmlæsere, skjult visuelt. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cc-ugc-header h1 {
	margin: 0 0 0.4em;
	font-size: clamp(1.6rem, 6vw, 2.2rem);
	line-height: 1.15;
}

.cc-ugc-intro {
	margin: 0 0 2rem;
	max-width: 34em;
	opacity: 0.85;
}

/* --- Vælg filer ------------------------------------------------------- */

.cc-ugc-dropzone {
	margin-bottom: 1.25rem;
}

.cc-ugc-choose {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	min-height: 9rem;
	padding: 1.5rem 1rem;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: var(--cc-ugc-surface);
	border: 2px dashed var(--cc-ugc-line);
	border-radius: var(--cc-ugc-radius);
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.cc-ugc-choose:hover,
.cc-ugc-dropzone.is-dragover .cc-ugc-choose {
	border-color: var(--cc-ugc-accent);
	background: color-mix(in srgb, var(--cc-ugc-accent) 6%, var(--cc-ugc-surface));
}

.cc-ugc-choose__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	color: #fff;
	background: var(--cc-ugc-accent);
	border-radius: 50%;
}

.cc-ugc-choose__label {
	font-weight: 700;
	font-size: 1.05rem;
}

.cc-ugc-choose__hint {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* --- Miniaturer ------------------------------------------------------- */

/* --- Valgte billeder --------------------------------------------------- */

/* Hvert billede får sit eget beskrivelsesfelt ved siden af miniaturen, så det
   altid er utvetydigt hvilket billede teksten hører til. Derfor en liste af
   rækker frem for et gitter af miniaturer. */
.cc-ugc-previews {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.cc-ugc-previews:empty {
	margin: 0;
}

.cc-ugc-preview {
	display: flex;
	gap: 0.65rem;
	align-items: center;
}

.cc-ugc-preview__thumb {
	position: relative;
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--cc-ugc-surface);
	border-radius: 10px;
}

.cc-ugc-preview__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-ugc-preview__thumb.is-done::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--cc-ugc-accent) 55%, transparent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
		center / 45% no-repeat;
}

.cc-ugc-preview__thumb.is-failed::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(179, 45, 46, 0.6)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")
		center / 40% no-repeat;
}

.cc-ugc-preview__desc {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65em 0.8em;
	font: inherit;
	font-size: 0.92rem;
	color: inherit;
	background: #fff;
	border: 1px solid var(--cc-ugc-line);
	border-radius: 10px;
}

.cc-ugc-preview__desc:focus-visible {
	outline: 2px solid var(--cc-ugc-accent);
	outline-offset: 1px;
}

.cc-ugc-preview__desc[readonly] {
	background: var(--cc-ugc-surface);
	opacity: 0.7;
}

.cc-ugc-preview__remove {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 19px;
	line-height: 1;
	color: var(--cc-ugc-ink);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
	opacity: 0.5;
}

.cc-ugc-preview__remove:hover {
	opacity: 1;
	background: var(--cc-ugc-surface);
}

.cc-ugc-deschint {
	margin: 0 0 1.5rem;
	font-size: 0.8rem;
	opacity: 0.65;
}

/* Skjul hjælpeteksten indtil der faktisk er valgt billeder. */
.cc-ugc-previews:empty + .cc-ugc-deschint {
	display: none;
}

/* --- Felter ----------------------------------------------------------- */

.cc-ugc-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cc-ugc-field {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: 0.3rem;
}

.cc-ugc-field--narrow {
	flex: 0 1 8rem;
}

.cc-ugc-field__label {
	font-weight: 600;
	font-size: 0.95rem;
}

.cc-ugc-req {
	color: #b32d2e;
}

.cc-ugc-field__hint {
	font-size: 0.8rem;
	opacity: 0.65;
}

.cc-ugc-namehint {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
}

.cc-ugc-field input {
	padding: 0.7em 0.8em;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--cc-ugc-line);
	border-radius: 10px;
}

.cc-ugc-field input:focus-visible {
	outline: 2px solid var(--cc-ugc-accent);
	outline-offset: 1px;
}

.cc-ugc-field input.is-invalid {
	border-color: #b32d2e;
}

/* --- Samtykke ---------------------------------------------------------- */

.cc-ugc-consent-box {
	padding: 1rem 1.1rem;
	margin-bottom: 1.5rem;
	background: var(--cc-ugc-surface);
	border: 1px solid var(--cc-ugc-line);
	border-radius: var(--cc-ugc-radius);
}

.cc-ugc-consent-box__title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.cc-ugc-consent {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.cc-ugc-consent input {
	flex: none;
	width: 1.35em;
	height: 1.35em;
	margin-top: 0.1em;
	accent-color: var(--cc-ugc-accent);
}

/* Honeypot – skal være usynlig for mennesker, men ikke display:none,
   da nogle bots springer skjulte felter over. */
.cc-ugc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Knap, fejl og fremdrift ------------------------------------------ */

.cc-ugc-submit,
.cc-ugc-restart {
	display: block;
	width: 100%;
	padding: 0.95em 1.4em;
	font: inherit;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: var(--cc-ugc-accent);
	border: 0;
	border-radius: 999px;
	transition: background-color 0.16s ease;
}

.cc-ugc-submit:hover:not(:disabled),
.cc-ugc-restart:hover {
	background: var(--cc-ugc-accent-hover);
}

.cc-ugc-submit:disabled {
	opacity: 0.55;
	cursor: default;
}

.cc-ugc-error {
	margin: 0 0 1rem;
	padding: 0.75em 1em;
	font-size: 0.95rem;
	color: #7a1f20;
	background: #fdecec;
	border-radius: 10px;
}

.cc-ugc-progress {
	margin-top: 1rem;
}

.cc-ugc-progress__bar {
	height: 6px;
	overflow: hidden;
	background: var(--cc-ugc-line);
	border-radius: 999px;
}

.cc-ugc-progress__bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--cc-ugc-accent);
	background-image: linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.35) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.35) 50%,
		rgba(255, 255, 255, 0.35) 75%,
		transparent 75%
	);
	background-size: 18px 18px;
	transition: width 0.25s ease;
	animation: cc-ugc-stripes 0.9s linear infinite;
}

@keyframes cc-ugc-stripes {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 18px 0;
	}
}

.cc-ugc-progress__text {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	text-align: center;
	opacity: 0.75;
}

/* Tydelig besked om at siden ikke må lukkes: uploads over mobilnet tager tid,
   og en lukket fane afbryder overførslen midt i. */
.cc-ugc-progress__warn {
	display: flex;
	gap: 0.6em;
	align-items: center;
	justify-content: center;
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.cc-ugc-spinner {
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cc-ugc-line);
	border-top-color: var(--cc-ugc-accent);
	border-radius: 50%;
	animation: cc-ugc-spin 0.8s linear infinite;
}

@keyframes cc-ugc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-ugc-spinner,
	.cc-ugc-progress__bar span {
		animation: none;
	}
}

/* --- Kvittering ------------------------------------------------------- */

.cc-ugc-done {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--cc-ugc-surface);
	border-radius: var(--cc-ugc-radius);
}

.cc-ugc-done__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1rem;
	color: #fff;
	background: var(--cc-ugc-accent);
	border-radius: 50%;
}

.cc-ugc-done h2 {
	margin: 0 0 0.5rem;
}

.cc-ugc-done p {
	margin: 0 0 1.75rem;
	opacity: 0.85;
}

.cc-ugc-restart {
	max-width: 20rem;
	margin: 0 auto;
}

.cc-ugc-footer {
	margin-top: 3rem;
	font-size: 0.85rem;
	text-align: center;
	opacity: 0.6;
}

.cc-ugc-footer a {
	color: inherit;
}