/*
 * Den flytande kontaktknappen nere till höger.
 *
 * Den delar hörn med korgknappen, som ligger ovanför när den syns.
 * Korgen flyttas upp av --ca-fraga-hojd i komponenter.css.
 */

/* Hojden korgknappen ska flytta sig med. Traffytan plus luften under. */
:root { --ca-fraga-hojd: calc(var(--ca-traffyta) + var(--ca-rum-3)); }

.ca-fraga {
	position: fixed;
	z-index: 9991;
	inset-inline-end: max(1rem, env(safe-area-inset-right));
	inset-block-end: max(1rem, env(safe-area-inset-bottom));
	/* Knappen lyfts ovanfor samtyckesrutan med transform, inte genom att
	   flytta ankaret: en andrad inset raknas som ett layouthopp (CLS 0,036
	   i matningen 2026-09-30), en transform gor det inte. Samma plats. */
	transform: translateY(calc(-1 * var(--ca-samtycke-hojd, 0px)));
}

/* Hogre specificitet an temats knappregel, som annars gor den vinrod och
   darmed omojlig att skilja fran korgknappen i samma horn. Gron #1E6B40
   mot vit text mater 6,5:1. */
.ca-fraga .ca-fraga__knapp {
	display: inline-flex;
	align-items: center;
	gap: var(--ca-rum-2);
	min-height: var(--ca-traffyta);
	padding: 0 var(--ca-rum-5);
	border: 0;
	border-radius: 999px;
	background: var(--ca-ok, #1E6B40);
	color: var(--ca-white);
	font: 600 var(--ca-text-bas) var(--ca-font);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(35, 38, 45, .22);
}

.ca-fraga .ca-fraga__knapp:focus-visible {
	outline: 3px solid var(--ca-brand);
	outline-offset: 2px;
}

/* Pratbubblan, ritad i CSS så att sidan slipper ännu en fil. */
.ca-fraga__ikon {
	position: relative;
	width: 1.1em;
	height: .95em;
	border-radius: .35em;
	background: currentColor;
}

.ca-fraga__ikon::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: .18em;
	border-inline-start: .3em solid currentColor;
	border-block-end: .3em solid transparent;
}

.ca-fraga__panel {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: calc(var(--ca-traffyta) + var(--ca-rum-3));
	inline-size: min(23rem, calc(100vw - 2rem));
	padding: var(--ca-rum-5);
	border: 1px solid #735E6A;
	border-radius: var(--ca-radie);
	background: var(--ca-white);
	box-shadow: 0 12px 40px rgba(35, 38, 45, .24);
}

.ca-fraga__panel[hidden] { display: none; }

.ca-fraga__huvud {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ca-rum-3);
}

.ca-fraga__rubrik {
	margin: 0;
	font-size: var(--ca-text-lg);
	color: var(--ca-ink);
}

.ca-fraga__stang {
	min-width: var(--ca-traffyta);
	min-height: var(--ca-traffyta);
	margin: calc(var(--ca-rum-3) * -1) calc(var(--ca-rum-3) * -1) 0 0;
	border: 0;
	background: none;
	color: var(--ca-ink);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.ca-fraga__stang:focus-visible { outline: 3px solid var(--ca-brand); }

.ca-fraga__lista {
	margin-block: var(--ca-rum-4) 0;
	padding: 0;
	list-style: none;
}

.ca-fraga__rad {
	display: flex;
	align-items: center;
	gap: var(--ca-rum-3);
	padding-block: var(--ca-rum-2);
	border-block-start: 1px solid var(--ca-linje, #E6DDE2);
}

.ca-fraga__etikett {
	min-inline-size: 4.5rem;
	font-weight: 600;
	color: var(--ca-ink);
}

.ca-fraga__varde {
	flex: 1;
	/* Inte overflow-wrap: anywhere. Den delade celebrity.assistant mitt i
	   ordet, och ett id som star pa tva rader gar inte att skriva av. */
	overflow-wrap: break-word;
	color: var(--ca-brand-deep);
}

.ca-fraga__varde--text { color: var(--ca-ink); }

.ca-fraga__kopiera {
	min-height: var(--ca-traffyta);
	padding: 0 var(--ca-rum-3);
	border: 1px solid #735E6A;
	border-radius: var(--ca-radie);
	background: var(--ca-white);
	color: var(--ca-ink);
	font: 600 var(--ca-text-sm) var(--ca-font);
	cursor: pointer;
}

.ca-fraga__kopiera:focus-visible { outline: 3px solid var(--ca-brand); }

.ca-fraga__hjalp {
	margin-block: var(--ca-rum-3) 0;
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
}

.ca-fraga__faq {
	display: inline-block;
	margin-block-start: var(--ca-rum-3);
	font-size: var(--ca-text-sm);
}

/* Kassan och ordersidan: knappen står kvar, för det är där en tveksam
   köpare är som mest benägen att vilja fråga någon först. */