/***************************************************
   SPIX – Orderform (donker) — volledige vervanger
   Palet & styles in lijn met je andere pagina’s
***************************************************/

/* -------- Palet -------- */
:root{
  --spix-green:#2CA946;
  --spix-green-600:#234F23;
  --spix-green-hover:#99C336;

  --txt:#e6e9ef;
  --muted:#cbd3dd;

  --panel:#1b1b1b;
  --panel-2:#161616;
  --sep:#2a2a2a;

  --field-bg:#0f0f0f;
  --field-border:#3a3a3a;
  --field-text:#eaeaea;
  --field-ph:#9aa0a6;

  --link:#8fbaff;
}

/***************************************************
                 Container / Body
***************************************************/
.o_form_container{
  position:relative;
  display:block;
  width:100%;
  min-width:460px;
  max-width:1140px;
  margin:0 auto;
  font-size:14px;
  line-height:20px;
  color:var(--txt);
}
.o_form_container > *{ font-family:'Mukta','Segoe UI',system-ui,sans-serif; }

.o_form{ color:var(--txt); }
.o_form h2{
  margin:0;
  padding:0 0 10px 0;
  border-bottom:1px solid var(--sep);
}

/***************************************************
                 Links / tekst
***************************************************/
.o_form a{ color:var(--link); text-decoration:underline; cursor:pointer; }
.o_form a:hover{ text-decoration:none; }

.o_form .textright{ text-align:right !important; }
.o_form .nomargin{ margin:0; }
.o_form .amount_span{ color:#9fb1c7; font-size:12px; padding-left:15px; }
.o_form .footer_excl_incl_vat{ color:#9fb1c7; }
.o_form .align_right{ text-align:right; }

/***************************************************
                 Meldingen
***************************************************/
.o_form .error_message{
  border-radius:0; border:1px solid #c02e19; margin-bottom:10px;
  padding:7px 21px 7px 7px; background:#3a1717; color:#fff; line-height:18px;
}
.o_form .warning_message{
  border-radius:0; border:1px solid #dad28d; margin-bottom:10px;
  padding:7px 21px 7px 7px; background:#3b381a; color:#fff; line-height:18px;
}

/***************************************************
                 Buttons (nav)
***************************************************/
.o_form .nav{ width:100%; }
.o_form .nav p{ width:50%; float:right; text-align:right; }
.o_form .nav p:first-child + p{ text-align:left; }

/* primaire groen */
.o_form .button_submit,
.o_form input[type=submit],
.o_form button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 16px;
  border:2px solid var(--spix-green); border-radius:0;
  background:var(--spix-green-600); color:#fff; font-weight:900;
  text-decoration:none; cursor:pointer; box-shadow:none; outline:none;
  transition:background .12s, border-color .12s, transform .02s;
}
.o_form .button_submit:hover,
.o_form input[type=submit]:hover,
.o_form button:hover{
  background:var(--spix-green); border-color:var(--spix-green);
}
.o_form .button_submit:active,
.o_form input[type=submit]:active,
.o_form button:active{
  background:var(--spix-green-hover); border-color:var(--spix-green-hover);
  transform:translateY(1px);
}

/***************************************************
                 Form velden
***************************************************/
.o_form label{ display:inline-block; width:150px; color:var(--muted); }
.o_form label.no_width{ width:auto; }

.o_form input[type=text],
.o_form input[type=password],
.o_form select,
.o_form textarea{
  width:290px; padding:6px 10px; box-sizing:border-box;
  background:var(--field-bg); color:var(--field-text);
  border:1px solid var(--field-border); border-radius:0;
  outline:none; box-shadow:none;
}
.o_form input[type=text].large{ width:80%; font-size:14px; }
.o_form input[type=text].small{ width:60px; }
.o_form input[type=text].small_fill{ width:213px; }
.o_form input[type=text].contactperson{ width:137px; }
.o_form select{ width:300px; padding:6px 10px; }
.o_form select.contactperson{ width:72px; }
.o_form textarea.comment{ width:100%; height:125px; resize:none; }

.o_form input::placeholder,
.o_form textarea::placeholder{ color:var(--field-ph); }

/* geen hover/focus kleurwissel op velden */
.o_form input:hover, .o_form input:focus,
.o_form select:hover, .o_form select:focus,
.o_form textarea:hover, .o_form textarea:focus{
  border-color:var(--field-border) !important;
  background:var(--field-bg) !important;
  box-shadow:none !important; outline:none !important;
}

/* accentkleur voor radio/checkbox */
.o_form input[type=radio], .o_form input[type=checkbox]{ accent-color:var(--spix-green); }

/***************************************************
                Progress bar (boven)
***************************************************/
.o_form .progress{
  display:block; position:relative; width:95%; margin:0 auto;
  border-top:2px solid var(--spix-green);
}
.o_form .progress ol{ list-style:none; margin:0; padding:0; }
.o_form .progress ol li{
  position:absolute; width:12px; height:12px;
  margin:-11px 0 0 -10px; padding:0; text-indent:-4000px;
  border-radius:10px; border:4px solid var(--spix-green); background:#111;
}
.o_form .progress ol li.active{
  width:20px; height:20px; margin:-15px 0 0 -14px;
  border-radius:14px; background:var(--spix-green);
}
.o_form .progress ol li:first-child + li{ left:33%; }
.o_form .progress ol li:first-child + li + li{ left:66%; }
.o_form .progress ol li:first-child + li + li + li{ left:100%; }

/***************************************************
                Step 1: Cart tabel
***************************************************/
.o_form table.cart{ width:100%; border-collapse:collapse; background:var(--panel-2); }
.o_form table.cart .noborder{ border:0 !important; background:transparent !important; }
.o_form table.cart .bordertop{ border-top:1px solid var(--sep) !important; }
.o_form table.cart th{
  padding:10px 5px; text-align:left; font-weight:900;
  color:#bfc7d2; border:0; border-bottom:1px solid var(--sep); background:#222;
}
.o_form table.cart td{
  padding:10px 5px; border:0; border-bottom:1px solid var(--sep);
  vertical-align:top; color:#e6e9ef;
}
.o_form table.cart tr.addition{ background:#202020; line-height:24px; }
.o_form table.cart tr.italic td{ font-style:italic; }
.o_form table.cart .auth_key{ margin-top:8px; color:#9aa6b5; padding-left:15px; }

/***************************************************
                Step 2: Customer table
***************************************************/
.o_form table.customer{ width:100%; }
.o_form table.customer td{ padding:3px 0; }

/***************************************************
                Step 2: Payment options (VOLLEDIG WIT)
***************************************************/
/* Hele rij → wit, tekst zwart, ruime hoogte voor grote logo’s */
.o_form .payment_box{
  width:auto; margin:10px 0; padding:0 10px;
  min-height:84px;
  border:1px solid #d3d7de; border-radius:0;
  background:#fff !important; color:#000 !important;
  cursor:pointer; overflow:hidden;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.o_form .payment_box:hover{
  border-color:var(--spix-green);
}
.o_form .payment_box.active{
  cursor:default;
  border:2px solid var(--spix-green-hover);
  box-shadow:0 0 0 2px rgba(153,195,54,.18) inset;
}

/* Tekstgrootte & spacing */
.o_form .payment_box td{
  height:auto;
  padding:18px 20px;
  font-size:16px; line-height:1.55;
  color:#000 !important;
}
.o_form .payment_box span.small_text{
  color:#333 !important;
  font-size:14px;
}

/* Logo-kolom (2e td) — wit (matcht box) + GROTE logo’s */
.o_form .payment_box td:nth-child(2){
  background:#fff; border-radius:2px;
  padding:12px 16px; vertical-align:middle;
  border-right:1px solid #e7e9ee;
}
.o_form .payment_box td:nth-child(2) img{
  display:block;
  max-height:56px;               /* groter logo */
  height:auto; width:auto;
  filter:none !important;
}

/***************************************************
                Step 3: Overzicht
***************************************************/
.o_form .discount_coupon_add{ display:block; float:left; margin-top:9px; margin-left:5px; cursor:pointer; }
.o_form #discountDiv{ float:left; }
.o_form #discountDiv label{ width:auto; margin-right:10px; }
.o_form #discountDiv input{ width:150px !important; }

/***************************************************
            Element: Domain details table
***************************************************/
.o_form .domain_table .ico-del{
  cursor:pointer; color:#9aa6b5; text-decoration:none; font-size:11px;
  position:absolute; left:-20px; padding:0 5px;
}
.o_form .domain_table .auth_key{ margin-top:8px; color:#9aa6b5; padding-left:30px; }
.o_form .domain_table .auth_key input{
  width:200px; padding:4px 8px; background:var(--field-bg);
  color:var(--field-text); border:1px solid var(--field-border); border-radius:0;
}

/***************************************************
            Element: Hosting package boxes (legacy)
***************************************************/
.o_form .package_container{ width:100%; }
.o_form .package_container .package_box{
  float:left; width:140px; border:1px solid var(--sep); border-radius:0;
  margin:10px 10px 0 0; padding:10px; min-height:90px; cursor:pointer;
  background:#111; color:#e6e9ef;
}
.o_form .package_container .package_box.active{ border-color:var(--spix-green-hover); }
.o_form .package_container .package_box span{ display:block; }
.o_form .package_container .package_box span.amount_span{ padding:0; margin-top:8px; }

/***************************************************
            Element: Vergelijk-tabel (legacy)
***************************************************/
.o_form .hosting_table{ width:100%; table-layout:fixed; border-collapse:collapse; }
.o_form .hosting_table td{
  padding:5px; border:0; border-left:1px solid var(--sep);
  text-align:center; color:#e6e9ef; background:#121212;
}
.o_form .hosting_table td:first-child{ text-align:left; }
.o_form .hosting_table td:last-child{ border-right:1px solid var(--sep); }
.o_form .hosting_table tr:first-child td{
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep);
  background:#222; color:#bfc7d2; font-weight:900;
}
.o_form .hosting_table tr:first-child td:first-child{ border-left:0; border-top:0; }
.o_form .hosting_table tr:last-child td{
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep);
}
.o_form .hosting_table tr:last-child td:first-child{ border-left:0; border-bottom:0; }

/***************************************************
              Responsive / mobile
***************************************************/
@media only screen and (max-width:700px){

  body{ margin:.2rem; }
  .o_form_container{ width:100%; min-width:inherit; max-width:inherit; padding:0 5px; line-height:24px; box-sizing:border-box; }
  .o_form_container *{ box-sizing:border-box; }

  /* progress klein */
  .o_form .progress *{ box-sizing:content-box; }
  .o_form .progress ol li{
    width:10px; height:10px; margin:-7px 0 0 -5px;
    border-radius:6px; border:1px solid var(--spix-green); background:#111;
  }
  .o_form .progress ol li.active{
    width:10px; height:10px; margin:-7px 0 0 -7px;
    border-radius:10px; background:var(--spix-green);
  }

  /* labels/velden */
  .o_form label{ display:inline-block; width:100%; line-height:26px; margin-top:5px; }
  .o_form label.no_width{ margin-top:0; }
  .o_form input[type=text], .o_form input[type=password],
  .o_form select, .o_form textarea{
    font-size:14px; line-height:18px; width:100%; padding:7px 6px;
  }
  .o_form select{ height:35px; }
  .o_form textarea{ padding:5px; }
  .o_form input[type=radio], .o_form input[type=checkbox]{ vertical-align:baseline; }
  .o_form input[type=text].small{ width:80px; }
  .o_form input[type=text].small_fill{ width:calc(100% - 85px); }
  .o_form input[type=text].contactperson{ width:calc(100% - 161px); }

  /* domain check submit smaller */
  .o_form .w_form input.wf_form_submit{ width:90px!important; padding:0!important; margin:0!important; }

  /* cart/ssl table tweaks — donker */
  .w_result table{ table-layout:inherit; border-bottom:1px solid var(--sep)!important; }
  .w_result table th{ border-bottom:hidden!important; display:none; opacity:0; height:0; visibility:collapse; }
  .w_result table th:nth-child(1){ display:block; visibility:visible; opacity:1; height:31px; }
  .w_result table td{ display:block; border:hidden!important; color:#e6e9ef; }
  .w_result table tr td:nth-child(1){
    display:inline-block; float:left; width:80%; padding-bottom:0!important;
    border-top:1px solid var(--sep)!important; color:#fff;
  }
  .w_result table tr td:nth-child(2){
    display:block!important; float:right; width:20%; text-align:right; padding-bottom:0!important;
    border-top:1px solid var(--sep)!important;
  }

  /* navigatie knoppen */
  .o_form .goto_orderform{ float:none; width:100%; margin-bottom:25px; text-align:center; }
  .o_form .w_result .goto_orderform{ display:none !important; }
  .o_form .nav p{ width:100%; float:none; }
  .o_form .nav p:first-child + p{ float:none; margin:20px 0; }
  .o_form .button_submit{ width:100%; display:inline-block; text-align:center; }
  .o_form .button_submit.back{ width:auto; background:none; color:var(--link); }
}

/* === SPIX veld-stijl: gelijk aan extensies plugin === */

/* palette override (alleen voor velden) */
:root{
  --field-bg:#444;
  --field-border:#666;
  --field-text:#fff;
  --field-ph:#c3cad4;
}

/* inputs/selects/textarea – exacte kleuren + geen hover/focus switch */
.o_form input[type="text"],
.o_form input[type="password"],
.o_form input[type="email"],
.o_form input[type="tel"],
.o_form input[type="number"],
.o_form select,
.o_form textarea{
  background:var(--field-bg) !important;
  color:var(--field-text) !important;
  border:2px solid var(--field-border) !important;  /* 2px zoals je zoekveld */
  border-radius:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:6px 10px;         /* afmetingen blijven netjes */
  height:auto;               /* geen forcering van hoogte */
}

/* placeholders lichtgrijs */
.o_form input::placeholder,
.o_form textarea::placeholder{
  color:var(--field-ph) !important;
}

/* focus/hover verandert NIETS aan kleur */
.o_form input:hover, .o_form input:focus,
.o_form select:hover, .o_form select:focus,
.o_form textarea:hover, .o_form textarea:focus{
  background:var(--field-bg) !important;
  border-color:var(--field-border) !important;
  box-shadow:none !important;
  outline:none !important;
}

/* WebKit autofill (Chrome/Edge/Safari) donker houden */
.o_form input:-webkit-autofill{
  -webkit-text-fill-color:var(--field-text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset !important;
  border:2px solid var(--field-border) !important;
}

/* Labelkleur net als plugin */
.o_form label{ color:#9fb1c7 !important; }

@media only screen and (min-width:701px){
  .mobile_show_column{ display:none; width:0; height:0; opacity:0; visibility:collapse; }
  .mobile_show_text{ display:none; width:0; height:0; opacity:0; }
}