/* HOTFIX 53m — Storing melden multi-step formulier */

.page-storingsdienst .storing-melding-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.storing-form.storing-melding-form {
  max-width: 100%;
}

.storing-form {
  background: #fff;
  border-radius: 14px;
}

.storing-form__urgent {
  background: #fef2f2;
  border-left: 4px solid #ff6a1a;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.storing-form__urgent.is-highlight {
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.35);
  animation: storing-urgent-pulse 1.2s ease-in-out 2;
}

@keyframes storing-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(255, 106, 26, 0.2); }
}

.storing-form__urgent-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.storing-form__urgent-tekst {
  font-size: 14px;
  color: #991b1b;
  line-height: 1.5;
  margin: 0;
}

.storing-form__urgent-bel {
  display: inline-block;
  margin-top: 8px;
  background: #ff6a1a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.25;
  align-content: center;
}

.storing-form__urgent-bel:hover {
  background: #e85c10;
  color: #fff;
}

.storing-form__steps {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.storing-form__step-dot {
  flex: 1;
  height: 4px;
  background: #e4e4e7;
  border-radius: 2px;
  border: 0;
  padding: 0;
  cursor: default;
}

.storing-form.is-enhanced .storing-form__step-dot {
  cursor: pointer;
}

.storing-form__step-dot.active {
  background: #ff6a1a;
}

.storing-form__step-label {
  font-size: 13px;
  color: #71717a;
  margin: 0 0 18px;
  font-weight: 600;
}

.storing-form.is-enhanced .storing-form__step {
  display: none;
}

.storing-form.is-enhanced .storing-form__step.active {
  display: block;
}

.storing-form fieldset.storing-form__step {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.storing-form__step-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #18181b;
}

.storing-form__types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.storing-form__type-btn {
  padding: 14px;
  border: 1.5px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  min-height: 48px;
  font-family: inherit;
  color: #18181b;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.storing-form__type-btn:hover {
  border-color: #d4d4d8;
}

.storing-form__type-btn.selected {
  border-color: #ff6a1a;
  background: #fef2f2;
  color: #ff6a1a;
}

.storing-form__type-btn.danger.selected {
  border-color: #ff6a1a;
  background: #ff6a1a;
  color: #fff;
}

.storing-form__type-select-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.storing-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.storing-form__row .storing-melding-field {
  margin-bottom: 0;
}

.storing-form__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.storing-form__btn {
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: none;
  min-height: 48px;
  font-family: inherit;
}

.storing-form__btn--next,
.storing-form__btn--submit {
  background: #ff6a1a;
  color: #fff;
  flex: 1;
}

.storing-form__btn--next:hover,
.storing-form__btn--submit:hover {
  background: #e85c10;
  color: #fff;
}

.storing-form__btn--prev {
  background: #fff;
  border: 1px solid #e4e4e7;
  color: #18181b;
}

.storing-form__field-error {
  border-color: #ff6a1a !important;
  box-shadow: 0 0 0 1px #ff6a1a;
}

.storing-form.is-enhanced .storing-form__nav--fallback-submit {
  display: none;
}

@media (max-width: 768px) {
  .page-storingsdienst .storing-melding-card {
    padding: 22px 18px;
    border-radius: 12px;
  }

  .storing-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .storing-form__types {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .page-storingsdienst .storing-melding-card {
    padding: 18px 14px;
  }

  .storing-form__btn {
    padding: 12px 16px;
    font-size: 14px;
  }
}

.sleutel-buren-block {
  background: #fef7ed;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 10px 0 14px 28px;
  animation: sleutelBurenSlideDown 0.2s ease-out;
}

.sleutel-buren-block[hidden] {
  display: none !important;
}

.sleutel-buren-block h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sleutel-buren-block .form-row {
  margin-bottom: 10px;
}

.sleutel-buren-block label {
  display: block;
  font-size: 13px;
  color: #52525b;
  font-weight: 600;
  margin-bottom: 4px;
}

.sleutel-buren-block input,
.sleutel-buren-block textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e4e4e7;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.sleutel-buren-block textarea {
  resize: vertical;
}

.sleutel-buren-block .required {
  color: #ff6a1a;
}

.sleutel-buren-block input.veld-fout,
.sleutel-buren-block textarea.veld-fout {
  border-color: #ff6a1a;
  background: #fef2f2;
}

.storing-toegang-vraag {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

.storing-melding-radios--inline label {
  display: inline-flex;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

@keyframes sleutelBurenSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

@media (max-width: 480px) {
  .sleutel-buren-block {
    margin-left: 0;
    padding: 14px;
  }
}

/* === Moderne verfijning (2026) — strak & soepel, ook op mobiel === */
.storing-melding-card{border-radius:16px;box-shadow:0 4px 24px rgba(20,30,50,.06)}
.storing-melding-form label{font-weight:600;color:#2b2f36;font-size:13.5px}
.storing-melding-form input[type=text],
.storing-melding-form input[type=email],
.storing-melding-form input[type=tel],
.storing-melding-form input[type=number],
.storing-melding-form select,
.storing-melding-form textarea{
  width:100%;box-sizing:border-box;font-size:15px;color:#10151f;
  padding:12px 14px;margin-top:5px;border:1.5px solid #dde3ec;border-radius:11px;
  background:#fff;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;
}
.storing-melding-form input:focus,
.storing-melding-form select:focus,
.storing-melding-form textarea:focus{
  outline:none;border-color:#ff6a1a;box-shadow:0 0 0 3px rgba(255, 106, 26,.14);
}
.storing-melding-form textarea{min-height:96px;resize:vertical;line-height:1.5}
.storing-melding-form .form-row,.storing-melding-form .storing-form__field{margin-bottom:14px}
.storing-melding-form .storing-form__field-error{border-color:#ff6a1a !important;box-shadow:0 0 0 3px rgba(255, 106, 26,.14) !important}

/* Toegang-radio's + buren-blok netjes */
.storing-toegang-vraag{border:1px solid #eef1f6;border-radius:12px;padding:12px 14px;margin:6px 0 14px}
.storing-toegang-vraag legend{font-weight:700;font-size:13.5px;color:#2b2f36;padding:0 4px}
.storing-toegang-vraag label{display:flex;align-items:center;gap:8px;padding:7px 0;cursor:pointer;font-weight:500}
.sleutel-buren-block{background:#fff8ef;border:1px solid #f6d9a8;border-left:4px solid #f59e0b;border-radius:12px;padding:14px 16px;margin-top:10px;animation:mfxfade .25s ease}
@keyframes mfxfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Knoppen: groot, duidelijk, soepel */
.storing-melding-form .storing-form__btn,
.storing-melding-form button[type=submit],
.storing-melding-form .contact-submit-btn{
  border-radius:12px;font-weight:800;font-size:15.5px;padding:14px 22px;transition:transform .08s ease,filter .15s ease;
}
.storing-melding-form .storing-form__btn:active{transform:translateY(1px)}
.storing-melding-form .storing-form__btn--next,
.storing-melding-form button[type=submit]{background:#ff6a1a;color:#fff;border:none}
.storing-melding-form .storing-form__btn--next:hover{filter:brightness(.94)}
.storing-melding-form .storing-form__btn--prev{background:#fff;color:#2b2f36;border:1.5px solid #dde3ec}

/* Stappen-overgang soepel */
.storing-form.is-enhanced .storing-form__step{transition:opacity .2s ease}
@media(max-width:640px){
  .storing-melding-card{border-radius:14px}
  .storing-melding-form button[type=submit],.storing-melding-form .storing-form__btn{width:100%}
}