@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

html {
  overflow-x: clip !important;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  overflow-x: clip !important;
  background-color: #eee9e0 !important;
  color: #6e3820 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
  max-width: 100% !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.035 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #6e3820 !important;
  line-height: 1.1 !important;
}

a { color: #c47840 !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; opacity: 0.8 !important; }

body > div, #cwWrapper, .cwWrapper {
  max-width: 960px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Sidans mittcontainer är display:table hos dans.se och kan annars växa
   bredare än sidan när beskrivningstexter har långa stycken — då radbryts
   texten inte utan sticker ut utanför skärmen. table-layout:fixed krävs
   (CSS-tabeller behandlar width som ett minimum, inte ett tak). */
.cwFormCenter {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  box-sizing: border-box !important;
}

/* Knappar */
input[type="button"], input[type="submit"], button {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: #c47840 !important;
  color: #f5f2ee !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 11px 28px !important;
  cursor: pointer !important;
  font-size: 13px !important;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover {
  opacity: 0.85 !important;
}
input[value="Visa alla"], input[value="Stäng"],
input[value="Show all"], input[value="Close"] {
  background-color: transparent !important;
  color: #6e3820 !important;
  border: 1.5px solid #c9c1b4 !important;
}

/* Cookie-bannerns "Neka"-knapp — sekundär stil */
#uscCookieBanner .uscConsentDecline {
  background-color: transparent !important;
  border: 1.5px solid rgba(245, 242, 238, 0.55) !important;
}

/* Synlig fokusring för tangentbordsnavigering */
input[type="button"]:focus-visible, input[type="submit"]:focus-visible,
button:focus-visible, input[type="checkbox"]:focus-visible, a:focus-visible {
  outline: 2px solid #c47840 !important;
  outline-offset: 2px !important;
}

/* Rubriker */
h1 {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 700 !important;
  color: #6e3820 !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid #c47840 !important;
  display: inline-block !important;
}
h2, h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c47840 !important;
  margin: 24px 0 10px !important;
}

/* Tabeller */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  max-width: 100% !important;
}
table th {
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #c47840 !important;
  border-bottom: 2px solid #e0d9cf !important;
  padding: 10px 14px !important;
  background: transparent !important;
  text-align: left !important;
}
table td {
  padding: 9px 14px !important;
  border-bottom: 1px solid #e8e2d8 !important;
  color: #6e3820 !important;
  vertical-align: middle !important;
}
table tr:last-child td { border-bottom: none !important; }
/* Radmarkering vid hover — bara i listtabeller (med rubrikrad),
   inte i formulär där det ser ut som ett fel vid tryck på mobil */
table:has(th) tr:hover td { background-color: #ece6dc !important; }
table td:first-child {
  color: #c47840 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Formulärceller: låt innehåll radbrytas (fixar att månad/dag för
   födelsedatum trycktes utanför skärmen av dans.se:s nowrap-regel) */
table td, .cwDate {
  white-space: normal !important;
}

/* Formulärfält — ingen bredd, bara utseende */
body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]),
body select,
body textarea {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: #6e3820 !important;
  background: #f5f2ee !important;
  border: 1.5px solid #c9c1b4 !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  max-width: 100% !important;
}
body input:focus, body select:focus, body textarea:focus {
  border-color: #c47840 !important;
  box-shadow: 0 0 0 3px rgba(196,120,64,0.12) !important;
}

/* Select: anpassad pil */
body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c47840' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 8px !important;
  padding-right: 30px !important;
  cursor: pointer !important;
}

/* Checkbox */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 2px solid #c9c1b4 !important;
  border-radius: 0 !important;
  background: #f5f2ee !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
input[type="checkbox"]:checked {
  background-color: #c47840 !important;
  border-color: #c47840 !important;
}
input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  color: #f5f2ee !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Felmeddelanden (t.ex. "Födelsemånad måste anges") — behåll tydligt
   röda men i samma formspråk som resten av designen */
.cwInvalidDataReport {
  font-family: 'Montserrat', sans-serif !important;
  background-color: #faeae6 !important;
  border: 2px solid #b3402f !important;
  border-radius: 0 !important;
  color: #7a2418 !important;
  padding: 14px 18px !important;
}
.cwMissingDataContainer, .cwInvalidDataContainer {
  background-color: #f7eae2 !important;
  border: 2px solid #b3402f !important;
  border-radius: 0 !important;
}

/* Dölj CogWork-branding ("i" = skiftlägesokänsligt, träffar även
   t.ex. class="cwSupplierInfo") */
a[href*="cogwork" i], *[class*="powered" i], *[class*="supplier" i] { display: none !important; }

/* Responsiv mobil */
@media (max-width: 700px) {
  body { font-size: 13px !important; }

  /* Breda tabeller (kurslistor m.m.): scrolla i sidled */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table td, table th {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  /* FORMULÄRTABELLER (tabeller med textfält/dropdowns, t.ex.
     personuppgifterna vid bokning): stapla allt vertikalt — etikett
     över fält — så att inget någonsin hamnar utanför skärmen.
     Fixar att Ort, månad/dag för Född m.m. trycktes ut till höger. */
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]),
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) thead,
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) tbody,
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) tr,
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) td,
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) th {
    display: flow-root !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
  }

  /* Dans.se lägger fältgrupper (Postnr/Ort m.fl.) i flytande nästlade
     tabeller (inline style="float:left/right") — stäng av floaten så
     att de staplas i ordning i stället för att flöda in i varandra */
  table table,
  .cwFieldCollection, .cwFields, .cwFieldName, .cwFieldText {
    float: none !important;
    clear: both !important;
    margin-right: 0 !important;
  }
  table table td, table table th {
    text-align: left !important;
  }
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) tr {
    border-bottom: 1px solid #e8e2d8 !important;
    padding: 8px 0 !important;
  }
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) tr:last-child {
    border-bottom: none !important;
  }
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) td,
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) th {
    padding: 3px 0 !important;
  }
  table:has(select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) td:empty {
    display: none !important;
  }

  /* Textfält får gärna full bredd på mobil ... */
  body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]),
  body textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 16px i fälten hindrar iOS Safari från att auto-zooma in när man
     trycker i ett fält (sker vid textstorlek under 16px) */
  body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]),
  body select,
  body textarea {
    font-size: 16px !important;
  }

  /* Större tryckyta för kryssrutor på mobil */
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
  input[type="checkbox"]:checked::after {
    font-size: 14px !important;
  }

  /* ... men ALDRIG dropdowns: width:100% gjorde att år-fältet för
     "Född" fyllde hela raden och tryckte månad + dag utanför skärmen.
     Naturlig bredd låter alla tre få plats sida vid sida. */
  body select {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px 4px 2px 0 !important;
  }
}