/* ============================================================
   GD · BOKA r1 — JQ-anpassad bokningsflöde
   Split sidebar (ink + bild) + main panel (cream + hairlines)
   Spectral serif rubriker, Montserrat body, editorial linjer.
   ============================================================ */

.gd-boka {
	background: var(--gd-bg, #F0ECE2);
	color: var(--jq-ink, #15171B);
	padding: 0;
}

.gd-boka * { box-sizing: border-box; }

.gd-boka-fullbleed { margin: 0 !important; padding: 0 !important; }
.gd-boka-fullbleed .gd-boka-app {
	min-height: calc(100svh - var(--gd-nav-h, 80px));
}
.gd-boka-app {
	display: flex;
	min-height: 100svh;
	height: 100svh;
	background: var(--jq-bg, #F0ECE2);
	margin-block: 0;
}
@supports not (height: 100svh) {
	.gd-boka-app { height: calc(100vh - var(--gd-nav-h, 80px)); min-height: calc(100vh - var(--gd-nav-h, 80px)); }
}

/* ── ASIDE ─────────────────────────────────────────────── */
.gd-boka-aside {
	position: relative;
	width: 38%;
	min-width: 360px;
	background: var(--jq-ink, #15171B);
	color: var(--jq-cream, #F4F1EA);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(28px, 4vw, 60px);
}
.gd-boka-aside::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background:
		linear-gradient(180deg, rgba(21,23,27,.35) 0%, rgba(21,23,27,.85) 60%, rgba(21,23,27,.95) 100%);
}
.gd-boka-aside > * { position: relative; z-index: 2; }
.gd-boka-aside-bg {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .55; filter: grayscale(.35) contrast(.95);
}

.gd-boka-top { display: flex; flex-direction: column; gap: 28px; }
.gd-boka-eyebrow-ink {
	font-size: 10px; font-weight: 600;
	letter-spacing: .34em; text-transform: uppercase;
	color: rgba(244,241,234,.65);
}
.gd-boka-back {
	display: none;
	align-items: center; gap: 10px;
	background: transparent; border: 0; padding: 0;
	color: var(--jq-cream, #F4F1EA);
	font-family: inherit;
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
	cursor: pointer;
	opacity: .7; transition: opacity .2s ease, transform .3s var(--jq-ease, cubic-bezier(.16,1,.3,1));
	width: fit-content;
	min-height: 44px;
}
.gd-boka-back:hover, .gd-boka-back:focus-visible { opacity: 1; transform: translateX(-3px); outline: 0; }
.gd-boka-back:focus-visible { outline: 1px solid rgba(244,241,234,.45); outline-offset: 6px; }
.gd-boka-back svg { width: 12px; height: 12px; flex-shrink: 0; }
.gd-boka-back.is-show { display: inline-flex; }

.gd-boka-stepper {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.gd-boka-step {
	display: flex; align-items: baseline; gap: 16px;
	opacity: .32; transition: opacity .5s var(--jq-ease, cubic-bezier(.16,1,.3,1));
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(244,241,234,.08);
}
.gd-boka-step:last-child { border-bottom: 0; }
.gd-boka-step.is-active { opacity: 1; }
.gd-boka-step.is-done   { opacity: .58; }
.gd-boka-step-n {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-style: italic; font-weight: 400;
	font-size: 1.6rem; line-height: 1;
	color: var(--jq-cream, #F4F1EA);
	min-width: 36px;
}
.gd-boka-step-l {
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
}

.gd-boka-brand { display: flex; flex-direction: column; gap: 18px; }
.gd-boka-brand h1,
.gd-boka-brand h2 {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--jq-cream, #F4F1EA);
	margin: 0;
}
.gd-boka-brand h1 em,
.gd-boka-brand h2 em { font-style: italic; font-weight: 400; }
.gd-boka-brand ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.gd-boka-brand li {
	display: flex; align-items: center; gap: 12px;
	font-size: 13px; line-height: 1.4; color: rgba(244,241,234,.78);
}
.gd-boka-brand li svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(244,241,234,.5); }

/* "Så går besöket till" — 3 numrerade steg i aside */
.gd-boka-flow {
	list-style: none; padding: 0; margin: 4px 0 0;
	display: flex; flex-direction: column; gap: 0;
	border-top: 1px solid rgba(244,241,234,.10);
}
.gd-boka-flow li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(244,241,234,.10);
}
.gd-boka-flow-n {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-style: italic; font-weight: 400;
	font-size: 1.1rem; line-height: 1.1;
	color: rgba(244,241,234,.55);
}
.gd-boka-flow li > div { display: flex; flex-direction: column; gap: 3px; }
.gd-boka-flow strong {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-weight: 500; font-size: 1rem; line-height: 1.25;
	color: var(--jq-cream, #F4F1EA);
	letter-spacing: -.005em;
}
.gd-boka-flow span {
	font-size: 12.5px; line-height: 1.45;
	color: rgba(244,241,234,.62);
}

.gd-boka-foot-row {
	display: flex; flex-direction: column; gap: 6px;
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid rgba(244,241,234,.10);
}
.gd-boka-foot {
	font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
	color: rgba(244,241,234,.4);
}
.gd-boka-foot-tel {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-size: 1.1rem; font-weight: 400;
	color: var(--jq-cream, #F4F1EA);
	text-decoration: none;
	transition: color .25s ease;
}
.gd-boka-foot-tel:hover { color: var(--jq-accent, #1E73BE); }

/* ── MAIN PANEL ────────────────────────────────────────── */
.gd-boka-main {
	flex: 1; min-width: 0;
	background: var(--jq-bg, #F0ECE2);
	display: flex; flex-direction: column;
}
.gd-boka-panel {
	flex: 1; overflow-y: auto;
	padding: clamp(32px, 4.4vw, 72px) clamp(24px, 4.6vw, 80px);
	display: flex; flex-direction: column; gap: 28px;
	animation: gd-boka-in .35s var(--jq-ease, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes gd-boka-in {
	from { opacity: 0; transform: translateX(10px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.gd-boka-panel { animation: none; }
}

.gd-boka-head { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.gd-boka-eyebrow {
	font-size: 10px; font-weight: 600;
	letter-spacing: .34em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079);
}
.gd-boka-head h3 {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	line-height: 1.04; letter-spacing: -.012em;
	color: var(--jq-ink, #15171B);
	margin: 0;
}
.gd-boka-head h3 em { font-style: italic; font-weight: 400; }
.gd-boka-head p {
	font-size: 14.5px; line-height: 1.55;
	color: var(--jq-stone, #6C7079);
	margin: 4px 0 0; max-width: 56ch;
}

/* ── TREATMENT LIST ────────────────────────────────────── */
.gd-boka-tlist {
	list-style: none; padding: 0; margin: 0;
	border-top: 1px solid var(--jq-line, #D5D9E2);
	max-width: 720px;
}
.gd-boka-tc {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; width: 100%;
	padding: 22px 4px;
	background: transparent; border: 0;
	border-bottom: 1px solid var(--jq-line, #D5D9E2);
	font-family: inherit; cursor: pointer; text-align: left;
	transition: padding-left .4s var(--jq-ease, cubic-bezier(.16,1,.3,1)), color .25s ease;
	min-height: 44px;
}
.gd-boka-tc:hover, .gd-boka-tc:focus-visible {
	padding-left: 18px; color: var(--jq-accent, #1E73BE);
	outline: 0;
}
.gd-boka-tc:focus-visible { outline: 1px solid var(--jq-accent, #1E73BE); outline-offset: 6px; }
/* boka.r1.js sätter tabindex=-1 + .focus() på h1/h2/h3 vid step-byte (a11y).
   Den programmatiska fokus ska inte trigga browser-default blå outline runt rubriken. */
.gd-boka-panel h1:focus,
.gd-boka-panel h2:focus,
.gd-boka-panel h3:focus,
.gd-boka-brand h1:focus,
.gd-boka-brand h2:focus { outline: none; }
.gd-boka-tn {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-weight: 500;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.2;
	color: inherit;
	margin: 0 0 4px;
}
.gd-boka-tm {
	font-size: 11px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079);
}
.gd-boka-arr {
	flex-shrink: 0; width: 22px; height: 22px;
	color: var(--jq-stone, #6C7079);
	transition: transform .35s var(--jq-ease, cubic-bezier(.16,1,.3,1)), color .25s ease;
}
.gd-boka-tc:hover .gd-boka-arr,
.gd-boka-tc:focus-visible .gd-boka-arr { transform: translateX(8px); color: var(--jq-accent, #1E73BE); }

/* ── SLOT GRID — dag-flikar + tidsrutnät (2026-09-15) ─────────────────────
   Ersätter den gamla vertikala listan (grid-template-columns 130px 1fr auto):
   för mycket scroll för att nå fram till en tid. Samma mönster som Welvos
   bokningswidget: en rad dagar överst, sedan tider för vald dag i ett rutnät. */
.gd-boka-sgrid {
	list-style: none; padding: 0; margin: 0;
	max-width: 720px;
}
.gd-boka-daylbl {
	font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079); margin: 0 0 10px;
}
.gd-boka-daytabs {
	display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: 2px 2px 4px; margin: 0 0 22px;
	scrollbar-width: thin;
}
.gd-boka-daytab {
	flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
	min-width: 62px; padding: 12px 8px;
	background: var(--jq-cream, #F4F1EA);
	border: 1.5px solid var(--jq-line, #D5D9E2);
	border-radius: 14px;
	font-family: inherit; cursor: pointer;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gd-boka-daytab:hover { border-color: var(--jq-ink, #15171B); }
.gd-boka-daytab-wd { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--jq-stone, #6C7079); }
.gd-boka-daytab-d { font-family: var(--gd-serif, 'Spectral', Georgia, serif); font-size: 21px; line-height: 1; color: var(--jq-ink, #15171B); }
.gd-boka-daytab-m { font-size: 11px; color: var(--jq-stone, #6C7079); }
.gd-boka-daytab.is-active {
	background: rgba(30,115,190,.06); border-color: var(--jq-ink, #15171B);
	box-shadow: 0 0 0 1px var(--jq-ink, #15171B);
}
.gd-boka-timegrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px;
	list-style: none; margin: 0; padding: 0;
}
.gd-boka-timebtn {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 13px 8px;
	background: var(--jq-cream, #F4F1EA);
	border: 1.5px solid var(--jq-line, #D5D9E2);
	border-radius: 12px;
	font-family: inherit; cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.gd-boka-timebtn-t { font-family: var(--gd-serif, 'Spectral', Georgia, serif); font-size: 17px; color: var(--jq-ink, #15171B); }
.gd-boka-timebtn-cn { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--jq-stone, #6C7079); }
.gd-boka-timebtn:hover, .gd-boka-timebtn:focus-visible {
	background: var(--jq-ink, #15171B); border-color: var(--jq-ink, #15171B); outline: 0;
}
.gd-boka-timebtn:hover .gd-boka-timebtn-t, .gd-boka-timebtn:focus-visible .gd-boka-timebtn-t { color: var(--jq-cream, #F4F1EA); }
.gd-boka-timebtn:hover .gd-boka-timebtn-cn, .gd-boka-timebtn:focus-visible .gd-boka-timebtn-cn { color: rgba(244,241,234,.68); }

/* ── FORM ──────────────────────────────────────────────── */
.gd-boka-pill {
	display: flex; align-items: flex-start; gap: 12px;
	background: rgba(21,23,27,.04);
	border: 1px solid var(--jq-line, #D5D9E2);
	padding: 16px 20px;
	font-size: 13.5px; line-height: 1.5;
	color: var(--jq-ink, #15171B);
	max-width: 580px;
}
.gd-boka-pill svg { color: var(--jq-accent, #1E73BE); flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; }
.gd-boka-pill strong { font-weight: 600; }

/* "Passar inte tiden?" på formuläret → tillbaka till tidslistan */
.gd-boka-changetime {
	display: inline-flex; align-items: center; gap: 4px;
	margin: 10px 0 2px; padding: 4px 0;
	background: none; border: 0; cursor: pointer; font-family: inherit;
	font-size: 13px; font-weight: 600; color: var(--jq-accent, #1E73BE);
	text-decoration: none;
}
.gd-boka-changetime:hover { text-decoration: underline; }

/* Notis när en deep-linkad quiz-tid hunnit bli tagen */
.gd-boka-note {
	max-width: 580px; margin: 0 0 14px; padding: 12px 16px;
	background: rgba(214,158,46,.10); border: 1px solid rgba(214,158,46,.45); border-radius: 8px;
	font-size: 13.5px; line-height: 1.5; color: var(--jq-ink, #15171B);
}

.gd-boka-form { display: grid; gap: 18px; max-width: 580px; }
.gd-boka-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gd-boka-field { display: flex; flex-direction: column; gap: 8px; }
.gd-boka-field label {
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079); font-weight: 600;
}
.gd-boka-field input,
.gd-boka-field textarea {
	width: 100%; min-height: 44px;
	padding: 10px 0;
	background: transparent;
	border: 0; border-bottom: 1px solid var(--jq-line, #D5D9E2);
	border-radius: 0;
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-size: 1.05rem; font-weight: 400;
	color: var(--jq-ink, #15171B);
	transition: border-color .2s ease;
}
.gd-boka-field input::placeholder,
.gd-boka-field textarea::placeholder { color: var(--jq-stone, #6C7079); opacity: .5; }
.gd-boka-field input:focus,
.gd-boka-field textarea:focus {
	outline: 0;
	border-bottom-color: var(--jq-ink, #15171B);
	border-bottom-width: 2px;
	margin-bottom: -1px;
}
.gd-boka-field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

.gd-boka-check {
	display: flex; align-items: flex-start; gap: 12px;
	cursor: pointer;
	min-height: 44px;
}
.gd-boka-check input[type="checkbox"] {
	width: 18px; height: 18px; margin: 3px 0 0;
	accent-color: var(--jq-ink, #15171B); flex-shrink: 0; cursor: pointer;
}
.gd-boka-check span {
	font-size: 13.5px; line-height: 1.5;
	color: var(--jq-stone, #6C7079);
	padding-top: 1px;
}
.gd-boka-check a {
	color: var(--jq-ink, #15171B); text-decoration: underline; text-underline-offset: 3px;
}

.gd-boka-submit {
	width: 100%; min-height: 56px;
	padding: 18px 32px;
	background: var(--jq-ink, #15171B);
	color: var(--jq-cream, #F4F1EA);
	border: 0; border-radius: 0;
	font-family: inherit;
	font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
	margin-top: 8px;
}
.gd-boka-submit:hover:not(:disabled) { background: var(--jq-deep, #100F0D); transform: translateY(-1px); }
.gd-boka-submit:focus-visible { outline: 2px solid var(--jq-accent, #1E73BE); outline-offset: 4px; }
.gd-boka-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.gd-boka-err {
	background: rgba(220, 38, 38, .06);
	border: 1px solid rgba(220, 38, 38, .25);
	color: #B91C1C;
	padding: 12px 16px;
	font-size: 13.5px; line-height: 1.45;
	max-width: 580px;
}

.gd-boka-fine {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079);
	text-align: center; margin-top: 4px;
	opacity: .7;
}

/* ── SUCCESS ───────────────────────────────────────────── */
.gd-boka-success {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 8px;
	max-width: 640px;
}
.gd-boka-success-ic {
	width: 60px; height: 60px;
	border: 1px solid var(--jq-line, #D5D9E2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
	animation: gd-boka-pop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gd-boka-pop {
	0%   { transform: scale(.4); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.gd-boka-success-ic { animation: none; }
}
.gd-boka-success-ic svg { width: 26px; height: 26px; color: var(--jq-accent, #1E73BE); }
.gd-boka-success h3 {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	line-height: 1.04; letter-spacing: -.012em;
	color: var(--jq-ink, #15171B);
	margin: 0 0 8px;
}
.gd-boka-success h3 em { font-style: italic; }
.gd-boka-success > p {
	font-size: 14.5px; line-height: 1.55;
	color: var(--jq-stone, #6C7079);
	margin: 0 0 28px; max-width: 50ch;
}
.gd-boka-bkc {
	display: flex; flex-direction: column; gap: 0;
	border-top: 1px solid var(--jq-line, #D5D9E2);
	width: 100%; max-width: 520px;
	margin: 0;
}
.gd-boka-br {
	display: grid; grid-template-columns: 140px 1fr; gap: 24px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--jq-line, #D5D9E2);
	align-items: baseline;
	margin: 0;
}
.gd-boka-bl {
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
	color: var(--jq-stone, #6C7079);
	margin: 0;
}
.gd-boka-bv {
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-size: 1.05rem; font-weight: 400;
	color: var(--jq-ink, #15171B);
	margin: 0;
}
.gd-boka-rst {
	margin-top: 32px;
	background: transparent; border: 0; border-bottom: 1px solid var(--jq-ink, #15171B);
	padding: 10px 0;
	font-family: inherit;
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
	color: var(--jq-ink, #15171B); cursor: pointer;
	align-self: flex-start;
	min-height: 44px;
}
.gd-boka-rst:focus-visible { outline: 2px solid var(--jq-accent, #1E73BE); outline-offset: 4px; }

/* ── SKELETON / FALLBACK ───────────────────────────────── */
.gd-boka-sk {
	background: linear-gradient(90deg, rgba(21,23,27,.04) 25%, rgba(21,23,27,.10) 50%, rgba(21,23,27,.04) 75%);
	background-size: 200% 100%;
	animation: gd-boka-shim 1.4s infinite linear;
	height: 76px;
	border-bottom: 1px solid var(--jq-line, #D5D9E2);
	list-style: none;
}
@keyframes gd-boka-shim {
	0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.gd-boka-sk { animation: none; }
}

.gd-boka-empty {
	padding: 36px 4px;
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-size: 1.05rem; line-height: 1.55;
	color: var(--jq-stone, #6C7079);
	list-style: none;
}
.gd-boka-empty strong {
	display: block; margin-bottom: 8px;
	font-family: var(--gd-serif, 'Spectral', Georgia, serif);
	font-size: 1.4rem; font-weight: 500;
	color: var(--jq-ink, #15171B);
}
.gd-boka-empty a { color: var(--jq-ink, #15171B); }

/* ── MOBILE ────────────────────────────────────────────── */
@media (max-width: 860px) {
	.gd-boka-app { flex-direction: column; min-height: auto; height: auto; }
	.gd-boka-aside {
		width: 100%; min-width: 0;
		padding: 22px 18px;
	}
	.gd-boka-aside::before {
		background: linear-gradient(180deg, rgba(21,23,27,.7) 0%, rgba(21,23,27,.92) 100%);
	}
	.gd-boka-top { gap: 14px; }
	.gd-boka-stepper { display: none; }
	.gd-boka-brand ul, .gd-boka-flow, .gd-boka-foot-row { display: none; }
	.gd-boka-brand h2 { font-size: 1.35rem; }
	.gd-boka-foot { display: none; }
	.gd-boka-panel { padding: 28px 20px; gap: 22px; }
	.gd-boka-row2 { grid-template-columns: 1fr; gap: 14px; }
	.gd-boka-timegrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
	.gd-boka-br { grid-template-columns: 110px 1fr; gap: 14px; }
	.gd-boka-tc { padding: 18px 4px; }
}

/* ── Quiz-CTA i tid-steget (konsultation → gratis via quiz) ──── */
.gd-boka-quiz-cta {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0 0 16px; padding: 14px 16px; border-radius: 12px;
	background: color-mix(in srgb, var(--jq-accent, #1E73BE) 7%, #fff);
	border: 1px solid color-mix(in srgb, var(--jq-accent, #1E73BE) 25%, transparent);
	font-size: 14px; line-height: 1.5; color: var(--jq-ink, #15171B);
}
.gd-boka-quiz-ic {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--jq-accent, #1E73BE); color: #fff; font-size: 14px; line-height: 1;
}
.gd-boka-quiz-link {
	display: inline-block; margin-top: 6px; font-weight: 700;
	color: var(--jq-accent, #1E73BE); text-decoration: none;
}
.gd-boka-quiz-link:hover { text-decoration: underline; }

/* Quiz-hint i behandlingslistan (Konsultation → gratis) */
.gd-boka-thint {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 6px; font-size: 12px; font-weight: 600;
	color: var(--jq-accent, #1E73BE);
}
.gd-boka-thint span { font-size: 11px; }

/* Kontaktönskan-utväg i tidsväljaren (2026-09-15): den som inte vill välja en
   exakt tid kan kryssa i att hon vill bli uppringd i stället. Återanvänder
   .gd-boka-field/.gd-boka-check, ingen ny designspråk. */
.gd-boka-kontakt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--jq-line, #D5D9E2); }
.gd-boka-kontakt-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.gd-boka-kontakt-check input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--jq-ink, #15171B); flex-shrink: 0; cursor: pointer; }
.gd-boka-kontakt-check span { font-size: 13.5px; line-height: 1.5; color: var(--jq-stone, #6C7079); }
.gd-boka-kontakt-form { display: grid; gap: 16px; max-width: 460px; margin-top: 18px; }
.gd-boka-kontakt-form[hidden] { display: none; }

/* ── Frivilliga fält bakom en lucka ─────────────────────── */
.gd-boka-mer { border-top: 1px solid var(--jq-line, #D5D9E2); border-bottom: 1px solid var(--jq-line, #D5D9E2); }
.gd-boka-mer summary {
	list-style: none; cursor: pointer; min-height: 44px;
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; color: var(--jq-ink, #15171B);
}
.gd-boka-mer summary::-webkit-details-marker { display: none; }
.gd-boka-mer summary span { font-weight: 400; color: var(--jq-stone, #6C7079); }
.gd-boka-mer summary::after {
	content: ""; margin-left: auto; width: 9px; height: 9px;
	border-right: 1.5px solid var(--jq-stone, #6C7079); border-bottom: 1.5px solid var(--jq-stone, #6C7079);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.gd-boka-mer[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gd-boka-mer-in { display: grid; gap: 12px; padding: 4px 0 18px; }
/* display:grid ovan slog ut webblasarens egen regel som gommer innehallet i en
   stangd <details>. Foljden: de fyra frivilliga falten var synliga hela tiden,
   trots att luckan var ihopfalld, sa komprimeringen fran 10 till 5 falt aldrig
   intraffade. Samma fallgrop som .gd-boka-kontakt-form[hidden]. (2026-09-16.) */
.gd-boka-mer:not([open]) .gd-boka-mer-in { display: none; }
.gd-boka-kontakt-msg { margin: 0; font-size: 13px; color: #B23B3B; }
.gd-boka-kontakt-msg:empty { display: none; }

/* Skäl under personnumret + utväg i formulärsteget (2026-09-16).
   Muntra kräver personnumret, så fältet kan inte göras frivilligt. Det som gick
   att ta bort är osäkerheten kring varför vi frågar, och den låsta känslan av att
   formuläret är enda vägen framåt. */
.gd-boka-hint {
	font-size: 11.5px; line-height: 1.4;
	color: var(--jq-stone, #6C7079);
	margin-top: 3px;
}
.gd-boka-ringmig {
	display: block; width: 100%;
	margin-top: 10px; padding: 9px 4px;
	background: none; border: 0;
	font: 500 13px/1.4 Montserrat, -apple-system, sans-serif;
	color: var(--jq-stone, #6C7079);
	text-decoration: underline; text-underline-offset: 3px;
	cursor: pointer;
}
.gd-boka-ringmig:hover, .gd-boka-ringmig:focus-visible {
	color: var(--jq-ink, #15171B);
}

/* Status på personnummerhjälpen (2026-09-17). Grön bekräftelse när numret går
   igenom, röd förklaring när det inte gör det. Färg ensam räcker inte, texten
   säger alltid vad som är fel. */
.gd-boka-hint.is-ok  { color: #1a7f37; }
.gd-boka-hint.is-fel { color: #b3261e; }

/* "Visa fler tider" (2026-09-17). Oktober hade 126 lediga tider men widgeten
   visade 20, eftersom att hämta alla tar nästan 19 sekunder. Snabbt först,
   resten på begäran. */
.gd-boka-merlista { list-style: none; margin: 10px 0 0; }
.gd-boka-mertider {
	width: 100%; padding: 11px 14px;
	background: none; border: 1px dashed var(--jq-line, #D5D9E2); border-radius: 12px;
	font: 600 13px/1.4 Montserrat, -apple-system, sans-serif;
	color: var(--jq-stone, #6C7079); cursor: pointer;
}
.gd-boka-mertider:hover:not(:disabled) { border-color: var(--jq-ink, #15171B); color: var(--jq-ink, #15171B); }
.gd-boka-mertider:disabled { opacity: .6; cursor: default; }
.gd-boka-laddtext {
	list-style: none; margin: 0 0 10px; padding: 10px 14px;
	background: rgba(139,111,71,.07); border-radius: 10px;
	font: 500 13px/1.45 Montserrat, -apple-system, sans-serif;
	color: var(--jq-stone, #6C7079);
}

/* Bekräftelsens "så här går det till" + kalenderfil (2026-09-17). Bekräftelsen
   visade tid och referens men inte var kliniken ligger eller vad som händer
   sedan, vilket är precis det man undrar direkt efter att ha bokat. */
.gd-boka-nasta {
	margin: 18px 0 0; padding: 16px 18px;
	background: rgba(139,111,71,.06); border-radius: 14px;
	font-family: Montserrat, -apple-system, sans-serif;
}
.gd-boka-nasta h4 {
	margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--jq-stone, #6C7079); font-weight: 700;
}
.gd-boka-nasta ul { margin: 0 0 12px; padding-left: 18px; }
.gd-boka-nasta li { font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; color: var(--jq-ink, #15171B); }
.gd-boka-adress { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--jq-ink, #15171B); }
.gd-boka-adress a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gd-boka-ics {
	display: inline-block; padding: 10px 18px;
	border: 1px solid var(--jq-ink, #15171B); border-radius: 100px;
	font: 700 11px/1.5 Montserrat, -apple-system, sans-serif;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--jq-ink, #15171B); text-decoration: none;
}
.gd-boka-ics:hover { background: var(--jq-ink, #15171B); color: #F4F1EA; }
/* Telefonnumret ska inte brytas mitt itu, då hamnar meningens punkt ensam på
   nästa rad. Och Welvo-bubblan ligger fast nere till höger och kapade sista
   punkten i listan, precis som den gjorde i heron. (2026-09-17.) */
.gd-boka-nasta a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 768px) {
	.gd-boka-nasta li:last-child { padding-right: 76px; }
	.gd-boka-ics { margin-bottom: 4px; }
}