.ksg-wrap { max-width: 640px; }
.ksg-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.ksg-field { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; gap: 4px; }
.ksg-field input, .ksg-field select, .ksg-field textarea {
	font-weight: normal; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
}
.ksg-btn {
	display: inline-block; padding: 8px 16px; background: #1d2327; color: #fff;
	border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px;
}
.ksg-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
.ksg-item strong { flex: 1; }
.ksg-delete { background: #a00; }

/* Hjälp om hur informationssidan kopplas till kundens webbplats. */
.ksg-embed-help {
	margin: 8px 0 16px;
	padding: 16px 18px;
	background: #f6f7f7;
	border-left: 4px solid #1544c4;
	border-radius: 0 6px 6px 0;
	font-size: 13px;
	line-height: 1.55;
}

.ksg-embed-help h4 {
	margin: 0 0 10px;
	font-size: 14px;
}

.ksg-embed-help p { margin: 0 0 10px; }

.ksg-embed-help textarea {
	width: 100%;
	margin-bottom: 12px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	background: #fff;
}

.ksg-embed-help code {
	padding: 1px 5px;
	background: #fff;
	border-radius: 3px;
	font-size: 12px;
}

/* Noteringen om adressen är en försäkran, inte en varning – därför
 * dämpad och utan röd markering. */
.ksg-embed-note {
	margin-top: 12px !important;
	padding-top: 10px;
	border-top: 1px solid rgba(18, 24, 31, 0.12);
	color: #646970;
	font-size: 12px;
}

/* FORMULÄRET I SEKTIONER.
 *
 * 18 fält på rad flöt ihop och det gick inte att se vad som hörde
 * ihop. Sektionerna följer arbetsordningen: obligatoriskt först,
 * valfritt utseende sist och hopfällt. */
.ksg-group {
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 8px;
	background: #fff;
}

.ksg-group legend {
	width: 100%;
	padding: 0;
	margin: 0;
}

.ksg-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ksg-group-arrow::before {
	content: "▾";
	color: #646970;
}

.ksg-group.is-folded .ksg-group-arrow::before {
	content: "▸";
}

.ksg-group-hint {
	margin: -4px 0 0;
	padding: 0 16px 12px;
	font-size: 13px;
	color: #646970;
}

.ksg-form .ksg-group-body {
	padding: 0 16px 16px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px 18px;
}

.ksg-group.is-folded .ksg-group-body,
.ksg-group.is-folded .ksg-group-hint {
	display: none;
}

/* Ett fält per rad i stället för att flyta bredvid varandra – etikett
 * över fältet gör långa etiketter läsbara. */
/* Högre specificitet än de äldre reglerna längst upp i filen, som
 * annars kan vinna beroende på hur temat laddar stilarna. */
.ksg-form .ksg-group .ksg-field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
}

.ksg-form .ksg-group .ksg-label {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.ksg-form .ksg-group .ksg-field input[type="text"],
.ksg-form .ksg-group .ksg-field input[type="email"],
.ksg-form .ksg-group .ksg-field input[type="number"],
.ksg-form .ksg-group .ksg-field select,
.ksg-form .ksg-group .ksg-field textarea {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font: inherit;
	box-sizing: border-box;
}

.ksg-field input[type="color"] {
	width: 56px;
	height: 34px;
	padding: 2px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

/* Textrutor och adressfält får hela bredden – de innehåller längre
 * text än vad en halv kolumn rymmer. */
.ksg-field--andamal,
.ksg-field--kontakt_adress,
.ksg-field--brand_intro,
.ksg-field--brand_footer,
.ksg-field--tredje_part,
.ksg-field--logo_url {
	grid-column: 1 / -1;
}

.ksg-logo-row {
	display: flex;
	gap: 8px;
}

.ksg-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.ksg-btn--primary {
	background: #1544c4;
	color: #fff;
	border-color: #1544c4;
}

/* STARTVY: två val i stället för ett formulär med 18 fält. De flesta
 * besök gäller ett objekt som redan finns. */
.ksg-start-hint {
	margin: -6px 0 18px;
	color: #646970;
}

.ksg-start-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	max-width: 720px;
}

.ksg-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 20px;
	border: 1px solid rgba(18, 24, 31, 0.14);
	border-radius: 10px;
	background: #fff;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.12s, box-shadow 0.12s;
}

.ksg-card:hover {
	border-color: #1544c4;
	box-shadow: 0 2px 10px rgba(21, 68, 196, 0.12);
}

.ksg-card-icon { font-size: 26px; line-height: 1; }
.ksg-card-title { font-size: 16px; font-weight: 700; }
.ksg-card-text { font-size: 13px; color: #646970; line-height: 1.45; }

/* FORMATKNAPPAR: ett tryck ger skylten i den storleken. */
.ksg-formats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}

.ksg-formats-label {
	font-size: 12px;
	color: #646970;
	margin-right: 2px;
}

.ksg-fmt {
	padding: 4px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 14px;
	background: #fff;
	font-size: 12px;
	text-decoration: none;
	color: #12181F;
	white-space: nowrap;
}

.ksg-fmt:hover {
	border-color: #1544c4;
	color: #1544c4;
}

/* Objekten som kort i stället för en rad knappar på rad. */
/* Objektet som ett kort med innehållet staplat: namn, formatknappar,
 * åtgärder. Den äldre regeln längst upp gör .ksg-item till en flexrad,
 * vilket lade namnet bredvid knapparna. */
.ksg-list .ksg-item {
	display: block;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 8px;
	background: #fff;
}

.ksg-list .ksg-item > strong {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
}

/* Åtgärdsknapparna på egen rad under formaten. */
.ksg-list .ksg-item > .ksg-btn,
.ksg-list .ksg-item > a.ksg-btn {
	margin: 6px 4px 0 0;
}

/* LICENSER. Antal lediga syns direkt på startsidan – den som ska
 * aktivera ett objekt behöver veta om det går innan de försöker. */
.ksg-license-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 8px;
	font-size: 14px;
}

.ksg-license-bar strong { font-size: 20px; }
.ksg-license-sub { color: #646970; font-size: 13px; }
.ksg-license-bar .ksg-btn { margin-left: auto; }

.ksg-status {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	font-size: 13px;
}

.ksg-status-text { color: #646970; }

.ksg-badge {
	padding: 2px 9px;
	border-radius: 11px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ksg-badge--ok   { background: #eaf7ed; color: #1a7f37; }
.ksg-badge--warn { background: #fdf6e3; color: #8a5a00; }
.ksg-badge--exp  { background: #fcf0f1; color: #b3261e; }
.ksg-badge--off  { background: #f0f0f1; color: #646970; }

/* Automatisk förnyelse per objekt – avstängd som standard. */
.ksg-autorenew {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	font-size: 13px;
}

.ksg-autorenew label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.ksg-autorenew-hint {
	color: #646970;
	font-size: 12px;
}

/* Besked när beställningssidan saknas – bättre än en länk som leder
 * till startsidan utan förklaring. */
.ksg-setup-note {
	font-size: 12px;
	color: #646970;
	line-height: 1.4;
}

.ksg-setup-note code {
	padding: 1px 5px;
	background: #f0f0f1;
	border-radius: 3px;
	font-size: 12px;
}

/* FÖRFRÅGNINGAR i kundens vy – de hamnade tidigare bara i wp-admin. */
.ksg-requests {
	margin: 10px 0;
	padding: 10px 12px;
	background: #fafbfc;
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 6px;
	font-size: 13px;
}

.ksg-requests summary {
	cursor: pointer;
	font-weight: 600;
}

.ksg-req-badge {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #b3261e;
	color: #fff;
	font-size: 11px;
}

.ksg-req-count {
	margin-left: 6px;
	color: #646970;
	font-weight: 400;
}

.ksg-req {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(18, 24, 31, 0.1);
}

.ksg-req.is-answered { opacity: 0.6; }

.ksg-req-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 4px;
}

.ksg-req-date { color: #646970; font-size: 12px; }

/* Svarsfristen är en månad enligt artikel 12.3 – den ska synas. */
.ksg-req-due {
	padding: 1px 7px;
	border-radius: 9px;
	background: #fdf6e3;
	color: #8a5a00;
	font-size: 11px;
}

.ksg-req-due.is-urgent { background: #fcf0f1; color: #b3261e; }

.ksg-req-body {
	margin: 0 0 6px;
	white-space: pre-line;
	color: #3c434a;
}

.ksg-req-done-note { color: #1a7f37; font-size: 12px; }

/* Varning för ett för allmänt hållet ändamål. */
.ksg-andamal-warn {
	display: block;
	margin-top: 4px;
	padding: 6px 9px;
	background: #fdf6e3;
	border-left: 3px solid #8a5a00;
	font-size: 12px;
	color: #8a5a00;
	line-height: 1.4;
}

/* KOPPLING TILL REGISTRET. Visas även utan prenumeration, med
 * förklaring – kunden ska förstå att det finns något att hämta. */
.ksg-register-link {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #f2f7ff;
	border: 1px solid rgba(21, 68, 196, 0.2);
	border-radius: 8px;
	font-size: 13px;
}

.ksg-register-link.is-locked {
	background: #fafbfc;
	border-color: rgba(18, 24, 31, 0.12);
}

.ksg-register-link select {
	display: block;
	width: 100%;
	max-width: 460px;
	margin-top: 4px;
	padding: 7px 9px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font: inherit;
}

.ksg-export-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

/* Objekt som lagts upp av en kollega – med delade objekt behöver man
 * se vem man ska fråga. */
.ksg-owner {
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #f0f0f1;
	color: #646970;
	font-size: 11px;
	font-weight: 400;
}

/* HANDBOKEN. Samma uppbyggnad som övriga moduler i sviten. */
.ksg-help-row { margin: 0 0 16px; }

.ksg-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(18, 24, 31, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 9999;
}

.ksg-modal-overlay[hidden] { display: none !important; }

.ksg-modal {
	background: #fff;
	border-radius: 8px;
	max-width: 860px;
	width: 100%;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ksg-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid rgba(18, 24, 31, 0.12);
}

.ksg-modal-header h2 { margin: 0; font-size: 17px; }

.ksg-modal-close {
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #646970;
	cursor: pointer;
}

/* Innehållet rullar, inte hela sidan – navigeringen ska stanna kvar. */
.ksg-help-body {
	display: flex;
	gap: 26px;
	overflow: hidden;
	padding: 20px 22px 24px;
}

.ksg-help-nav {
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	overflow-y: auto;
}

.ksg-help-nav a {
	color: #1544c4;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
}

.ksg-help-nav a:hover { text-decoration: underline; }

.ksg-help-chapters {
	flex: 1 1 auto;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.6;
}

.ksg-help-chapters section { margin-bottom: 30px; }
.ksg-help-chapters h3 { margin: 0 0 10px; font-size: 16px; }
.ksg-help-chapters ul { padding-left: 20px; }
.ksg-help-chapters li { margin-bottom: 5px; }

/* Det som inte är uppenbart och annars upptäcks för sent – ofta det
 * rättsliga kravet bakom en inställning. */
.ksg-help-tip {
	padding: 10px 14px;
	background: #f2f7ff;
	border-left: 3px solid #1544c4;
	border-radius: 0 4px 4px 0;
	font-size: 13px;
}

.ksg-help-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 12px 0;
	border: 1px solid rgba(18, 24, 31, 0.14);
	border-radius: 5px;
}