/* ===============================
   ms-cl FINAL (Urbanist + brand green)
   Brand green: #5c7c55
================================ */

body.elementor-page .elementor .elementor-inner .ms-cl *,
body .ms-cl *,
body.elementor-page .elementor .elementor-inner .ms-cl ::after,
body .ms-cl ::after,
body.elementor-page .elementor .elementor-inner .ms-cl ::before,
body .ms-cl ::before {
  box-sizing: border-box;
}

/* Wrapper */
body.elementor-page .elementor .elementor-inner .ms-cl,
body .ms-cl {
  --ms-green: #5c7c55;
  line-height: 1.5;
  font-family: 'Urbanist', sans-serif;
  overflow: hidden;
}

/* Tving Urbanist på ALT inde i modulet */
body .ms-cl,
body .ms-cl * {
  font-family: 'Urbanist', sans-serif !important;
}

/* ===============================
   Container (det hvide felt)
   + mere luft i bunden så knappen kan ligge "under"
================================ */
body.elementor-page .elementor .elementor-inner .ms-cl .container,
body .ms-cl .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;

  /* vigtig: mere luft i bunden */
  padding: 20px 15px 38px;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ms-green);
  text-align: left;

  background-color: #ffffff;
  border: 0px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ===============================
   Labels / Form
================================ */
body.elementoror-page .elementor .elementor-inner .ms-cl label,
body .ms-cl label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

body.elementor-page .elementor .elementor-inner .ms-cl .form-group,
body .ms-cl .form-group {
  margin-bottom: 10px;
  position: relative;
}

body.elementor-page .elementor .elementor-inner .ms-cl .form-control,
body .ms-cl .form-control {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0.175rem 0.55rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #000000 !important;

  background-color: #ffffff !important; /* hvis du vil have grønne felter igen: sæt til var(--ms-green) */
  border: 1px solid #dddddd !important;
  border-radius: 8px;
}

/* ===============================
   Layout rows
================================ */
body.elementor-page .elementor .elementor-inner .ms-cl .row,
body .ms-cl .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* ===============================
   Result boxes
================================ */
body.elementor-page .elementor .elementor-inner .ms-cl .result-sec,
body .ms-cl .result-sec {
  flex: 1 1 45%;
  margin: 10px;
  min-width: 150px;
  border: 1px solid #dbdbdb;
  padding: 18px 25px;
  border-radius: 12px;
  text-align: left;
  background: #fff;
}

/* Gør titlerne en smule mindre */
body.elementor-page .elementor .elementor-inner .ms-cl .result-title,
body .ms-cl .result-title {
  font-weight: 600;
  font-size: 18px; /* var 20px */
  margin-bottom: 0;
}

/* Gør tal en smule mindre + korrekt font-weight */
body.elementor-page .elementor .elementor-inner .ms-cl .list-value.sp-cl,
body .ms-cl .list-value.sp-cl {
  font-size: 26px; /* var 30px */
  color: var(--ms-green);
  font-weight: 500; /* FIX (medium er ikke gyldigt) */
  padding: 3px;
}

/* ===============================
   Height buttons (btn-group)
   - pop on hover/active
================================ */
body.elementor-page .elementor .elementor-inner .ms-cl .btn-group,
body .ms-cl .btn-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1px;
  gap: 8px;
}

body.elementor-page .elementor .elementor-inner .ms-cl .btn-group .btn,
body .ms-cl .btn-group .btn {
  font-weight: 500;
  color: #5a5a5a;
  border: 1px solid #ddd;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 12px 15px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  width: calc(100% / 3 - 10px);
  margin: 0;
  font-size: 16px;
  min-width: 10px !important;
  will-change: transform;
  transform-origin: center;
}

body.elementor-page .elementor .elementor-inner .ms-cl .btn-group .btn:hover,
body .ms-cl .btn-group .btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);

  background-color: var(--ms-green) !important;
  border-color: var(--ms-green) !important;
  color: #ffffff !important;
}

body.elementor-page .elementor .elementor-inner .ms-cl .btn-group .btn.active,
body .ms-cl .btn-group .btn.active {
  transform: scale(1.04);
  color: #ffffff;
  background-color: var(--ms-green);
  border-color: var(--ms-green);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ===============================
   Slider (brand green)
================================ */
body.elementor-page .elementor .elementor-inner .ms-cl .slidecontainer,
body .ms-cl .slidecontainer {
  width: 100%;
  padding: 10px 0;
}

body.elementor-page .elementor .elementor-inner .ms-cl .slider,
body .ms-cl .slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ms-green) 0%, #ddd 0%);
  outline: none;
  opacity: 0.95;
  transition: background 0.2s ease-in-out;
}

body.elementor-page .elementor .elementor-inner .ms-cl .slider::-webkit-slider-thumb,
body .ms-cl .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ms-green);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

body.elementor-page .elementor .elementor-inner .ms-cl .slider::-moz-range-thumb,
body .ms-cl .slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ms-green);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* ===============================
   CTA button "Få et tilbud"
   - FULL WIDTH (inkl. wrapper)
   - længere nede
   - samme grøn
================================ */

/* 1) Elementor wrapper skal også være 100% */
body .ms-cl .container .elementor-button-wrapper {
  width: 100% !important;
  display: block !important;
}

/* 2) Tving CTA til at fylde hele bredden */
body .ms-cl .container a.elementor-button,
body .ms-cl .container .elementor-button,
body .ms-cl .container button[type="submit"],
body .ms-cl .container input[type="submit"],
body .ms-cl .container .btn-submit,
body .ms-cl .container .btn-offer,
body .ms-cl .container .ms-cta {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  margin-top: 22px; /* skubber ned */
  padding: 16px 18px;
  border-radius: 12px;

  background: var(--ms-green) !important;
  color: #ffffff !important;
  border: 0 !important;
  text-align: center;
  cursor: pointer;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

body .ms-cl .container a.elementor-button:hover,
body .ms-cl .container .elementor-button:hover,
body .ms-cl .container button[type="submit"]:hover,
body .ms-cl .container input[type="submit"]:hover,
body .ms-cl .container .btn-submit:hover,
body .ms-cl .container .btn-offer:hover,
body .ms-cl .container .ms-cta:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  filter: brightness(1.02);
}

/* ===============================
   Responsive
================================ */

/* Up to 350px */
@media (max-width: 350px) {
  body .ms-cl .btn-group .btn {
    padding: 10px 10px;
    font-size: 11px;
    white-space: normal;
  }

  body .ms-cl .row {
    flex-direction: column;
    align-items: center;
  }

  body .ms-cl .result-sec {
    width: 100%;
    margin: 10px 0;
    margin-bottom: -5px;
  }

  body .ms-cl .result-title { font-size: 15px; }
  body .ms-cl .list-value.sp-cl { font-size: 24px; }
}

/* 351px – 767px */
@media (min-width: 351px) and (max-width: 767px) {
  body .ms-cl .btn-group .btn {
    padding: 10px 12px;
    font-size: 14px;
  }

  body .ms-cl .row {
    flex-direction: column;
    align-items: center;
  }

  body .ms-cl .result-sec {
    width: 100%;
    margin: 10px 0;
    margin-bottom: -5px;
  }
}

/* 768px – 1200px */
@media (min-width: 768px) and (max-width: 1200px) {
  body .ms-cl .btn-group .btn {
    padding: 10px 12px;
    font-size: 14px;
  }

  body .ms-cl .row {
    flex-direction: row;
    align-items: center;
  }
}