@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Source+Sans+3:wght@400;600;700;800&display=swap');
/*
 * Kungl. Hovstaterna (organizer 5047): organizer stylesheet for every dagny page of the organizer, the
 * organizer page and all event and show pages. An event theme under events/<id>/ loads after this
 * file and can override it.
 *
 * Built from Hovstaternas profil på kungahuset.se: vit sida, text i #333, DM Serif Display (bara vikt
 * 400) för rubriker och Source Sans för text, små etiketter i versaler med bred spärrning, raka hörn
 * och inga skuggor. Ytorna är kungahuset.se:s dova toner: isblått #DCE9ED (kortens textlister,
 * bokningsbara dagar), ljusrosa #F0DDD9 (få kvar), varmgrått #F0EEED (organisatörssidans platta) och
 * en mörkgrå footer #303030. Ingen guldfärg. Knappar i #333 med vit text (12,6:1), svart vid hover.
 * Dämpad text #595959 (7,0:1 på vitt, minst 5,4:1 på de tonade ytorna).
 *
 * Riksvapnet som grå linjeteckning (som i kungahuset.se:s header) i assets/riksvapnet-linje.webp,
 * renderat i 320px från deras SVG. Typsnitten kommer från Google Fonts (SIL OFL): DM Serif Display
 * som på kungahuset.se, och Source Sans 3, som är Source Sans Pro under nytt namn.
 *
 * Grunden är samma variabelstyrda organisatörstema som Tosselilla (4276) och Lokverkstan (2966);
 * avsnitt 10 är Hovstaterna och avsnitt 11 kassan. Laddas sist i <head>, så selektorerna speglar
 * dagny.css för samma specificitet; !important bara mot inline-stilar och färger som sätts från JS.
 */

:root {
  --ks-ink: #333333;
  --ks-black: #000000;
  --ks-ice: #dce9ed;
  --ks-blush: #f0ddd9;
  --ks-stone: #f0eeed;
  --ks-footer: #303030;

  /* Temats roller */
  /* knappar och markeringar i #333 med vit text, svart vid hover */
  --ks-red: var(--ks-ink);
  --ks-red-hover: var(--ks-black);
  --ks-red-edge: transparent;
  /* "Fåtal kvar" och halvsålda dagar i ljusrosa */
  --ks-orange: var(--ks-blush);
  /* bokningsbara dagar och tillvalsbandet i isblått */
  --ks-yellow: var(--ks-ice);
  --ks-lime: var(--ks-ink);
  --ks-green: var(--ks-ink);
  /* försäkringens ja och kampanjetiketten */
  --ks-green-ink: var(--ks-ink);
  --ks-deep: var(--ks-ink);
  /* länkarnas understrykning */
  --ks-blue: var(--ks-ink);
  --ks-strand: #ffffff;
  --ks-sand: var(--ks-stone);
  --ks-white: #ffffff;
  --ks-hover: var(--ks-ice);
  --ks-line: #e6e6e6;
  --ks-line-strong: #c5bdb8;
  --ks-muted: #595959;
  --ks-accent: var(--ks-ink);
  --ks-disabled: #e6e6e6;
  --ks-disabled-ink: #595959;
  --ks-display: 'DM Serif Display', Georgia, serif;
  --ks-font: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  --ks-mono: var(--ks-font);
  --ks-pad: clamp(20px, 3.4vw, 48px);
  --ks-max: 1184px;
  --ks-wrap: min(var(--ks-max), 100% - 2 * var(--ks-pad));
  /* Fotoraden: högst 480px så att rubriken syns utan scroll */
  --ks-photo: min(56.25vw, 38vw + 80px, 480px);
  --ks-radius: 0;
  --ks-shadow: none;
  --ks-ease: 150ms ease;
  --ks-rainbow: none;
  /* kungahuset.se:s etiketter: versaler, 3px spärrning vid 16px */
  --ks-track: 0.19em;
}

/* ---------------------------------------------------------------------------
 * 1. Ground
 * ------------------------------------------------------------------------- */
/* Remsan ovanför <main> (där headern ligger) är body; resten av sidan är papper.
   dagnys förvalda tema lägger en kornig textur (filter.png) på body och .st-content. */
body {
  background-color: var(--ks-white);
  background-image: none;
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
.st-content {
  background-color: var(--ks-strand);
  background-image: none;
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
a {
  color: var(--ks-deep);
}
.spinner-color-secondary {
  border-color: var(--ks-red);
}
/* Footern i svart med guldlinjen överst (avsnitt 10) */
footer.page-footer {
  position: relative;
  z-index: 2;
  opacity: 1;
  margin-top: 64px;
  background-color: var(--ks-ink);
}
footer.page-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  background: var(--ks-rainbow);
}
footer.page-footer,
footer.page-footer #left-column > a:not(#nortic-footer-link) {
  color: var(--ks-strand);
  font-family: var(--ks-font);
}
footer.page-footer #left-column > a:not(#nortic-footer-link) {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}
@media (hover: hover) {
  footer.page-footer #left-column > a:not(#nortic-footer-link):hover {
    color: var(--ks-yellow);
  }
}
footer #divider {
  border-right-color: rgba(255, 249, 239, 0.3);
}
footer.page-footer img {
  filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * 2. Header, fotorad och rubrikblocket
 * ------------------------------------------------------------------------- */
/* Headern med logotypen. 64px: dagnys meny-nav ligger 64px hög ovanför
   <main> och syns annars som ett mörkt band under en lägre header. */
header#main-header {
  height: 64px;
  background-color: var(--ks-white);
  box-shadow: 0 1px 0 var(--ks-line);
}
header#main-header > .row {
  height: 100%;
}
/* Logotypen i linje med innehållet, men alltid till höger om dagnys bakåtpil (fast i x 10-54).
   Stilguidens minsta bredd är 120px. */
header#main-header::before {
  content: '';
  position: absolute;
  top: 8px;
  left: max(70px, (100% - var(--ks-max)) / 2);
  width: 145px;
  height: 48px;
  pointer-events: none;
  background: url('assets/riksvapnet-linje.webp') no-repeat left center / contain;
}
body:not([data-eventid]) header#main-header::before {
  left: max(var(--ks-pad), (100% - var(--ks-max)) / 2);
}
header#main-header i.material-icons {
  color: var(--ks-ink);
}
/* Bakåtpilen: mörk på den vita headern, en mörk rundel när den följer med vid scroll */
a.back-to-organizer {
  color: var(--ks-ink);
}
a.back-to-organizer.fixed {
  color: var(--ks-white);
  background-color: var(--ks-ink);
  opacity: 0.85;
}
a.back-to-organizer.fixed:hover {
  opacity: 1;
}
/* Pilen ligger i headern och får annars headerns mörka ikonfärg även på den mörka rundeln */
header#main-header a.back-to-organizer.fixed i.material-icons {
  color: var(--ks-white);
}
/* Arrangörens märke ligger absolut över heron; logotypen finns redan i headern */
main .organizer-logo-container {
  display: none;
}
section#top {
  position: relative;
  padding: 0;
  background-color: var(--ks-strand);
}
/* dagny hänger bilden i ett fast lager bakom hela sidan och dimmar det vid scroll; här är den en
   fotorad överst i sektionen. fadeBanner() skriver filter och transform inline. */
section#top #background-container {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  width: auto;
  height: var(--ks-photo);
  min-height: 0;
  padding: 0;
  background-color: var(--ks-ink);
  background-size: cover;
  background-position: 50% 50%;
  filter: none !important;
  transform: none !important;
}
section#top #background-container .obfuscator {
  display: none;
}
/* Bandet under fotot (guldlinjen, avsnitt 10) */
section#top #background-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  pointer-events: none;
  background: var(--ks-rainbow);
}
/* dagny ger #main-ribbon padding-top 35-75 % för bilden bakom; här börjar blocket under fotot */
body section#top div#main-ribbon.container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--ks-wrap);
  max-width: none;
  margin: 0 auto;
  padding: calc(var(--ks-photo) + clamp(22px, 3vw, 36px)) 0 8px;
  text-align: left;
}
/* Infochipsen (speltid, ort, datum) som en rad små etiketter ovanför rubriken. På telefon ger dagny
   raden negativa marginaler och en vänsterpadding som här skulle sticka ut till höger om sidan. */
div#main-ribbon .slider-wrapper {
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  scrollbar-width: none;
}
div#main-ribbon .slider-wrapper::-webkit-scrollbar {
  display: none;
}
div#main-ribbon .event-info {
  margin-right: 18px;
  padding-right: 0;
  color: var(--ks-ink) !important;
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-shadow: none;
}
div#main-ribbon .event-info > i.material-icons {
  margin-right: 6px;
  color: var(--ks-deep);
  font-size: 18px;
  vertical-align: -4px;
}
/* Arrangörens taggar: dagny ritar dem med skugga i stället för kant */
div#main-ribbon a.n-chip,
div#main-ribbon a.n-chip.theme-background-color {
  margin: 12px 6px 0 0;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--ks-radius);
  background-color: var(--ks-sand);
  box-shadow: none;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
div#main-ribbon > h1 {
  margin: 0;
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
div#main-ribbon > h1 span {
  vertical-align: baseline;
}
/* Beskrivningen: i heron på event utan kalender, bredvid kalendern annars (dagny flyttar den dit,
   även på organisatörssidan). dagny färgar texten vit med skugga och ger den utfällda en mörk platta. */
section#top div.event-information,
section#top div.event-information:not(.minimized),
#flex-info-wrapper div.event-information,
#flex-info-wrapper div.event-information:not(.minimized) {
  max-width: 44em;
  margin: 14px 0 6px !important;
  padding: 0 !important;
  border-radius: 0;
  background: none;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
}
div#main-ribbon div.event-information p,
section#top div.event-information > span#event-information-text span,
#flex-info-wrapper div.event-information > span#event-information-text span {
  color: var(--ks-ink) !important;
  font-size: inherit;
  text-shadow: none;
}
section#top div.event-information a,
#flex-info-wrapper div.event-information a {
  color: var(--ks-deep);
  text-decoration: underline;
  text-decoration-color: var(--ks-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* "Läs mer" som stilguidens textlänk: Djupvatten med tjock vattenblå linje. dagny studsar knappen 5px
   vid hover (hintDown/hintUp); på en låg länk glider den undan pekaren mitt i klicket, så animationen
   är av och klickytan är 40px hög. */
section#top a.event-information-button,
#flex-info-wrapper a.event-information-button {
  height: auto;
  margin: -14px 0 0;
  padding: 14px 0 2px;
  border-radius: 0;
  border-bottom: 3px solid var(--ks-blue);
  background-color: transparent;
  box-shadow: none;
  color: var(--ks-deep);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
section#top div.minimized + a.event-information-button:hover,
#flex-info-wrapper div.minimized + a.event-information-button:hover,
section#top a.event-information-button:hover,
#flex-info-wrapper a.event-information-button:hover {
  animation: none;
}
/* dagnys text för utfällt läge är versal ("DÖLJ INFO"); samma skrivsätt som "Läs mer" */
section#top a.event-information-button,
#flex-info-wrapper a.event-information-button {
  text-transform: lowercase;
}
section#top a.event-information-button::first-letter,
#flex-info-wrapper a.event-information-button::first-letter {
  text-transform: uppercase;
}
section#top a.event-information-button .waves-ripple,
#flex-info-wrapper a.event-information-button .waves-ripple {
  display: none;
}
section#top a.event-information-button:hover,
section#top a.event-information-button:focus,
#flex-info-wrapper a.event-information-button:hover,
#flex-info-wrapper a.event-information-button:focus {
  background-color: transparent;
  box-shadow: none;
  color: var(--ks-ink);
}

/* ---------------------------------------------------------------------------
 * 2b. Organisatörssidan: arrangörskalendern och eventkorten
 * ------------------------------------------------------------------------- */
/* Infochipsen är tomma på organisatörssidan */
body:not([data-eventid]) div#main-ribbon .slider-wrapper {
  display: none;
}
/* organizerPage.jsp lägger en <style> i sidan (margin-top 70px, vit lista med radie 2px) efter
   temat; body framför ger en klass mer */
body section#organizer-calendar.container {
  width: var(--ks-wrap);
  max-width: none;
  margin: 0 auto;
  padding-top: 24px;
}
body #organizer-calendar #show-listing,
body section#active-events #show-listing {
  padding-bottom: 0;
  border-radius: var(--ks-radius);
}
/* Organisatörskalenderns lista före val av datum: dagny lägger 30px luft ovanför och 30px under den
   tomma visningslistan, och etiketten ("Välj datum i kalender för att se tillgång") ligger mot
   kortets kant. Ett tomläge med luft och kalenderikon. Id-selektorerna behövs mot dagnys
   #show-listing-body-regler. */
section#active-events #show-listing > #show-listing-body:has(#organizer-show-list) {
  padding-top: 0;
}
section#active-events #show-listing > #show-listing-body #organizer-show-list {
  padding-bottom: 0;
}
section#active-events #show-listing > #show-listing-body .show-listing-month.fake-month > .col {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px;
}
section#active-events #show-listing > #show-listing-body .show-listing-month.fake-month > .col::before {
  content: 'event';
  flex: 0 0 auto;
  color: var(--ks-deep);
  font-family: 'Material Icons';
  font-size: 24px;
  font-feature-settings: 'liga';
  line-height: 1;
}
section#active-events #show-listing .show-listing-month.fake-month .month-name {
  display: block;
  margin-left: 0 !important;
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Eventkorten om arrangören slår av kalendern (#popular-events) */
body:not([data-eventid]) section#popular-events {
  margin-top: 0;
  padding: 40px 0 24px;
  background-color: var(--ks-strand);
}
body:not([data-eventid]) section#popular-events > .container {
  width: var(--ks-wrap);
  max-width: none;
  margin: 0 auto;
}
/* Rubriken bara när det finns event att visa */
body:not([data-eventid]) section#popular-events > .container:has(.card)::before {
  content: 'Biljetter';
  display: block;
  margin: 0 0 20px;
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 32px);
  line-height: 1.2;
}
body:not([data-eventid]) section#popular-events > .container > .grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 28px;
}
/* dagnys lutningseffekt (js-tilt) skriver transform inline och får vara kvar */
body:not([data-eventid]) section#popular-events .card.card-background-color {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: none;
  color: var(--ks-ink);
  transition: box-shadow var(--ks-ease);
}
@media (hover: hover) {
  body:not([data-eventid]) section#popular-events .card.card-background-color:hover {
    box-shadow: var(--ks-shadow);
  }
}
body:not([data-eventid]) section#popular-events .card .card-header {
  height: auto;
  padding: 22px 24px 10px;
  font-family: var(--ks-font);
}
body:not([data-eventid]) section#popular-events .card .card-header h3 {
  margin: 0;
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
body:not([data-eventid]) section#popular-events .card .card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
body:not([data-eventid]) section#popular-events .card .card-content {
  flex: 1 1 auto;
  height: auto;
  padding: 14px 24px 6px;
  color: var(--ks-ink);
}
body:not([data-eventid]) section#popular-events .card .card-content .place {
  color: var(--ks-red);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body:not([data-eventid]) section#popular-events .card .card-content .time {
  margin-top: 4px;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}
body:not([data-eventid]) section#popular-events .card p {
  margin: 12px 0 0;
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-size: 15px;
  line-height: 1.55;
}
body:not([data-eventid]) section#popular-events .card .card-content .read-more-button {
  height: auto;
  margin-left: 0;
  padding: 0 0 1px;
  border-radius: 0;
  border-bottom: 3px solid var(--ks-blue);
  background-color: transparent;
  box-shadow: none;
  color: var(--ks-deep);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
body:not([data-eventid]) section#popular-events .card .card-content .read-more-button:hover {
  color: var(--ks-ink);
  filter: none;
}
body:not([data-eventid]) section#popular-events .card .card-action {
  padding: 14px 24px 26px;
  border-top: 0;
  background-color: transparent;
}
/* dagny gör knappen 32px hög med radie 1px */
body:not([data-eventid]) section#popular-events .card .card-action a.btn.goto-button {
  height: 52px;
  padding: 0 28px;
  border-radius: var(--ks-radius);
  box-shadow: 0 4px 0 var(--ks-red-edge);
  font-size: 17px;
  line-height: 52px;
}

/* ---------------------------------------------------------------------------
 * 3. Buttons and the organizer theme classes
 * ------------------------------------------------------------------------- */
/* Primärknappen i svart */
.btn,
.btn-large {
  border-radius: var(--ks-radius);
  background-color: var(--ks-red);
  box-shadow: 0 3px 0 var(--ks-red-edge);
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background-color var(--ks-ease),
    color var(--ks-ease);
}
.btn:hover,
.btn-large:hover,
.btn:focus,
.btn-large:focus {
  background-color: var(--ks-red-hover);
  box-shadow: 0 3px 0 var(--ks-red-edge);
  color: var(--ks-white);
}
.btn:focus-visible,
.btn-large:focus-visible {
  outline: 2px solid var(--ks-ink);
  outline-offset: 3px;
}
.btn .waves-ripple,
.btn-large .waves-ripple {
  display: none;
}
.btn.btn-flat,
.btn-flat.btn-plain {
  background-color: transparent;
  box-shadow: none;
  color: var(--ks-deep);
}
.btn.disabled,
.btn-large.disabled,
.btn:disabled,
.btn-large:disabled {
  background-color: var(--ks-disabled) !important;
  box-shadow: none !important;
  color: var(--ks-disabled-ink) !important;
}
.theme-background-color {
  background-color: var(--ks-red);
  color: var(--ks-white);
}
.theme-background-color-on-hover:hover {
  background-color: var(--ks-red-hover);
  color: var(--ks-white);
}
.theme-background-color-override {
  background-color: var(--ks-red) !important;
}
.theme-text-color-override {
  color: var(--ks-white) !important;
}
.theme-secondary-background-color,
.theme-secondary-background-color:hover {
  background-color: var(--ks-red);
  color: var(--ks-white);
}
.theme-color,
.theme-secondary-color {
  color: var(--ks-red);
  fill: var(--ks-red);
}

/* ---------------------------------------------------------------------------
 * 4. Kalendern (vitt kort) och beskrivningen bredvid
 * ------------------------------------------------------------------------- */
section#active-events {
  margin-top: 0;
  padding-top: 24px;
}
section#active-events > .container {
  width: var(--ks-wrap);
  max-width: none;
  margin: 0 auto;
}
/* dagny: rad med wrap-reverse, kalendern först; här beskrivningen till vänster och kalendern till
   höger, staplade under 900px (nedan) */
.filter-calender-base {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 56px);
  width: 100%;
  margin-bottom: 8px;
}
#flex-info-wrapper.wrapper.info-text {
  order: -1;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.filter-calender-base #calendar-wrapper {
  flex: 0 0 min(440px, 100%);
  max-width: 440px;
}
.filter-calender-base #calendar-wrapper > div {
  max-height: none;
  padding: 0 18px 10px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-white);
  box-shadow: var(--ks-shadow);
}
.filter-calender-base .wrapper .calendar-header {
  padding: 22px 10px 8px;
}
.filter-calender-base .calendar-header .current-date {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 24px;
  /* dagny skriver månaden med gemen */
  text-transform: capitalize;
}
.filter-calender-base .calendar-header .icons {
  gap: 6px;
}
.filter-calender-base .calendar-header .icons span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 2px solid var(--ks-ink);
  border-radius: 50%;
  color: var(--ks-ink);
  line-height: 1;
  transition: background-color var(--ks-ease);
}
.filter-calender-base .calendar-header .icons span i.material-icons {
  display: block;
  font-size: 22px;
  line-height: 1;
}
.filter-calender-base .icons span:last-child {
  margin-right: 0;
}
.filter-calender-base .calendar-header .icons span:hover {
  background-color: var(--ks-hover);
}
.filter-calender-base .calendar-header .icons span.disabled,
.filter-calender-base .calendar-header .icons span.disabled:hover {
  opacity: 0.4;
  background-color: transparent;
}
.filter-calender-base .calendar li {
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-weight: 600;
  font-size: 15px;
}
.filter-calender-base .calendar .weeks li {
  color: var(--ks-ink);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Öppna dagar i krämvitt, få kvar i ljust guld, vald dag i svart */
.filter-calender-base .days li.selectable {
  color: var(--ks-ink);
  font-weight: 800;
}
.filter-calender-base .days li.selectable::before,
.filter-calender-base .days li.selectable.bookable::before {
  background-color: var(--ks-yellow);
  transition:
    background-color var(--ks-ease),
    box-shadow var(--ks-ease);
}
.filter-calender-base .days li.selectable.bookable.half-sold::before {
  background-color: var(--ks-orange);
}
.filter-calender-base .calendar .days li.selectable.selected {
  color: var(--ks-white);
}
.filter-calender-base .calendar .days li.selectable.selected::before {
  background-color: var(--ks-red);
  box-shadow: none;
}
.filter-calender-base .days li.selectable:not(.selected):hover::before {
  background: var(--ks-white);
  box-shadow: inset 0 0 0 2px var(--ks-ink);
}
.filter-calender-base .days li:not(.selectable):hover::before {
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * 5. Show listing
 * ------------------------------------------------------------------------- */
/* dagny döljer rader och månadsrubriker med .display-none; temat sätter display på dem */
section#active-events #show-listing .show-listing-show.display-none,
section#active-events #show-listing .show-listing-month.display-none {
  display: none !important;
}
section#active-events #show-listing {
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: var(--ks-shadow);
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
section#active-events #show-listing .month-name {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: capitalize;
}
section#active-events #show-listing > #show-listing-body .show-listing-show {
  border-bottom: 1px solid var(--ks-line);
  transition:
    background-color var(--ks-ease),
    box-shadow var(--ks-ease);
}
section#active-events #show-listing #show-listing-body .show-listing-show:hover {
  background-color: var(--ks-hover);
  box-shadow: inset 4px 0 0 var(--ks-accent);
}
section#active-events #show-listing > #show-listing-body .show-listing-show.unnumbered-show.expanded {
  background-color: var(--ks-hover);
  box-shadow: inset 4px 0 0 var(--ks-accent);
  border-bottom-color: transparent;
}
.dateball {
  background-color: var(--ks-sand);
}
.dateball span {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
}
.show-listing-show:hover .dateball,
.show-listing-show.expanded .dateball {
  background-color: var(--ks-yellow);
}
section#active-events .show-listing-show .dateball .no-date-show,
section#active-events .show-listing-show.expanded .no-date-show,
section#active-events .show-listing-show:hover .no-date-show {
  color: var(--ks-red);
}
section#active-events #show-listing > #show-listing-body .show-listing-show .large-screen-date {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: 15px;
}
section#active-events #show-listing > #show-listing-body .show-listing-show .show-name {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
section#active-events #show-listing > #show-listing-body .show-listing-show .price-range,
section#active-events #show-listing > #show-listing-body .show-listing-show .location-med-and-up {
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
section#active-events #show-listing > #show-listing-body .show-listing-show .large-screen-date .release-date,
section#active-events #show-listing > #show-listing-body .no-shows-available,
section#active-events #show-listing > #show-listing-body .n-shows-available {
  color: var(--ks-muted);
}
section#active-events #show-listing > #show-listing-body .arenaLocationLink,
section#active-events #show-listing .read-more-info-link {
  color: var(--ks-deep);
}
section#active-events #show-listing .show-listing-show .supply-blobs .supply-blob {
  background-color: var(--ks-line);
}
section#active-events #show-listing .show-listing-arrow i.material-icons.theme-color {
  color: var(--ks-red);
}
/* dagny sätter .theme-background-color på rutan från JS */
.sold-out-box {
  border-radius: var(--ks-radius);
  background-color: var(--ks-ink) !important;
  color: var(--ks-white) !important;
  font-family: var(--ks-font);
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * 6. Ticket cards
 * ------------------------------------------------------------------------- */
section#active-events .container .booking-contents.unnumbered-show {
  background-color: var(--ks-hover);
  box-shadow: inset 4px 0 0 var(--ks-accent);
}
section#active-events .container .booking-contents.unnumbered-show hr {
  border-top-color: var(--ks-line);
}
section#active-events .container .unnumbered-show h2 {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.unnumbered-show-container .supply-info.list-info {
  color: var(--ks-muted);
  font-family: var(--ks-font);
}
.unnumbered-show-container .show-category-row .show-category-container .show-category,
.unnumbered-show-container .show-category-row .show-category-container .show-category:has(div.available-at) {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-white);
  box-shadow: none;
  transition: box-shadow var(--ks-ease);
}
/* Kort med antal > 0: dagny tar bort .disabled från minusknappen så fort kortet har biljetter */
.unnumbered-show-container
  .show-category-row
  .show-category-container
  .show-category:has(.amount-blob.minus:not(.disabled)) {
  border-color: var(--ks-red);
  box-shadow: inset 0 0 0 1px var(--ks-red);
}
/* dagnys section#active-events .list-title (vikt 500, 13px) och .show-category-name.list-title (16px)
   är starkare än en klassregel */
section#active-events .show-category-container .show-category-name.list-title {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}
.show-category-container .show-category-info.list-info {
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-size: 14px;
  line-height: 1.5;
}
section#active-events .list-price {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}
section#active-events .read-more-info-link {
  color: var(--ks-deep);
  font-weight: 800;
}
/* Slutsåld kategori: dagny visar bandet med display: flex inline från JS. Här en mörk
   etikett där stegarna satt (de är inaktiva), så den aldrig täcker ett långt namn. */
.unnumbered-show-container
  .show-category-row
  .show-category-container
  .show-category:has(.sold-out-banner[style*='flex']) {
  border-style: dashed;
  background-color: var(--ks-strand);
}
.unnumbered-show-container
  .show-category-row
  .show-category-container
  .show-category:has(.sold-out-banner[style*='flex'])
  > :not(.sold-out-banner-container) {
  opacity: 0.6;
}
.unnumbered-show-container
  .show-category-row
  .show-category-container
  .show-category:has(.sold-out-banner[style*='flex'])
  .amount-blob-container {
  visibility: hidden;
}
section#active-events .container .booking-contents.unnumbered-show .sold-out-banner-container {
  top: auto;
  right: auto;
  bottom: 22px;
  left: 20px;
  z-index: 1;
  width: auto;
  height: auto;
  overflow: visible;
}
section#active-events .container .booking-contents.unnumbered-show .sold-out-banner-container .sold-out-banner {
  position: static;
  width: auto;
  padding: 5px 14px;
  border-radius: var(--ks-radius);
  background-color: var(--ks-ink);
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  transform: none;
}
.unnumbered-show-container .show-category-row .show-category-container .show-category .sold-out-message {
  color: var(--ks-red);
}
/* "Fåtal kvar!": signalgult med bläck som text (9,9:1) */
.unnumbered-show-container .indicator-limit,
.unnumbered-show-container .indicator-limit.absolute-right {
  top: -12px;
  right: 14px;
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--ks-radius);
  background: var(--ks-orange);
  box-shadow: none;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.unnumbered-show-container .indicator-limit > i {
  display: none;
}
/* "Kampanj" på kategorier som en kampanjkod låst upp: en grön etikett på kortets överkant */
section#active-events .container .booking-contents.unnumbered-show .show-category > .campaign {
  top: -12px;
  right: auto;
  left: 18px;
  height: auto;
  padding: 3px 10px;
  border-radius: var(--ks-radius);
  background-color: var(--ks-green-ink);
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}
section#active-events .container .unnumbered-show .unnumbered-campaign-attention {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: 14px;
}
/* Runda stegare med 40px klickyta. dagny krymper dem till 27px mellan 991 och 1150px med en selektor
   från ett id och sju klasser; den här är en klass starkare. */
section#active-events .container .booking-contents.unnumbered-show .amount-blob-container {
  gap: 6px;
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.plus,
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.minus {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 20px;
  transition:
    background-color var(--ks-ease),
    border-color var(--ks-ease);
}
/* Plus som primärknappen (röd med skuggkant), minus som konturknappen */
.booking-contents .amount-blob.plus {
  border: 2px solid var(--ks-red);
  background-color: var(--ks-red);
  box-shadow: 0 3px 0 var(--ks-red-edge);
  color: var(--ks-white);
}
.booking-contents .amount-blob.plus:hover {
  border-color: var(--ks-red-hover);
  background-color: var(--ks-red-hover);
}
.booking-contents .amount-blob.minus {
  border: 2px solid var(--ks-ink);
  background-color: var(--ks-white);
  color: var(--ks-ink);
}
.booking-contents .amount-blob.minus:hover {
  background-color: var(--ks-hover);
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.amount {
  width: 32px;
  height: 40px;
  margin: 0;
  border: 0;
  background-color: transparent;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 17px;
  line-height: 40px;
}
.booking-contents .amount-blob .amount-indicator {
  color: inherit;
  font-size: inherit;
}
.booking-contents .amount-blob.amount.zero,
.booking-contents .amount-blob.amount.zero .amount-indicator {
  color: var(--ks-muted);
}
.booking-contents .amount-blob.disabled {
  border-color: var(--ks-line);
  background-color: var(--ks-white) !important;
  box-shadow: none;
  color: var(--ks-line-strong);
}
/* En kategori med senare släpp: dagny lägger "Släpps"-chippet över stegarna och räknar med att de
   är vita på vitt; en ram kring dem sticker ut runt chippet. */
.booking-contents .amount-blob-container:has(> .available-at) .amount-blob {
  visibility: hidden;
}
/* dagnys eget chip är vit text på #999, alltså 2,9:1 */
.booking-contents .available-at {
  border-radius: var(--ks-radius);
  background-color: var(--ks-sand);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
}
.booking-contents .available-at span,
.booking-contents .available-at i {
  color: var(--ks-ink);
}
/* Karusellpilarna över korten på smala skärmar: dagny ritar vita rundlar med blå ikon. Knappen
   har Materializes .white (vit bakgrund med !important) och ikonen en egen vit bakgrund. */
.unnumbered-show-container .category-slider a.btn-floating.addons-slider {
  background-color: var(--ks-red) !important;
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.25);
}
.unnumbered-show-container .category-slider a.btn-floating.addons-slider i.material-icons {
  background-color: transparent;
  color: var(--ks-white);
}
.unnumbered-show-container a.btn.open-addons {
  background-color: var(--ks-red) !important;
  color: var(--ks-white) !important;
}
/* Summan och köpknappen under korten; dagny hårdkodar knappen orange */
div#add-to-basket-cart .btn,
div#add-to-basket-cart .valign-wrapper {
  border-radius: var(--ks-radius);
  background-color: var(--ks-red);
  color: var(--ks-white);
}
div#add-to-basket-cart:hover .btn {
  background-color: var(--ks-red-hover);
}
#extend-time-button {
  background-color: var(--ks-red);
  color: var(--ks-white);
}

/* ---------------------------------------------------------------------------
 * 7. Checkout: vitt, krämvita rader, svart där man agerar
 * ------------------------------------------------------------------------- */
.modal__bg {
  background-color: rgba(30, 30, 30, 0.8);
}
.modal__content {
  background-color: var(--ks-strand);
  color: var(--ks-ink);
}
section#booking.payment-page.klarna {
  background-color: var(--ks-strand) !important;
  background-image: none !important;
}
/* dagny mörkar kassans bakgrund till 70 % med ett ::before som ärver den (gjort för den blå bilden);
   på en ljus bakgrund blir det en grå yta där kassans vita rubrik knappt syns */
.payment-page.klarna::before {
  display: none;
}
section#booking.payment-page header.booking-header {
  color: var(--ks-ink);
}
section#booking .booking-contents .payment-list {
  background-color: var(--ks-strand);
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
/* dagny centrerar listan med left: 50% + translate(-50%, 0), men slideInUp från animate.css
   ersätter den transformen under sina 0,3 s, så listan glider in med vänsterkanten mitt på skärmen
   och hoppar sedan en halv bredd åt vänster. Samma glid, med centreringen kvar. Under 600px hoppar
   dagny över animationen och centrerar med marginaler i stället. */
@media (min-width: 601px) {
  section#booking .booking-contents .payment-list.animated.slideInUp {
    animation-name: ks-payment-list-slide-in;
  }
}
/* dagny ger listan 90 % av höjden mot botten, så en tiondel av fönstret står tom ovanför; lämna bara
   plats för kassans rubrikrad (60px). Telefoner behåller dagnys mått, där rubriken ofta är två rader. */
@media (min-width: 601px) {
  section#booking .booking-contents .payment-list {
    height: calc(100% - 76px);
  }
}
@keyframes ks-payment-list-slide-in {
  from {
    transform: translate3d(-50%, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
section#booking .booking-contents .payment-list header.payment-section-header h2 {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
}
/* dagnys fasta 50/50-kolumner låter en bred rubrik löpa in under "Säkra betalningar". Låt
   kolumnerna ta sin innehållsbredd och den högra falla ned när raden blir för smal. */
section#booking .booking-contents .payment-list header.payment-section-header {
  flex-wrap: wrap;
  gap: 4px 16px;
}
section#booking .booking-contents .payment-list header.payment-section-header > .col.s6 {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  /* Materialize ger varje .col margin-left: auto, vilket i en flexrad puttar rubriken åt höger */
  margin-left: 0;
}
section#booking .booking-contents .payment-list header.payment-section-header > .col.s6:last-child {
  margin-left: auto;
}
section#booking .booking-contents .payment-list header.payment-section-header p {
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
section#booking .booking-contents .payment-list header.payment-section-header p span:not(.spacer) {
  border-radius: var(--ks-radius);
  background: var(--ks-red);
  color: var(--ks-white);
}
section#booking.payment-page .booking-contents .payment-list .list-box .voucher-code-used,
section#booking.payment-page .booking-contents .payment-list .list-box .voucher-code-input,
section#booking.payment-page .booking-contents .payment-list .list-box .addon,
section#booking.payment-page .booking-contents .payment-list .list-box .addon-empty,
section#booking.payment-page .booking-contents .payment-list .list-box .ticket,
section#booking.payment-page .booking-contents .payment-list .list-box .used-voucher-code {
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: 0 0 0 1px var(--ks-line);
}
section#booking.payment-page .booking-contents .payment-list .list-box .empty {
  border-color: var(--ks-line);
  background-color: var(--ks-strand);
}
section#booking.payment-page .booking-contents .payment-list .list-box-background {
  background-color: var(--ks-white);
}
section#booking .list-title {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
}
section#booking .list-info {
  color: var(--ks-muted);
}
section#booking .list-price,
section#booking.payment-page .booking-contents .payment-list .summary-ticket-price,
section#booking.payment-page .booking-contents .payment-list .summary-details-price {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
}
section#booking.payment-page .booking-contents .payment-list i.material-icons {
  color: var(--ks-deep);
}
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container,
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container.gdpr-container,
section#booking.payment-page .booking-contents .payment-list .detail-container.minimal-shade {
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: none;
  color: var(--ks-ink);
}
section#booking.payment-page.klarna .booking-contents .payment-list #details #details-list .expandable-detail {
  background-color: var(--ks-strand);
}
/* Grupprubrikerna ("Biljetter", "Tillval") och avdelaren i den utfällda ordern tar ingen färg från temat */
section#booking.payment-page .booking-contents .payment-list #details #details-list .expandable-detail h3 {
  color: var(--ks-red);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
section#booking .booking-contents .payment-list .payment-section .content hr,
section#booking.payment-page .booking-contents .payment-list #details #details-list .expandable-detail hr {
  border-top-color: var(--ks-line);
}
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container p {
  color: var(--ks-ink);
}
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container p a {
  color: var(--ks-deep);
}
section#booking.payment-page .booking-contents .payment-list #details .klarna-detail-container {
  border-top-color: var(--ks-line);
}
/* Klarnas kassa är en iframe vi inte kan styla och den är vit */
section#booking.payment-page .booking-contents .payment-list #klarna-box.list-box.list-box-background {
  background-color: var(--ks-white);
  color: var(--ks-ink);
}
/* Försäkring: slussgrön när man är försäkrad, röd när man tackar nej (avsnitt 11). Nyckla på den
   ikryssade radioknappen, som uppdateras före dagnys .selected/.not-selected. */
section#booking.payment-page.klarna .booking-contents .payment-list #details #details-list .insurance-detail-container,
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container.selected,
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .expandable-detail {
  background-color: var(--ks-white);
}
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container.selected
  .expandable-detail {
  background-color: var(--ks-white) !important;
}
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row.not-selected,
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row:has(.no [type='radio']:checked) {
  background-color: var(--ks-red);
  color: var(--ks-white);
}
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row.selected,
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row:has(.yes [type='radio']:checked) {
  background-color: var(--ks-green-ink);
  color: var(--ks-white);
}
section#booking .payment-list a.basket-color,
section#booking .payment-list .basket-color {
  color: var(--ks-deep) !important;
}
.basket-cart-change-order h3 {
  color: var(--ks-deep);
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card {
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: none;
  color: var(--ks-ink);
}
/* dagny lägger namnet i en col s7 och priset i en col s5 med 10px luft i varje, så namnet får ~90px
   och "Premiumbiljetter" delas mitt i ordet. Kortet har fast höjd (210px) och "Ja, tack" ligger
   absolut i botten, så priset kan inte flytta till en egen rad. Som flexrad tar priset bara sin
   bredd och namnet resten (~118px i ett 220px-kort, "Premiumbiljetter" i 14px är 107-112px). */
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-title.row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-title.row::after {
  content: none;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-title.row > .col {
  float: none;
  width: auto;
  margin-left: 0;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-name {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-price {
  flex: 0 0 auto;
  padding-left: 0;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-content p {
  color: var(--ks-muted);
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-content p a,
section#booking.payment-page .payment-list #addons .card.simple-addon-card .read-more-button {
  color: var(--ks-deep) !important;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-action {
  background-color: transparent;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-action label {
  color: var(--ks-ink);
}
section#booking.payment-page .booking-contents .payment-list #addons .card-container .banner {
  background-color: var(--ks-yellow);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
section#booking.payment-page.klarna .booking-contents .payment-list .premium-ticket-detail-container::after {
  display: none;
}
section#booking .booking-contents .payment-list label[for='accept-terms'] {
  color: var(--ks-ink);
}
section#booking .booking-contents .payment-list a.terms-link,
section#booking .booking-contents .payment-list a.cancellation-insurance-info {
  color: var(--ks-deep);
  text-decoration: underline;
  text-decoration-color: var(--ks-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
section#booking.payment-page .payment-list .input-field label {
  color: var(--ks-muted);
}
section#booking.payment-page .payment-list .input-field input[type='email']:focus + label,
section#booking.payment-page .payment-list .input-field input[type='tel']:focus + label,
section#booking.payment-page .payment-list .input-field input[type='text']:focus + label,
section#booking.payment-page .payment-list .input-field .prefix.active {
  color: var(--ks-deep);
}
section#booking.payment-page .payment-list .input-field input[type='text']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='email']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='tel']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='number']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='password']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='search']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='url']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='date']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field input[type='time']:focus:not([readonly]),
section#booking.payment-page .payment-list .input-field textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--ks-deep);
  box-shadow: 0 1px 0 0 var(--ks-deep);
}
section#booking.payment-page
  .booking-contents
  .payment-list
  input[type='checkbox'].filled-in:checked:not([disabled])
  + label:after {
  border: 2px solid var(--ks-red);
  background-color: var(--ks-red);
}
section#booking [type='radio'].with-gap:checked + label:before,
section#booking [type='radio'].with-gap:checked + label:after {
  border: 2px solid var(--ks-red);
}
section#booking [type='radio'].with-gap:checked + label:after {
  background-color: var(--ks-red);
}
button#addon-modal-go-back {
  background-color: var(--ks-red) !important;
  color: var(--ks-white) !important;
}
/* "Läs mer" på premium-/tillvalskortet: dagny målar skalet blått (#3644aa) */
section#booking.payment-page #premium-ticket-modal .premium-ticket-modal-inner,
section#booking.payment-page #addon-modals .addon-modal {
  border: 0;
  border-radius: var(--ks-radius);
  background-color: var(--ks-ink);
  box-shadow: 0 24px 60px rgba(30, 30, 30, 0.35);
}
section#booking.payment-page #premium-ticket-modal .description-header .light-or-dark-color,
section#booking.payment-page #addon-modals .addon-modal .description-header .light-or-dark-color {
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
}
section#booking.payment-page #premium-ticket-modal .description-info,
section#booking.payment-page #addon-modals .addon-modal .description-info {
  overflow: hidden;
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  color: var(--ks-ink);
}
section#booking.payment-page
  #premium-ticket-modal
  .description-info
  #event-description-details
  #short-event-description
  > h1,
section#booking.payment-page
  #addon-modals
  .addon-modal
  .description-info
  #event-description-details
  #short-event-description
  > h1 {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 26px;
  text-transform: none;
}
section#booking.payment-page #premium-ticket-modal .description-info #event-description-details #long-description,
section#booking.payment-page #premium-ticket-modal .description-info #event-description-details #long-description p,
section#booking.payment-page #addon-modals .addon-modal .description-info #event-description-details #long-description,
section#booking.payment-page
  #addon-modals
  .addon-modal
  .description-info
  #event-description-details
  #long-description
  p {
  color: var(--ks-ink);
}
section#booking.payment-page #premium-ticket-modal .description-info a,
section#booking.payment-page #addon-modals .addon-modal .description-info a {
  color: var(--ks-deep) !important;
}
/* Villkors- och "läs mer"-modalerna (försäkring, arrangörens villkor, tillval, kunduppgifter): dagnys
   egen ruta är 350px bred med en grå stängkvadrat, 13px rubrik och en klassisk rullist. */
section#booking .modal {
  border: 0;
  border-top: 4px solid var(--ks-accent);
  border-radius: var(--ks-radius);
  background-color: var(--ks-strand);
  box-shadow: 0 24px 60px rgba(30, 30, 30, 0.35);
  color: var(--ks-ink);
}
section#booking.payment-page .booking-contents .payment-list #customer-data-modal,
section#booking.payment-page .booking-contents .payment-list #insurance-terms-modal,
section#booking.payment-page .booking-contents .payment-list #read-more-about-simple-addon-modal,
section#booking.payment-page .booking-contents .payment-list #terms-modal {
  max-width: 520px;
  scrollbar-width: thin;
  scrollbar-color: var(--ks-accent) transparent;
}
section#booking .modal::-webkit-scrollbar {
  width: 8px;
}
section#booking .modal::-webkit-scrollbar-track {
  background: transparent;
}
section#booking .modal::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--ks-accent);
}
section#booking.payment-page .booking-contents .payment-list #customer-data-modal .close-modal,
section#booking.payment-page .booking-contents .payment-list #insurance-terms-modal .close-modal,
section#booking.payment-page .booking-contents .payment-list #read-more-about-simple-addon-modal .close-modal,
section#booking.payment-page .booking-contents .payment-list #terms-modal .close-modal {
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  line-height: 40px;
}
section#booking .modal .close-modal:hover {
  background-color: var(--ks-hover);
}
section#booking.payment-page .booking-contents .payment-list .modal .close-modal i.material-icons {
  color: var(--ks-ink);
}
section#booking.payment-page .booking-contents .payment-list #customer-data-modal .modal-content,
section#booking.payment-page .booking-contents .payment-list #insurance-terms-modal .modal-content,
section#booking.payment-page .booking-contents .payment-list #read-more-about-simple-addon-modal .modal-content,
section#booking.payment-page .booking-contents .payment-list #terms-modal .modal-content {
  padding: 52px 34px 36px;
}
section#booking .modal .modal-content h1 {
  margin: 0 0 16px;
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  text-transform: none;
}
section#booking .modal .modal-content h2,
section#booking .modal .modal-content h3 {
  margin: 20px 0 8px;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 17px;
}
section#booking .modal .modal-content p,
section#booking .modal .modal-content li,
section#booking.payment-page .booking-contents .payment-list #insurance-terms-modal #insurance-terms p,
section#booking.payment-page .booking-contents .payment-list #terms-modal .modal-content p {
  margin: 0 0 14px;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: 15px;
  line-height: 1.6;
}
section#booking .modal .modal-content li::marker {
  color: var(--ks-accent);
}
/* Arrangörens villkor och integritetspolicy är inklistrad HTML (Word, webbredigerare) med egna
   inline-färger och typsnitt, ofta svart Arial: på en mörk modal syns den inte alls. Allt innehåll tar
   modalens färg och temats typsnitt; ikonerna (i) lämnas, de är Material Icons-ligaturer. */
section#booking .modal .modal-content *:not(i) {
  color: inherit !important;
  font-family: var(--ks-font) !important;
}
section#booking .modal .modal-content h1:not(i) {
  font-family: var(--ks-display) !important;
}
/* Sista stycket i försäkringsvillkoren har inline color: black på sin länk */
section#booking .modal .modal-content a {
  color: var(--ks-deep) !important;
}
/* På telefon sträcker dagny ut "Läs mer"-modalen över hela höjden, så dess rubrik hamnar under
   kassans egen titelrad och kryss. Modalen har en egen bakåtpil. */
@media (max-width: 600px) {
  section#booking.payment-page:has(#premium-ticket-modal .premium-ticket-modal-inner:not(.display-none))
    header.booking-header,
  section#booking.payment-page:has(#addon-modals .addon-modal:not(.display-none)) header.booking-header {
    visibility: hidden;
  }
}
/* Kivra-modalerna (kivraModals.jsp: personnummer, lyckad, misslyckad, inget konto). dagny ger
   knapparna och rubriken färg med !important och etiketten en inline-färg (#767676), så här krävs
   !important också. Kivras gröna logga står kvar. */
.kivra-overlay {
  background: rgba(30, 30, 30, 0.7);
}
.kivra-dialog {
  border-top: 4px solid var(--ks-accent);
  border-radius: var(--ks-radius);
  background: var(--ks-strand);
  box-shadow: 0 24px 60px rgba(30, 30, 30, 0.35);
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
.kivra-dialog .kivra-dialog-title {
  color: var(--ks-ink) !important;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
}
.kivra-dialog p {
  color: var(--ks-ink);
}
.kivra-dialog .kivra-dialog-input-lable {
  color: var(--ks-ink) !important;
}
.kivra-dialog .kivra-input {
  border: 1px solid var(--ks-line-strong) !important;
  border-radius: var(--ks-radius) !important;
  color: var(--ks-ink) !important;
}
.kivra-dialog .kivra-input:focus {
  border-color: var(--ks-deep) !important;
}
#kivra-verify-submit,
#kivra-success-ok,
#kivra-failed-yes-sms,
#kivra-noaccount-yes-sms {
  border: 0 !important;
  border-radius: var(--ks-radius);
  background-color: var(--ks-red) !important;
  color: var(--ks-white) !important;
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 15px !important;
  text-transform: none !important;
}
#kivra-verify-submit:hover,
#kivra-success-ok:hover,
#kivra-failed-yes-sms:hover,
#kivra-noaccount-yes-sms:hover {
  background-color: var(--ks-red-hover) !important;
}
.kivra-dialog .kivra-link-button {
  color: var(--ks-deep);
  font-family: var(--ks-font);
  font-weight: 800;
}
.kivra-dialog .kivra-error {
  color: var(--ks-red);
}

/* ---------------------------------------------------------------------------
 * 7b. Small JS modals (info, kö, kampanjkod, försläppskod): dagny målar dem blå
 * ------------------------------------------------------------------------- */
.nortic-modal-overlay {
  background-color: var(--ks-ink);
}
.nortic-modal {
  overflow-x: hidden;
  border: 0;
  border-top: 4px solid var(--ks-accent);
  border-radius: var(--ks-radius);
  background-color: var(--ks-strand);
  box-shadow: 0 24px 60px rgba(30, 30, 30, 0.35);
  color: var(--ks-ink);
}
.nortic-modal h3 {
  margin-bottom: 24px;
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 26px;
  text-transform: none;
}
.nortic-modal h3 i.material-icons {
  color: var(--ks-accent);
}
.nortic-modal p {
  color: var(--ks-ink);
  opacity: 1;
}
.nortic-modal .close-button i.material-icons {
  color: var(--ks-ink);
}
/* dagny ger fältet width: 110% och margin-left: -5%, vilket ger en vågrät rullist i modalen */
.nortic-modal .input-field.big-ass-input-field {
  overflow: hidden;
  width: 100%;
  margin-left: 0;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius);
  box-shadow: none;
}
.nortic-modal .input-field.big-ass-input-field input[type='text'] {
  color: var(--ks-ink);
}
.nortic-modal .input-field.big-ass-input-field input[type='text']::placeholder {
  color: var(--ks-muted);
}
.nortic-blue-background,
.big-ass-input-field div.flat-button {
  border-radius: var(--ks-radius);
  background-color: var(--ks-red);
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
}
.big-ass-input-field div.flat-button:hover {
  background-color: var(--ks-red-hover);
}
.big-ass-input-field div.flat-button.disabled {
  background-color: var(--ks-disabled);
  color: var(--ks-disabled-ink);
}

/* ---------------------------------------------------------------------------
 * 8. Floating basket
 * ------------------------------------------------------------------------- */
div#basket,
div#basket-cart,
div#basket-cart-go-to-payment,
div#addons-basket {
  background-color: var(--ks-red);
  color: var(--ks-white);
  font-family: var(--ks-font);
}
div#basket .price,
div#addons-basket .price,
div#basket-cart .title-container,
div#basket-cart-go-to-payment .text-wrapper {
  color: var(--ks-white);
  font-family: var(--ks-font);
  font-weight: 800;
}
div#basket .amount-blob,
div#basket .proceed-arrow-blob,
div#addons-basket .amount-blob,
div#addons-basket .proceed-arrow-blob,
div#basket-cart .amount-blob,
div#basket-cart-go-to-payment .payment-blob {
  background-color: var(--ks-yellow);
}
div#basket .amount-blob .icon i.material-icons,
div#basket .amount-blob .amount,
div#addons-basket .amount-blob .amount,
div#basket .proceed-arrow-blob .proceed-arrow,
div#addons-basket .amount-blob i.material-icons,
div#basket-cart .amount-blob .icon i.material-icons,
div#basket-cart-go-to-payment .payment-blob i.material-icons {
  color: var(--ks-ink);
}
div#basket-cart .chip {
  background-color: var(--ks-yellow);
  color: var(--ks-ink);
}
/* Antalet på rundeln: egen bricka med luft kring siffran och en röd ring mot den gula rundeln */
div#basket-cart .amount-blob .chip.amount {
  top: -7px;
  right: -9px;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  margin: 0;
  padding: 0 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--ks-red);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
/* dagnys rundel är 50px i en 56px hög knapp, 3px från kanten; ge den luft mot kanten */
div#basket-cart .amount-blob,
div#basket-cart-go-to-payment .payment-blob {
  top: 6px;
  left: 6px;
  width: 44px;
  height: 44px;
}
/* 20px ikon mitt i 44px rundel */
div#basket-cart .amount-blob .icon,
div#basket-cart-go-to-payment .payment-blob .icon {
  top: 12px;
  left: 12px;
  line-height: 0;
}
div#basket-cart .amount-blob .icon i.material-icons,
div#basket-cart-go-to-payment .payment-blob .icon i.material-icons {
  font-size: 20px;
}
/* dagny hårdkodar hovern på de två till #5966a9 */
div#basket-cart:hover,
div#basket-cart-go-to-payment:hover {
  background-color: var(--ks-red-hover);
}
div#basket-overlay {
  background-color: var(--ks-ink);
}
/* dagny ger #basket en fast bredd på 170px och en 60px prisruta som krockar med pilcirkeln vid
   priser som "200 SEK". Bredda pillret och låt priset ligga centrerat mellan cirklarna. */
div#basket {
  width: 224px;
}
div#basket .price-container {
  left: 58px;
  right: 58px;
  width: auto;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 8a. Varukorgsöversikten (#cart-overview-modal, "Din order")
 * ------------------------------------------------------------------------- */
/* Materialize-modal utanför kassan: dagny ger den blå räknare (#303d9b), grå text, rundade
   skuggade rader och en röd papperskorg vid hover */
.modal-overlay {
  background-color: var(--ks-ink);
}
#cart-overview-modal.modal {
  border-top: 4px solid var(--ks-accent);
  border-radius: var(--ks-radius);
  background-color: var(--ks-strand);
  box-shadow: 0 24px 60px rgba(30, 30, 30, 0.35);
  color: var(--ks-ink);
  font-family: var(--ks-font);
}
#cart-overview-modal .shopping-cart-overview-section-header > .col:first-child {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 26px;
}
#cart-overview-modal .shopping-cart-overview-section-header p {
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#cart-overview-modal .shopping-cart-overview-section-header span {
  min-width: 28px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--ks-radius);
  background: var(--ks-red);
  color: var(--ks-white);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}
#cart-overview-modal .shopping-cart-overview-tickets .detail-container {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  box-shadow: none;
}
#cart-overview-modal .shopping-cart-overview-tickets .list-title {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 15px;
}
#cart-overview-modal .shopping-cart-overview-tickets .list-info {
  color: var(--ks-muted);
  font-family: var(--ks-font);
  font-size: 14px;
  line-height: 1.4;
}
#cart-overview-modal .shopping-cart-overview-tickets .list-price,
#cart-overview-modal .shopping-cart-overview-tickets .ticket-price {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 15px;
}
#cart-overview-modal .shopping-cart-overview-tickets #details-list .detail i.material-icons {
  color: var(--ks-deep);
}
#cart-overview-modal .shopping-cart-overview-tickets .shopping-cart-delete-sub-order i.material-icons:hover {
  color: var(--ks-red);
}
#cart-overview-modal .shopping-cart-overview-tickets .expandable-detail {
  border-bottom-color: var(--ks-line);
  background-color: var(--ks-strand);
}
#cart-overview-modal h3 {
  color: var(--ks-red);
  font-family: var(--ks-font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
}
#cart-overview-modal hr {
  border-top-color: var(--ks-line);
}
#cart-overview-modal .shopping-cart-overview-tickets .ticket,
#cart-overview-modal .shopping-cart-overview-tickets .addon,
#cart-overview-modal .shopping-cart-overview-tickets .discount {
  border-radius: var(--ks-radius);
  background-color: var(--ks-strand);
  box-shadow: 0 0 0 1px var(--ks-line);
}
/* "Till kassan" är handlingen; "Töm varukorg" blir stilguidens konturknapp */
#cart-overview-modal .shopping-cart-overview-buttons #basket-cart-overview-clear.btn {
  background-color: var(--ks-white);
  box-shadow: inset 0 0 0 2px var(--ks-ink);
  color: var(--ks-ink);
}
#cart-overview-modal .shopping-cart-overview-buttons #basket-cart-overview-clear.btn:hover {
  background-color: var(--ks-hover);
  color: var(--ks-ink);
}

/* ---------------------------------------------------------------------------
 * 9. Smala skärmar
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Beskrivningen ovanför kalendern, båda i full bredd */
  .filter-calender-base {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-calender-base #calendar-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  :root {
    --ks-pad: 18px;
    --ks-photo: 56vw;
  }
  header#main-header::before {
    top: 11px;
    left: 60px;
    width: 126px;
    height: 42px;
  }
  body:not([data-eventid]) header#main-header::before {
    left: var(--ks-pad);
  }
  section#active-events > .container {
    margin: 0 auto;
  }
  section#active-events #show-listing {
    margin-top: 24px;
  }
  section#active-events #show-listing .month-name {
    font-size: 22px;
  }
  /* Veckodagarna och månaden får inte plats i full storlek på 320px */
  .filter-calender-base #calendar-wrapper > div {
    padding: 0 10px 8px;
  }
  .filter-calender-base .calendar-header .current-date {
    font-size: 21px;
  }
  .filter-calender-base .calendar-header .icons span {
    width: 36px;
    height: 36px;
  }
  .filter-calender-base .calendar .weeks li {
    font-size: 11px;
    letter-spacing: 0;
  }
  section#active-events #show-listing .show-listing-show .combined-name-and-info .show-name {
    color: var(--ks-ink);
    font-family: var(--ks-font);
    font-weight: 800;
    font-size: 15px;
    text-transform: none;
  }
  section#active-events #show-listing .show-listing-show .combined-name-and-info .price-range {
    color: var(--ks-ink);
    font-family: var(--ks-font);
  }
  section#active-events #show-listing .show-listing-show .show-info-small {
    color: var(--ks-muted);
  }
  /* Footern: dagny låser den till 80px och länkarna till en rad, så de rinner ut till höger.
     Loggan på egen rad, länkarna radbryts, ingen fast höjd. */
  footer.page-footer,
  footer.page-footer > .container > .row {
    height: auto;
  }
  footer.page-footer > .container > .row {
    margin: 0;
    padding: 26px 0 28px;
  }
  footer.page-footer #left-column {
    flex-wrap: wrap;
    gap: 12px 20px;
    width: 100%;
    padding: 0;
    line-height: 1.4;
  }
  footer.page-footer #left-column a#nortic-footer-link {
    top: 0;
    flex-basis: 100%;
    height: auto;
    line-height: 0;
  }
  footer #divider {
    display: none;
  }
  footer.page-footer #left-column > a:not(#nortic-footer-link) {
    height: auto;
    margin-right: 0;
    line-height: 1.4;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-large,
  section#active-events #show-listing > #show-listing-body .show-listing-show,
  .filter-calender-base .days li.selectable::before,
  .unnumbered-show-container .show-category-row .show-category-container .show-category,
  body:not([data-eventid]) section#popular-events .card.card-background-color {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
/* ---------------------------------------------------------------------------
 * 10. Kungl. Hovstaterna
 * ------------------------------------------------------------------------- */
/* Headern som på kungahuset.se: vit, riksvapnet i grå linjeteckning och namnet i versaler med bred
   spärrning bredvid, en hårfin linje under */
header#main-header {
  background-color: var(--ks-white);
  box-shadow: inset 0 -1px 0 var(--ks-line);
}
header#main-header::before {
  top: 6px;
  width: 54px;
  height: 52px;
  background: url('assets/riksvapnet-linje.webp') no-repeat center / contain;
}
header#main-header::after {
  content: 'Kungl. Hovstaterna';
  position: absolute;
  top: 0;
  left: calc(max(70px, (100% - var(--ks-max)) / 2) + 72px);
  display: flex;
  align-items: center;
  height: 64px;
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: var(--ks-track);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
body:not([data-eventid]) header#main-header::after {
  left: calc(max(var(--ks-pad), (100% - var(--ks-max)) / 2) + 72px);
}
/* Rubriker i DM Serif Display (en vikt, 400) som på sajten: titeln, visningens namn, kategorierna,
   kassans rader och modalernas rubriker, och rubriker i inklistrade beskrivningar och villkor (som
   reglerna för inklistrad HTML annars tvingar till Source Sans) */
section#active-events #show-listing > #show-listing-body .show-listing-show .show-name,
section#active-events #show-listing .show-listing-show .combined-name-and-info .show-name,
section#active-events .show-category-container .show-category-name.list-title,
section#active-events .container .unnumbered-show h2,
section#booking .list-title,
#cart-overview-modal .shopping-cart-overview-tickets .list-title,
#cart-overview-modal h3,
.nortic-modal h3,
body:not([data-eventid]) section#popular-events .card .card-header h3,
.filter-calender-base .calendar-header .current-date,
section#active-events .list-price {
  font-family: var(--ks-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
section#top div.event-information > span#event-information-text :is(h1, h2, h3, h4, h5, h6),
#flex-info-wrapper div.event-information > span#event-information-text :is(h1, h2, h3, h4, h5, h6),
section#booking .modal .modal-content :is(h1, h2, h3, h4, h5, h6):not(i) {
  font-family: var(--ks-display) !important;
  font-weight: 400;
}
div#main-ribbon > h1 {
  color: var(--ks-ink);
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* En hårfin linje under rubrik och text, som sajtens avdelare */
div#main-ribbon::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 32px;
  background-color: var(--ks-line);
}
/* Etiketter i versaler med bred spärrning, som sajtens brödsmulor och menyrad */
div#main-ribbon .event-info,
section#active-events #show-listing > #show-listing-body .show-listing-show .large-screen-date .capitalize.bold,
body:not([data-eventid]) section#popular-events .card .card-content .place,
section#booking .booking-contents .payment-list header.payment-section-header p,
section#active-events #show-listing .month-name,
section#active-events #show-listing .show-listing-month.fake-month .month-name {
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--ks-track);
  text-transform: uppercase;
}
div#main-ribbon .event-info {
  color: var(--ks-ink) !important;
}
div#main-ribbon .event-info > i.material-icons {
  color: var(--ks-muted);
}
/* Knappar: raka hörn, versaler med spärrning, #333 med vit text och svart vid hover */
.btn,
.btn-large,
div#add-to-basket-cart .btn,
.big-ass-input-field div.flat-button {
  box-shadow: none;
  font-family: var(--ks-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn:hover,
.btn-large:hover,
.btn:focus,
.btn-large:focus {
  box-shadow: none;
}
/* "Gå till" på eventkorten och biljettknappen: som sajtens "Läs mer om …"-länkar, med pil */
body:not([data-eventid]) section#popular-events .card .card-action a.btn.goto-button::after {
  content: '  →';
  white-space: pre;
}
section#active-events #show-listing .show-listing-show .show-listing-arrow .btn i.material-icons {
  color: inherit;
}
div#basket .price,
div#addons-basket .price,
div#basket-cart .title-container,
div#basket-cart-go-to-payment .text-wrapper {
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* Beskrivningen är ofta inklistrad (Word, webbredigerare) med egna typsnitt och storlekar inline */
section#top div.event-information > span#event-information-text *,
#flex-info-wrapper div.event-information > span#event-information-text * {
  font-family: var(--ks-font) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
/* Etiketterna i heron radbryts i stället för att klippas på telefon (dagny flyter raden och låter den
   scrolla i sidled) */
div#main-ribbon .slider-wrapper {
  display: flow-root;
  overflow: visible;
}
div#main-ribbon .slider-wrapper .slider-inner {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  float: none;
  white-space: normal;
}
section#top #background-container {
  background-color: var(--ks-stone);
}
/* Organisatörssidan: Hovstaterna har ingen egen bild uppladdad, så dagny visar sin blå reservbild
   (organizer_fallback.png). Här är heron en varmgrå platta med riksvapnet i linjeteckning, som
   vapnet bredvid rubriken på kungahuset.se. Laddar de upp en bild senare ska regeln bort, annars
   döljer den bilden. */
body:not([data-eventid]) {
  --ks-photo: min(40vw, 320px);
}
body:not([data-eventid]) section#top #background-container {
  background: var(--ks-stone) url('assets/riksvapnet-linje.webp') no-repeat center / auto min(64%, 160px) !important;
}
/* Eventkorten som sajtens bildkort: bild överst och en isblå list med rubrik och pil */
body:not([data-eventid]) section#popular-events > .container:has(.card)::before {
  content: 'Kalendarium';
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.2;
}
body:not([data-eventid]) section#popular-events .card.card-background-color {
  border: 0;
  background-color: var(--ks-ice);
}
body:not([data-eventid]) section#popular-events .card .card-header h3 {
  font-size: 22px;
  line-height: 1.25;
}
@media (hover: hover) {
  body:not([data-eventid]) section#popular-events .card.card-background-color:hover {
    box-shadow: inset 0 0 0 1px var(--ks-ink);
  }
}
/* dagny tonar "Ingen sammanfattning tillgänglig" på eventkorten till 45 % (2,2:1) */
body:not([data-eventid]) section#popular-events .card .no-information-available {
  color: var(--ks-muted);
  opacity: 1;
}
/* Raka hörn och inga skuggor, som på sajten */
.btn,
.btn-large,
section#active-events #show-listing,
.filter-calender-base #calendar-wrapper > div,
.unnumbered-show-container .show-category-row .show-category-container .show-category,
.unnumbered-show-container .show-category-row .show-category-container .show-category:has(div.available-at),
div#add-to-basket-cart .btn,
div#add-to-basket-cart .valign-wrapper,
.sold-out-box,
.nortic-modal,
.nortic-modal .input-field.big-ass-input-field,
.big-ass-input-field div.flat-button,
section#booking .modal,
#cart-overview-modal.modal,
body:not([data-eventid]) section#popular-events .card.card-background-color,
body:not([data-eventid]) section#popular-events .card .card-action a.btn.goto-button,
div#main-ribbon a.n-chip,
div#main-ribbon a.n-chip.theme-background-color {
  border-radius: var(--ks-radius);
}
section#active-events #show-listing,
.filter-calender-base #calendar-wrapper > div {
  box-shadow: none;
}
section#active-events .list-price {
  font-size: 26px;
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.plus,
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.minus {
  border-radius: var(--ks-radius);
}
/* Slutsålt: en stämpel i #333 i stället för dagnys röda hörnband */
section#active-events .container .booking-contents.unnumbered-show .sold-out-banner-container .sold-out-banner {
  border: 1px solid var(--ks-ink);
  border-radius: var(--ks-radius);
  background-color: var(--ks-white);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-weight: 600;
  letter-spacing: var(--ks-track);
  text-transform: uppercase;
}
/* Footern i sajtens mörkgrå */
footer.page-footer {
  background-color: var(--ks-footer);
}
/* Kassans ikoner (kundvagn, försäkring, presentkort) är dagnys mörkblå PNG:er; grå här */
section#booking.payment-page .booking-contents .payment-list img.payment-icon {
  filter: brightness(0) opacity(0.8);
}
/* Premiumkortets band i isblått; dagny ritar dess vikta hörn blå (#303d9b) */
section#booking.payment-page .booking-contents .payment-list #addons .card-container .banner {
  background-color: var(--ks-ice);
  color: var(--ks-ink);
  letter-spacing: var(--ks-track);
}
section#booking.payment-page.klarna .booking-contents .payment-list .premium-ticket-detail-wrapper > div.left-end,
section#booking.payment-page.klarna .booking-contents .payment-list .premium-ticket-detail-wrapper > div.right-end {
  background-color: #b9cdd3;
}
/* Biljettkategorierna i ett rutnät, också på telefon, i stället för dagnys vågräta scroll med pilar */
section#active-events .container .booking-contents.unnumbered-show .show-category-row {
  overflow: visible;
}
section#active-events .container .booking-contents.unnumbered-show .show-category-scoll-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  float: none;
  width: auto;
  min-width: 0;
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container {
  width: auto;
  min-width: 0;
  margin: 0;
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container .show-category {
  height: 100%;
}
.unnumbered-show-container .category-slider {
  display: none;
}
@media (max-width: 600px) {
  section#active-events .container .booking-contents.unnumbered-show .show-category-container,
  section#active-events .container .booking-contents.unnumbered-show .show-category-container .show-category,
  section#active-events
    .container
    .booking-contents.unnumbered-show
    .show-category-container
    .show-category-info.list-info {
    min-height: 0;
  }
  section#active-events .container .booking-contents.unnumbered-show .show-category-scoll-wrapper {
    padding: 10px 4px 4px 12px;
  }
}
/* Telefon: vapnet och ett kortare namn ryms bredvid pilen och menyn */
@media (max-width: 600px) {
  header#main-header::before {
    top: 7px;
    left: 60px;
    width: 52px;
    height: 50px;
  }
  header#main-header::after,
  body:not([data-eventid]) header#main-header::after {
    left: 124px;
    font-size: 12px;
  }
  body:not([data-eventid]) header#main-header::after {
    left: calc(var(--ks-pad) + 64px);
  }
}
@media (max-width: 380px) {
  header#main-header::after {
    content: none;
  }
}

/* ---------------------------------------------------------------------------
 * 11. Kassan
 * ------------------------------------------------------------------------- */
/* Isblå linje i listans överkant */
section#booking .booking-contents .payment-list {
  border-top: 4px solid var(--ks-ice);
}
section#booking .booking-contents .payment-list header.payment-section-header h2,
section#booking .modal .modal-content h1:not(i) {
  font-family: var(--ks-display) !important;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
}
/* Tillvalskorten: dagny ger dem fast höjd (210px, raden 250px inline) och lägger "Ja, tack" absolut i
   botten, så en längre text eller ett bredare typsnitt rinner ner under kryssrutan. Kortet följer
   innehållet, kryssraden ligger sist och korten i raden blir lika höga. */
section#booking.payment-page .payment-list #addons #card-slider-inner {
  align-items: stretch;
  height: auto !important;
}
/* Omslagen runt raden har också fasta höjder (.horizontal-scroll-cards 208px, #card-slider-wrapper
   och #card-slider-inner 250px, ibland inline) med dold överfyllnad; de klipper ett kort som växt.
   Hela kedjan från #addons ner till korten följer innehållet. */
section#booking.payment-page .payment-list #addons #addons-container,
section#booking.payment-page .payment-list #addons #addons-container .content,
section#booking.payment-page .payment-list #addons .list-box,
section#booking.payment-page .payment-list #addons .horizontal-scroll-cards,
section#booking.payment-page .payment-list #addons #card-slider-wrapper,
section#booking.payment-page .payment-list #addons #card-slider-inner,
section#booking.payment-page .payment-list #addons .row,
section#booking.payment-page .payment-list #addons .card-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
section#booking.payment-page .payment-list #addons .horizontal-scroll-cards,
section#booking.payment-page .payment-list #addons #card-slider-wrapper {
  padding-bottom: 8px;
}
section#booking.payment-page .payment-list #addons #card-slider-inner > .card-container {
  display: flex;
}
section#booking .booking-contents .payment-list #addons .card.simple-addon-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  min-height: 210px;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-content {
  flex: 1 1 auto;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-content p {
  font-size: 14px;
  line-height: 1.4;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-action {
  position: static;
  order: 2;
  margin-top: auto;
}
/* "Läs mer" på premiumkortet ligger absolut 35px från nederkanten i dagny och hamnar över "Ja, tack"
   när kryssraden ligger i flödet; här ligger den mellan texten och kryssraden */
section#booking.payment-page.klarna .booking-contents .payment-list .premium-ticket-detail-container .read-more-button {
  position: static;
  order: 1;
  align-self: flex-start;
  margin: 4px 24px 0;
}
/* Korten får växa här, så priset får gå ner på en egen rad när namnet inte ryms bredvid */
section#booking.payment-page .payment-list #addons .card.simple-addon-card .card-title.row {
  flex-wrap: wrap;
  row-gap: 2px;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-price {
  padding-left: 26px;
  text-align: left;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-name {
  padding-right: 12px;
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-name,
section#booking.payment-page .payment-list #addons .card.simple-addon-card .addon-price {
  font-family: var(--ks-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
/* Nej i försäkringen i rött, som kunderna väntar sig (vit text 6,6:1) */
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row.not-selected,
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container
  .selection-row:has(.no [type='radio']:checked) {
  background-color: #a8321f;
  color: #ffffff;
}