/* D-Hosting Bestelformulier v1.3.1 – 31-10-2025 */
:root{
  --brand-blue:#2084db;
  --brand-orange:#f57b22;
  --brand-orange-dark:#e56d0d;
  --brand-green:#91b551;
  --muted:#777;
  --border:#e7e7e7;
  --soft:#f7f7f7;
}

body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:#333;background:#fff}
.navbar{border-bottom:1px solid #eee}
.lang-switch{display:flex;align-items:center;cursor:pointer}
.lang-switch img{width:26px;height:18px;object-fit:cover;display:block;border-radius:3px}

/* Steps */
.steps-blocks{display:flex;gap:.5rem;margin:1.25rem 0 1.75rem}
.step-box{flex:1;text-align:center;border:2px solid var(--brand-green);border-radius:10px;padding:.5rem 0;color:var(--brand-green);font-weight:700;transition:.25s}
.step-box.active{background:var(--brand-green);color:#fff}
@media(max-width:767px){.step-box span{display:none}.step-box::after{content:attr(data-step);font-weight:800}}

/* Domain sections */
#searchWrapper{display:flex;justify-content:space-between;align-items:stretch;gap:1%;transition:all .45s ease}
.search-section,.transfer-block{border-radius:12px;padding:24px;color:#fff;transition:all .45s ease}
.search-section{background:var(--brand-orange);flex:0 0 74%}
.transfer-block{background:var(--brand-green);flex:0 0 25%;cursor:pointer}
#searchWrapper.active-transfer .search-section{flex:0 0 25%}
#searchWrapper.active-transfer .transfer-block{flex:0 0 74%}
#searchLarge,#transferCollapsed{display:block}
#searchCompact,#transferExpanded{display:none}
.compact,.collapsed{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:110px}
.compact i,.collapsed i{font-size:28px;margin-bottom:6px;color:#fff;animation:pulse 2.6s ease-in-out infinite}
#searchWrapper.active-transfer .transfer-block .collapsed i{animation:none}
#searchWrapper:not(.active-transfer) .search-section .compact i{animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.07)}}

/* Form */
.w_form{display:flex;gap:10px;margin-top:10px;align-items:center}
.w_form input{flex:1;border:none;border-radius:8px;padding:10px 12px;font-size:16px}
.w_form button{background:#fff;border:none;border-radius:8px;color:var(--brand-orange);padding:10px 16px;font-weight:700;cursor:pointer;transition:.2s}
.w_form button:hover{background:#f1f1f1;color:var(--brand-orange-dark)}
@media(max-width:991px){#searchWrapper{flex-direction:column}.search-section,.transfer-block{flex:1 1 100%}}
@media(max-width:767px){.search-section{margin-bottom:10px}.transfer-block{margin:6px 0 10px}.w_form{flex-direction:column;align-items:stretch}.w_form button{width:100%}.compact,.collapsed{min-height:84px}}

/* Assistant + summary */
.assistant-wrap{display:flex;gap:24px;align-items:flex-start;position:relative}
.assistant{flex:0 0 70%;border:1px solid var(--border);border-radius:12px;padding:18px;margin-top:22px}
.summary-block{flex:0 0 30%;margin-top:22px;padding:18px 20px;background:#fcfcfc;border:2px solid #e8e8e8;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
@media(max-width:991px){.assistant-wrap{display:block}.summary-block{margin-top:16px}}

/* Overlay */
.overlay-locked{position:absolute;inset:0;background:rgba(255,255,255,.9);z-index:10;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;color:#666;padding:20px;border-radius:12px;opacity:1;transition:opacity 0.4s ease-out}
.overlay-locked.fade-out{opacity:0}

/* Choice blocks */
.choice-block{background:#fff;border:2px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px;cursor:pointer;transition:.25s}
.choice-block:hover{background:#fafafa;border-color:var(--brand-green)}
.choice-block.active{background:#e8f4e1;border-color:var(--brand-green)}
.choice-block h5{margin:0 0 .25rem;color:#222;font-weight:800}
.choice-suboptions{display:block;max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);transition:opacity .28s ease,transform .28s ease,max-height .38s ease}
.choice-block.active .choice-suboptions{opacity:1;transform:translateY(0);max-height:1000px}
.choice-suboption{position:relative;background:#fff;border:1.5px solid #ddd;border-radius:10px;padding:10px 12px 10px 28px;margin-bottom:8px;text-align:left;transition:.2s}
.choice-suboption:hover{border-color:var(--brand-green);background:#f8fff3}
.choice-block.active .choice-suboption:hover{border-color:var(--brand-orange);}
.choice-suboption::before{content:\"•\";position:absolute;left:10px;top:10px;color:var(--brand-green);font-weight:800}
.choice-suboption .desc{display:block;color:#555;font-size:15px;margin-top:2px}
.choice-suboption .price{display:block;font-size:13px;color:#777;margin-top:2px}

/* Summary */
.summary-block h5{color:var(--brand-orange);font-weight:800;margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px}
.summary-table{width:100%;border-collapse:collapse;font-size:15px}
.summary-table th{width:40%;font-weight:700;color:#444}
.summary-table td{text-align:right;color:#222}
.summary-table .total-row th,.summary-table .total-row td{border-top:2px solid var(--brand-orange);padding-top:8px}
.summary-table .total-row td{font-weight:800;color:var(--brand-orange)}

.btn-warning{background:var(--brand-orange);border:none;font-weight:700}
.btn-warning:hover{background:var(--brand-orange-dark)}
.fa-globe{color:#fff}

/* Desktop: vlag rechts naast menu */
@media (min-width: 992px) {
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-collapse {
    order: 1; /* menu eerst */
  }

  .lang-switch {
    order: 2; /* vlag rechts van menu */
    margin-left: 1rem;
    margin-right: 0;
  }

  .navbar-toggler {
    order: 0; /* hamburger links bij mobiele overgang */
  }
}

.choice-suboption.selected {
  border-color: var(--brand-orange-dark);
  background: #fff7ef;
}

.choice-suboption .extra-fields.hidden {display:none;}
.choice-suboption .extra-fields {margin-top:8px;}

.choice-suboption .form-control {
  width:100%;border:1px solid #ccc;border-radius:6px;padding:6px 8px;font-size:14px;
}
.small-input{width:80px;text-align:center;}
	
/* WHOIS formulier consistent met onze nieuwe stijl */
form[action*="whois.php"] {
  display: flex;
  gap: 10px;
  align-items: center;
}
form[action*="whois.php"] input[type="text"] {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
}
form[action*="whois.php"] button {
  background: #fff;
  border: none;
  border-radius: 8px;
  color: var(--brand-orange);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}
form[action*="whois.php"] button:hover {
  background: #f1f1f1;
  color: var(--brand-orange-dark);
}

/* WHOIS-resultaten moderniseren */
#whoisResultsSection .w_result {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
#whoisResultsSection table {
  width: 100%;
  border-collapse: collapse;
}
#whoisResultsSection th,
#whoisResultsSection td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}
#whoisResultsSection th {
  background: var(--soft);
  color: #333;
  font-weight: 700;
}
#whoisResultsSection tr:hover td {
  background: #fafafa;
}
#whoisResultsSection .domain_td_order a {
  background: var(--brand-green);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  text-decoration: none;
  font-weight: 600;
}
#whoisResultsSection .domain_td_order a:hover {
  background: var(--brand-orange);
}
#sharedOverlay.hidden {
  display: none !important;
}