@charset "utf-8";
.login-page {
  width: 100%;
  max-width: 480px;
  padding: 5% 20px 0;
  margin: auto;
}
.notpayed-page {
  width: 500px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 480px;
  margin: 0 auto 60px;
  padding: 40px 50px 35px;
  text-align: center;
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.15), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}
.form input {
  font-family: "Verdana", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 12px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form input:focus {
  background: #e8e8e8;
  box-shadow: 0 0 0 2px rgba(59, 159, 205, 0.2);
}
/* :not(.corner-btn): hörnknapparna (säsong/röda dagar) ska inte se ut som
   inloggningsknappen — utan undantaget vinner den här regeln på specificitet. */
.form button:not(.corner-btn) {
  font-family: "Verdana", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #3b9fcd;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 6px;
  margin-top: 5px;
}
.form button:not(.corner-btn):hover,.form button:not(.corner-btn):active,.form button:not(.corner-btn):focus {
  background: #2b8ab8;
  box-shadow: 0 4px 12px rgba(59, 159, 205, 0.3);
  transform: translateY(-1px);
}
.form .message {
  margin: 12px 0 0;
  color: #b3b3b3;
  font-size: 13px;
}
.form .tinymessage {
  margin: 12px 0 0;
  color: #b3b3b3;
  font-size: 10px;
  font-style: italic;
}
.form .message a {
  color: #3b9fcd;
  text-decoration: none;
  transition: color 0.2s ease;
}

.form .message a:hover {
  color: #2b8ab8;
  text-decoration: underline;
}
.form .reset-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 240px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #3b9fcd;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #3b9fcd;
}
body {
  background: #3b9fcd; /* reserv för webbläsare utan gradientstöd */
  /* Den valbara bakgrunden (login_background.jsp + cfg_server.loginBackground) togs bort
     2026-08-27 — DB-läsning från oautentiserade sidor var vägen new DbProcessor() smög in
     och tömde anslutningspoolen. Gradienten är numera fast. */
  background: linear-gradient(to left, #3b9fcd, #2b7cbf);
  font-family: "Verdana", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile apps section styling */
.mobile-apps-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.apps-heading {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin: 0 0 15px 0;
}

.app-stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  justify-items: center;
  margin: 10px 0;
}

.store-badge {
  display: block;
  width: 140px;
  transition: all 0.3s ease;
}

.store-badge:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.store-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.web-app-link {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #3b9fcd;
  text-decoration: none;
  padding: 10px 15px;
  transition: all 0.3s ease;
  border-radius: 6px;
  background: #f8f8f8;
  width: auto;
  justify-content: center;
}

.web-app-link:hover {
  background: #eeeeee;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.web-app-link img {
  width: 24px;
  height: 24px;
}

.web-app-link span {
  color: #666;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
}

/* Responsive adjustments for mobile */
@media (max-width: 520px) {
  /* .login-page har width:100% och padding. Utan border-box blir totalbredden
     viewport + 30 px, och sidan gick att dra i sidled på mobilen. */
  .login-page {
    box-sizing: border-box;
    max-width: 100%;
    padding: 5% 15px 0;
  }

  .form {
    max-width: 100%;
    padding: 30px 25px;
  }

  .app-stores {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .store-badge {
    width: 160px;
  }

  .web-app-link {
    grid-column: 1;
  }
}
/* ============================================================================
   Säsongsdekor på inloggnings- och utloggningssidan
   (decorators/partials/season_logo.jsp + scripts/season.js)

   Säsongen bestäms i se.itendi.tools.SeasonGreeting och sätter klassen season-<nyckel>
   på logotypen, på triggerknappen och på panelen. Hälsningstexten visas ALDRIG rakt av —
   den ligger bakom en diskret knapp uppe i högra hörnet och fälls ut i en panel som är
   absolut positionerad, så att formuläret aldrig knuffas nedåt.

   Bara julen har en egen logotypbild. Övriga säsonger dekoreras här: sken bakom logotypen,
   en dekal i hörnet och för några av dem ett eget lager med snö, konfetti eller girlang.
   ========================================================================== */

/* ---- Knapparna uppe i högra hörnet ------------------------------------- */

.corner-tools {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 25;
}

.corner-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bredden växer med innehållet: adventsljusen ska stå på rad, inte klippas. */
  min-width: 30px;
  width: auto;
  height: 30px;
  padding: 0 5px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9aa7ae;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.corner-btn:hover,
.corner-btn.open {
  color: #5b7280;
  transform: translateY(-1px);
}

.corner-btn:focus-visible {
  outline: 2px solid #3b9fcd;
  outline-offset: 2px;
}

.corner-btn .season-emoji {
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

/* Advent visar ett ljus per vecka. Fyra ljus i knappstorlek blir för brett – mindre
   grad, men alla på rad. */
.corner-btn.season-advent .season-emoji {
  font-size: 12px;
}

.visually-hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Klockomställningen: en liten +1/−1 direkt på knappen. */
.corner-btn.season-sommartid::after,
.corner-btn.season-vintertid::after {
  content: var(--shift-short, "");
  position: absolute;
  right: 0;
  bottom: -1px;
  padding: 0 2px;
  border-radius: 3px;
  background: #1f4c66;
  color: #fff;
  font: 700 8px/1.4 "Verdana", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---- Utfällda paneler (ligger ovanpå, trycker inte ner formuläret) ------ */

.corner-panel {
  position: absolute;
  top: 46px;
  right: 12px;
  z-index: 30;
  /* Utan border-box läggs 16 px padding och 1 px kant ovanpå den uträknade bredden, och
     panelen sticker ut till vänster om kortet på mobilen. */
  box-sizing: border-box;
  width: min(300px, calc(100% - 24px));
  padding: 14px 16px;
  border: 1px solid #e2e8ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
  text-align: left;
  animation: panelIn .16s ease-out;
}

.corner-panel[hidden] {
  display: none;
}

/* Utloggningssidan: kortet är bara logotyp, "Utloggad." och en länk. En panel ovanpå skulle
   täcka precis allt, och det finns inget formulär som kan knuffas ner. Där ligger den i
   flödet i stället — det är sidan med formulär som kravet på överlägg gäller. */
.corner-panel.panel-inflow {
  position: static;
  width: auto;
  margin: 16px 0 0;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Säsongspanelen ärver säsongens färger via variablerna längre ner. */
.season-greeting {
  --season-bg1: #fff8e8;
  --season-bg2: #ffefd0;
  --season-border: #f0d6a0;
  --season-fg: #5f5138;
  --season-title: #3c3020;

  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-color: var(--season-border);
  background: linear-gradient(135deg, var(--season-bg1), var(--season-bg2));
  color: var(--season-fg);
  font-size: 12px;
  line-height: 1.5;
}

.season-greeting .season-emoji-big {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1.1;
  white-space: nowrap;
}

.season-greeting.season-advent .season-emoji-big {
  font-size: 17px;
}

.season-greeting .season-text strong {
  display: block;
  margin-bottom: 3px;
  color: var(--season-title);
  font-size: 13px;
}

/* ---- Logotypen ---------------------------------------------------------- */

.logo-wrap {
  position: relative;
  display: inline-block;
  border: 0;
  line-height: 0;
}

.logo-wrap img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
}

/* Sken bakom logotypen. Färgen kommer från --glow per säsong; utan säsong ritas inget. */
.logo-wrap[class*="season-"]::before {
  content: "";
  position: absolute;
  inset: -22px -14px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, transparent), transparent 72%);
  opacity: .8;
}

/* Dekalen i hörnet: antingen ett tecken (--decal) eller en ritad ikon (--art).
   Den sitter till VÄNSTER: högra hörnet är upptaget av knapparna. */
.logo-wrap[class*="season-"]::after {
  content: var(--decal, "");
  display: block;
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: 4;
  width: var(--art-w, var(--art-size, auto));
  height: var(--art-h, var(--art-size, auto));
  background: var(--art, none);
  border-radius: var(--art-radius, 0);
  font-size: 27px;
  line-height: 1;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

/* Effektlagret: snö, konfetti och girlanger. Ligger över bilden men under dekalen. */
.season-fx {
  position: absolute;
  inset: -8px -6px;
  z-index: 3;
  pointer-events: none;
  border-radius: 14px;
}

/* ---- Säsongernas färger och dekaler ------------------------------------- */

.season-advent      { --glow: rgba(214, 60, 60, .32);   --decal: "\1F56F\FE0F"; }
.season-lucia       { --glow: rgba(255, 205, 90, .60); }
.season-vintersolstand { --glow: rgba(120, 150, 190, .40); }
.season-knut        { --glow: rgba(126, 200, 80, .35);  --decal: "\1F384"; }
.season-jul         { --glow: rgba(214, 60, 60, .32);   --decal: "\2744\FE0F"; }
.season-nyar        { --glow: rgba(168, 120, 235, .45); --decal: "\1F389"; }
.season-pask        { --glow: rgba(126, 200, 80, .40);  --decal: "\1F423"; }
.season-tillbaka    { --glow: rgba(255, 196, 61, .60);  --decal: "\1F576\FE0F"; }
.season-midsommar   { --glow: rgba(126, 200, 80, .45); }
.season-semester    { --glow: rgba(255, 196, 61, .65);  --decal: "\2600\FE0F"; }
.season-halloween   { --glow: rgba(255, 128, 0, .48);   --decal: "\1F383"; }
.season-valborg     { --glow: rgba(255, 128, 0, .48);   --decal: "\1F525"; }
.season-alla-hjartans { --glow: rgba(232, 96, 140, .42); --decal: "\2764\FE0F"; }
.season-nationaldagen { --glow: rgba(80, 150, 220, .42); }
.season-april       { --glow: rgba(90, 180, 200, .40); }
.season-fredag      { --decal: "\1F388"; }
.season-skottdag    { --decal: "\1F5D3\FE0F"; }
.season-sommartid   { --decal: "\23F0"; --shift: "+1 timme"; --shift-short: "+1"; }
.season-vintertid   { --decal: "\23F0"; --shift: "\2212" "1 timme"; --shift-short: "\2212" "1"; }
/* Månadsslutet är en påminnelse, inte ett firande – ingen dekal, inget sken. */

/* ---- Ritade ikoner: emoji finns inte, eller ser fel ut ------------------- */

/* All geometri nedan är i procent, inte pixlar. Samma ritning används i tre storlekar
   (18 px på knappen, 26–28 px som dekal) och absoluta mått blir gröt i den minsta. */

/* Kanelbullen och våfflan går inte att göra med gradienter: en bulle är en spiral, inte
   koncentriska ringar, och en svensk våffla är hjärtformad. Båda ritas därför som inbäddad
   SVG i background-image – fortfarande en enda CSS-fil utan externa filer, men med riktiga
   former som är knivskarpa i alla storlekar. */

/* Kanelbulle sedd uppifrån: en spiral av åtta halvcirkelbågar med växande radie.
   Emoji \1F950 är en croissant. */
.season-kanelbulle {
  --art-size: 28px;
  --art-radius: 0;
  --art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13.6' fill='%23c9822f'/><circle cx='16' cy='16' r='12.2' fill='%23edb96f'/><path d='M16 16a1.3 1.3 0 0 1 2.6 0 2.6 2.6 0 0 1-5.2 0 3.9 3.9 0 0 1 7.8 0 5.2 5.2 0 0 1-10.4 0 6.5 6.5 0 0 1 13 0 7.8 7.8 0 0 1-15.6 0 9.1 9.1 0 0 1 18.2 0 10.4 10.4 0 0 1-20.8 0' fill='none' stroke='%23a3561f' stroke-width='2.1' stroke-linecap='round'/><circle cx='10' cy='9.5' r='1.1' fill='%23fffaf0'/><circle cx='22.5' cy='12' r='.9' fill='%23fffaf0'/><circle cx='19' cy='23' r='1' fill='%23fffaf0'/></svg>") 50% 50% / contain no-repeat;
}

/* Våffla: svenska våfflor är hjärtformade. Rutmönstret klipps mot hjärtat, med grädde och
   sylt ovanpå. */
.season-vaffla {
  --art-size: 28px;
  --art-radius: 0;
  --art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><clipPath id='h'><path d='M12 21.6 8.4 18.2C4.2 14.3 1.4 11.7 1.4 8.5A4.8 4.8 0 0 1 6.2 3.7c1.5 0 2.9.7 3.8 1.8L12 7.4l2-1.9a4.9 4.9 0 0 1 3.8-1.8 4.8 4.8 0 0 1 4.8 4.8c0 3.2-2.8 5.8-7 9.7z'/></clipPath></defs><path d='M12 21.6 8.4 18.2C4.2 14.3 1.4 11.7 1.4 8.5A4.8 4.8 0 0 1 6.2 3.7c1.5 0 2.9.7 3.8 1.8L12 7.4l2-1.9a4.9 4.9 0 0 1 3.8-1.8 4.8 4.8 0 0 1 4.8 4.8c0 3.2-2.8 5.8-7 9.7z' fill='%23f0bd63'/><g clip-path='url(%23h)' stroke='%23b8762d' stroke-width='1.1' opacity='.75'><path d='M4.5 0v24M9 0v24M13.5 0v24M18 0v24M0 4.5h24M0 9h24M0 13.5h24M0 18h24'/></g><path d='M12 21.6 8.4 18.2C4.2 14.3 1.4 11.7 1.4 8.5A4.8 4.8 0 0 1 6.2 3.7c1.5 0 2.9.7 3.8 1.8L12 7.4l2-1.9a4.9 4.9 0 0 1 3.8-1.8 4.8 4.8 0 0 1 4.8 4.8c0 3.2-2.8 5.8-7 9.7z' fill='none' stroke='%23a96823' stroke-width='1.2'/><ellipse cx='9' cy='9.4' rx='3.5' ry='2.3' fill='%23fffdf5'/><circle cx='14.8' cy='8.2' r='2' fill='%23c0392b'/></svg>") 50% 50% / contain no-repeat;
}

/* Sill i sidovy: silverbuk, blågrön rygg, stjärtfena. Emoji \1F41F är en tropisk fisk. */
.season-april {
  --art-w: 32px;
  --art-h: 18px;
  --art-radius: 0;
  --art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'><defs><clipPath id='f'><ellipse cx='13' cy='9' rx='11.5' ry='5.4'/></clipPath></defs><path d='M23 9l8.5-6-2.3 6 2.3 6z' fill='%236e93a5'/><path d='M10.6 4.6 13.2 1l3.8 3.9zM11.8 13.4 13.4 16.6l3.2-2.4z' fill='%236e93a5'/><ellipse cx='13' cy='9' rx='11.5' ry='5.4' fill='%23e6eef2'/><ellipse cx='13' cy='1.6' rx='12' ry='4.8' fill='%234a7f96' clip-path='url(%23f)'/><path d='M3.5 10.6h17' stroke='%23b3c6d0' stroke-width='.7' fill='none'/><path d='M8.6 5.1C7.3 6.7 7.3 11.3 8.6 12.9' stroke='%23b3c6d0' stroke-width='.7' fill='none'/><circle cx='5.6' cy='7.7' r='1.5' fill='%23fff'/><circle cx='5.4' cy='7.7' r='.85' fill='%231d2b33'/></svg>") 50% 50% / contain no-repeat;
}

/* Midsommarstång: stång, tvärslå, två kransar och blommor. */
.season-midsommar {
  --art-w: 26px;
  --art-h: 30px;
  --art-radius: 0;
  --art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'><g stroke='%234e7d33' fill='none' stroke-width='2.6' stroke-linecap='round'><path d='M13 5V29'/><path d='M4 11h18'/><circle cx='6' cy='18' r='4.2'/><circle cx='20' cy='18' r='4.2'/></g><circle cx='13' cy='3.6' r='2.8' fill='%23fff' stroke='%234e7d33' stroke-width='1.2'/><circle cx='13' cy='3.6' r='1.2' fill='%23ffd400'/><circle cx='4' cy='11' r='1.9' fill='%23fff' stroke='%234e7d33' stroke-width='1.1'/><circle cx='22' cy='11' r='1.9' fill='%23fff' stroke='%234e7d33' stroke-width='1.1'/></svg>") 50% 50% / contain no-repeat;
}

/* Semla: locket överst, grädden som puttar ut mellan, bullen underst.
   Tre ellipser staplade – en vågrät gräddrand gjorde den till en badboll. */
.season-fettisdagen {
  --art-size: 28px;
  --art-radius: 0;
  --art:
    radial-gradient(ellipse 9% 4% at 41% 15%, rgba(255, 255, 255, .8) 0 100%, transparent 100%),
    radial-gradient(ellipse 32% 22% at 50% 23%, #e9bd85 0 100%, transparent 100%),
    radial-gradient(ellipse 46% 18% at 50% 47%, #fffdf6 0 100%, transparent 100%),
    radial-gradient(ellipse 43% 33% at 50% 67%, #cf9153 0 100%, transparent 100%);
}

/* Lussekatt: två spiraler kant i kant med ett russin i varje. Mer Lucia än en krona.
   Ringarna är utskrivna en och en — en repeating-radial-gradient kan inte avslutas med ett
   transparent stopp utan att mönstret börjar om och fyller hela rutan. */
.season-lucia {
  --art-size: 28px;
  --art-radius: 0;
  --art:
    radial-gradient(circle at 32% 31%,
      #4a2c14 0 6%, #f4bd52 6% 13%, #dc9c33 13% 16%, #f4bd52 16% 22%,
      #dc9c33 22% 25%, #f4bd52 25% 29%, #c9852a 29% 31%, transparent 31%),
    radial-gradient(circle at 68% 69%,
      #4a2c14 0 6%, #f4bd52 6% 13%, #dc9c33 13% 16%, #f4bd52 16% 22%,
      #dc9c33 22% 25%, #f4bd52 25% 29%, #c9852a 29% 31%, transparent 31%);
}

/* Vintersolståndet: en riktig skära – en mörk skiva skjuten åt vänster över en ljus.
   Bakgrunden klipps av border-radius, så den mörka skivan sticker inte ut. */
.season-vintersolstand {
  --art-size: 26px;
  --art-radius: 50%;
  --art:
    radial-gradient(circle at 34% 50%, #142433 0 62%, transparent 63%),
    #ffd35c;
}

/* Svenska flaggan. Emojin \1F1F8\1F1EA finns inte alls på Windows – där blir det "SE".
   Korset ligger enligt flagglagen: 5:2:9 på bredden och 4:2:4 på höjden. Positionen räknas
   på (behållare − lager), därav 35.71 % för ett 12.5 % brett band som ska börja vid 31.25 %. */
.season-nationaldagen {
  --art-w: 30px;
  --art-h: 19px;
  --art-radius: 2px;
  --art:
    linear-gradient(#fecb00, #fecb00) 35.71% 0 / 12.5% 100% no-repeat,
    linear-gradient(#fecb00, #fecb00) 0 50% / 100% 20% no-repeat,
    #005293;
}

/* Säsongerna med ritad ikon: texten i ikonrutan döljs och ersätts av samma ritning som
   dekalen på logotypen. */
.season-kanelbulle .season-emoji,      .season-kanelbulle .season-emoji-big,
.season-vaffla .season-emoji,          .season-vaffla .season-emoji-big,
.season-fettisdagen .season-emoji,     .season-fettisdagen .season-emoji-big,
.season-lucia .season-emoji,           .season-lucia .season-emoji-big,
.season-vintersolstand .season-emoji,  .season-vintersolstand .season-emoji-big,
.season-nationaldagen .season-emoji,   .season-nationaldagen .season-emoji-big,
.season-midsommar .season-emoji,       .season-midsommar .season-emoji-big,
.season-april .season-emoji,           .season-april .season-emoji-big {
  font-size: 0;
}

.season-kanelbulle .season-emoji::before,      .season-kanelbulle .season-emoji-big::before,
.season-vaffla .season-emoji::before,          .season-vaffla .season-emoji-big::before,
.season-fettisdagen .season-emoji::before,     .season-fettisdagen .season-emoji-big::before,
.season-lucia .season-emoji::before,           .season-lucia .season-emoji-big::before,
.season-vintersolstand .season-emoji::before,  .season-vintersolstand .season-emoji-big::before,
.season-nationaldagen .season-emoji::before,   .season-nationaldagen .season-emoji-big::before,
.season-midsommar .season-emoji::before,       .season-midsommar .season-emoji-big::before,
.season-april .season-emoji::before,           .season-april .season-emoji-big::before {
  content: "";
  display: block;
  background: var(--art);
  border-radius: var(--art-radius);
}

.corner-btn .season-emoji::before { width: 18px; height: 18px; }
.corner-panel .season-emoji-big::before { width: 26px; height: 26px; }

/* Flaggan, midsommarstången och sillen är inte kvadratiska. */
.corner-btn.season-nationaldagen .season-emoji::before { width: 20px; height: 13px; }
.corner-panel.season-nationaldagen .season-emoji-big::before { width: 29px; height: 18px; }
.corner-btn.season-midsommar .season-emoji::before { width: 15px; height: 18px; }
.corner-panel.season-midsommar .season-emoji-big::before { width: 23px; height: 27px; }
.corner-btn.season-april .season-emoji::before { width: 22px; height: 14px; }
.corner-panel.season-april .season-emoji-big::before { width: 32px; height: 20px; }

/* ---- Effektlager: snö, konfetti, girlanger ------------------------------ */

/* Varje lager förskjuts exakt en ruta i båda riktningarna, så loopen syns inte. */
.logo-wrap.season-jul .season-fx,
.logo-wrap.season-advent .season-fx,
.logo-wrap.season-lucia .season-fx,
.logo-wrap.season-vintersolstand .season-fx,
.logo-wrap.season-knut .season-fx {
  /* Snön och konfettin får ett större fält än logotypen — annars faller de i en smal remsa. */
  inset: -20px -14px;
  overflow: hidden;
  opacity: .92;
  background-image:
    radial-gradient(2.5px 2.5px at 14% 18%, #a6c9e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 71%, #a6c9e6 50%, transparent 51%),
    radial-gradient(2px 2px at 31% 47%, #a6c9e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 24%, #a6c9e6 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 55% 12%, #a6c9e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 66%, #a6c9e6 50%, transparent 51%),
    radial-gradient(2px 2px at 74% 53%, #a6c9e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 88%, #a6c9e6 50%, transparent 51%),
    radial-gradient(2px 2px at 95% 79%, #a6c9e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 33%, #a6c9e6 50%, transparent 51%);
  background-size:
    58px 58px, 46px 46px, 71px 71px, 39px 39px, 84px 84px,
    52px 52px, 65px 65px, 43px 43px, 77px 77px, 35px 35px;
  animation: snowFall 11s linear infinite;
}

/* Varje lager förflyttas exakt en hel ruta i båda riktningarna – då syns inte loopen. */
@keyframes snowFall {
  to {
    background-position:
      58px 58px, -46px 46px, 71px 71px, -39px 39px, 84px 84px,
      -52px 52px, 65px 65px, -43px 43px, 77px 77px, -35px 35px;
  }
}

.logo-wrap.season-nyar .season-fx {
  inset: -20px -14px;
  overflow: hidden;
  background-image:
    radial-gradient(3px 3px at 12% 20%, #ffd166 50%, transparent 51%),
    radial-gradient(3px 3px at 68% 61%, #a878eb 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 37% 14%, #52c7d8 50%, transparent 51%),
    radial-gradient(3px 3px at 84% 77%, #ff7ba9 50%, transparent 51%),
    radial-gradient(2px 2px at 51% 88%, #ffd166 50%, transparent 51%),
    radial-gradient(3px 3px at 24% 58%, #7ed957 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 92% 31%, #a878eb 50%, transparent 51%),
    radial-gradient(3px 3px at 59% 42%, #ff7ba9 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 84%, #52c7d8 50%, transparent 51%),
    radial-gradient(3px 3px at 77% 8%, #ffd166 50%, transparent 51%);
  background-size:
    54px 54px, 67px 67px, 41px 41px, 73px 73px, 48px 48px,
    61px 61px, 37px 37px, 80px 80px, 45px 45px, 58px 58px;
  animation: confettiFall 6.5s linear infinite;
}

@keyframes confettiFall {
  to {
    background-position:
      -54px 54px, 67px 67px, -41px 41px, 73px 73px, -48px 48px,
      61px 61px, -37px 37px, 80px 80px, -45px 45px, 58px 58px;
  }
}

/* Påsk: en rad ägg längs överkanten i stället för en egen logotypbild. */
.logo-wrap.season-pask .season-fx {
  background-image:
    radial-gradient(4px 5px at 8px 7px, #ffd3e2 50%, transparent 51%),
    radial-gradient(4px 5px at 24px 7px, #cfe9ff 50%, transparent 51%),
    radial-gradient(4px 5px at 40px 7px, #fff0b3 50%, transparent 51%);
  background-repeat: repeat-x;
  background-size: 52px 16px;
  background-position: 0 -4px;
}

/* Midsommar: blomsterkrans längs överkanten. */
.logo-wrap.season-midsommar .season-fx {
  background-image:
    radial-gradient(2.5px 2.5px at 13px 8px, #ffd84d 50%, transparent 51%),
    radial-gradient(6px 6px at 13px 8px, #fff 50%, transparent 51%);
  background-repeat: repeat-x;
  background-size: 26px 18px;
  background-position: 0 -5px;
}

/* Klockomställningen: +1 eller −1 timme direkt under klockan på logotypen. */
.logo-wrap.season-sommartid .season-fx::after,
.logo-wrap.season-vintertid .season-fx::after {
  content: var(--shift, "");
  position: absolute;
  top: 16px;
  left: -12px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #1f4c66;
  color: #fff;
  font: 700 10px/1 "Verdana", sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

/* ---- Panelens färg per säsong ------------------------------------------- */

.season-greeting.season-tillbaka,
.season-greeting.season-semester {
  --season-bg1: #fff3cf; --season-bg2: #ffe0a3;
  --season-border: #f0c766; --season-fg: #6a4f14; --season-title: #4a3708;
}
.season-greeting.season-jul,
.season-greeting.season-advent,
.season-greeting.season-lucia,
.season-greeting.season-knut,
.season-greeting.season-alla-hjartans {
  --season-bg1: #fdeaea; --season-bg2: #f7d7d7;
  --season-border: #e8b0b0; --season-fg: #6b2b2b; --season-title: #4d1c1c;
}
.season-greeting.season-nyar {
  --season-bg1: #f2ecfd; --season-bg2: #e6dbfa;
  --season-border: #c9b6ef; --season-fg: #4a3374; --season-title: #372352;
}
.season-greeting.season-pask,
.season-greeting.season-midsommar {
  --season-bg1: #eef9e2; --season-bg2: #dcf1c8;
  --season-border: #b6dd91; --season-fg: #3f5c26; --season-title: #2d431a;
}
.season-greeting.season-halloween,
.season-greeting.season-valborg,
.season-greeting.season-kanelbulle,
.season-greeting.season-vaffla,
.season-greeting.season-fettisdagen {
  --season-bg1: #fff0dd; --season-bg2: #ffdfba;
  --season-border: #f0b877; --season-fg: #6a3c0c; --season-title: #4d2a06;
}
.season-greeting.season-sommartid,
.season-greeting.season-vintertid,
.season-greeting.season-vintersolstand,
.season-greeting.season-skottdag,
.season-greeting.season-manadsslut,
.season-greeting.season-nationaldagen,
.season-greeting.season-april,
.season-greeting.season-fredag {
  --season-bg1: #eaf5fb; --season-bg2: #d8ecf7;
  --season-border: #a9d3e9; --season-fg: #1f4c66; --season-title: #133850;
}

@media (prefers-reduced-motion: reduce) {
  .logo-wrap::before,
  .logo-wrap::after,
  .logo-wrap img,
  .season-fx,
  .corner-panel {
    animation: none !important;
  }
}

@media (max-width: 520px) {
  .corner-panel {
    width: calc(100% - 24px);
  }

  /* Fyra adventsljus i ikonkolumnen äter för mycket av en smal panel och pressar texten
     till en remsa. */
  .season-greeting.season-advent .season-emoji-big {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .form {
    padding: 25px 20px;
  }

  .store-badge {
    width: 140px;
  }

  .web-app-link span {
    font-size: 11px;
  }
}