/* =============================================================
   Påminnelsen om utebliven fraktsedel

   Rutan ritas av Centralen_Fraktsedlar::render_popup() och visas ute i
   butiken för en kund som lagt en spårbar order men inte laddat upp någon
   fraktsedel. Den visas en enda gång per kund – cookien raderas i samma
   svep som rutan öppnas – och kan därför aldrig testas om genom att ladda
   om sidan.

   VARFÖR EN EGEN FIL OCH INTE centralen-ui.css

   Formen nedan är hämtad ur nya designens stilmall: samma hörnradie, samma
   lyftskugga, samma lila rubrikton, samma runda märke som .csd-modal där.
   Men reglerna kan inte bo i den filen, av två skäl som var för sig räcker:

     1. centralen-ui.css köas bara när csd_ny_design_aktiv() är sann. För en
        vanlig kund är den alltså oftast inte utlagd på sidan alls.
     2. Grundreglerna där ligger under kroppsklassen csd-ny-design, som bara
        sätts på de sidor som är portade till nya designen. Påminnelsen kan
        dyka upp på vilken sida som helst i butiken, portad eller inte.

   Byggdes rutan mot den filen skulle den bli helt ostilad på de flesta
   sidor – i värsta fall vit text på vit botten. Den här filen köas därför
   för sig, utan villkor och utan beroenden, så fort påminnelsen är påslagen.

   SJÄLVBÄRANDE FÄRGER

   Varje var() nedan har ett hårdkodat reservvärde efter kommatecknet, och
   värdet är exakt den ton variabeln har på :root i centralen-ui.css. Ligger
   den filen på sidan följer rutan med i temat – även i betalsidornas mörka
   färgteman, som byter ut samma variabler. Ligger den inte där faller varje
   färg tillbaka på sitt reservvärde och rutan ser likadan ut ändå. Ingen
   regel i den här filen förutsätter kroppsklassen csd-ny-design.

   Butikens palett, för den som ändrar här: marinlila #2a17a8, klarlila
   #3400ff, mörk lila text #15142b, ljus lila #957ffe, ljus bakgrund #f4f2fa.

   EGET KLASSNAMN

   Klasserna heter csd-fspop och inte csd-modal med flit. Skulle båda filerna
   ligga på samma sida vore två uppsättningar .csd-modal-regler igång
   samtidigt, och vilken som vann hade avgjorts av köordningen. Med eget namn
   kan de aldrig krocka.
   ============================================================= */

/* Kunden kan ha vilket tema som helst under sig, och GeneratePress och
   WooCommerce sätter egna mått på div, p, h2 och button. Rutan sätter därför
   box-sizing själv i stället för att lita på att sidan gjort det – utan den
   raden spränger vadden panelens maxbredd på en smal skärm. */
.csd-fspop,
.csd-fspop *{box-sizing:border-box}

/* ---------- Överlägget ----------
   Täcker hela fönstret och centrerar panelen. Ett klick här stänger rutan
   (se render_popup: bara träffar på själva överlägget räknas, inte på
   panelen inuti).

   top/right/bottom/left i stället för inset: äldre webbläsare i butikens
   besöksstatistik känner inte inset, och en påminnelse som halkar upp i
   sidans hörn är värre än fyra rader extra.

   Genomskinligheten skrivs två gånger. Första raden är samma ton räknad i
   klartext och gäller överallt; andra raden är samma sak uttryckt mot temats
   marinlila, och hoppas över av webbläsare som inte kan color-mix. Utan den
   första raden blir överlägget helt osynligt i dem.

   z-index 999999 är samma tak som den gamla rutan hade, och ligger över
   temats fasta lager (notisraden i nya designen ligger på 99990). */
.csd-fspop{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(42,23,168,.52);
  background:color-mix(in srgb,var(--navy,#2a17a8) 52%,transparent);
  font-family:var(--font,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  font-size:15px;
  line-height:1.5;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Panelen ----------
   Måtten är nya designens kort: 18 px hörnradie, 1 px ljuslila ram och
   lyftskuggan i marinlila.

   Höjden får aldrig gå utanför skärmen. Panelen själv rullar inte – det gör
   kroppen inuti – så krysset i hörnet står kvar även när texten är för lång
   och måste skrollas.

   max-height står två gånger: dvh är fönstrets verkliga höjd på mobil, där
   adressraden äter av vh, och raden hoppas över av webbläsare som inte kan
   dvh. Då gäller vh-raden ovanför. */
.csd-fspop__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:420px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  padding:26px 24px 24px;
  border:1px solid var(--blue-line,#d7d0fa);
  border-radius:var(--r-card,18px);
  background:var(--card-bg,#fff);
  box-shadow:var(--shadow-lift,0 16px 34px rgba(42,23,168,.13));
}

/* Den rullande delen. overscroll-behavior hindrar att sidan bakom börjar
   rulla när kunden skrollat texten till slutet på en telefon. */
.csd-fspop__kropp{
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ---------- Runt märke med utropstecken ----------
   Samma runda bricka som nya designens modal och tomma lägen använder:
   ljuslila yta, marinlila tecken. */
.csd-fspop__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:50%;
  background:var(--blue-soft,#f1eeff);
  color:var(--navy,#2a17a8);
  font-size:25px;
  font-weight:800;
  line-height:1;
}

/* ---------- Texterna ----------
   Varje mått skrivs ut i klartext. Temat sätter egna h2- och p-regler som
   annars slår igenom mitt i rutan och ger fel storlek, färg och marginal. */
.csd-fspop__rubrik{
  margin:0;
  padding:0;
  color:var(--navy,#2a17a8);
  font-size:19px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:normal;
  text-transform:none;
}
.csd-fspop__text{
  margin:9px 0 0;
  padding:0;
  color:var(--text,#15142b);
  font-size:14.5px;
  line-height:1.6;
  /* Långa ordernummer och adresser i en egen text ska brytas, inte spränga
     panelen i sidled. */
  overflow-wrap:break-word;
}
/* Underraden om att påminnelsen bara kommer en gång. Hårlinjen över den är
   samma ljusa ton som skiljer rader i nya designens kort. */
.csd-fspop__not{
  margin:14px 0 0;
  padding:11px 0 0;
  border-top:1px solid var(--hair,#eeecf7);
  color:var(--muted,#67658a);
  font-size:12.5px;
  font-style:normal;
  line-height:1.5;
}

/* ---------- Krysset ----------
   Ligger absolut i panelens hörn, utanför den rullande kroppen, och står
   därför still.

   appearance:none plus egna värden för ram, yta, typsnitt och radhöjd:
   temats knappstilar skulle annars ge krysset rosa botten och 44 px höjd.

   44x44 px träffyta räcker för en tumme på en telefon. Tecknet självt ritas
   i 20 px, resten är luft. */
.csd-fspop__close{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:var(--muted,#67658a);
  font-family:inherit;
  font-size:20px;
  font-weight:400;
  line-height:1;
  text-shadow:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.csd-fspop__close:hover,
.csd-fspop__close:focus{
  background:var(--soft,#f9f8fd);
  color:var(--navy,#2a17a8);
}
/* Synlig fokusmarkering för den som tabbar sig fram. focus-visible och inte
   focus: ringen ska komma vid tangentbord, inte vid musklick. */
.csd-fspop__close:focus-visible{
  outline:2px solid var(--blue,#5637f2);
  outline-offset:2px;
}

/* ---------- Smal skärm ----------
   Räknat mot 360 px: överläggets 12 px på var sida och panelens 18 px ger
   288 px läsbar bredd, och krysset ligger kvar inom panelen. */
@media (max-width:420px){
  .csd-fspop{padding:12px}
  .csd-fspop__panel{padding:22px 18px 20px}
  .csd-fspop__mark{width:46px;height:46px;font-size:22px}
  .csd-fspop__rubrik{font-size:18px}
}

/* ---------- Insläppet ----------
   Rutan tonar in i stället för att slå upp. Den som bett sin dator om mindre
   rörelse får den utan animation. */
@keyframes csd-fspop-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes csd-fspop-panel-in{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}
.csd-fspop{animation:csd-fspop-in .18s ease-out both}
.csd-fspop__panel{animation:csd-fspop-panel-in .22s ease-out both}
@media (prefers-reduced-motion:reduce){
  .csd-fspop,
  .csd-fspop__panel{animation:none}
}