/* ---------------------------------------------------------
   TIMECUT I VÅR PROFIL

   HUR DERAS STILAR FAKTISKT LEVERERAS (uppmätt 2026-08-13):

   1. En stilmall på 213 KB från client.bo.timecutcloud.com.
      Helt scopad, 2 019 av 2 217 selektorer börjar med
      .bo-shopping-cart-container. Den läcker alltså inte ut
      på vår layout.

   2. SEXTON style-taggar som deras app injicerar vid körning.
      Det är där kundfärgerna sitter, till exempel
      body.with-bo-client .bottom-wrapper-for-summary button
      med #218dcc. De ligger sist i dokumentet och vinner
      därför över allt som laddats tidigare vid samma
      specificitet.

   DÄRFÖR ÄR SELEKTORERNA HÄR SÅ LÅNGA. Det är inte slarv.
   Deras rubrikregel är
   .bo-shopping-cart-container .bo-sc-container .bo-content .bo-h1
   alltså fyra klasser. Ett kortare uttryck från oss förlorar.
   Vi lägger på .enil-timecut och body.with-bo-client för att
   ta oss förbi, i stället för att strö !important överallt.

   💭 BÄTTRE LÖSNING PÅ SIKT: deras container bär en klass
   side-code-id-0, och stilmallen innehåller färdiga teman för
   side-code-id-1, -2, -4 och -7 med helt andra färger. De har
   alltså ett kundtemasystem på servern. Be Timecut lägga upp
   E. Nilssons färger där, så kan det mesta nedan tas bort.
   Fråga till leverantören, se docs/KUNDFRAGOR.md.

   ⚠️ Vi stylar mot leverantörens klassnamn. Byter de markup
   kan detta brytas. Kontrollpunkt före varje leverans.
   --------------------------------------------------------- */

/* ---- Vår egen yta runt tjänsten ---- */
.enil-tjanst {
	max-width: var(--enil-bredd);
	margin: var(--enil-rum-12) auto;
}

/* Rutan innan samtycke. Ska se ut som ett vanligt kort hos oss,
   inte som en varning. Vi ber om något, vi hotar inte. */
.enil-tjanst__sparr {
	max-width: var(--enil-lasbredd);
	margin-inline: auto;
	padding: var(--enil-rum-8) var(--enil-rum-6);
	background: var(--enil-varm);
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie-stor);
	text-align: center;
}

.enil-tjanst__rubrik {
	margin: 0 0 var(--enil-rum-3);
	font-size: var(--enil-text-lg);
	font-weight: 600;
	color: var(--enil-bla);
}

.enil-tjanst__text {
	margin: 0 0 var(--enil-rum-6);
	color: var(--enil-text);
	font-size: var(--enil-text-sm);
	line-height: 1.55;
}

.enil-tjanst__knappar {
	display: flex;
	gap: var(--enil-rum-3);
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

/* ---- Mötesbokningen, version 2 ----
   Den exponerar egna CSS-variabler. Att sätta dem är bättre än
   att överrida enskilda regler, eftersom det är leverantörens
   eget tema-API och därför överlever deras uppdateringar.
   Kunden hade själv satt #11376f på gamla sajten. */
.enil-timecut .bo-meeting-root-vars * {
	--bo-meeting--color-primary: var(--enil-bla) !important;
}

.enil-timecut #bo-meeting-root {
	margin-inline: auto;
}

/* =========================================================
   PLANERINGSFLÖDET
   ========================================================= */

/* ---- Typsnitt ----
   De sätter Palatino Linotype på .bo-sc-container och Helvetica
   Neue med !important på flera ställen. Därför krävs !important
   här. Source Sans 3 är redan självhostad och förladdad, så
   ingenting nytt hämtas. */
.enil-timecut .bo-shopping-cart-container,
.enil-timecut .bo-shopping-cart-container * {
	font-family: var(--enil-font) !important;
}

/* ---- Rubriker ----
   Deras: .bo-shopping-cart-container .bo-sc-container .bo-content .bo-h1
   Vår har .enil-timecut framför och vinner därmed. */
.enil-timecut .bo-shopping-cart-container .bo-sc-container .bo-content .bo-h1,
.enil-timecut .bo-shopping-cart-container .bo-sc-container .bo-content .bo-h2,
.enil-timecut .bo-shopping-cart-container .bo-sc-container .bo-content h1,
.enil-timecut .bo-shopping-cart-container .bo-sc-container .bo-content h2,
.enil-timecut .bo-shopping-cart-container .bo-sc-container .bo-content h3 {
	color: var(--enil-bla);
	font-weight: 600;
	line-height: var(--enil-radhojd-rubrik);
	text-transform: none;
}

/* ---- Knappar ----
   Den viktigaste regeln. "Nästa steg" är en naken <button> utan
   klass, och färgas av deras injicerade
   body.with-bo-client .bottom-wrapper-for-summary button
   som är (0,3,1). Vårt uttryck nedan är (0,4,2) och vinner utan
   !important.

   Vi träffar button brett i stället för att räkna upp klasser.
   De har btn-submit, btn-share och flera helt klasslösa knappar,
   och en uppräkning hade missat nästa som tillkommer. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container button,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-submit,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-share,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container .button.active {
	background: var(--enil-bla);
	background-color: var(--enil-bla);
	border-color: var(--enil-bla);
	color: var(--enil-text-invers);
	border-radius: var(--enil-radie);
	font-weight: 600;
}

body.with-bo-client .enil-timecut .bo-shopping-cart-container button:hover,
body.with-bo-client .enil-timecut .bo-shopping-cart-container button:focus,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-submit:hover,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-share:hover {
	background: var(--enil-bla-mork);
	background-color: var(--enil-bla-mork);
	border-color: var(--enil-bla-mork);
	color: var(--enil-text-invers);
}

/* Sekundärknapparna i flödet är vita med blå ram hos dem. Samma
   idé som vår enil-knapp--sekundar, bara fel blått. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container .button {
	border-color: var(--enil-bla);
	color: var(--enil-bla);
	border-radius: var(--enil-radie);
}

body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container .button:hover {
	background-color: var(--enil-bla);
	color: var(--enil-text-invers);
}

/* Små knappar i karuseller ska inte färgas som handlingsknappar. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .slick-dots li button {
	background: none;
	background-color: transparent;
}

/* ---- Länkar och accenter ---- */
body.with-bo-client .enil-timecut .bo-shopping-cart-container a,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container a {
	color: var(--enil-bla);
}

/* ---- Stegindikator och valda kort ---- */
.enil-timecut .bo-shopping-cart-container .bo-step-label-wrapper.active,
.enil-timecut .bo-shopping-cart-container .bo-step-label-wrapper.bo-selected {
	color: var(--enil-bla);
	border-color: var(--enil-bla);
}

.enil-timecut .bo-shopping-cart-container .bo-package-item.bo-selected .bo-package-item-wrapper,
.enil-timecut .bo-shopping-cart-container .bo-package-item-wrapper.bo-selected {
	border-color: var(--enil-bla);
	background: var(--enil-bla-ljus);
}

.enil-timecut .bo-shopping-cart-container .bo-package-item-wrapper,
.enil-timecut .bo-shopping-cart-container .panel {
	border-color: var(--enil-kant);
	border-radius: var(--enil-radie);
}

/* ---- Priset ----
   Sidans viktigaste siffra. Ska läsas som information, inte som
   en prislapp i en webbutik. */
.enil-timecut .bo-shopping-cart-container .bo-product-price,
.enil-timecut .bo-shopping-cart-container bo-product-price {
	color: var(--enil-text);
	font-weight: 600;
}

/* ---- Fokusmarkering ----
   Deras Bootstrap 3 tar bort outline på flera ställen, vilket
   gör flödet omöjligt att följa med tangentbord. Det är ett
   tillgänglighetsfel vi inte kan lämna kvar. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container :focus-visible {
	outline: 3px solid var(--enil-bla);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   SISTA PASSET: ACCENTFÄRGERNA

   Uppmätta i webbläsaren efter att resten satt sig, i stället
   för gissade. Varje regel nedan motsvarar en färg som fanns
   kvar utanför vår palett, med antalet element inom parentes.

   Varför !important rakt igenom här, till skillnad från
   blocken ovan: deras injicerade kundtema använder selektorer
   på upp till sex klasser, till exempel

   body.with-bo-client .bo-shopping-cart-container
     .bo-sc-container .bo-product-grops-list-wrapper
     .panel.panel-default .group-name

   Att tävla i selektorlängd mot ett tema vi inte kontrollerar
   är ett förlorat lopp: nästa version kan lägga till ett led
   till, och då slutar våra regler fungera tyst. !important
   ligger utanför specificitetsordningen och håller därför.
   Det är precis det undantaget !important finns för.
   --------------------------------------------------------- */

/* Sektionsrubrikerna i sammanställningen, #9f9f9f (14 st).
   Byts inte bara för profilens skull: #9f9f9f mot vitt ger
   cirka 2,6:1, alltså under WCAG AA:s 4,5:1 för brödtext.
   Vår dämpade text ger cirka 6,4:1. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .group-name {
	color: var(--enil-text-dampad) !important;
}

/* Valda produkter, olivgrönt #698f00 (12 st).
   "Kremation", "Urngrav", "Sång". Det är läsarens egna val och
   ska bära vår primärfärg, inte en grön signalfärg. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .group-selected-product {
	color: var(--enil-bla) !important;
	font-weight: 600;
}

/* Brödtext i flödet, #707070 och #1e293b (6 st). */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .paragraph,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-name-wrapper,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .checkbox-inline {
	color: var(--enil-text) !important;
}

/* Aktivt steg, prisetiketten och beloppet, #218dcc (5 st).
 *
 * :not(button):not(button *) är inte pedanteri. Knappen "Nästa steg"
 * bär också klassen ng-binding och ligger inuti .bo-step-package-select.
 * Utan undantaget färgades dess text blå på blå botten och etiketten
 * försvann helt. Reproducerat 2026-08-13: knappen såg ut som en tom
 * mörkblå platta.
 *
 * Angular sätter ng-binding på allt som har databindning, alltså på
 * både etiketter och kontroller. Klassen säger något om hur elementet
 * uppdateras, ingenting om vad det är. Den ska därför aldrig användas
 * ensam som styrningskrok.
 */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .group-amount,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .fee-amount,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-step-package-select .ng-binding:not(button):not(button *) {
	color: var(--enil-bla) !important;
}

/* Knappens etikett ska alltid vara vit, oavsett vilken regel ovan
   som råkar träffa den. Säkerhetsnät efter felet beskrivet ovan. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container button,
body.with-bo-client .enil-timecut .bo-shopping-cart-container button * {
	color: var(--enil-text-invers) !important;
}

body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container .button:not(.active),
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-sc-container .button:not(.active) * {
	color: var(--enil-bla) !important;
}

/* Inaktiva steg, #8f8f8f. Ska läsas som ej ännu nådda, inte
   som avstängda. Dämpad text räcker och klarar kontrastkravet. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-step-label-wrapper:not(.active):not(.bo-selected),
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-step-label-wrapper:not(.active):not(.bo-selected) .ng-binding {
	color: var(--enil-text-dampad) !important;
}

/* "Dina val" och "Skicka underlaget", bakgrund #218dcc.
   Deras kundtema sätter background med !important, därför
   krävs det även här. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .bo-btn-readonly-summary-block,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-submit {
	background: var(--enil-bla) !important;
	background-color: var(--enil-bla) !important;
	color: var(--enil-text-invers) !important;
	border-radius: var(--enil-radie);
}

/* "Spara", bakgrund #8cc000.
   Den behåller en egen färg med avsikt: att spara sin planering
   och att skicka in den är två olika saker, och om båda ser
   likadana ut klickar folk fel. Vår ockra skiljer den åt utan
   att lämna paletten, och bär vit text med god marginal. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .btn-share {
	background: var(--enil-ockra) !important;
	background-color: var(--enil-ockra) !important;
	color: var(--enil-text-invers) !important;
	border-radius: var(--enil-radie);
}

/* Samtyckeslänken i deras formulär, #428bca. */
body.with-bo-client .enil-timecut .bo-shopping-cart-container .checkbox-inline a,
body.with-bo-client .enil-timecut .bo-shopping-cart-container .checkbox-inline .ng-binding {
	color: var(--enil-bla) !important;
}

/* -----------------------------------------------------------------
   VERSER OCH SYMBOLER

   Egen ram, eftersom bada monterar utanfor bokningens bo-*-trad och
   alltsa inte far nagot av reglerna ovan. Iframen har fast hojd fran
   Timecut (1300 px). Pa mobil vinner width:100% over height, sa ramen
   far scrolla i stallet for att spranga layouten.
   ----------------------------------------------------------------- */

.enil-timecut__ram {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.enil-timecut__ram iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* Deras galleri sitter i en div utan egna marginaler. Utan det har
   klistrar den i sidans textkolumn ovanfor. */
.enil-timecut__ram #pag2_frontend_client {
	min-height: 200px;
}