/* =====================================================
   KALKULATOR V2 — Enhanced form UX
   Larger inputs, higher contrast, better readability
   Override layer on top of style.css
   ===================================================== */

/* Container — mer luft */
.kalk-step,
.kalk-step-v2 {
  padding: 36px !important;
  margin-bottom: 24px !important;
  border-width: 2px !important;
}

@media (max-width: 768px) {
  .kalk-step,
  .kalk-step-v2 {
    padding: 24px !important;
  }
}

/* Steg-header — tydeligere */
.kalk-step-num,
.kalk-step__num {
  width: 44px !important;
  height: 44px !important;
  font-size: 17px !important;
  box-shadow: 0 2px 8px rgba(10, 26, 47, 0.15);
}

.kalk-step-title,
.kalk-step__title {
  font-size: 20px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px;
}

.kalk-step__desc {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin-bottom: 28px !important;
}

/* Labels — større og mørkere */
.form-group label,
.form-label,
.kalk-step label:not(.radio-card):not(.check-card) {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A2332 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0;
}

/* Inputs — betydelig større */
.form-control,
.form-input,
input[type="text"]:not(.lang-flag):not([type="hidden"]),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  padding: 16px 18px !important;
  font-size: 16px !important;
  min-height: 52px !important;
  border-width: 2px !important;
  border-color: #CBD5E1 !important;
  border-radius: 10px !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  line-height: 1.4 !important;
}

textarea,
textarea.form-control,
textarea.form-input {
  min-height: 140px !important;
  line-height: 1.6 !important;
}

/* Placeholder — tydelig men ikke skrikende */
.form-control::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Fokus — kraftigere */
.form-control:focus,
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #D4832F !important;
  box-shadow: 0 0 0 4px rgba(212, 131, 47, 0.18) !important;
  outline: none !important;
}

/* Hover — subtil feedback */
.form-control:hover:not(:focus),
.form-input:hover:not(:focus),
select:hover:not(:focus),
input:hover:not(:focus) {
  border-color: #94A3B8 !important;
}

/* Select — egen chevron */
select.form-control,
select.form-input,
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 48px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Radio-cards — mer substans */
.radio-cards {
  gap: 16px !important;
}

.radio-card label {
  padding: 24px !important;
  border-width: 2px !important;
  border-color: #CBD5E1 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.radio-card label:hover {
  border-color: #D4832F !important;
  background: rgba(212, 131, 47, 0.04) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 26, 47, 0.06);
}

.radio-card input:checked + label {
  border-color: #D4832F !important;
  background: rgba(212, 131, 47, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(212, 131, 47, 0.2);
}

.radio-card-title {
  font-size: 17px !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.radio-card-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}

/* Checkbox-cards — samme behandling */
.check-card label,
.check-cards label {
  padding: 18px 20px !important;
  border-width: 2px !important;
  border-color: #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  color: #1A2332 !important;
  font-weight: 500 !important;
}

.check-card label:hover,
.check-cards label:hover {
  border-color: #D4832F !important;
  background: rgba(212, 131, 47, 0.04) !important;
}

.check-card input:checked + label,
.check-cards input:checked + label {
  border-color: #D4832F !important;
  background: rgba(212, 131, 47, 0.08) !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* Lang-row — mer plass */
.lang-row {
  gap: 14px !important;
  margin-bottom: 14px !important;
  padding: 6px 0 !important;
}

/* Add-knapp — tydeligere */
.kalk-add-btn {
  padding: 14px !important;
  font-size: 15px !important;
  border-width: 2px !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.kalk-add-btn:hover {
  border-color: #D4832F !important;
  color: #D4832F !important;
  background: rgba(212, 131, 47, 0.04) !important;
}

/* Remove-knapp — større touch-target */
.kalk-remove {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: #94A3B8 !important;
}

.kalk-remove:hover {
  color: #DC2626 !important;
  background: #FEF2F2 !important;
}

/* Form-hint — mer lesbar */
.form-hint {
  font-size: 13px !important;
  color: #64748B !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* Submit-knapp — dominerende */
.kalk-step .btn,
.kalk-step button[type="submit"],
.kalk-submit {
  min-height: 56px !important;
  font-size: 17px !important;
  padding: 18px 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(212, 131, 47, 0.25);
  transition: all 0.2s ease !important;
}

.kalk-step .btn:hover,
.kalk-step button[type="submit"]:hover,
.kalk-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 131, 47, 0.35);
}

/* Suksess/feil — mer synlig */
.form-success,
.kalk-success {
  padding: 24px !important;
  font-size: 15px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
  line-height: 1.6 !important;
}

.form-error,
.kalk-error {
  padding: 20px !important;
  font-size: 15px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
  line-height: 1.6 !important;
}

/* Step-nummer når aktiv */
.kalk-step.active {
  border-color: #D4832F !important;
  box-shadow: 0 0 0 4px rgba(212, 131, 47, 0.1), 0 8px 24px rgba(10, 26, 47, 0.06) !important;
}

/* Form-row gap */
.form-row {
  gap: 20px !important;
}

@media (max-width: 640px) {
  /* Mobil — enda mer touch-friendly */
  input[type="text"]:not(.lang-flag),
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea,
  .form-control,
  .form-input {
    font-size: 16px !important; /* forhindrer iOS-zoom */
    min-height: 54px !important;
    padding: 16px !important;
  }

  .kalk-step-title,
  .kalk-step__title {
    font-size: 18px !important;
  }

  .radio-card label,
  .check-card label {
    padding: 18px !important;
  }
}