@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
/*
 * Tropicarium Kolmården (organizer 5001): 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.
 *
 * Byggd efter handoffen "Säsongskort, variant 2C 'som hemsidan'" (tmp/tropicarium/Design.pdf):
 * loggans blå, vågen ur loggan och mycket vitt som på tropicarium.se, bara CSS ovanpå Nortics markup.
 * Vit toppbar med logotypen, heron 450px (300px på telefon, handoffens mått förstorade 50 %) med en vit
 * avslutningsvåg kantad i Vågblå, eventpanelen i Isblå med 22px radie, kategorikorten i två kolumner med
 * runda stegare, knappar som piller i versaler. Nunito från Google Fonts, inga andra typsnitt. Chippen
 * ("1 Ort", datum) och rubriken "Löpande föreställningar" visas inte.
 *
 * Färger och mått är handoffens tokens (--tc-*). Avvikelser för kontrastens skull: Dimblå #6C86A6 når
 * 3,75:1 mot vitt och används bara till inaktiva lägen; ort och metatext är Skifferblå #40597A (7,2:1).
 * Sekundärknappens hover (#D5E7F4) får Djupblå text, Loggblå där når 3,9:1. Försäkringens ja- och
 * nej-rader och "Fåtal kvar" behåller stilguidens Djungel och Korall, som kunderna läser som ja och nej.
 *
 * Bilder i assets/: tropicarium-logo.png (logotypen utan den inbakade skuggan) och
 * tropicarium-haj.webp / tropicarium-haj-mobil.webp (organisatörssidans hero på bred och smal skärm;
 * arrangören har ingen egen uppladdad bild).
 *
 * 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 {
  --tc-white: #ffffff;
  --tc-blue: #3f72b0;
  --tc-ink: #1d3557;
  --tc-slate: #40597a;
  --tc-mist: #6c86a6;
  --tc-wave: #a9cfe8;
  --tc-ice: #f2f8fc;
  --tc-line: #d5e7f4;
  --tc-tint: #eaf3fa;
  --tc-font: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --tc-r-pill: 999px;
  --tc-r-card: 18px;
  --tc-r-panel: 22px;
  --tc-shadow: 0 8px 20px rgba(63, 114, 176, 0.15);
  --tc-ease: 150ms ease;
  /* utöver handoffen: inaktiv ikon, toppbarens kant och stilguidens statusfärger */
  --tc-line-strong: #a6bdd6;
  --tc-topbar-line: #e3edf6;
  --tc-green: #3f7a4a;
  --tc-coral: #e8743b;
  --tc-coral-ink: #a8471a;
  --tc-coral-tint: #fbe3d6;
  --tc-pad: clamp(20px, 3.4vw, 48px);
  --tc-max: 1120px;
  --tc-wrap: min(var(--tc-max), 100% - 2 * var(--tc-pad));
  /* handoffens 300px (telefon 200px), förstorad 50 % */
  --tc-photo: 450px;
  /* luft mellan vågen och eventtiteln */
  --tc-title-gap: 28px;
}

/* ---------------------------------------------------------------------------
 * 1. Ground
 * ------------------------------------------------------------------------- */
/* Vit sida som på tropicarium.se. dagnys förvalda tema lägger en kornig textur (filter.png) på body
   och .st-content. */
body,
.st-content {
  background-color: var(--tc-white);
  background-image: none;
  color: var(--tc-ink);
  font-family: var(--tc-font);
}
a {
  color: var(--tc-blue);
}
.spinner-color-secondary {
  border-color: var(--tc-blue);
}
:focus-visible {
  outline: 3px solid var(--tc-wave);
  outline-offset: 2px;
}
/* Footern i Djupblå med en vågblå linje överst */
footer.page-footer {
  position: relative;
  z-index: 2;
  opacity: 1;
  margin-top: 64px;
  border-top: 4px solid var(--tc-wave);
  background-color: var(--tc-ink);
}
footer.page-footer,
footer.page-footer #left-column > a:not(#nortic-footer-link) {
  color: var(--tc-white);
  font-family: var(--tc-font);
}
footer.page-footer #left-column > a:not(#nortic-footer-link) {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
}
@media (hover: hover) {
  footer.page-footer #left-column > a:not(#nortic-footer-link):hover {
    color: var(--tc-wave);
  }
}
footer #divider {
  border-right-color: rgba(169, 207, 232, 0.4);
}
footer.page-footer img {
  filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * 2. Toppbar, hero med våg och rubrikblocket
 * ------------------------------------------------------------------------- */
/* Vit toppbar 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(--tc-white);
  box-shadow: 0 1px 0 var(--tc-topbar-line);
}
header#main-header > .row {
  height: 100%;
}
/* Logotypen i linje med innehållet, men alltid till höger om bakåtpilen (fast i x 12-52) */
header#main-header::before {
  content: '';
  position: absolute;
  top: 10px;
  left: max(70px, (100% - var(--tc-max)) / 2);
  width: 160px;
  height: 44px;
  pointer-events: none;
  background: url('assets/tropicarium-logo.png') no-repeat left center / contain;
}
body:not([data-eventid]) header#main-header::before {
  left: max(var(--tc-pad), (100% - var(--tc-max)) / 2);
}
header#main-header i.material-icons {
  color: var(--tc-ink);
}
/* Bakåtpilen: 40px cirkel i Ljusblå med loggblå pil, även när den följer med vid scroll. dagny
   (template.less) lägger den fast med 10px padding runt en 24px ikon. */
a.back-to-organizer,
a.back-to-organizer.fixed {
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  opacity: 1;
  background-color: var(--tc-tint);
  color: var(--tc-blue);
  transition: background-color var(--tc-ease);
}
a.back-to-organizer.fixed {
  box-shadow: 0 2px 10px rgba(29, 53, 87, 0.18);
}
a.back-to-organizer:hover,
a.back-to-organizer.fixed:hover {
  background-color: var(--tc-line);
}
header#main-header a.back-to-organizer i.material-icons {
  color: var(--tc-blue);
  font-size: 22px;
  line-height: 1;
}
/* Arrangörens märke ligger absolut över heron; logotypen finns redan i toppbaren */
main .organizer-logo-container {
  display: none;
}
section#top {
  position: relative;
  padding: 0;
  background-color: var(--tc-white);
}
/* dagny hänger bilden i ett fast lager bakom hela sidan och dimmar det vid scroll; här är den en
   450px hög hero ö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(--tc-photo);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--tc-ink);
  background-size: cover;
  background-position: 50% 0;
  filter: none !important;
  transform: none !important;
}
section#top #background-container .obfuscator {
  display: none;
}
/* Organisatörssidan har bara dagnys reservbild; där visas hajen (smal variant på telefon, nedan) */
body:not([data-eventid]) section#top #background-container {
  background-image: url('assets/tropicarium-haj.webp') !important;
  background-position: 50% 0;
}
/* Vågen ur loggan: en vit avslutningsvåg som buktar upp i bildens nederkant, kantad i Vågblå */
section#top #background-container::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -70px;
  height: 120px;
  pointer-events: none;
  border-top: 6px solid var(--tc-wave);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-color: var(--tc-white);
}
/* dagny ger #main-ribbon padding-top 35-75 % för bilden bakom; här börjar blocket under heron */
body section#top div#main-ribbon.container {
  position: static;
  box-sizing: border-box;
  width: var(--tc-wrap);
  max-width: none;
  margin: 0 auto;
  padding: calc(var(--tc-photo) + var(--tc-title-gap)) 0 4px;
  text-align: left;
}
body section#top div#main-ribbon.container > * {
  position: relative;
  z-index: 1;
}
/* Ortchippen ("1 ort", datum, speltid) som vita piller uppe till vänster på bilden. På telefon ger
   dagny raden negativa marginaler och en vänsterpadding. */
body section#top div#main-ribbon.container > .slider-wrapper {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}
div#main-ribbon .slider-wrapper::-webkit-scrollbar {
  display: none;
}
/* Tropicarium visar inte chippen ("1 Ort", "Inga föreställningar"/datumspannet) på bilden */
body section#top div#main-ribbon.container > .slider-wrapper {
  display: none;
}
div#main-ribbon .slider-wrapper .slider-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
div#main-ribbon .event-info {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--tc-r-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--tc-blue) !important;
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
/* dagny nollar högerpaddingen på det sista chippet (på telefon 20px) */
div#main-ribbon .event-info:last-child {
  padding-right: 14px;
}
div#main-ribbon .event-info > i.material-icons {
  margin-right: 6px;
  color: var(--tc-blue);
  font-size: 17px;
}
/* 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: 2px solid var(--tc-line);
  border-radius: var(--tc-r-pill);
  background-color: var(--tc-white);
  box-shadow: none;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
/* Eventtiteln: 900, 24px, versaler i Loggblå */
div#main-ribbon > h1 {
  margin: 0;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  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).
   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: 58ch;
  margin: 14px 0 6px !important;
  padding: 0 !important;
  border-radius: 0;
  background: none;
  color: var(--tc-slate);
  font-family: var(--tc-font);
  font-weight: 400;
  font-size: 16.5px;
  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(--tc-slate) !important;
  font-size: inherit;
  text-shadow: none;
}
section#top div.event-information a,
#flex-info-wrapper div.event-information a {
  color: var(--tc-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* "Läs mer": understruken textlänk, ingen knapp (den är en .btn i dagny). dagny studsar den 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 3px;
  border-radius: 0;
  border-bottom: 2px solid var(--tc-wave);
  background: none;
  box-shadow: none;
  color: var(--tc-blue);
  font-family: var(--tc-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 {
  border-bottom-color: var(--tc-blue);
  background: none;
  box-shadow: none;
  color: var(--tc-ink);
}
section#top div.event-information:not(.minimized) + a.event-information-button,
#flex-info-wrapper div.event-information:not(.minimized) + a.event-information-button {
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * 2b. Organisatörssidan: rubrik med en rad under, eventen som vita kort
 * ------------------------------------------------------------------------- */
/* Underrubriken ärver annars titelns versaler, vikt och spärrning */
body:not([data-eventid]) div#main-ribbon > h1::after {
  content: 'En tropisk värld mitt i Kolmården';
  display: block;
  margin-top: 8px;
  color: var(--tc-slate);
  font-family: var(--tc-font);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
}
/* Infochipsen är tomma på organisatörssidan */
body:not([data-eventid]) div#main-ribbon .slider-wrapper {
  display: none;
}
body:not([data-eventid]) section#popular-events {
  margin-top: 0;
  padding: 40px 0 24px;
  background-color: var(--tc-white);
}
/* dagny ger main min-height 1000px, vilket på en org-sida utan event blir ett tomt fält längre än
   skärmen; sidfoten hamnar i stället vid skärmens nederkant */
body:not([data-eventid]) main {
  min-height: calc(100svh - 64px - 140px);
}
/* Utan publicerade event är eventlistan tom; då visas den inte alls */
body:not([data-eventid]) section#popular-events:not(:has(.card)) {
  display: none;
}
body:not([data-eventid]) section#popular-events > .container {
  width: var(--tc-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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1.25;
}
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(--tc-line);
  border-radius: var(--tc-r-card);
  background-color: var(--tc-white);
  box-shadow: none;
  color: var(--tc-ink);
  transition: box-shadow var(--tc-ease);
}
@media (hover: hover) {
  body:not([data-eventid]) section#popular-events .card.card-background-color:hover {
    box-shadow: var(--tc-shadow);
  }
}
body:not([data-eventid]) section#popular-events .card .card-header {
  height: auto;
  padding: 22px 24px 10px;
  font-family: var(--tc-font);
}
body:not([data-eventid]) section#popular-events .card .card-header h3 {
  margin: 0;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
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(--tc-ink);
}
body:not([data-eventid]) section#popular-events .card .card-content .place {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body:not([data-eventid]) section#popular-events .card .card-content .time {
  margin-top: 4px;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-size: 15px;
  line-height: 1.4;
}
body:not([data-eventid]) section#popular-events .card p {
  margin: 12px 0 0;
  color: var(--tc-slate);
  font-family: var(--tc-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 2px;
  border-radius: 0;
  border-bottom: 2px solid var(--tc-wave);
  background-color: transparent;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 600;
  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 {
  border-bottom-color: var(--tc-blue);
  color: var(--tc-ink);
  filter: none;
}
body:not([data-eventid]) section#popular-events .card .card-action {
  padding: 14px 24px 24px;
  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: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 48px;
}

/* ---------------------------------------------------------------------------
 * 3. Buttons and the organizer theme classes
 * ------------------------------------------------------------------------- */
.btn,
.btn-large {
  border-radius: var(--tc-r-pill);
  background-color: var(--tc-blue);
  box-shadow: none;
  color: var(--tc-white);
  font-family: var(--tc-font);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background-color var(--tc-ease),
    color var(--tc-ease);
}
.btn:hover,
.btn-large:hover,
.btn:focus,
.btn-large:focus {
  background-color: var(--tc-ink);
  box-shadow: none;
  color: var(--tc-white);
}
.btn:focus-visible,
.btn-large:focus-visible {
  outline: 3px solid var(--tc-wave);
  outline-offset: 2px;
}
.btn .waves-ripple,
.btn-large .waves-ripple {
  display: none;
}
.btn.btn-flat,
.btn-flat.btn-plain {
  background-color: transparent;
  box-shadow: none;
  color: var(--tc-blue);
}
.btn.disabled,
.btn-large.disabled,
.btn:disabled,
.btn-large:disabled {
  background-color: var(--tc-line) !important;
  box-shadow: none !important;
  color: var(--tc-mist) !important;
}
.theme-background-color {
  background-color: var(--tc-blue);
  color: var(--tc-white);
}
.theme-background-color-on-hover:hover {
  background-color: var(--tc-ink);
  color: var(--tc-white);
}
.theme-background-color-override {
  background-color: var(--tc-blue) !important;
}
.theme-text-color-override {
  color: var(--tc-white) !important;
}
.theme-secondary-background-color,
.theme-secondary-background-color:hover {
  background-color: var(--tc-blue);
  color: var(--tc-white);
}
.theme-color,
.theme-secondary-color {
  color: var(--tc-blue);
  fill: var(--tc-blue);
}

/* ---------------------------------------------------------------------------
 * 4. Kalendern (vitt kort) och beskrivningen bredvid
 * ------------------------------------------------------------------------- */
section#active-events {
  margin-top: 0;
  padding-top: 24px;
}
section#active-events > .container {
  width: var(--tc-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(--tc-line);
  border-radius: var(--tc-r-card);
  background: var(--tc-white);
  box-shadow: var(--tc-shadow);
}
.filter-calender-base .wrapper .calendar-header {
  padding: 22px 10px 8px;
}
.filter-calender-base .calendar-header .current-date {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.06em;
  /* dagny skriver månaden med gemen */
  text-transform: uppercase;
}
.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: 1px solid var(--tc-line-strong);
  border-radius: 50%;
  color: var(--tc-blue);
  line-height: 1;
  transition: background-color var(--tc-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(--tc-tint);
}
.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(--tc-slate);
  font-family: var(--tc-font);
  font-size: 15px;
}
.filter-calender-base .calendar .weeks li {
  color: var(--tc-ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Öppna dagar som vågblå bubblor, vald dag i Revblå, få kvar i korallton */
.filter-calender-base .days li.selectable {
  color: var(--tc-ink);
  font-weight: 600;
}
.filter-calender-base .days li.selectable::before,
.filter-calender-base .days li.selectable.bookable::before {
  background-color: var(--tc-wave);
  transition:
    background-color var(--tc-ease),
    box-shadow var(--tc-ease);
}
.filter-calender-base .days li.selectable.bookable.half-sold::before {
  background-color: var(--tc-coral-tint);
  box-shadow: inset 0 0 0 2px var(--tc-coral);
}
.filter-calender-base .calendar .days li.selectable.selected {
  color: var(--tc-white);
}
.filter-calender-base .calendar .days li.selectable.selected::before {
  background-color: var(--tc-blue);
  box-shadow: none;
}
.filter-calender-base .days li.selectable:not(.selected):hover::before {
  background: var(--tc-tint);
  box-shadow: inset 0 0 0 2px var(--tc-blue);
}
.filter-calender-base .days li:not(.selectable):hover::before {
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * 5. Eventpanelen: raderna i Isblå, chevronen som loggblå cirkel
 * ------------------------------------------------------------------------- */
/* 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;
}
/* Eventpanelen: raden och det utfällda innehållet i Isblå med 2px kant och 22px radie */
section#active-events #show-listing {
  margin-top: 24px;
  overflow: hidden;
  border: 2px solid var(--tc-line);
  border-radius: var(--tc-r-panel);
  background-color: var(--tc-ice);
  box-shadow: none;
  color: var(--tc-ink);
  font-family: var(--tc-font);
}
section#active-events #show-listing .month-name {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
section#active-events #show-listing > #show-listing-body .show-listing-show {
  border-bottom: 1px solid var(--tc-line);
  transition:
    background-color var(--tc-ease),
    box-shadow var(--tc-ease);
}
/* Rubriken "Löpande föreställningar" ovanför visningar utan datum (årskort och liknande) visas
   inte; dagny ger den ingen egen klass, men nästa rad har ikonen för datumlös visning */
section#active-events
  #show-listing
  .show-listing-month:not(.fake-month):has(+ .show-listing-show .dateball .no-date-show) {
  display: none !important;
}
section#active-events #show-listing #show-listing-body .show-listing-show:not(.expanded):hover {
  background-color: var(--tc-tint);
}
section#active-events #show-listing > #show-listing-body .show-listing-show.unnumbered-show.expanded {
  background-color: var(--tc-ice);
  border-bottom-color: transparent;
}
.dateball {
  background-color: var(--tc-tint);
}
.dateball span {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 700;
}
.show-listing-show:hover .dateball,
.show-listing-show.expanded .dateball {
  background-color: var(--tc-wave);
}
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(--tc-blue);
}
section#active-events #show-listing > #show-listing-body .show-listing-show .large-screen-date {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-size: 15px;
}
section#active-events #show-listing > #show-listing-body .show-listing-show .show-name {
  color: var(--tc-ink);
  font-family: var(--tc-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(--tc-ink);
  font-family: var(--tc-font);
}
/* Från-priset: 800 16px */
section#active-events #show-listing > #show-listing-body .show-listing-show .price-range {
  font-weight: 800;
  font-size: 16px;
}
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(--tc-slate);
}
section#active-events #show-listing > #show-listing-body .arenaLocationLink,
section#active-events #show-listing .read-more-info-link {
  color: var(--tc-blue);
}
section#active-events #show-listing .show-listing-show .supply-blobs .supply-blob {
  background-color: var(--tc-line);
}
section#active-events #show-listing .show-listing-arrow i.material-icons.theme-color {
  color: var(--tc-blue);
}
/* Chevronen: 38px loggblå cirkel med vit ikon */
section#active-events #show-listing .show-listing-arrow a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
}
section#active-events #show-listing .show-listing-arrow a.btn i.material-icons {
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--tc-white);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
/* dagny sätter .theme-background-color på rutan från JS */
.sold-out-box {
  border-radius: 999px;
  background-color: var(--tc-ink) !important;
  color: var(--tc-white) !important;
  font-family: var(--tc-font);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 6. Kategorikorten: två kolumner, runda stegare
 * ------------------------------------------------------------------------- */
section#active-events .container .booking-contents.unnumbered-show {
  background-color: var(--tc-ice);
  box-shadow: none;
}
section#active-events .container .booking-contents.unnumbered-show hr {
  border-top-color: var(--tc-line);
}
section#active-events .container .unnumbered-show h2 {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.unnumbered-show-container .supply-info.list-info {
  color: var(--tc-slate);
  font-family: var(--tc-font);
}
/* Kategorikorten i två kolumner (en på telefon, nedan). dagny lägger dem i en vågrät flexrad med
   fasta 240px-kort. */
.unnumbered-show-container .show-category-row .show-category-scoll-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 0;
}
.unnumbered-show-container .show-category-row .show-category-container {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}
/* dagny håller plats för en infotext på 64px och gör kortet minst 245px högt; utan text blir det
   ett hål mellan namn och pris */
.unnumbered-show-container .show-category-row .show-category-container .show-category .show-category-info {
  min-height: 0;
}
.unnumbered-show-container .show-category-row .show-category-container .show-category .show-category-info:empty {
  display: none;
}
/* Under 992px gör dagny raden till en vågrät karusell med pilar; här står korten i rutnätet */
@media (max-width: 991px) {
  .unnumbered-show-container .show-category-row {
    overflow: visible;
  }
  .unnumbered-show-container .show-category-row .show-category-scoll-wrapper {
    float: none;
    min-width: 0;
  }
  .unnumbered-show-container .category-slider {
    display: none;
  }
}
.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) {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px;
  gap: 14px;
  justify-content: flex-start;
  border: 2px solid var(--tc-line);
  border-radius: var(--tc-r-card);
  background: var(--tc-white);
  box-shadow: none;
  transition:
    border-color var(--tc-ease),
    box-shadow var(--tc-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(--tc-blue);
  box-shadow: var(--tc-shadow);
}
/* 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(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.show-category-container .show-category-info.list-info {
  color: var(--tc-slate);
  font-family: var(--tc-font);
  font-size: 14px;
  line-height: 1.5;
}
/* Priset i kategorin: 900 36px i Loggblå */
section#active-events .list-price {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  word-spacing: -0.12em;
  white-space: nowrap;
}
section#active-events .read-more-info-link {
  color: var(--tc-blue);
  font-weight: 600;
}
/* Slutsåld kategori: dagny visar bandet med display: flex inline från JS. Här en djuphavsblå
   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(--tc-ice);
}
.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: 999px;
  background-color: var(--tc-ink);
  color: var(--tc-white);
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-coral-ink);
}
/* "Fåtal kvar!": korallton med mörk text (rent korall klarar bara 4,2:1) */
.unnumbered-show-container .indicator-limit,
.unnumbered-show-container .indicator-limit.absolute-right {
  top: -12px;
  right: 14px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--tc-coral);
  border-radius: 999px;
  background: var(--tc-coral-tint);
  box-shadow: none;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
  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: 999px;
  background-color: var(--tc-green);
  color: var(--tc-white);
  font-family: var(--tc-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}
section#active-events .container .unnumbered-show .unnumbered-campaign-attention {
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  background-color: var(--tc-white);
  color: var(--tc-ink);
  font-family: var(--tc-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: 8px;
}
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: 0;
  border-radius: 50%;
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 20px;
  transition:
    background-color var(--tc-ease),
    border-color var(--tc-ease);
}
.booking-contents .amount-blob.plus {
  background-color: var(--tc-blue);
  color: var(--tc-white);
}
.booking-contents .amount-blob.plus:hover {
  background-color: var(--tc-ink);
}
.booking-contents .amount-blob.minus {
  background-color: var(--tc-tint);
  color: var(--tc-blue);
}
.booking-contents .amount-blob.minus:hover {
  background-color: var(--tc-line);
  color: var(--tc-ink);
}
section#active-events .container .booking-contents.unnumbered-show .show-category-container .col .amount-blob.amount {
  width: auto;
  min-width: 24px;
  height: 40px;
  margin: 0;
  border: 0;
  background-color: transparent;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 900;
  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(--tc-line-strong);
}
/* Inaktiv stegare: Isblå med ljus ikon */
.booking-contents .amount-blob.disabled,
.booking-contents .amount-blob.minus.disabled:hover {
  background-color: var(--tc-ice) !important;
  color: var(--tc-line-strong);
  cursor: default;
}
/* 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: 999px;
  background-color: var(--tc-tint);
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
}
.booking-contents .available-at span,
.booking-contents .available-at i {
  color: var(--tc-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(--tc-blue) !important;
  box-shadow: 0 2px 8px rgba(27, 53, 80, 0.25);
}
.unnumbered-show-container .category-slider a.btn-floating.addons-slider i.material-icons {
  background-color: transparent;
  color: var(--tc-white);
}
.unnumbered-show-container a.btn.open-addons {
  background-color: var(--tc-blue) !important;
  color: var(--tc-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: 999px;
  background-color: var(--tc-blue);
  color: var(--tc-white);
}
div#add-to-basket-cart:hover .btn {
  background-color: var(--tc-ink);
}
#extend-time-button {
  background-color: var(--tc-blue);
  color: var(--tc-white);
}

/* ---------------------------------------------------------------------------
 * 7. Checkout: Isblå, vita rader, Loggblå där man agerar
 * ------------------------------------------------------------------------- */
.modal__bg {
  background-color: rgba(27, 53, 80, 0.8);
}
.modal__content {
  background-color: var(--tc-ice);
  color: var(--tc-ink);
}
section#booking.payment-page.klarna {
  background-color: var(--tc-ice) !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(--tc-ink);
}
section#booking .booking-contents .payment-list {
  background-color: var(--tc-ice);
  color: var(--tc-ink);
  font-family: var(--tc-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: tr-payment-list-slide-in;
  }
}
@keyframes tr-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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* 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(--tc-slate);
  font-family: var(--tc-font);
  font-weight: 600;
  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: 999px;
  background: var(--tc-blue);
  color: var(--tc-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: 12px;
  background-color: var(--tc-white);
  box-shadow: 0 0 0 1px var(--tc-line);
}
section#booking.payment-page .booking-contents .payment-list .list-box .empty {
  border-color: var(--tc-line);
  background-color: var(--tc-ice);
}
section#booking.payment-page .booking-contents .payment-list .list-box-background {
  background-color: var(--tc-white);
}
section#booking .list-title {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
}
section#booking .list-info {
  color: var(--tc-slate);
}
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(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 700;
}
section#booking.payment-page .booking-contents .payment-list i.material-icons {
  color: var(--tc-blue);
}
/* Radikonerna är dagnys lila PNG:er; i Loggblå */
section#booking.payment-page .booking-contents .payment-list img.payment-icon {
  filter: brightness(0) saturate(100%) invert(39%) sepia(56%) saturate(620%) hue-rotate(174deg) brightness(90%);
}
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(--tc-line);
  border-radius: 12px;
  background-color: var(--tc-white);
  box-shadow: none;
  color: var(--tc-ink);
}
section#booking.payment-page.klarna .booking-contents .payment-list #details #details-list .expandable-detail {
  background-color: var(--tc-ice);
}
/* 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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-line);
}
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container p {
  color: var(--tc-ink);
}
section#booking.payment-page .booking-contents .payment-list #details #details-list .detail-container p a {
  color: var(--tc-blue);
}
section#booking.payment-page .booking-contents .payment-list #details .klarna-detail-container {
  border-top-color: var(--tc-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(--tc-white);
  color: var(--tc-ink);
}
/* Försäkring: Djungel när man är försäkrad, mörk korall när man tackar nej. 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(--tc-white);
}
section#booking.payment-page.klarna
  .booking-contents
  .payment-list
  #details
  #details-list
  .insurance-detail-container.selected
  .expandable-detail {
  background-color: var(--tc-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(--tc-coral-ink);
  color: var(--tc-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(--tc-green);
  color: var(--tc-white);
}
section#booking .payment-list a.basket-color,
section#booking .payment-list .basket-color {
  color: var(--tc-blue) !important;
}
.basket-cart-change-order h3 {
  color: var(--tc-blue);
}
section#booking.payment-page .payment-list #addons .card.simple-addon-card {
  overflow: hidden;
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  background-color: var(--tc-white);
  box-shadow: none;
  color: var(--tc-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(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 700;
  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(--tc-slate);
}
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(--tc-blue) !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(--tc-ink);
}
section#booking.payment-page .booking-contents .payment-list #addons .card-container .banner {
  background-color: var(--tc-wave);
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-ink);
}
section#booking .booking-contents .payment-list a.terms-link,
section#booking .booking-contents .payment-list a.cancellation-insurance-info {
  color: var(--tc-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
section#booking.payment-page .payment-list .input-field label {
  color: var(--tc-slate);
}
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(--tc-blue);
}
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(--tc-blue);
  box-shadow: 0 1px 0 0 var(--tc-blue);
}
section#booking.payment-page
  .booking-contents
  .payment-list
  input[type='checkbox'].filled-in:checked:not([disabled])
  + label:after {
  border: 2px solid var(--tc-blue);
  background-color: var(--tc-blue);
}
section#booking [type='radio'].with-gap:checked + label:before,
section#booking [type='radio'].with-gap:checked + label:after {
  border: 2px solid var(--tc-blue);
}
section#booking [type='radio'].with-gap:checked + label:after {
  background-color: var(--tc-blue);
}
button#addon-modal-go-back {
  background-color: var(--tc-blue) !important;
  color: var(--tc-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(--tc-r-card);
  background-color: var(--tc-ink);
  box-shadow: 0 24px 60px rgba(27, 53, 80, 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(--tc-white);
  font-family: var(--tc-font);
  font-weight: 600;
}
section#booking.payment-page #premium-ticket-modal .description-info,
section#booking.payment-page #addon-modals .addon-modal .description-info {
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--tc-white);
  color: var(--tc-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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
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(--tc-ink);
}
section#booking.payment-page #premium-ticket-modal .description-info a,
section#booking.payment-page #addon-modals .addon-modal .description-info a {
  color: var(--tc-blue) !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(--tc-blue);
  border-radius: var(--tc-r-card);
  background-color: var(--tc-ice);
  box-shadow: 0 24px 60px rgba(27, 53, 80, 0.35);
  color: var(--tc-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(--tc-blue) 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(--tc-blue);
}
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(--tc-tint);
}
section#booking.payment-page .booking-contents .payment-list .modal .close-modal i.material-icons {
  color: var(--tc-blue);
}
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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}
section#booking .modal .modal-content h2,
section#booking .modal .modal-content h3 {
  margin: 20px 0 8px;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-ink);
  font-family: var(--tc-font);
  font-size: 15px;
  line-height: 1.6;
}
section#booking .modal .modal-content li::marker {
  color: var(--tc-blue);
}
/* 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(--tc-font) !important;
}
section#booking .modal .modal-content h1:not(i) {
  font-family: var(--tc-font) !important;
}
/* Sista stycket i försäkringsvillkoren har inline color: black på sin länk */
section#booking .modal .modal-content a {
  color: var(--tc-blue) !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(27, 53, 80, 0.7);
}
.kivra-dialog {
  border-top: 4px solid var(--tc-blue);
  border-radius: var(--tc-r-card);
  background: var(--tc-ice);
  box-shadow: 0 24px 60px rgba(27, 53, 80, 0.35);
  color: var(--tc-ink);
  font-family: var(--tc-font);
}
.kivra-dialog .kivra-dialog-title {
  color: var(--tc-blue) !important;
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.kivra-dialog p {
  color: var(--tc-ink);
}
.kivra-dialog .kivra-dialog-input-lable {
  color: var(--tc-ink) !important;
}
.kivra-dialog .kivra-input {
  border: 1px solid var(--tc-line-strong) !important;
  border-radius: 12px !important;
  color: var(--tc-ink) !important;
}
.kivra-dialog .kivra-input:focus {
  border-color: var(--tc-blue) !important;
}
#kivra-verify-submit,
#kivra-success-ok,
#kivra-failed-yes-sms,
#kivra-noaccount-yes-sms {
  border: 0 !important;
  border-radius: 999px;
  background-color: var(--tc-blue) !important;
  color: var(--tc-white) !important;
  font-family: var(--tc-font);
  font-weight: 600;
  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(--tc-ink) !important;
}
.kivra-dialog .kivra-link-button {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 600;
}
.kivra-dialog .kivra-error {
  color: var(--tc-coral-ink);
}

/* ---------------------------------------------------------------------------
 * 7b. Small JS modals (info, kö, kampanjkod, försläppskod): dagny målar dem blå
 * ------------------------------------------------------------------------- */
.nortic-modal-overlay {
  background-color: var(--tc-ink);
}
.nortic-modal {
  overflow-x: hidden;
  border: 0;
  border-top: 4px solid var(--tc-blue);
  border-radius: var(--tc-r-card);
  background-color: var(--tc-ice);
  box-shadow: 0 24px 60px rgba(27, 53, 80, 0.35);
  color: var(--tc-ink);
}
.nortic-modal h3 {
  margin-bottom: 24px;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nortic-modal h3 i.material-icons {
  color: var(--tc-blue);
}
.nortic-modal p {
  color: var(--tc-ink);
  opacity: 1;
}
.nortic-modal .close-button i.material-icons {
  color: var(--tc-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(--tc-line-strong);
  border-radius: 999px;
  box-shadow: none;
}
.nortic-modal .input-field.big-ass-input-field input[type='text'] {
  color: var(--tc-ink);
}
.nortic-modal .input-field.big-ass-input-field input[type='text']::placeholder {
  color: var(--tc-slate);
}
.nortic-blue-background,
.big-ass-input-field div.flat-button {
  border-radius: 999px;
  background-color: var(--tc-blue);
  color: var(--tc-white);
  font-family: var(--tc-font);
  font-weight: 600;
}
.big-ass-input-field div.flat-button:hover {
  background-color: var(--tc-ink);
}
.big-ass-input-field div.flat-button.disabled {
  background-color: var(--tc-line);
  color: var(--tc-mist);
}

/* ---------------------------------------------------------------------------
 * 8. Floating basket
 * ------------------------------------------------------------------------- */
div#basket,
div#basket-cart,
div#basket-cart-go-to-payment,
div#addons-basket {
  background-color: var(--tc-blue);
  color: var(--tc-white);
  font-family: var(--tc-font);
}
div#basket .price,
div#addons-basket .price,
div#basket-cart .title-container,
div#basket-cart-go-to-payment .text-wrapper {
  color: var(--tc-white);
  font-family: var(--tc-font);
  font-weight: 600;
}
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(--tc-wave);
}
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(--tc-ink);
}
div#basket-cart .chip {
  background-color: var(--tc-wave);
  color: var(--tc-ink);
}
/* Antalet på rundeln: egen bricka med luft kring siffran och en revblå ring mot den vågblå 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(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 700;
  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(--tc-ink);
}
div#basket-overlay {
  background-color: var(--tc-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(--tc-ink);
}
#cart-overview-modal.modal {
  border-top: 4px solid var(--tc-blue);
  border-radius: var(--tc-r-card);
  background-color: var(--tc-ice);
  box-shadow: 0 24px 60px rgba(27, 53, 80, 0.35);
  color: var(--tc-ink);
  font-family: var(--tc-font);
}
#cart-overview-modal .shopping-cart-overview-section-header > .col:first-child {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.06em;
}
#cart-overview-modal .shopping-cart-overview-section-header p {
  color: var(--tc-slate);
  font-family: var(--tc-font);
  font-weight: 600;
  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: 999px;
  background: var(--tc-blue);
  color: var(--tc-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}
#cart-overview-modal .shopping-cart-overview-tickets .detail-container {
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  background-color: var(--tc-white);
  box-shadow: none;
}
#cart-overview-modal .shopping-cart-overview-tickets .list-title {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 600;
  font-size: 15px;
}
#cart-overview-modal .shopping-cart-overview-tickets .list-info {
  color: var(--tc-slate);
  font-family: var(--tc-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(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 700;
  font-size: 15px;
}
#cart-overview-modal .shopping-cart-overview-tickets #details-list .detail i.material-icons {
  color: var(--tc-blue);
}
#cart-overview-modal .shopping-cart-overview-tickets .shopping-cart-delete-sub-order i.material-icons:hover {
  color: var(--tc-coral-ink);
}
#cart-overview-modal .shopping-cart-overview-tickets .expandable-detail {
  border-bottom-color: var(--tc-line);
  background-color: var(--tc-ice);
}
#cart-overview-modal h3 {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
}
#cart-overview-modal hr {
  border-top-color: var(--tc-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: 12px;
  background-color: var(--tc-ice);
  box-shadow: 0 0 0 1px var(--tc-line);
}
/* "Till kassan" är handlingen; "Töm varukorg" blir en konturknapp */
#cart-overview-modal .shopping-cart-overview-buttons #basket-cart-overview-clear.btn {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--tc-blue);
  color: var(--tc-blue);
}
#cart-overview-modal .shopping-cart-overview-buttons #basket-cart-overview-clear.btn:hover {
  background-color: var(--tc-tint);
  color: var(--tc-ink);
}

/* ---------------------------------------------------------------------------
 * 8c. Tillvalssteget (#standalone-addon-container, popupAddonModals.jsp)
 *
 * Visas i kassan före betalningen när visningen har kopplade tillval (t.ex. Arrangörstips med
 * hotellrum). Vyn har en egen <style> i markupen, alltså efter temat, så allt här prefixas med id:t,
 * och !important används mot inline-färgerna (den gula ikonplattan, den grå pilen, .yellow-background
 * på datumbollen och stegarna). Heron (datum och visningsnamn) är vit med svart skugga i dagny, gjord
 * för dess mörka bakgrundsfoto; här står den på snö i textblått.
 * ------------------------------------------------------------------------- */
#standalone-addon-container .addon-wrapper-container {
  background-color: var(--tc-ice);
  box-shadow: none;
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-size: 14px;
}
#standalone-addon-container .hero-wrapper h1 {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 0.95;

  text-shadow: none;
  text-wrap: balance;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#standalone-addon-container .addon-date-text {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-shadow: none;
}
/* Ikonen är ett i.material-icons: ingen font-family här, annars skrivs "date_range" ut som text */
#standalone-addon-container .addon-date-icon {
  color: var(--tc-blue);
  font-size: 18px;
  text-shadow: none;
}
/* Månaden som rubrik i Shrikhand, som visningslistans månader */
#standalone-addon-container .addon-wrapper-header {
  height: auto;
  padding: 28px 4px 12px;
  background-color: transparent;
}
#standalone-addon-container .addon-wrapper-header span {
  margin-left: 0;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 20px;

  text-transform: capitalize;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Visningsraden överst: ett vitt kort som visningsraderna på eventsidan */
/* Vyns scrollruta klipper temats stora skugga till raka band; här en liten skugga */
#standalone-addon-container .addon-wrapper-body {
  margin: 0;
  padding: 16px clamp(16px, 2vw, 24px);
  border-radius: var(--tc-r-panel);
  background-color: var(--tc-white);
  box-shadow:
    0 1px 2px rgba(31, 58, 158, 0.06),
    0 4px 14px rgba(31, 58, 158, 0.08);
}
#standalone-addon-container .addon-dateball-container,
#standalone-addon-container .addon-dateball-container.yellow-background {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent !important;
}
#standalone-addon-container .addon-dateball,
#standalone-addon-container .addon-dateball.white-text {
  color: var(--tc-blue) !important;
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}
#standalone-addon-container .addon-wrapper-dates-container {
  color: var(--tc-ink);
  font-weight: 500;
  font-size: 15px;
}
#standalone-addon-container .addon-wrapper-dates-container .bold {
  color: var(--tc-blue);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#standalone-addon-container .addon-wrapper-body .show-name {
  color: var(--tc-ink);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
}
#standalone-addon-container .addon-wrapper-lowest-price {
  color: var(--tc-ink);
  font-weight: 800;
}
#standalone-addon-container .addon-location {
  color: var(--tc-ink);
  font-weight: 500;
}
/* Grupperna, korten och stegarna delas med "Endast tillval"-vyn på eventsidan (#addon-content-container,
   avsnitt 13): samma markup från dagny, och båda har en egen <style> efter temat. Stegarna heter
   .addon-amount-blob i båda (bara tillvalssteget har även .amount-blob). */
/* "Tillval" och grupperna (Arrangörstips, Mat, Boende …) som vita kort med 28px radie */
:is(#standalone-addon-container, #addon-content-container) .container.addons {
  width: 100%;
  max-width: none;
}
:is(#standalone-addon-container, #addon-content-container) .popupaddon-header {
  margin: 28px 4px 12px;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:is(#standalone-addon-container, #addon-content-container) .addon-group {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: var(--tc-r-panel);
  background-color: var(--tc-white);
  box-shadow:
    0 1px 2px rgba(31, 58, 158, 0.06),
    0 4px 14px rgba(31, 58, 158, 0.08);
}
:is(#standalone-addon-container, #addon-content-container) .collapsible {
  margin: 0;
  border: 0;
  box-shadow: none;
}
:is(#standalone-addon-container, #addon-content-container) .collapsible-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--tc-line);
  background-color: var(--tc-white);
  color: var(--tc-ink);
}
:is(#standalone-addon-container, #addon-content-container) .collapsible-body {
  border-bottom: 0;
  background-color: var(--tc-white);
}
:is(#standalone-addon-container, #addon-content-container) .addon-card-header p {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase;
}
:is(#standalone-addon-container, #addon-content-container) .addon-type-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--tc-blue) !important;
}
:is(#standalone-addon-container, #addon-content-container) .addon-arrow {
  color: var(--tc-blue) !important;
}
/* Tillvalet i gruppen ("Hotelldeals") och dess datum */
:is(#standalone-addon-container, #addon-content-container) .addon-show-header {
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
}
:is(#standalone-addon-container, #addon-content-container) .addon-show-date,
:is(#standalone-addon-container, #addon-content-container) .addon-show-information,
:is(#standalone-addon-container, #addon-content-container) .category-info {
  color: var(--tc-slate);
  font-weight: 500;
}
:is(#standalone-addon-container, #addon-content-container) .addon-show-date {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}
:is(#standalone-addon-container, #addon-content-container) .addon-chip {
  margin-right: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--tc-wave);
  color: var(--tc-ink);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Korten: ljust isblå med 22px radie, som biljettkorten; namnet i versaler, priset i Shrikhand */
/* Vyns <style> ger kortet min-height 320px och innehållet 120px; korten följer innehållet här */
:is(#standalone-addon-container, #addon-content-container) .new-addon-row-wrapper {
  min-height: 0;
  overflow: hidden;
  border-radius: var(--tc-r-card);
  background: var(--tc-ice);
  box-shadow: none;
}
:is(#standalone-addon-container, #addon-content-container) .the-body {
  gap: 14px;
  min-height: 0;
}
:is(#standalone-addon-container, #addon-content-container) .price-info {
  margin: 6px 0 0;
}
:is(#standalone-addon-container, #addon-content-container) .placeholder-image-container {
  border-radius: var(--tc-r-card) var(--tc-r-card) 0 0;
  background-color: var(--tc-line);
}
:is(#standalone-addon-container, #addon-content-container) .new-addon-the-header,
:is(#standalone-addon-container, #addon-content-container) .new-addon-the-header p {
  margin: 0;
  color: var(--tc-ink);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
}
:is(#standalone-addon-container, #addon-content-container) .price-info,
:is(#standalone-addon-container, #addon-content-container) .price-info b {
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.1;
  white-space: nowrap;
}
/* Stegaren som ett vitt piller: isblått minus, antalet och loggblått plus (vyns <style> gör dem
   runda, 2em, med vitt antal och grå inaktiv) */
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob-container {
  gap: 2px;
  width: fit-content;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--tc-white);
  box-shadow: inset 0 0 0 1px var(--tc-line);
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.plus,
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.minus {
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 19px;
  line-height: 34px;
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.plus {
  background-color: var(--tc-blue) !important;
  color: var(--tc-white) !important;
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.minus {
  background-color: var(--tc-line) !important;
  color: var(--tc-ink) !important;
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.minus.disabled {
  color: #8fa2dd !important;
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.amount {
  width: 30px;
  height: 34px;
  margin: 0;
  border: 0;
  background-color: transparent;
  color: var(--tc-ink);
  font-weight: 800;
  font-size: 16px;
  opacity: 1;
}
:is(#standalone-addon-container, #addon-content-container) .addon-amount-blob.amount.zero {
  color: var(--tc-slate);
}
/* Kort med antal > 0: isblått med ring, som biljettkorten */
:is(#standalone-addon-container, #addon-content-container)
  .new-addon-row-wrapper:has(.addon-amount-blob.minus:not(.disabled)) {
  background: var(--tc-line);
  box-shadow: inset 0 0 0 2px var(--tc-blue);
}
:is(#standalone-addon-container, #addon-content-container) .addon-btn-container .btn.addon-btn {
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background-color: var(--tc-blue);
  color: var(--tc-white);
  line-height: 48px;
}
:is(#standalone-addon-container, #addon-content-container) .addon-btn-container .btn.addon-btn:hover {
  background-color: var(--tc-ink);
}
:is(#standalone-addon-container, #addon-content-container) .addon-btn-container .btn.addon-btn:disabled {
  background-color: var(--tc-line) !important;
  color: var(--tc-slate) !important;
}

/* ---------------------------------------------------------------------------
 * 8d. "Endast tillval" på eventsidan (#addon-content-container, addonContent.jsp)
 *
 * Knappen "Endast tillval" (a.btn.open-addons) under biljettkorten byter biljettdelen i den öppnade
 * visningsraden mot den här vyn: "Avbryt tillvalsköp", rubriken "Tillval" och samma grupper och kort
 * som tillvalssteget i kassan (avsnitt 12 täcker dem). Vyns egen <style> lägger en grå platta bakom
 * och gör stegarna runda med arrangörens orange (.yellow-background); rubriken har inline 20px/400.
 * ------------------------------------------------------------------------- */
#addon-content-container .new-top-addon-container {
  padding: 8px 0 4px;
  background-color: transparent;
}
/* dagnys mobilregel ger varje .container i section#active-events margin 0 20px */
#addon-content-container .container.new-addons {
  width: 100%;
  max-width: none;
  margin: 0;
}
/* "Avbryt tillvalsköp" som textlänk med pil, som "Läs mer" */
#addon-content-container .addon-back-button.btn-flat {
  height: 40px;
  padding: 0 4px !important;
  color: var(--tc-ink) !important;
  font-family: var(--tc-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#addon-content-container .addon-back-button.btn-flat i.material-icons {
  color: var(--tc-blue);
  font-size: 20px;
}
#addon-content-container .addon-back-button.btn-flat:hover {
  background-color: transparent;
  color: var(--tc-blue) !important;
}
#addon-content-container .new-addons > div > p {
  margin: 4px 4px 12px;
  color: var(--tc-blue);
  font-family: var(--tc-font);
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* I biljettdelens vita kort är grupperna ljust isblå i stället för vita med skugga */
#addon-content-container .addon-group {
  box-shadow: inset 0 0 0 1px var(--tc-line);
}

/* ---------------------------------------------------------------------------
 * 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 {
    --tc-pad: 18px;
    --tc-photo: 300px;
    --tc-title-gap: 20px;
  }
  body:not([data-eventid]) section#top #background-container {
    background-image: url('assets/tropicarium-haj-mobil.webp') !important;
    background-position: 50% 35%;
  }
  /* Telefonens bild är den smala, stående varianten; överkanten är bara vatten, så den visas en bit ned */
  section#top #background-container {
    background-position: 50% 35%;
  }
  /* Ortchippen närmare kanten och vågen lägre på den smala heron */
  body section#top div#main-ribbon.container > .slider-wrapper {
    top: 14px;
    left: 14px;
    right: 14px;
  }
  section#top #background-container::after {
    bottom: -84px;
  }
  /* Kategorikorten i en kolumn */
  .unnumbered-show-container .show-category-row .show-category-scoll-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  header#main-header::before {
    left: 60px;
    width: 128px;
    height: 36px;
    top: 14px;
  }
  body:not([data-eventid]) header#main-header::before {
    left: var(--tc-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: 16px;
  }
  /* Veckodagarna och månaden i versaler 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(--tc-ink);
    font-family: var(--tc-font);
    font-weight: 600;
    font-size: 15px;
    text-transform: none;
  }
  section#active-events #show-listing .show-listing-show .combined-name-and-info .price-range {
    color: var(--tc-ink);
    font-family: var(--tc-font);
  }
  section#active-events #show-listing .show-listing-show .show-info-small {
    color: var(--tc-slate);
  }
  /* 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;
  }
}