/**
 * Märket på produktbilden och rutan med QR-koden.
 *
 * Märket börjar utfällt med texten synlig och glider ihop till bara symbolen
 * efter några sekunder. Något som bara är en ikon blir inte upptäckt; något som
 * tar plats för alltid blir i vägen.
 */

.dearstickers-ar-knapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #18181b;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	/*
	  Temat gör om all knapptext till versaler och spärrar den, så "Se i AR" blev
	  "S E  I  A R". Texten ska stå precis som den är skriven.
	*/
	text-transform: none;
	letter-spacing: normal;
	/* Färgbytet ska följa textens glidning, inte hoppa fram efteråt. */
	transition: background-color .45s ease, color .45s ease, box-shadow .2s ease,
		gap .45s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	white-space: nowrap;
}

/*
  Låst i varje läge.
  
  Temat formger button-element också vid hover, fokus och tryck: bakgrunden blev
  orange, texten vit, och skuggan byttes mot en stor spridd som fick märket att
  svälla utanför bilden. Webbläsaren la dessutom sin blå fokusring ovanpå. Allt
  det syns först när någon rör knappen, vilket är därför det inte märktes förrän
  kunden tryckte på den.
  
  Här är !important rätt svar: vi tävlar med ett tema vi inte äger om ett enda
  litet gränssnitt.
*/
.dearstickers-ar .dearstickers-ar-knapp,
.dearstickers-ar .dearstickers-ar-knapp:hover,
.dearstickers-ar .dearstickers-ar-knapp:focus,
.dearstickers-ar .dearstickers-ar-knapp:active {
	background: #fff !important;
	color: #18181b !important;
	border: 0 !important;
	transform: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16) !important;
}

/* Lite mer skugga vid pekaren, så knappen svarar utan att byta skepnad. */
.dearstickers-ar .dearstickers-ar-knapp:hover {
	box-shadow: 0 3px 14px rgba(0, 0, 0, .22) !important;
}

/*
  Egen fokusring i stället för webbläsarens blå. Som skugga, inte som outline —
  en skugga påverkar inte layouten och kan därför inte trycka ut märket utanför
  bilden.
*/
.dearstickers-ar .dearstickers-ar-knapp:focus-visible {
	outline: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16), 0 0 0 3px rgba(24, 24, 27, .5) !important;
}

.dearstickers-ar-ikon {
	display: flex;
	flex: 0 0 auto;
}

/*
  Ihopfälld byter hela märket skepnad: knappen blir gul och symbolen ljus.
  
  Telefonen är då en kontur utan fyllning, så gulan lyser igenom den. Strecket
  är något kraftigare än i det utfällda läget — ljust mot gult har svagare
  kontrast än mörkt mot vitt, och en tunn vit linje hade blivit blek.
  
  Reglerna står efter låsningen ovan och har ett klassnamn mer, så de vinner
  också över temats hover- och fokuslägen.
*/
.dearstickers-ar.ihopfalld .dearstickers-ar-knapp,
.dearstickers-ar.ihopfalld .dearstickers-ar-knapp:hover,
.dearstickers-ar.ihopfalld .dearstickers-ar-knapp:focus,
.dearstickers-ar.ihopfalld .dearstickers-ar-knapp:active {
	background: var(--global-palette1, #ffc222) !important;
	color: #fff !important;
}

/*
  Mellanrummet till texten tas bort när texten är borta.
  
  Utan det står gapet kvar som åtta tomma bildpunkter till höger om symbolen,
  och telefonen hamnar utanför mitten i en knapp som inte längre har något att
  vara bredvid.
*/
.dearstickers-ar.ihopfalld .dearstickers-ar-knapp {
	gap: 0;
}

.dearstickers-ar.ihopfalld .dearstickers-ar-lur {
	stroke-width: 1.9;
}

/* Hörnmärkena behåller sin tunnare linje. Med samma tjocklek som ramen blev de
   runda klumpar i stället för hörn — de är korta, och en rund ände på ett kort
   streck äter upp hela strecket. */
.dearstickers-ar.ihopfalld .dearstickers-ar-horn {
	stroke-width: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.dearstickers-ar-knapp { transition: none !important; }
}

/*
  Texten fälls ihop genom bredden och inte genom display, så att övergången går
  att animera. max-width räcker: den som har rörelse avstängd får hoppet i
  stället, vilket är rätt — ingen ska bli sjösjuk av en köpknapp.
*/
.dearstickers-ar-text {
	overflow: hidden;
	max-width: 8em;
	transition: max-width .45s ease, opacity .3s ease;
}

.dearstickers-ar.ihopfalld .dearstickers-ar-text {
	max-width: 0;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dearstickers-ar-text { transition: none; }
}

/* På produktbilden, när skriptet hittat galleriet att lägga sig i. */
.dearstickers-ar.pa-bilden {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 5;
	margin: 0;
}

.dearstickers-ar:not(.pa-bilden) {
	display: block;
	margin: 0 0 14px;
}

/* ── Rutan med QR-koden ── */

.dearstickers-ar-ruta {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(24, 24, 27, .55);
}

.dearstickers-ar-kort {
	position: relative;
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	/* Överkanten har plats för krysset, så rubriken aldrig hamnar under det. */
	padding: 52px 28px 24px;
	border-radius: 18px;
	background: #fff;
	text-align: center;
	/* Låga fönster finns: bärbara i liggande läge, och delade skärmar. Då
	   rullar kortet i stället för att växa ut ur rutan. */
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
}

.dearstickers-ar-kort h2 {
	margin: 0 0 8px;
	font-size: 20px;
}

.dearstickers-ar-kort p {
	margin: 0 0 18px;
	font-size: 14px;
	color: #52525b;
}

.dearstickers-ar-qr svg {
	width: 100%;
	/* Följer fönstrets höjd också, så koden inte trycker ut foten ur kortet. */
	max-width: min(240px, 42vh);
	height: auto;
}

.dearstickers-ar-storlek {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	font-weight: 600;
	color: #27272a !important;
}

.dearstickers-ar-liten {
	margin: 16px 0 0 !important;
	font-size: 12px !important;
	color: #a1a1aa !important;
}

/*
  Krysset måste nollställas hårt.
  
  Temat formger varje button-element med sin egen fyllning och stoppning, så
  krysset blev 95 × 68 px med gul bakgrund och la sig över rubriken. Måtten sätts
  därför uttryckligen, och bakgrunden tvingas bort — det här är den ena plats där
  !important är rätt svar, eftersom vi tävlar med ett tema vi inte äger.
*/
.dearstickers-ar-ruta .dearstickers-ar-stang {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
	color: #71717a !important;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.dearstickers-ar-ruta .dearstickers-ar-stang:hover,
.dearstickers-ar-ruta .dearstickers-ar-stang:focus-visible {
	background: #f4f4f5 !important;
	color: #18181b !important;
}