/* ==========================================================
   SPIX formulierstijl donker (compleet)
   behoudt originele afmetingen, alleen kleur- en state-fix
   ========================================================== */

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

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

  --field-bg:#444;
  --field-border:#666;
  --field-text:#fff;
  --field-ph:#c3cad4;
}

/* ============== Universele veldset ============== */
/* geldend in zoekbalk, resultaten en order/cart */
/* FIX: sluit submit/button/reset uit zodat knoppen niet grijs worden */
.w_form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
.o_form  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
.w_result input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
.w_form select, .o_form select, .w_result select,
.w_form textarea, .o_form textarea, .w_result textarea{
  background:var(--field-bg) !important;
  color:var(--field-text) !important;
  caret-color:var(--field-text) !important;
  border:1px solid var(--field-border) !important;
  border-radius:0 !important;
  padding:6px 10px;
  box-sizing:border-box;
  outline:none !important;
  box-shadow:none !important;
}

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

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

/* autofill fix (Chrome/Edge/Safari) */
.w_form input:-webkit-autofill,
.o_form input:-webkit-autofill,
.w_result input:-webkit-autofill{
  -webkit-text-fill-color:var(--field-text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset !important;
  border:1px solid var(--field-border) !important;
}

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

/* ============== Zoekbalk ============== */
.w_form form{
  display:flex !important;
  align-items:stretch;
  gap:6px;
  max-width:760px;
  font-family:'Mukta','Segoe UI',system-ui,sans-serif;
}

/* zoekveld: originele afmeting, kleurfix */
.w_form input[type="text"][name="whois_domain"]{
  flex:1; min-width:0;
  height:48px;                /* origineel */
  padding:0 14px;             /* origineel */
  border:2px solid var(--field-border) !important;
  font:600 16px/44px 'Mukta','Segoe UI',system-ui;
}

/* knop rechts: origineel en groen */
.w_form .wf_form_submit,
.w_form button.wf_form_submit,
.w_form input.wf_form_submit,
.w_form a.wf_form_submit{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  height:48px !important;     /* origineel */
  padding:0 22px !important;  /* origineel */
  box-sizing:border-box;
  border:2px solid var(--spix-green) !important;
  border-radius:0 !important;
  background:var(--spix-green-600) !important;
  color:#fff !important;
  font:800 16px/1 'Mukta','Segoe UI',system-ui !important;
  cursor:pointer; box-shadow:none !important; outline:none !important;
  transition:background .12s, border-color .12s, transform .02s;
}
.w_form .wf_form_submit:hover,
.w_form button.wf_form_submit:hover,
.w_form input.wf_form_submit:hover,
.w_form a.wf_form_submit:hover{
  background:var(--spix-green) !important;
  border-color:var(--spix-green) !important;
}
.w_form .wf_form_submit:active,
.w_form button.wf_form_submit:active,
.w_form input.wf_form_submit:active,
.w_form a.wf_form_submit:active{
  background:var(--spix-green-hover) !important;
  border-color:var(--spix-green-hover) !important;
  transform:translateY(1px);
}

/* mobiel */
@media (max-width:640px){
  .w_form form{ flex-wrap:wrap; gap:8px; }
  .w_form input[name="whois_domain"], .w_form .wf_form_submit{ width:100%; }
}

/* ============== Order/Cart knoppen en tekst ============== */
.o_form{ font-family:'Mukta','Segoe UI',system-ui,sans-serif; color:var(--txt); }

.o_form a.button_submit,
.o_form a.button_submit.next,
.o_form a.button_add,
.o_form a.add_domain,
.o_form a.add_domain_button,
.o_form a.add_more,
.o_form button,
.o_form input[type=submit]{
  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 a.button_submit:hover,
.o_form a.button_submit.next:hover,
.o_form a.button_add:hover,
.o_form a.add_domain:hover,
.o_form a.add_domain_button:hover,
.o_form a.add_more:hover,
.o_form button:hover,
.o_form input[type=submit]:hover{
  background:var(--spix-green); border-color:var(--spix-green);
}
.o_form a.button_submit:active,
.o_form a.button_submit.next:active,
.o_form a.button_add:active,
.o_form a.add_domain:active,
.o_form a.add_domain_button:active,
.o_form a.add_more:active,
.o_form button:active,
.o_form input[type=submit]:active{
  background:var(--spix-green-hover); border-color:var(--spix-green-hover);
  transform:translateY(1px);
}

/* verwijderen als rode knop */
.o_form a.remove_link,
.o_form a[href*="remove" i],
.o_form a[title*="verwijder" i]{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:38px; padding:0 16px; box-sizing:border-box;
  border:2px solid #ff4d4d !important; border-radius:0;
  background:#3a1717 !important; color:#fff !important; font-weight:900;
  text-decoration:none !important; cursor:pointer; box-shadow:none !important; outline:none !important;
  transition:background .12s, border-color .12s, transform .02s;
}
.o_form a.remove_link:hover,
.o_form a[href*="remove" i]:hover,
.o_form a[title*="verwijder" i]:hover{ background:#ff4d4d !important; border-color:#ff4d4d !important; }
.o_form a.remove_link:active,
.o_form a[href*="remove" i]:active,
.o_form a[title*="verwijder" i]:active{ background:#cc3c3c !important; border-color:#cc3c3c !important; transform:translateY(1px); }

/* tabelteksten in cart */
.o_form table th{ color:#bfc7d2; border-bottom:1px solid #2c2c2c; }
.o_form table td{ color:#e6e9ef; }

/* labels en statische teksten */
.o_form, .w_result, .w_form{ color:var(--txt); }












/* ===========================
   iPad: horizontaal houden (compact)
   =========================== */
@media (max-width:1140px){
  .w_result .dc{ padding:0 12px; }
}
@media (max-width:1024px){
  .w_result .styled_whois_table{ table-layout:auto; }
  .w_result .styled_whois_table thead th,
  .w_result .styled_whois_table tbody td{ padding:12px; }
  .w_result .whois_domain_name{ font-size:17px; }
  .w_result .price{ font-size:17px; }
  .w_result .badge{ font-size:12px; padding:4px 9px; }
  .w_result .domain_td_order .btn,
  .w_result .domain_td_order a.btn-added{ height:36px; min-width:110px; width:auto; }
}

/* ===========================
   Tablet tot 900px: compacter, maar 1 rij
   =========================== */
@media (max-width:900px){
  .w_result .styled_whois_table{ table-layout:auto; }
  .w_result .styled_whois_table thead th,
  .w_result .styled_whois_table tbody td{ padding:8px 10px; }
  .w_result .whois_domain_name{ font-size:16px; }
  .w_result .price{ font-size:16px; }
  .w_result .badge{ font-size:11px; padding:3px 7px; }
  .w_result .period{ font-size:11px; }
  .w_result .domain_td_order .btn,
  .w_result .domain_td_order a.btn-added{ height:34px; min-width:100px; }
}

/* =========================================================
   Mobiel ≤640px - layout:
   [naam | prijs]
   [badge | per jaar]
   [knop full-width]
   ========================================================= */
@media (max-width:640px){
  .w_result .styled_whois_table thead{ display:none; }
  .w_result .styled_whois_table{ table-layout:auto; }

  /* geen storende borders */
  .w_result .styled_whois_table tbody tr,
  .w_result .styled_whois_table tbody td{ border:0 !important; }

  /* 2 kolommen grid */
  .w_result .styled_whois_table tbody tr{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   price"
      "badge  period"
      "action action";
    column-gap:12px;
    row-gap:8px;
    align-items:center;
    padding:12px;
  }

  .w_result .styled_whois_table tbody td{ padding:0; background:transparent; }

  /* Robuuste toewijzing op basis van inhoud */
  .w_result .styled_whois_table tbody td:has(.whois_domain_name){ grid-area:name;   min-width:0; }
  .w_result .styled_whois_table tbody td:has(.badge){            grid-area:badge;  justify-self:start; }
  .w_result .styled_whois_table tbody td:has(.price){            grid-area:price;  justify-self:end;   text-align:right !important; }
  .w_result .styled_whois_table tbody td:has(.period){           grid-area:period; justify-self:end;   text-align:right !important; }
  .w_result .styled_whois_table tbody td.domain_td_order{        grid-area:action; }

  /* Als :has niet wordt ondersteund, val terug op kolomvolgorde (1..5) */
  @supports not (selector(:has(*))){
    .w_result .styled_whois_table tbody td:nth-child(1){ grid-area:name; }
    .w_result .styled_whois_table tbody td:nth-child(2){ grid-area:badge; }
    .w_result .styled_whois_table tbody td:nth-child(3){ grid-area:price; }
    .w_result .styled_whois_table tbody td:nth-child(4){ grid-area:period; }
    .w_result .styled_whois_table tbody td:nth-child(5){ grid-area:action; }
  }

  /* typografie en uitlijning */
  .w_result .whois_domain_name{ font-size:15.5px; margin:0; }
  .w_result .price{ font-size:15.5px; white-space:nowrap; }
  .w_result .period{
    font-size:12px; opacity:.85; white-space:nowrap; margin:0;
    /* dicht bij prijs tonen */
    display:inline-block; vertical-align:baseline;
  }
  .w_result .badge{ display:inline-block; font-size:11px; padding:3px 7px; white-space:nowrap; }

  /* prijs + per jaar samen rechts op 1 lijn */
  .w_result .styled_whois_table tbody td:has(.price){
    display:flex; justify-content:flex-end; align-items:baseline; gap:4px;
  }
  @supports not (selector(:has(*))){
    .w_result .styled_whois_table tbody td:nth-child(3){
      display:flex; justify-content:flex-end; align-items:baseline; gap:4px;
    }
  }

  /* knop full-width onderaan */
  .w_result .domain_td_order{ display:flex; width:100%; }
  .w_result .domain_td_order .btn,
  .w_result .domain_td_order a.btn-added{
    width:100%; max-width:100%; height:40px;
  }
}