/* ============================================================
   denmedia.css — DenMedia huisstijl voor het HostFact
   bestelformulier en de domeinnaamcontrole.
   Wordt NA orderform.css / whois.css geladen en overschrijft
   die waar nodig. Raak orderform.css zelf niet aan.
   ============================================================ */

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

:root{
  --dm-primary:#2C7BE5;
  --dm-primary-dark:#1F63C4;
  --dm-primary-soft:#EAF2FD;
  --dm-ink:#1A1A2E;
  --dm-text:#444444;
  --dm-muted:#6B7280;
  --dm-border:#E3E8EF;
  --dm-soft:#F7F9FC;
  --dm-green:#15803D;
  --dm-green-soft:#ECFDF3;
  --dm-red:#B42318;
  --dm-red-soft:#FEF3F2;
  --dm-radius:8px;
  --dm-shadow:0 1px 2px rgba(16,24,40,.05);
  --dm-shadow-lg:0 4px 16px rgba(16,24,40,.08);
}

/* ---------- Basis ---------- */
.o_form_container,
.w_form_container{
  width:100%;
  min-width:0;
  max-width:880px;
  margin:0 auto;
  padding:4px 16px 32px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.6;
  color:var(--dm-text);
  -webkit-font-smoothing:antialiased;
}
.o_form_container > *,
.w_form_container > *{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.o_form_container *,
.w_form_container *{ box-sizing:border-box; }

/* De domeinnaamcontrole zit genest in het bestelformulier: geen dubbele
   padding/breedte, anders ontstaat er een gat boven de titel. */
.o_form .w_form_container{ padding:0; max-width:none; margin:0; }

.o_form h2,
.w_form_container h2{
  font-size:26px;
  line-height:1.3;
  font-weight:600;
  color:var(--dm-ink);
  border-bottom:0;
  margin:0 0 6px;
  padding:0;
  letter-spacing:-.015em;
}
.o_form h3{ font-size:18px; font-weight:600; color:var(--dm-ink); margin:28px 0 10px; }

.o_form a,
.w_form a, .w_result a{ color:var(--dm-primary); text-decoration:none; font-weight:500; }
.o_form a:hover,
.w_form a:hover, .w_result a:hover{ color:var(--dm-primary-dark); text-decoration:underline; }

/* ---------- Stappenbalk ---------- */
.o_form .progress{ border-top:0; margin:0 0 28px; padding:0; }
.o_form .progress ol{
  display:flex; gap:8px; list-style:none; margin:0; padding:0; counter-reset:dmstep;
}
.o_form .progress ol li{
  flex:1 1 0; position:relative; border:0; background:transparent;
  padding:0; margin:0; height:auto; width:auto;
  font-size:13px; font-weight:500; color:var(--dm-muted);
  text-align:center; text-indent:0; overflow:visible;
}
/* orderform.css zet li's absoluut op left:33%/66%/100% — neutraliseren,
   anders schuiven de stappen uit elkaar zodra ze relatief worden. */
.o_form .progress ol li,
.o_form .progress ol li:first-child + li,
.o_form .progress ol li:first-child + li + li,
.o_form .progress ol li:first-child + li + li + li{
  left:auto; right:auto; top:auto; bottom:auto;
}
.o_form .progress ol li:before{
  counter-increment:dmstep; content:counter(dmstep);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 auto 8px;
  border-radius:50%; background:#fff; border:2px solid var(--dm-border);
  color:var(--dm-muted); font-size:13px; font-weight:600;
}
.o_form .progress ol li:after{
  content:''; position:absolute; top:14px; left:calc(50% + 24px); right:calc(-50% + 24px);
  height:2px; background:var(--dm-border);
}
.o_form .progress ol li:last-child:after{ display:none; }
.o_form .progress ol li.active{
  background:transparent; color:var(--dm-ink); font-weight:600;
  margin:0; width:auto; height:auto; border:0; border-radius:0;
}
.o_form .progress ol li.active:before{
  background:var(--dm-primary); border-color:var(--dm-primary); color:#fff;
}

/* ---------- Knoppen ---------- */
.o_form .button_submit,
.w_form .wf_form_submit,
.o_form input[type=submit],
.o_form input[type=button]{
  display:inline-block;
  background:var(--dm-primary);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  padding:13px 26px;
  border:0;
  border-radius:6px;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, transform .05s ease;
}
.o_form .button_submit:hover,
.w_form .wf_form_submit:hover,
.o_form input[type=submit]:hover,
.o_form input[type=button]:hover{ background:var(--dm-primary-dark); }
.o_form .button_submit:active,
.w_form .wf_form_submit:active{ transform:translateY(1px); }

.o_form .nav{ margin-top:28px; padding-top:20px; border-top:1px solid var(--dm-border); }
.o_form .nav p{ margin:0; }
.o_form .nav p:first-child + p a{ color:var(--dm-muted); font-weight:500; }

/* ---------- Formuliervelden ---------- */
.o_form input[type=text],
.o_form input[type=password],
.o_form input[type=email],
.o_form select,
.o_form textarea,
.w_form input[type=text],
.w_form select,
.w_form textarea{
  font-family:inherit;
  font-size:15px;
  color:var(--dm-ink);
  background:#fff;
  padding:11px 13px;
  border:1px solid var(--dm-border);
  border-radius:6px;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.o_form input[type=text]:focus,
.o_form input[type=password]:focus,
.o_form select:focus,
.o_form textarea:focus,
.w_form input[type=text]:focus{
  border-color:var(--dm-primary);
  box-shadow:0 0 0 3px var(--dm-primary-soft);
}
.o_form label{
  display:inline-block; width:180px; vertical-align:top;
  font-size:14px; font-weight:500; color:var(--dm-ink); padding-top:11px;
}
.o_form label.no_width{ width:auto; padding-top:0; }

/* ---------- Domeinzoekbalk ----------
   whois.css zet het <form> op display:inline, waardoor het veld niet
   meegroeit. Hier wordt het een echte flex-zoekbalk. */
.w_form form{
  display:flex; gap:8px; align-items:stretch;
  width:100%; max-width:540px; margin:0 0 22px;
}
/* Let op: .w_form_container bestaat alleen op de losse whois-pagina,
   binnen het bestelformulier zit .w_form direct in .o_form. Beide nodig. */
.o_form .w_form input[type=text],
.w_form_container .w_form input[type=text]{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  max-width:none;
  height:50px;
  font-size:17px;
  padding:0 16px;
}
.w_form .wf_form_submit{ flex:0 0 auto; height:50px; padding:0 30px; margin-left:0; }

/* ---------- Resultatentabel ---------- */
.w_result table,
.o_form table.cart{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--dm-border);
  border-radius:var(--dm-radius);
  overflow:hidden;
  box-shadow:var(--dm-shadow);
}
.w_result table th,
.o_form table.cart th{
  background:var(--dm-soft);
  color:var(--dm-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--dm-border);
}
.w_result table td,
.o_form table.cart td{
  padding:14px 16px;
  border-bottom:1px solid #F1F4F8;
  font-size:15px;
  color:var(--dm-ink);
  vertical-align:middle;
}
.w_result table tr:last-child td,
.o_form table.cart tr:last-child td{ border-bottom:0; }
.w_result table tr.domain_tr:hover td{ background:var(--dm-soft); }

/* Status: vrij / bezet */
.w_result table td.domain_td_checked_available,
.w_result table td.domain_td_checked_unavailable,
.w_result table td.domain_td_checked_error{
  font-weight:600; font-size:13px; color:inherit;
}
.w_result table td.domain_td_checked_available span{
  display:inline-block; padding:4px 11px; border-radius:100px;
  background:var(--dm-green-soft); color:var(--dm-green);
}
.w_result table td.domain_td_checked_unavailable span,
.w_result table td.domain_td_checked_error span{
  display:inline-block; padding:4px 11px; border-radius:100px;
  background:#F2F4F7; color:var(--dm-muted);
}
.w_result table tr.domain_td_checked_unavailable td:first-child{ color:var(--dm-muted); }

/* "bestellen" knop in de rij */
.w_result table td.domain_td_order a.order_link{
  display:inline-block; background:var(--dm-primary); color:#fff;
  font-size:14px; font-weight:600; padding:8px 18px; border-radius:6px; text-decoration:none;
}
.w_result table td.domain_td_order a.order_link:hover{ background:var(--dm-primary-dark); text-decoration:none; }
.w_result table td.domain_td_order a.remove_link{ color:var(--dm-red); font-weight:500; }

.w_result .goto_orderform,
.o_form .goto_orderform{ margin-top:18px; font-weight:600; }
.o_form .footer_excl_incl_vat,
.w_form .footer_excl_incl_vat{ color:var(--dm-muted); font-size:13px; margin-top:12px; }

/* ---------- Hostingpakketten ---------- */
.o_form .package_container{ display:flex; flex-wrap:wrap; gap:16px; margin:20px 0; }
.o_form .package_container .package_box{
  flex:1 1 200px; width:auto; margin:0; min-height:0;
  background:#fff; border:1px solid var(--dm-border); border-radius:var(--dm-radius);
  padding:20px; box-shadow:var(--dm-shadow); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.o_form .package_container .package_box:hover{
  border-color:#C6D6EC; box-shadow:var(--dm-shadow-lg); transform:translateY(-2px);
}
.o_form .package_container .package_box.active{
  border-color:var(--dm-primary); box-shadow:0 0 0 3px var(--dm-primary-soft);
}
.o_form .package_container .package_box span{ color:var(--dm-ink); }
.o_form .package_container .package_box span.amount_span{
  display:block; color:var(--dm-ink); font-size:22px; font-weight:700; padding:0; margin:6px 0 0;
}
.o_form .amount_span{ color:var(--dm-muted); }

/* ---------- Betaalmethoden ---------- */
.o_form .payment_box{
  background:#fff; border:1px solid var(--dm-border); border-radius:var(--dm-radius);
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.o_form .payment_box:hover{ border-color:#C6D6EC; }
.o_form .payment_box.active{ border-color:var(--dm-primary); box-shadow:0 0 0 3px var(--dm-primary-soft); }
.o_form .payment_box span.small_text{ color:var(--dm-muted); font-size:13px; }

/* ---------- Meldingen ---------- */
.o_form .error_message,
.w_result .domain_error{
  background:var(--dm-red-soft); border:1px solid #FDA29B; color:var(--dm-red);
  border-radius:var(--dm-radius); padding:12px 16px; margin-bottom:16px; font-size:14px;
}
.o_form .warning_message,
.w_result .domain_warning{
  background:#FFFAEB; border:1px solid #FEDF89; color:#B54708;
  border-radius:var(--dm-radius); padding:12px 16px; margin-bottom:16px; font-size:14px;
}

/* ---------- Mobiel ---------- */
@media (max-width:640px){
  .o_form_container, .w_form_container{ padding:4px 14px 28px; font-size:15px; }
  .o_form h2, .w_form_container h2{ font-size:22px; }
  .o_form label{ display:block; width:100%; padding-top:0; margin-bottom:6px; }
  .o_form input[type=text], .o_form input[type=password], .o_form select, .o_form textarea{ width:100%; }
  .w_form form{ flex-direction:column; max-width:none; gap:10px; }
  .o_form .w_form .wf_form_submit,
  .w_form_container .w_form .wf_form_submit{ width:100%; flex:0 0 auto; align-self:stretch; }
  .w_result table th, .w_result table td{ padding:11px 12px; font-size:14px; }
  .o_form .progress ol li{ font-size:0; }
  .o_form .progress ol li:before{ font-size:13px; }
  .o_form .package_container .package_box{ flex:1 1 100%; }
}