/*
 * Utseendet "Ritning" (sviten 3.086) – stil C från designförslagen.
 *
 * Ett lager ovanpå temat kameradok, på body.kd-ritning (sätts av
 * includes/kdsuite-utseende.php). Temat har redan samma typsnitt och
 * färger; här läggs ritningsrutnätet i marinblått, versala rubriker,
 * IBM Plex Mono för etiketter, raka paneler och orange knappar.
 *
 * Ordning: 1 variabler och typsnitt · 2 sidhuvud · 3 temats sidor
 * (startsida, verktygsöversikt, vanliga sidor) · 4 sidfot · 5 formulär
 * och knappar i svitens sidor · 6 hubben · 7 Mitt konto, Beställ,
 * registrering, kontakt · 8 återförsäljare · 9 kundportal · 10 inloggning
 * · 11 telefon.
 */

/* ---------- 1. Variabler och typsnitt ---------- */

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body.kd-ritning {
	--kdr-navy: #1b3a5c;
	--kdr-ink: #14202e;
	--kdr-orange: #f08a5d;      /* på mörk bakgrund, mörk text */
	--kdr-orange-mork: #b9471a; /* på ljus bakgrund, vit text */
	--kdr-bg: #eef1f5;
	--kdr-linje: #c7d0db;
	--kdr-linje-ljus: #dde3ea;
	--kdr-dampad: #566173;
	--kdr-text2: #3e4a5a;
	--kdr-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--kdr-rubrik: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--kdr-rutnat: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background: var(--kdr-bg);
	color: var(--kdr-ink);
}
body.kd-ritning main {
	overflow-x: clip;
}

/* ---------- 2. Sidhuvudet ---------- */

body.kd-ritning .site-header {
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff;
}
body.kd-ritning .site-header .logo,
body.kd-ritning .site-header .logo:hover {
	color: #ffffff;
}
body.kd-ritning .site-header .logo-mark {
	border-color: #ffffff;
}
/* Ljus logotyp: content:url() där webbläsaren klarar det, ritning.js annars. */
body.kd-ritning.kd-ritning-logga .site-header .logo-image,
body.kd-ritning.kd-ritning-logga .site-footer .logo-image {
	content: var(--kdr-logga-mork);
	height: 36px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}
/* Ingen ljus logotyp kunde göras (t.ex. SVG eller JPG): gör den vit. */
body.kd-ritning:not(.kd-ritning-logga) .site-header .logo-image {
	filter: brightness(0) invert(1);
}
/* Temat utan <img>: sviten ritar logotypen som bakgrund i .logo-mark. */
body.kd-ritning.kd-ritning-logga .site-header .logo .logo-mark {
	background-image: var(--kdr-logga-mork) !important;
}
body.kd-ritning nav.primary a {
	color: #ffffff;
	font-family: var(--kdr-rubrik);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body.kd-ritning nav.primary a:hover,
body.kd-ritning nav.primary .current-menu-item > a {
	color: var(--kdr-orange);
}
/* Temats meny är <li> direkt i <nav> (ingen <ul>) – inga punkter. */
body.kd-ritning nav.primary > li,
body.kd-ritning nav.primary li {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.kd-ritning nav.primary > li::marker {
	content: '';
}
/* Temats btn-ghost saknar sidomarginal – med ram behövs den. */
body.kd-ritning .site-header .btn-ghost {
	padding: 10px 16px;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
	background: transparent;
}
body.kd-ritning .site-header .btn-ghost:hover {
	border-color: #ffffff;
}
body.kd-ritning .nav-toggle {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 900px) {
	body.kd-ritning nav.primary.is-open {
		background: var(--kdr-navy);
	}
}

/* Knappar i temat (alla sidor). */
body.kd-ritning .btn {
	border-radius: 4px;
}
body.kd-ritning .btn-primary {
	background: var(--kdr-orange);
	border-color: var(--kdr-orange);
	color: var(--kdr-ink);
	font-weight: 700;
}
body.kd-ritning .btn-primary:hover {
	background: #f4a07b;
	border-color: #f4a07b;
	color: var(--kdr-ink);
}

/* ---------- 3. Temats sidor ---------- */

body.kd-ritning .ref-tag {
	font-family: var(--kdr-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Startsidans toppfält: ritningsrutnätet. */
body.kd-ritning .hero {
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #ffffff;
}
/* Temats .hero-grid nollställer .wrap:s sidomarginal – under 1180 px
 * hamnade texten mot kanten. */
body.kd-ritning .hero-grid {
	padding-left: 32px;
	padding-right: 32px;
}
@media (max-width: 640px) {
	body.kd-ritning .hero-grid {
		padding-left: 20px;
		padding-right: 20px;
	}
}
body.kd-ritning .hero h1 {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.98;
}
body.kd-ritning .hero .lede {
	color: #d3deeb;
}
body.kd-ritning .hero .ref-tag {
	color: #a9bfd8;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
}
body.kd-ritning .hero .btn:not(.btn-primary) {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
	background: transparent;
}
body.kd-ritning .hero-diagram {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: #ffffff;
}
body.kd-ritning .hero-diagram-caption {
	font-family: var(--kdr-mono);
	font-size: 12px;
}
body.kd-ritning .hero-stats strong {
	font-family: var(--kdr-mono);
}

/* Rubriker på sidorna. */
body.kd-ritning .section-head h2,
body.kd-ritning .tool-showcase-copy h2,
body.kd-ritning .cta-band h2,
body.kd-ritning .split h3,
body.kd-ritning .module h3,
body.kd-ritning .compliance h2,
body.kd-ritning article.page > h1,
body.kd-ritning .entry-content h2 {
	font-family: var(--kdr-rubrik);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Målgrupperna och modulerna: raka paneler. */
body.kd-ritning .split > div,
body.kd-ritning .module,
body.kd-ritning .flow-step {
	background: #ffffff;
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
}
body.kd-ritning .module .num,
body.kd-ritning .flow-step .dot {
	font-family: var(--kdr-mono);
}
body.kd-ritning .split li::before,
body.kd-ritning .tool-showcase-features li::before {
	color: var(--kdr-orange-mork);
}
body.kd-ritning .tool-showcase-media img {
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
}
body.kd-ritning .rit-logo-strip {
	border: 1px dashed #9aa6b5;
	background: #ffffff;
}
body.kd-ritning .rit-logo-strip-title {
	font-family: var(--kdr-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
body.kd-ritning .compliance {
	background-color: var(--kdr-ink);
	color: #ffffff;
}
body.kd-ritning .compliance .tags span {
	font-family: var(--kdr-mono);
	border-radius: 2px;
}

/* Sista bandet: orange med mörk knapp. */
body.kd-ritning .cta-band {
	background: var(--kdr-orange);
	color: var(--kdr-ink);
}
body.kd-ritning .cta-band h2,
body.kd-ritning .cta-band p {
	color: var(--kdr-ink);
}
body.kd-ritning .cta-band .btn,
body.kd-ritning .cta-band .btn-primary {
	background: var(--kdr-ink);
	border-color: var(--kdr-ink);
	color: #ffffff;
}

/* Vanliga sidor (kontakt, registrering, Mitt konto …): rubriken på
 * ett ritningsband som går kant i kant. */
body.kd-ritning.page-template-default article.page > h1 {
	position: relative;
	isolation: isolate;
	color: #ffffff;
	font-size: clamp(40px, 6vw, 60px);
	line-height: 1;
	margin: 0 0 40px;
	padding: 44px 0 36px;
}
body.kd-ritning.page-template-default article.page > h1::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
}
/* Temat skriver padding: 64px 0 och h1:ans storlek som inline-stil –
 * därför !important här. */
body.kd-ritning.page-template-default main > .wrap,
body.kd-ritning main > .wrap:has(.kdr-hubb, .kdportal, .kdpartner) {
	padding-top: 0 !important;
}
/* Inline-stilen "padding: 64px 0" tar också bort sidomarginalen.
 * 3.093 (fulltest 2026-10-11): gällde bara hubben/portalen – på vanliga
 * sidor (Kontakta oss, Registrering) låg innehållet kant i kant och
 * rubriken klipptes i vänsterkanten på skärmar under ~1180 px. Nu samma
 * marginal på alla sidor med standardmallen. */
body.kd-ritning.page-template-default main > .wrap,
body.kd-ritning main > .wrap:has(.kdr-hubb, .kdportal, .kdpartner) {
	padding-left: 32px !important;
	padding-right: 32px !important;
	max-width: 1180px !important;
	box-sizing: border-box;
}
@media (max-width: 640px) {
	body.kd-ritning.page-template-default main > .wrap,
	body.kd-ritning main > .wrap:has(.kdr-hubb, .kdportal, .kdpartner) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}
body.kd-ritning.page-template-default article.page > h1 {
	font-size: clamp(40px, 6vw, 60px) !important;
	margin: 0 0 40px !important;
}
/* Hubben och kundportalen har egna band – sidtiteln behövs inte. */
body.kd-ritning article.page:has(.kdr-hubb) > h1,
body.kd-ritning article.page:has(.kdportal) > h1,
body.kd-ritning article.page:has(.kdpartner) > h1 {
	display: none;
}

/* ---------- 4. Sidfoten ---------- */

body.kd-ritning footer.site-footer {
	background: var(--kdr-ink);
	color: #a9b6c6;
	border-top: 0;
}
body.kd-ritning .footer-grid h5 {
	font-family: var(--kdr-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8fa0b5;
}
body.kd-ritning .footer-grid a {
	color: #dbe3ec;
}
body.kd-ritning .footer-grid a:hover {
	color: var(--kdr-orange);
}
body.kd-ritning .footer-bottom {
	font-family: var(--kdr-mono);
	font-size: 12px;
	border-top-color: rgba(255, 255, 255, 0.14);
	color: #8fa0b5;
}

/* ---------- 5. Formulär och knappar i svitens sidor ---------- */

body.kd-ritning :is(.kdpay-register, .kdpay-account, .kdpay-bestall-alla, .kdpay-bestall, .kdhub-contact, .kdpartner, .kdportal, .kdpay-gate) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="number"], input:not([type]), select, textarea) {
	border: 1px solid #9aa6b5;
	border-radius: 4px;
	background: #ffffff;
	color: var(--kdr-ink);
	min-height: 46px;
	padding: 8px 12px;
	font: inherit;
	font-size: 16px;
	box-sizing: border-box;
}
body.kd-ritning :is(.kdpay-register, .kdpay-account, .kdpay-bestall-alla, .kdpay-bestall, .kdhub-contact, .kdpartner, .kdportal) textarea {
	min-height: 120px;
}
body.kd-ritning :is(.kdpay-register, .kdpay-account, .kdpay-bestall-alla, .kdpay-bestall, .kdhub-contact, .kdportal) :is(input, select, textarea):focus-visible {
	outline: 3px solid rgba(240, 138, 93, 0.55);
	outline-offset: 1px;
	border-color: var(--kdr-ink);
}
body.kd-ritning :is(.kdpay-register, .kdhub-contact, .kdpay-bestall, .kdportal-loggaform) label {
	font-family: var(--kdr-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-text2);
}
body.kd-ritning :is(.kdpay-register, .kdhub-contact, .kdpay-bestall, .kdportal-loggaform) :is(.kdpay-checkbox-label, label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kdr-ink);
}
body.kd-ritning :is(.kdpay-register, .kdpay-account, .kdpay-bestall-alla, .kdpay-bestall, .kdhub-contact, .kdpartner, .kdportal, .kdpay-gate) :is(button, .button, input[type="submit"], a.kdpay-button, .kdhub-contact-btn, .kdportal-knapp) {
	border-radius: 4px;
	min-height: 46px;
	padding: 0 20px;
	background: var(--kdr-orange-mork);
	border: 1px solid var(--kdr-orange-mork);
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
}
body.kd-ritning :is(.kdpay-register, .kdpay-account, .kdpay-bestall-alla, .kdpay-bestall, .kdhub-contact, .kdpartner, .kdportal, .kdpay-gate) :is(button, .button, input[type="submit"], .kdportal-knapp):hover {
	background: #9a3a14;
	border-color: #9a3a14;
	color: #ffffff;
}
body.kd-ritning :is(.kdportal-knapp-enkel, .kdpay-account .button-secondary, .kdpartner-intyg-knapp) {
	background: #ffffff !important;
	color: var(--kdr-ink) !important;
	border: 1px solid #9aa6b5 !important;
}
body.kd-ritning :is(.kdpay-notice, .kdportal-notis, .kdpartner-notis) {
	border-radius: 0;
}

/* ---------- 6. Hubben: kontrollpanelen ---------- */

body.kd-ritning .kdr-hubb {
	font-family: var(--body, 'IBM Plex Sans', sans-serif);
}
body.kd-ritning .kdr-mono {
	font-family: var(--kdr-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
}
body.kd-ritning .kdr-band {
	margin: 0 calc(50% - 50vw) 24px;
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #ffffff;
}
body.kd-ritning .kdr-band-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 32px 34px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
body.kd-ritning .kdr-band-topp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	color: #a9bfd8;
}
body.kd-ritning .kdr-band-lankar a {
	color: #ffffff;
	margin-left: 18px;
	text-decoration: none;
	font-size: 14px;
}
body.kd-ritning .kdr-band-lankar a:hover {
	color: var(--kdr-orange);
}
body.kd-ritning .kdr-band-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
body.kd-ritning .kdr-band-rubrik {
	margin: 0;
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: clamp(38px, 6vw, 48px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
}
body.kd-ritning .kdr-abonnemang {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.kd-ritning .kdr-abo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
}
body.kd-ritning .kdr-abo-text {
	color: #a9bfd8;
}
body.kd-ritning .kdr-prick {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6fd3a5;
}
body.kd-ritning .kdr-abo-prov .kdr-prick {
	background: #f5c46b;
}
body.kd-ritning .kdr-abo-av .kdr-prick {
	background: #8495aa;
}
/* 3.194: kommande tjänst i bandet. */
body.kd-ritning .kdr-abo-snart .kdr-prick {
	background: #9bb7e0;
}

body.kd-ritning .kdr-hubb #kdhub-app,
body.kd-ritning #kdhub-app:has(.kdr-paneler) {
	max-width: none;
}
body.kd-ritning .kdr-paneler {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	align-items: start;
	padding: 0 0 8px;
}
body.kd-ritning .kdr-paneler[hidden] {
	display: none;
}
/* Panelerna är <section> – temat ger alla section 84 px luft och en
 * kantlinje mellan dem. */
body.kd-ritning section.kdr-panel,
body.kd-ritning section.kdr-konto {
	padding: 0;
	border-top: 1px solid #d6dde6;
}
body.kd-ritning section.kdr-konto {
	padding: 12px;
}
body.kd-ritning .kdr-hubb .kdr-band {
	margin-top: 0;
}
body.kd-ritning .kdr-panel {
	background: #ffffff;
	border: 1px solid #d6dde6;
	box-shadow: 0 2px 6px rgba(20, 32, 46, 0.06);
}
body.kd-ritning .kdr-panel-huvud {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid #e3e8ee;
}
body.kd-ritning .kdr-panel-ikon {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: #ffffff;
	background: #23517f;
}
body.kd-ritning .kdr-omr-larm .kdr-panel-ikon { background: #0f6b63; }
body.kd-ritning .kdr-omr-brand .kdr-panel-ikon { background: #a8401a; }
body.kd-ritning .kdr-omr-natverk .kdr-panel-ikon { background: #4b4fa8; }
body.kd-ritning .kdr-omr-nis2 .kdr-panel-ikon { background: #7b2d5f; } /* 3.191 */
body.kd-ritning .kdr-panel-rubrik {
	margin: 0;
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kdr-ink);
}
body.kd-ritning .kdr-panel-antal {
	margin-left: auto;
	color: var(--kdr-dampad);
	font-size: 12px;
}
body.kd-ritning .kdr-panel-lista {
	display: flex;
	flex-direction: column;
	padding: 6px;
}
/* Raderna – samma knapp som rutnätets .kdhub-icon-btn, ny form. */
body.kd-ritning .kdhub-icon-btn.kdr-rad {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 10px;
	margin: 0;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	color: var(--kdr-ink);
	font: inherit;
	cursor: pointer;
	transform: none;
}
body.kd-ritning .kdhub-icon-btn.kdr-rad:hover,
body.kd-ritning .kdhub-icon-btn.kdr-rad:focus-visible {
	background: #f1f4f8;
	transform: none;
	box-shadow: none;
}
body.kd-ritning .kdhub-icon-btn.kdr-rad:focus-visible {
	outline: 3px solid rgba(240, 138, 93, 0.6);
	outline-offset: 0;
}
body.kd-ritning .kdr-rad .kdr-ikon {
	flex: none;
	color: #23517f;
}
body.kd-ritning .kdr-omr-larm .kdr-rad .kdr-ikon { color: #0f6b63; }
body.kd-ritning .kdr-omr-brand .kdr-rad .kdr-ikon { color: #a8401a; }
body.kd-ritning .kdr-omr-natverk .kdr-rad .kdr-ikon { color: #4b4fa8; }
body.kd-ritning .kdr-omr-nis2 .kdr-rad .kdr-ikon { color: #7b2d5f; } /* 3.191 */
body.kd-ritning .kdr-ikon-emoji {
	font-size: 20px;
	line-height: 1;
}
body.kd-ritning .kdr-rad-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
body.kd-ritning .kdr-rad-namn {
	overflow-wrap: anywhere;
	font-weight: 600;
	font-size: 15px;
}
body.kd-ritning .kdr-rad-beskr {
	font-size: 13px;
	color: var(--kdr-dampad);
}
body.kd-ritning .kdr-pil {
	flex: none;
	color: #9aa6b5;
}
body.kd-ritning .kdr-bestall {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background: var(--kdr-orange-mork);
	border-radius: 4px;
	padding: 4px 9px;
}
/* 3.194: "Kommer snart" – lugnare märke än Beställ. */
body.kd-ritning .kdr-bestall.kdr-snart {
	color: #1f3b63;
	background: #dbe7f6;
}
/* Låsta verktyg: nedtonade, men läsbara (inte rutnätets grå filter). */
body.kd-ritning .kdhub-icon-btn.kdr-rad.kdhub-icon-btn-locked {
	opacity: 1;
	filter: none;
	color: #7b8594;
}
body.kd-ritning .kdhub-icon-btn.kdr-rad.kdhub-icon-btn-locked .kdr-ikon {
	color: #9aa6b5;
}
body.kd-ritning .kdr-rad .kdhub-icon-lock,
body.kd-ritning .kdr-rad .kdhub-icon-tip {
	display: none;
}
/* Konto och tjänster: en remsa under panelerna. */
body.kd-ritning .kdr-konto {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #d6dde6;
}
body.kd-ritning .kdhub-icon-btn.kdr-rad-kompakt {
	width: auto;
	min-height: 44px;
	padding: 6px 14px;
	border: 1px solid var(--kdr-linje);
	background: #ffffff;
}
body.kd-ritning .kdhub-icon-btn.kdr-rad-kompakt .kdr-ikon {
	width: 18px;
	height: 18px;
}
/* Verktyget öppet: Tillbaka-knappen i samma stil. */
body.kd-ritning .kdhub-back-btn {
	font-family: var(--kdr-rubrik);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 4px;
}

/* ---------- 6b. Hubben som app (3.088) ---------- */

/* Bandet: titelrad + flikar i nederkant. */
body.kd-ritning .kdr-hubb .kdr-band {
	position: relative;
}
body.kd-ritning .kdr-hubb .kdr-band-inner {
	padding-bottom: 0;
}
body.kd-ritning .kdr-band-titel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
body.kd-ritning .kdr-band-spar {
	color: #a9bfd8;
	text-transform: uppercase;
}
body.kd-ritning .kdr-band-spar::after {
	content: ' /';
}
body.kd-ritning .kdr-flikar {
	display: flex;
	gap: 4px;
	margin: 6px 0 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
body.kd-ritning .kdr-flikar::-webkit-scrollbar {
	display: none;
}
body.kd-ritning .kdr-flik {
	flex: none;
	min-height: 46px;
	padding: 0 16px;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	color: #c3cfdd;
	font-family: var(--kdr-rubrik);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
}
body.kd-ritning .kdr-flik:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
}
body.kd-ritning .kdr-flik:focus-visible {
	outline: 3px solid rgba(240, 138, 93, 0.7);
	outline-offset: -3px;
}
body.kd-ritning .kdr-flik[aria-current="page"] {
	color: #ffffff;
	border-bottom-color: var(--kdr-orange);
}
/* Ett verktyg öppet: lägre band, rubriken = verktyget, abonnemangen dolda. */
body.kd-ritning .kdr-band-kompakt .kdr-band-rubrik {
	font-size: clamp(28px, 4vw, 34px);
}
body.kd-ritning .kdr-band-kompakt .kdr-abonnemang {
	display: none;
}
body.kd-ritning .kdr-band-kompakt .kdr-band-inner {
	gap: 10px;
}
/* Laddning: ett streck längst upp i bandet, innehållet nedtonat. */
body.kd-ritning .kdr-laddstreck {
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--kdr-orange);
	opacity: 0;
	transition: opacity 0.2s;
}
body.kd-ritning .kdr-band.kdr-laddar .kdr-laddstreck {
	opacity: 1;
	animation: kdr-ladda 1.2s ease-in-out infinite;
}
@keyframes kdr-ladda {
	0% { left: 0; width: 0; }
	50% { left: 20%; width: 50%; }
	100% { left: 100%; width: 0; }
}
body.kd-ritning #kdhub-app.kdr-laddar .kdhub-panel-content {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s;
}
body.kd-ritning #kdhub-app .kdhub-panel-content {
	transition: opacity 0.15s;
}
body.kd-ritning #kdhub-app .kdhub-loading {
	font-family: var(--kdr-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kdr-dampad);
	padding: 24px 0;
}
@media (prefers-reduced-motion: reduce) {
	body.kd-ritning .kdr-band.kdr-laddar .kdr-laddstreck {
		animation: none;
		left: 0;
		width: 100%;
	}
}
/* Tillbaka-knappen: liten länk, flikarna är huvudvägen. */
body.kd-ritning .kdr-hubb .kdhub-back-btn {
	background: transparent;
	border: 0;
	padding: 4px 0;
	margin: 0 0 12px;
	min-height: 0;
	color: var(--kdr-dampad);
	font-family: var(--kdr-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	box-shadow: none;
	cursor: pointer;
}
body.kd-ritning .kdr-hubb .kdhub-back-btn:hover {
	color: var(--kdr-ink);
}
body.kd-ritning .kdr-hubb .kdhub-panel {
	max-width: none;
}

/* Återförsäljarhubben i hubben: samma bredd, flikarna som underflikar. */
body.kd-ritning .kdpartner-hubbvy .kdpartner-i-hubben {
	margin: 0 0 8px;
	font-family: var(--kdr-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-dampad);
}
body.kd-ritning .kdpartner-hubbvy .kdpartner-flikar {
	margin: 0 0 24px;
	padding: 0;
	background: transparent;
	border-bottom: 1px solid var(--kdr-linje);
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}
body.kd-ritning .kdpartner-hubbvy .kdpartner-flik {
	color: var(--kdr-text2);
	padding: 10px 14px;
	white-space: nowrap;
	text-decoration: none;
}
body.kd-ritning .kdpartner-hubbvy .kdpartner-flik:hover {
	color: var(--kdr-ink);
}
body.kd-ritning .kdpartner-hubbvy .kdpartner-flik-vald {
	color: var(--kdr-ink);
	border-bottom-color: var(--kdr-orange-mork);
}

/* ---------- 7. Mitt konto, Beställ, registrering, kontakt ---------- */

body.kd-ritning :is(.kdpay-account-card, .kdpay-service-card, .kdpay-register-form, .kdhub-contact-form, .kdpay-gate) {
	background: #ffffff;
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
	box-shadow: none;
}
body.kd-ritning :is(.kdpay-account-card, .kdpay-service-card) h2,
body.kd-ritning :is(.kdpay-account-card, .kdpay-service-card) h3,
body.kd-ritning .kdpay-account > h2 {
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
body.kd-ritning .kdpay-account-expiry {
	font-family: var(--kdr-mono);
	font-size: 13px;
}
body.kd-ritning .kdpay-2fa-status {
	border-radius: 3px;
	font-family: var(--kdr-mono);
	font-size: 12px;
	text-transform: uppercase;
}
body.kd-ritning .kdpay-trial-box {
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #ffffff;
	border: 0;
	border-radius: 0;
}
body.kd-ritning .kdpay-trial-box :is(p, .kdpay-trial-info) {
	color: #d3deeb;
}
body.kd-ritning .kdpay-trial-box :is(button, input[type="submit"]) {
	background: var(--kdr-orange);
	border-color: var(--kdr-orange);
	color: var(--kdr-ink);
}
body.kd-ritning .kdpay-duration-choice {
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
}
body.kd-ritning .kdpay-duration-choice:has(input:checked) {
	border-color: var(--kdr-orange-mork);
	box-shadow: inset 3px 0 0 var(--kdr-orange-mork);
}
body.kd-ritning .kdpay-price {
	font-family: var(--kdr-mono);
}

/* ---------- 8. Återförsäljarhubben ---------- */

body.kd-ritning .kdpartner-header {
	margin: 0 calc(50% - 50vw) 0;
	padding: 18px max(24px, calc(50vw - 586px));
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #ffffff;
	border: 0;
	border-radius: 0;
}
body.kd-ritning .kdpartner-header a {
	color: #ffffff;
}
body.kd-ritning .kdpartner-namn {
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	color: #ffffff;
}
body.kd-ritning .kdpartner-flikar {
	margin: 0 calc(50% - 50vw) 24px;
	padding: 0 max(24px, calc(50vw - 586px));
	background: var(--kdr-ink);
	border: 0;
	gap: 0;
}
body.kd-ritning .kdpartner-flik {
	font-family: var(--kdr-rubrik);
	font-weight: 600;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #c3cfdd;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: 12px 16px;
}
body.kd-ritning .kdpartner-flik:hover {
	color: #ffffff;
}
body.kd-ritning .kdpartner-flik-vald {
	color: #ffffff;
	border-bottom-color: var(--kdr-orange);
	background: transparent;
}
body.kd-ritning .kdpartner h2 {
	font-family: var(--kdr-rubrik);
	text-transform: uppercase;
}
body.kd-ritning :is(.kdpartner-tabellskal, .kdpartner-kalender, .kdpartner-intyg, .kdpartner-underlag) {
	background: #ffffff;
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
}
body.kd-ritning .kdpartner-tabell th {
	font-family: var(--kdr-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-dampad);
	background: #f4f6f9;
}
body.kd-ritning .kdpartner-nyckeltal > * {
	background: var(--kdr-ink);
	color: #ffffff;
	border: 0;
	border-radius: 0;
}
body.kd-ritning .kdpartner-nyckeltal strong {
	font-family: var(--kdr-mono);
	color: #ffffff;
}
body.kd-ritning .kdpartner-kalenderadress {
	font-family: var(--kdr-mono);
	font-size: 13px;
}

/* ---------- 9. Kundportalen ---------- */

body.kd-ritning .kdportal-rubrik {
	margin: 0 calc(50% - 50vw) 0;
	padding: 40px max(24px, calc(50vw - 586px)) 8px;
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #ffffff;
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(36px, 6vw, 54px);
	line-height: 1;
}
body.kd-ritning .kdportal-foretag {
	margin: 0 calc(50% - 50vw) 28px;
	padding: 0 max(24px, calc(50vw - 586px)) 30px;
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	color: #a9bfd8;
	font-family: var(--kdr-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
body.kd-ritning :is(.kdportal-kort, .kdportal-block, .kdportal-arende, .kdportal-inloggning) {
	background: #ffffff;
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
	box-shadow: none;
}
body.kd-ritning .kdportal-kort:hover {
	border-color: var(--kdr-ink);
}
body.kd-ritning .kdportal-kort-namn {
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
}
body.kd-ritning .kdportal-kort-siffror strong {
	font-family: var(--kdr-mono);
}
body.kd-ritning .kdportal-flagga {
	border-radius: 3px;
}
body.kd-ritning .kdportal h3 {
	font-family: var(--kdr-rubrik);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* 3.215: avsnitten under rubriken (Levererade installationer, Kontrolljournaler) och korten. */
body.kd-ritning .kdportal-avsnitt {
	margin: 36px 0 4px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--kdr-navy);
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--kdr-ink);
}
body.kd-ritning .kdportal-avsnitt-ingress {
	margin: 0 0 16px;
	color: var(--kdr-dampad);
	font-size: 14px;
}
body.kd-ritning .kdinst-lev-kort {
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
}
body.kd-ritning .kdinst-lev-namn {
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
}
body.kd-ritning .kdinst-lev-kort h4 {
	font-family: var(--kdr-mono);
	font-weight: 500;
	color: var(--kdr-dampad);
}
body.kd-ritning .kdportal-fakta dt {
	font-family: var(--kdr-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--kdr-dampad);
}

/* ---------- 10. Inloggningen och tvåstegssidan ---------- */

body.kdsg-2fa-page.kd-ritning {
	background-color: var(--kdr-navy);
	background-image: var(--kdr-rutnat);
	background-size: 24px 24px;
	font-family: 'IBM Plex Sans', -apple-system, Helvetica, Arial, sans-serif;
}
body.kd-ritning .kdsg-2fa-wrap {
	background: #ffffff;
	border: 1px solid var(--kdr-linje);
	border-radius: 0;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
body.kd-ritning .kdsg-2fa-wrap h1 {
	font-family: var(--kdr-rubrik);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--kdr-ink);
}
body.kd-ritning .kdsg-logo {
	color: var(--kdr-ink);
}
body.kd-ritning .kdsg-2fa-wrap label {
	font-family: var(--kdr-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-text2);
}
body.kd-ritning .kdsg-2fa-wrap :is(.kdsg-login-remember, .kdsg-method-choice-option) label,
body.kd-ritning .kdsg-2fa-wrap label:has(input[type="checkbox"]),
body.kd-ritning .kdsg-2fa-wrap label:has(input[type="radio"]) {
	font-family: inherit;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--kdr-ink);
}
body.kd-ritning .kdsg-2fa-wrap :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input:not([type])) {
	border: 1px solid #9aa6b5;
	border-radius: 4px;
	min-height: 48px;
}
body.kd-ritning .kdsg-2fa-wrap :is(button, input[type="submit"]) {
	background: var(--kdr-orange);
	border: 0;
	border-radius: 4px;
	color: var(--kdr-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	min-height: 50px;
	padding: 0 22px;
	cursor: pointer;
}
body.kd-ritning .kdsg-login-links a {
	color: #23517f;
}

/* ---------- 11. Telefon ---------- */

@media (max-width: 640px) {
	body.kd-ritning .hero h1 {
		font-size: 44px;
	}
	body.kd-ritning .kdr-band-inner {
		padding: 14px 16px 26px;
	}
	body.kd-ritning .kdr-band-lankar a {
		margin: 0 16px 0 0;
	}
	body.kd-ritning .kdr-paneler {
		grid-template-columns: 1fr;
	}
	/* 3.093 (fulltest 2026-10-11): flikraden gick utanför skärmen på
	 * telefon och sista fliken nåddes bara genom osynlig sidledsscroll.
	 * Nu radbryter flikarna i stället. */
	body.kd-ritning .kdr-flikar {
		flex-wrap: wrap;
		overflow-x: visible;
	}
	body.kd-ritning .kdr-flik {
		padding: 0 12px;
		font-size: 16px;
		min-height: 44px; /* 3.113: tryckyta minst 44 px (förut 40) */
	}
	body.kd-ritning .kdr-band-kompakt .kdr-band-topp {
		display: none;
	}
	body.kd-ritning .kdpartner-flikar {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* 3.090: låsta företagsuppgifter i beställningen. */
body.kd-ritning .kdpay-foretag-last {
	border: 1px solid var(--kdr-linje);
	background: #f4f6f9;
	padding: 10px 14px;
	margin: 0 0 14px;
}
body.kd-ritning .kdpay-foretag-rad {
	margin: 4px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}
body.kd-ritning .kdpay-foretag-etikett {
	min-width: 170px;
	font-family: var(--kdr-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-text2);
}
body.kd-ritning .kdpay-foretag-info {
	font-size: 13px;
	color: var(--kdr-dampad);
	margin: 8px 0 0;
}

/* 3.091: kampanjkod. */
body.kd-ritning .kdpay-kampanj {
	border: 1px dashed #9aa6b5;
	background: #ffffff;
	border-radius: 0;
}
body.kd-ritning .kdpay-kampanj-form label {
	font-family: var(--kdr-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kdr-text2);
}
body.kd-ritning .kdpay-kampanj-rad input[type="text"] {
	font-family: var(--kdr-mono);
}