/* ==========================================================================
   Serviceformulär
   Anvander samma palett som ovriga tillagg (definierad i arq-megamenu.css),
   med reservvarden om den filen nagon gang tas bort.
   ========================================================================== */

.wpforms-container {
	--f-navy:   var(--arq-navy, #001721);
	--f-text:   var(--arq-text, #44565f);
	--f-dampad: var(--arq-dampad, #5f6e76);
	--f-guld:   var(--arq-guld, #886e1a);
	--f-linje:  var(--arq-linje, #dfe5e7);
	--f-yta:    var(--arq-yta, #f4f7f7);

	max-width: 760px;
	margin: 0 !important;
	counter-reset: arq-steg;
}

/* Formularet som ett kort - ger det tyngd i stallet for att flyta pa vitt */
.wpforms-container .wpforms-form {
	background: #fff;
	border: 1px solid var(--f-linje);
	border-radius: 4px;
	padding: 40px 44px 36px;
	box-shadow: 0 2px 18px rgba(0, 23, 33, .05);
}

@media only screen and (max-width: 600px) {
	.wpforms-container .wpforms-form { padding: 24px 20px 26px; border-radius: 0; }
}

.wpforms-container .wpforms-form { position: relative; }

/* --- Sektionsrubriker --------------------------------------------------- */
.wpforms-field.arq-sektion { padding: 0 !important; margin: 26px 0 2px !important; }
.wpforms-field.arq-sektion:first-child { margin-top: 0 !important; }

.wpforms-container .wpforms-field.arq-sektion .arq-sektion__titel,
.arq-sektion__titel {
	display: flex !important;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--f-linje) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--f-navy) !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
}

/* --- Falt ---------------------------------------------------------------- */
.wpforms-container .wpforms-field { padding: 9px 0 !important; }

.wpforms-container .wpforms-field-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	color: var(--f-navy) !important;
	margin-bottom: 7px !important;
	line-height: 1.3 !important;
}

.wpforms-container .wpforms-required-label { color: #b3261e !important; }

/* Beskrivningar hade for lag kontrast i gratt */
.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-sublabel {
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--f-dampad) !important;
	margin-top: 7px !important;
}

.wpforms-container .wpforms-field-description a { color: var(--f-guld) !important; text-decoration: underline; }
.wpforms-container .wpforms-field-description a:hover { color: var(--f-navy) !important; }

/* --- Inmatning ----------------------------------------------------------- */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
	width: 100% !important;
	min-height: 50px;
	padding: 13px 16px !important;
	background: #f7f9f9 !important;
	border: 1px solid transparent !important;
	border-bottom: 1px solid #d5dee1 !important;
	border-radius: 3px 3px 0 0 !important;
	font-size: 16px !important;   /* 16px hindrar iOS fran att zooma in */
	line-height: 1.4 !important;
	color: var(--f-navy) !important;
	box-shadow: none !important;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.wpforms-container textarea { min-height: 118px; resize: vertical; }

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: #8c9aa1 !important; opacity: 1; }

.wpforms-container input:hover,
.wpforms-container textarea:hover {
	background: #f1f5f5 !important;
	border-bottom-color: #9aa8ae !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	background: #fff !important;
	border-color: var(--f-navy) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 0 3px rgba(0, 23, 33, .10) !important;
	outline: none !important;
}

/* Falt som inte behover full bredd */
.wpforms-field.arq-smal .wpforms-field-medium,
.wpforms-field.arq-smal input { max-width: 280px !important; }

/* --- Kryssrutor ---------------------------------------------------------- */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* Markupen ar <li><input><label> - input och label ar SYSKON.
   Darfor maste <li> vara flexbehallaren, annars hamnar rutan pa egen rad. */
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	min-height: 42px;
	margin: 0 -10px !important;
	padding: 8px 10px !important;
	border-radius: 3px;
	transition: background-color .14s ease;
}

.wpforms-container .wpforms-field-checkbox li label,
.wpforms-container .wpforms-field-radio li label {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--f-text) !important;
	cursor: pointer;
}

.wpforms-container .wpforms-field-checkbox li:hover,
.wpforms-container .wpforms-field-radio li:hover { background: var(--f-yta); }

.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	/* WPForms egen CSS har hogre specificitet an en klasskedja,
	   darfor !important pa matten. */
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 1px 0 0 !important;
	background: #fff !important;
	border: 1.5px solid #9aa8ae !important;
	border-radius: 2px !important;
	cursor: pointer;
	position: relative;
	transition: background-color .14s ease, border-color .14s ease;
}

.wpforms-container .wpforms-field-radio input[type="radio"] { border-radius: 50%; }

.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:checked,
.wpforms-container .wpforms-field-radio input[type="radio"]:checked {
	background-color: var(--f-navy) !important;
	border-color: var(--f-navy) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") !important;
	background-size: 13px 13px !important;
}

.wpforms-container .wpforms-field-radio input[type="radio"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23ffffff'/%3E%3C/svg%3E") !important;
	background-size: 18px 18px !important;
}

.wpforms-container input[type="checkbox"]:focus-visible,
.wpforms-container input[type="radio"]:focus-visible {
	outline: 2px solid var(--f-navy);
	outline-offset: 2px;
}

/* --- Filuppladdning ------------------------------------------------------ */
.wpforms-container .wpforms-uploader {
	background: var(--f-yta) !important;
	border: 1.5px dashed #adbabf !important;
	border-radius: 3px !important;
	padding: 22px 18px !important;
	transition: border-color .16s ease, background-color .16s ease;
}

.wpforms-container .wpforms-uploader:hover { border-color: var(--f-navy) !important; background: #eef3f3 !important; }
.wpforms-container .wpforms-uploader .modern-title { color: var(--f-navy) !important; font-size: 15px !important; }
.wpforms-container .wpforms-uploader .modern-hint { color: var(--f-dampad) !important; font-size: 13px !important; }

/* --- Skicka -------------------------------------------------------------- */
.wpforms-container .wpforms-submit-container { padding-top: 12px !important; }

.wpforms-container button[type="submit"].wpforms-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	float: right;
	min-height: 56px;
	padding: 17px 34px !important;
	background: var(--f-navy) !important;
	color: #fff !important;
	border: 1px solid var(--f-navy) !important;
	border-radius: 2px !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	letter-spacing: .015em;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, box-shadow .22s ease;
}

.wpforms-container button[type="submit"].wpforms-submit:hover {
	background: var(--arq-guld-yta, #c9a227) !important;
	border-color: var(--arq-guld-yta, #c9a227) !important;
	color: var(--f-navy) !important;
	box-shadow: 0 6px 20px rgba(0, 23, 33, .16);
}

.wpforms-container button[type="submit"].wpforms-submit:focus-visible {
	outline: 2px solid var(--f-navy) !important;
	outline-offset: 3px;
}

/* --- Fel ----------------------------------------------------------------- */
.wpforms-container label.wpforms-error {
	color: #b3261e !important;
	font-size: 13.5px !important;
	margin-top: 6px !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: #b3261e !important; }

/* --- Mobil --------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.wpforms-container .wpforms-one-half {
		width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
	}
	.wpforms-field.arq-smal input { max-width: 100% !important; }
	.wpforms-container button[type="submit"].wpforms-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.wpforms-container * { transition: none !important; }
}


/* --------------------------------------------------------------------------
   Utfallbara textblock

   Villkoren och GDPR-texten ar langa men lases sallan. Ihopfallda kortar de
   formularet med flera hundra pixlar utan att nagon information forsvinner.
   -------------------------------------------------------------------------- */
.wpforms-container .arq-utfall {
	margin: 4px 0 0;
	border: 1px solid var(--f-linje);
	border-radius: 2px;
	background: #fff;
}

.wpforms-container .arq-utfall > summary {
	list-style: none;
	cursor: pointer;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--f-navy);
	transition: background-color .14s ease;
}

.wpforms-container .arq-utfall > summary::-webkit-details-marker { display: none; }

.wpforms-container .arq-utfall > summary::before {
	content: "";
	flex: none;
	width: 7px; height: 7px;
	border-right: 2px solid var(--f-guld);
	border-bottom: 2px solid var(--f-guld);
	transform: rotate(-45deg);
	transition: transform .2s ease;
}

.wpforms-container .arq-utfall[open] > summary::before { transform: rotate(45deg); }
.wpforms-container .arq-utfall > summary:hover { background: var(--f-yta); }
.wpforms-container .arq-utfall > summary:focus-visible { outline: 2px solid var(--f-navy); outline-offset: -2px; }

.wpforms-container .arq-utfall__text {
	padding: 2px 14px 12px;
	border-top: 1px solid var(--f-linje);
}

.wpforms-container .arq-utfall__text p {
	margin: 10px 0 0 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: var(--f-dampad) !important;
}

.wpforms-container .arq-utfall__text a { color: var(--f-guld) !important; text-decoration: underline; }

.wpforms-container .arq-slutnot {
	margin: 0 0 10px !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: var(--f-dampad) !important;
}

.wpforms-container .arq-slutnot a { color: var(--f-guld) !important; text-decoration: underline; }

/* Arendevalen i tva kolumner */
/* WPForms egen 2-kolumnsregel gor varje li 50% bred. Med mitt rutnat ovanpa
   halverades bredden en gang till - 163px, sa etiketterna brot pa tre rader.
   Nollstall li:s bredd och lat rutnatet ensamt sköta kolumnerna. */
.wpforms-container .wpforms-field-checkbox.wpforms-list-2-columns ul,
.wpforms-container .wpforms-field-radio.wpforms-list-2-columns ul {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.wpforms-container .wpforms-field-checkbox.wpforms-list-2-columns ul > li,
.wpforms-container .wpforms-field-radio.wpforms-list-2-columns ul > li {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin-right: 0 !important;
	padding-right: 10px !important;
}

@media only screen and (max-width: 600px) {
	.wpforms-container .wpforms-field-checkbox.wpforms-list-2-columns ul { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Numrerade sektioner - ger formularet en tydlig ordning
   -------------------------------------------------------------------------- */
.wpforms-container .arq-sektion__titel::before {
	counter-increment: arq-steg;
	content: counter(arq-steg, decimal-leading-zero);
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--f-guld);
	font-variant-numeric: tabular-nums;
}

.wpforms-container .wpforms-submit-container { overflow: hidden; padding-top: 20px !important; }

.wpforms-container .wpforms-required-label {
	color: var(--f-guld) !important;
	font-weight: 400 !important;
}

.wpforms-container .arq-utfall {
	background: #f7f9f9;
	border-color: transparent;
}

.wpforms-container .arq-utfall[open] { background: #fff; border-color: var(--f-linje); }


/* --------------------------------------------------------------------------
   Personuppgifter - obligatoriskt godkannande sist i formularet
   -------------------------------------------------------------------------- */
.wpforms-container .wpforms-field.arq-gdpr {
	margin-top: 8px;
	padding: 20px 22px !important;
	background: #f7f9f9;
	border-radius: 3px;
}

.wpforms-container .wpforms-field.arq-gdpr .wpforms-field-label {
	font-size: 13px !important;
	letter-spacing: .04em;
	margin-bottom: 10px !important;
}

.wpforms-container .wpforms-field.arq-gdpr .wpforms-field-description {
	margin-top: 0 !important;
	margin-bottom: 12px !important;
	order: -1;
}

.wpforms-container .wpforms-field.arq-gdpr .wpforms-field-description p {
	margin: 0 0 9px !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--f-dampad) !important;
}

.wpforms-container .wpforms-field.arq-gdpr .wpforms-field-description p:last-child { margin-bottom: 0 !important; }
.wpforms-container .wpforms-field.arq-gdpr .wpforms-field-description a { color: var(--f-guld) !important; text-decoration: underline; }

/* Sjalva godkannandet ska sticka ut mot texten ovanfor */
.wpforms-container .wpforms-field.arq-gdpr li {
	background: #fff;
	border: 1px solid var(--f-linje);
	border-radius: 3px;
	margin: 0 !important;
	padding: 12px 14px !important;
}

.wpforms-container .wpforms-field.arq-gdpr li label {
	font-weight: 500 !important;
	color: var(--f-navy) !important;
}