/* TODO: Flytta till main */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --select-border: #777;
  --input-focus-border: var(--3-primary-yellow-600, #f8bc41);
  --select-arrow: var(--select-border);
}

/* Typsnitt */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");

/* LABEL STYLING */
.label {
  display: flex;
  color: var(--1-base-black-white-black, #1b242f);
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

/* INPUT STYLING */
.checkbox-container {
  display: flex;
  align-items: flex-start;
  align-items: center;
}

/* Grundinställningar för checkbox-etikett */
.label-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--2-grey-dark-grey-grey-600, #696e75);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
}

/* Dölj webbläsarens inbyggda ruta och gemensamma grundinställningar för checkboxar */
.input-checkbox,
.input-checkbox-företag {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  box-sizing: border-box;
  border: 1px solid #b7b9bc;
  background-color: var(--1-base-black-white-white, #fafafa);
  position: relative;
  cursor: pointer;
}

/* Markerad checkbox (.input-checkbox): Gul bakgrund och kant */
.input-checkbox:checked {
  background-color: #f8bc41;
  border: 1px solid var(--3-primary-yellow-700, #e3a931);
}

/* Markerad checkbox (.input-checkbox-företag): Lila bakgrund och kant */
.input-checkbox-företag:checked {
  background-color: var(--4-secondary-purple-blue-600, #5a4fcf);
  border: 1px solid var(--4-secondary-purple-blue-700, #433b9a);
}

/* Själva vita bocken – gemensamt för båda checkbox-typer */
.input-checkbox:checked::after,
.input-checkbox-företag:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--1-base-black-white-white, #fafafa);
  border-bottom: 2px solid var(--1-base-black-white-white, #fafafa);
}

/* RADIO CONTAINER */
.radio-container {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Only reset appearance for radio buttons inside .input-radio-layout */
.input-radio-layout input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Liten radio (.input-radio-sm) inside .input-radio-layout */
.input-radio-layout input[type="radio"].input-radio-sm {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--2-grey-dark-grey-grey-300, #b7b9bc);
  border-radius: 50%;
  background: #fafafa;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.15rem;
}

.input-radio-layout input[type="radio"].input-radio-sm:checked::before {
  content: "";
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border: 5px solid var(--3-primary-yellow-600, #f8bc41);

  background-color: var(--1-base-black-white-white, #fafafa);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-radio-layout input[type="radio"].input-radio-sm:checked::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--3-primary-yellow-700, #e3a931);

  background-color: var(--1-base-black-white-white, #fafafa)fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-radio-layout input[type="radio"].input-radio-sm:checked {
  border: 1px solid var(--3-primary-yellow-700, #e3a931);
  background-color: #f8bc41;
}

/* Grey radio inside .input-radio-layout */
.input-radio-layout input[type="radio"].input-radio-grey {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--2-grey-dark-grey-grey-300, #b7b9bc);
  border-radius: 50%;
  background: #fafafa;
  cursor: pointer;
  position: relative;
}

.input-radio-layout input[type="radio"].input-radio-grey:checked::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--2-grey-dark-grey-grey-700, #4e555d);
  border-radius: 50%;
  background: var(--2-grey-dark-grey-grey-700, #4e555d);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Företag small radio inside .input-radio-layout */
.input-radio-layout input[type="radio"].input-radio-företag-sm {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--4-secondary-purple-blue-600, #5a4fcf);
  border-radius: 50%;
  background: #fafafa;
  cursor: pointer;
  position: relative;
}

.input-radio-layout input[type="radio"].input-radio-företag-sm:checked::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--4-secondary-purple-blue-600, #5a4fcf);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Ensure other radio buttons outside .input-radio-layout are not affected */
input[type="radio"]:not(.input-radio-sm):not(.input-radio-grey):not(.input-radio-företag-sm) {
  appearance: initial;
  -webkit-appearance: initial;
  -moz-appearance: initial;
}

/*DATE */
input[type="date"] {
  /* Custom calendar icon to the far right */
  /* background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z' stroke='%2382878C' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); */
  cursor: pointer;
}

/* TEXTINPUT */
.input-text {
  display: flex;
  padding: 0.625rem 0.875rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.5rem;
  border: 1px solid var(--2-grey-dark-grey-grey-300, #b7b9bc);
  background: var(--1-base-black-white-white, #fafafa);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  width: 100%;
}

.input-text:focus {
  outline: none;
  /* removes default blue outline */
  border: 1px solid var(--input-focus-border);
}

/* TEXTAREA */
.input-textarea {
  display: flex;
  padding: 0.75rem 0.875rem;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 0.5rem;
  border: 1px solid var(--2-grey-dark-grey-grey-300, #b7b9bc);
  background: var(--1-base-black-white-white, #fafafa);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;

  resize: none;
}

.input-textarea:focus {
  outline: none;
  /* removes default blue outline */
  border: 1px solid var(--input-focus-border);
}

.input-placeholder {
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
}

.input-container {
  position: relative;
  display: inline-block;
}

.input-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* so clicks go through to the input */
}

/* SELECT */
select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  z-index: 1;
  outline: none;
}

select::-ms-expand {
  display: none;
}

/* INPUT SELECT */
.input-select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  min-width: 15ch;
  padding: 0.625rem 0.875rem;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: var(--1-base-black-white-white, #fafafa);
  border-radius: 0.5rem;
  border: 1px solid var(--2-grey-dark-grey-grey-300, #b7b9bc);
  background: var(--1-base-black-white-white, #fafafa);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--2-grey-dark-grey-grey-500, #82878c);
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  width: 100%;
}

.input-select select,
.input-select::after {
  grid-area: select;
}

/* Custom arrow */
.input-select:not(.input-select--multiple)::after {
  content: "";
  justify-self: end;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="%2382878C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
}

/* Interim-lösning för :focus-within */
/* select:focus+.focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
} */
/* Fokuserad select */
.input-select:focus-within {
  border: 1px solid var(--input-focus-border);
}

/* Ändra pilens rotation när select är öppen */
.input-select:focus-within::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

/* Multiple select */
select[multiple] {
  padding-right: 1rem;
  height: 6rem;
}

/* select[multiple] option {
  white-space: normal;
  outline-color: var(--select-focus);
} */
select[multiple]:focus {
  border-color: var(--input-focus-border);
}

/* Inaktiverad select */
.input-select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}

.select-dropdown {
  margin-left: -1rem;
  padding-left: 1rem;
  width: calc(100% + 2rem);
}

/* Behåll en neutral bakgrund i .upload-wrapper */
.upload-wrapper {
  max-width: 400px;
  min-width: 200px;
  /* Justera bredd efter egen design */
  margin: 1rem auto;
  /* Centrera på sidan */
  padding: 2rem;

  border: 1px solid #dadce0;
  /* Lätt grå ram */
  border-radius: 8px;
  /* Rundade hörn */

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Du kan ha en ljus bakgrund om så önskas */
  background-color: var(--1-base-black-white-white, #fafafa)fff;

  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Text sm/Regular */
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  /* 142.857% */

  cursor: pointer;
}

.upload-wrapper:hover {
  border: 1px solid var(--input-focus-border);
}

.upload-wrapper2 {
  max-width: 400px;
  min-width: 200px;
  /* Justera bredd efter egen design */
  /* Centrera på sidan */

  border: 1px solid #dadce0;
  /* Lätt grå ram */
  border-radius: 0.5rem;
  /* Rundade hörn */

  padding: 0rem 1.5rem 0rem 1.5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Du kan ha en ljus bakgrund om så önskas */
  background-color: var(--1-base-black-white-white, #fafafa)fff;

  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Text sm/Regular */
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  /* 142.857% */

  cursor: pointer;
}

.upload-wrapper2:hover {
  border: 1px solid var(--3-primary-yellow-600, #f8bc41);
}

.upload-wrapper.dragover {
  border: 2px dashed var(--3-primary-yellow-600, #f8bc41);
  background-color: var(--1-base-black-white-white, #fafafa)9e6;
}

/* Ikonens bakgrund – gör en cirkel med ljusare ton */
.upload-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;

  background-color: #f2f2f2;
  /* Ljus, neutral bakgrund */

  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

/* Anpassa själva ikonen (SVG) */
.upload-icon svg {
  width: 24px;
  height: 24px;
  /* Du kan sätta stroke-färg här om du vill */
}

/* Huvudtexten */
.upload-text {
  font-size: 1rem;
  color: #4f4f4f;
  margin: 0.5rem 0;
}

/* Färg på “klicka för att ladda upp” */
.clickable-text {
  color: #5b49da;
  /* T.ex. en lila/blå ton */
  font-weight: 600;
  /* Lätt fetstil */
}

/* Undertext med filformat/krav */
.upload-subtext {
  font-size: 0.875rem;
  color: #6f6f6f;
  margin: 0.25rem 0;
}

/* Döljer själva input-rutan */
.upload-input {
  display: none;
}

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap");

.badge-md-gray {
  display: flex;
  padding: 0.125rem 0.5rem 0.125rem 0.625rem;
  align-items: center;
  gap: 0.25rem;

  border-radius: 1rem;
  background: var(--2-grey-dark-grey-grey-100, #eaeaea);
  mix-blend-mode: multiply;

  color: var(--2-grey-dark-grey-grey-700, #4e555d);
  text-align: center;

  /* Text sm/Medium */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  /* 142.857% */

  width: fit-content;
}

.input-radio-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}

.input-supporting-text {
  align-self: stretch;

  color: var(--2-grey-dark-grey-grey-600, #696e75);

  /* Text sm/Regular */
  font-family: "Source Sans Pro";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  /* 142.857% */
}

.icon-input {
  display: inline-flex;
  align-items: center;
  /* background-color: #f2f2f2; */
  /* Justera bakgrund efter önskemål */
  /* border-radius: 6px; */
  /* Rundade hörn */
  /* padding: 8px 12px; */
  /* Utrymme runt innehållet */
  /* font-family: sans-serif; */
  /* Exempel på typsnitt */
  /* color: #333; */
  /* Textfärg */
  justify-items: center;
  justify-content: center;
  align-content: center;
}

.icon-input:focus-within {
  border-color: var(--input-focus-border);
}

/* Ikonen till vänster */
.icon-input .icon {
  /* margin-right: 8px; */
  /* Mellanrum mellan ikon och text */
  /* font-size: 16px; */
  /* Ändra storlek på ikonen efter behov */
  color: #666;
  /* Exempel på ikonfärg */
  /* align-self: center; */
  /* justify-self: center; */
  /* justify-content: center; */
  /* align-items: center; */
  display: flex;
  margin-block: 2px;
}

/* Själva input-fältet */
.icon-input input {
  border: none;
  /* Ingen kantlinje */
  background: transparent;
  /* Transparent bakgrund så den smälter in */
  outline: none;
  /* Ingen “outline” när du klickar i fältet */
  /* Text md/Regular */
  font-family: "Source Sans Pro";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  /* line-height: 1.5rem; */
  /* 150% */
  /* Ändra storlek på texten efter behov */
  /* width: 220px; */
  /* Justera bredd efter behov */
}