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

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

  --table-bg:#161616;
  --row:#1b1b1b;
  --sep:#2a2a2a;

  --hdr-bg:#222;
  --hdr-border:#2c2c2c;

  --btn-remove:#ff4d4d;
  --btn-remove-active:#cc3c3c;

  --maybe-bg:#1E2531;
  --maybe-border:#3A4252;

  --link:#e6e9ef;
}

/* ===================================================== */
/* SPIX Domaincards v3 – flat, strak, zwart/donkergrijs  */
/* ===================================================== */

/* Basis */
.w_result{ font-family:'Mukta','Segoe UI',system-ui,sans-serif; color:var(--txt); }
.w_result .dc{ max-width:1140px; margin:0 auto; }

/* Header */
.w_result .dc-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:6px 0 14px;
}
.w_result .dc-head .dc-query{ font-size:18px; font-weight:800; color:var(--muted); }

/* Winkelwagenknop – groene stijl (zichtbaarheid regelen we onderaan) */
.w_result .dc-head .goto_orderform{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 22px;
  border:2px solid var(--spix-green); border-radius:0;
  background:var(--spix-green-600); color:#fff; font-weight:900;
  text-decoration:none; box-shadow:none; cursor:pointer;
  transition:background .12s, border-color .12s, transform .02s;
}
.w_result .dc-head .goto_orderform:hover{ background:var(--spix-green); border-color:var(--spix-green); }
.w_result .dc-head .cart_count{ background:transparent; padding-left:8px; color:#fff; border-radius:0; }

/* Tabel */
.w_result .styled_whois_table{
  width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed;
  background:var(--table-bg);
}

/* Koprij */
.w_result .styled_whois_table thead th{
  background:var(--hdr-bg); color:#bfc7d2; font-size:12px; font-weight:900; text-transform:uppercase;
  letter-spacing:.4px; padding:12px 14px; border:0; border-bottom:1px solid var(--hdr-border); border-radius:0;
}
.w_result .styled_whois_table thead th.align_right{ text-align:right; }

/* Bodyrijen */
.w_result .styled_whois_table tbody tr{ background:var(--row); border:0; box-shadow:none; }
.w_result .styled_whois_table tbody tr + tr{ border-top:1px solid var(--sep); }
.w_result .styled_whois_table tbody td{
  padding:14px 16px; vertical-align:middle; border:0; color:var(--txt);
}

/* Links in cellen ook wit */
.w_result .styled_whois_table tbody td a{ color:var(--link) !important; text-decoration:none; }

/* Domeinnaam */
.w_result .whois_domain_name,
.w_result .styled_whois_table tbody td:first-child{
  font-size:18px; font-weight:900; color:#fff;
}

/* Badges */
.w_result .badge{
  display:inline-flex; align-items:center; padding:5px 10px; border-radius:0; font-size:12px; font-weight:900;
}
.w_result .badge.ok{   background:var(--spix-green-600); color:#cfead5; border:1px solid var(--spix-green); }
.w_result .badge.warn{ background:#4A2E1F; color:#f3dcc4; border:1px solid var(--spix-orange); }
.w_result .badge.maybe{background:var(--maybe-bg); color:#cfd6e1; border:1px solid var(--maybe-border); }
.w_result .domain_td_unchecked img{ filter:invert(1) opacity(.7) }

/* Prijs & periode */
.w_result .align_right{ text-align:right; }
.w_result .price{ display:block; font-size:18px; font-weight:900; color:#fff; letter-spacing:.2px; }
.w_result .period{ display:block; font-size:12px; color:#a9b6c9; margin-top:2px; }

/* Acties (kolom) */
.w_result .domain_td_order{
  text-align:right; min-width:140px; white-space:nowrap;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}

/* Knoppen – bestellen/verhuizen */
.w_result .domain_td_order .btn,
.w_result .domain_td_order .btn:link,
.w_result .domain_td_order .btn:visited{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:120px; height:38px; padding:0 12px; margin-bottom:2px;
  border-radius:0; font-weight:900; text-transform:lowercase;
  text-decoration:none !important; border-bottom:0 !important; outline:none;
  border:1px solid var(--spix-green); background:var(--spix-green-600); color:#fff !important; box-shadow:none;
  transition:background .12s, border-color .12s, transform .02s, filter .12s;
}
.w_result .domain_td_order .btn:hover{  background:var(--spix-green);       border-color:var(--spix-green); }
.w_result .domain_td_order .btn:active{ background:var(--spix-green-hover); border-color:var(--spix-green-hover); transform:translateY(1px); }

/* Verhuizen-knop (oranje) */
.w_result .domain_td_order .btn.order-warn{
  border:1px solid var(--spix-orange); background:#4A2E1F; color:#fff !important;
}
.w_result .domain_td_order .btn.order-warn:hover{  background:var(--spix-orange);       border-color:var(--spix-orange); }
.w_result .domain_td_order .btn.order-warn:active{ background:var(--spix-orange-hover); border-color:var(--spix-orange-hover); }

/* Linkdecoratie uit op knoppen */
.w_result .domain_td_order a.btn,
.w_result .domain_td_order a.btn *{ text-decoration:none !important; border:0 !important; }

/* “Toon meer TLD’s” – strakke groene button */
.w_result .show_other_tlds{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; margin-top:14px; font-weight:800; font-size:15px;
  color:#fff; background:var(--spix-green-600); border:2px solid var(--spix-green); border-radius:0;
  text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, transform .02s;
}
.w_result .show_other_tlds:hover{  background:var(--spix-green);       border-color:var(--spix-green);       color:#fff; }
.w_result .show_other_tlds:active{ background:var(--spix-green-hover); border-color:var(--spix-green-hover); transform:translateY(1px); }

/* Verwijderen (fallback link) */
.w_result .btn-remove-plain{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 6px; height:auto; border:none; border-radius:0;
  background:transparent !important; box-shadow:none !important;
  color:var(--btn-remove) !important; font-weight:900; text-decoration:none;
}
.w_result .btn-remove-plain:hover{ opacity:.9; text-decoration:underline; }

/* “Toegevoegd” – statusknop */
.w_result .domain_td_order a.btn-added{
  display:inline-flex; align-items:center; justify-content:center;
  width:120px; height:38px; padding:0 12px; margin-bottom:2px; box-sizing:border-box;
  background:var(--spix-green-hover); border:2px solid var(--spix-green-hover); color:#fff !important;
  font-weight:900; text-transform:lowercase; border-radius:0; gap:8px; cursor:pointer;
  text-decoration:none !important; transition:background .12s, border-color .12s, transform .02s;
}
.w_result .domain_td_order a.btn-added .icon{
  width:16px; height:16px; display:inline-block; flex:0 0 16px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a 2 2 0 1 0 0 4 2 2 0 0 0 0-4zM6.21 6H3v2h1.56l2.6 9.26c.16.42.56.72 1.02.72h8.59c.46 0 .85-.28 1.02-.68l2.55-6.72A1 1 0 0 0 20.43 6H6.21z'/></svg>");
}
.w_result .domain_td_order a.btn-added .label-hover{ display:none; }
.w_result .domain_td_order a.btn-added:hover .label-default{ display:none; }
.w_result .domain_td_order a.btn-added:hover .label-hover{ display:inline; }

.w_result .domain_td_order a.remove_link.btn-added:hover{
  background:var(--btn-remove) !important; border-color:var(--btn-remove) !important; color:#fff !important;
}
.w_result .domain_td_order a.remove_link.btn-added:hover .icon,
.w_result .domain_td_order a.remove_link.btn-added:active .icon{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6L18 18M6 18L18 6'/></svg>") !important;
}
.w_result .domain_td_order a.remove_link.btn-added:active{
  background:var(--btn-remove-active) !important; border-color:var(--btn-remove-active) !important; color:#fff !important;
}

/* Safety */
.w_result .domain_td_order a.btn,
.w_result .domain_td_order a.btn:hover,
.w_result .domain_td_order a.btn-added,
.w_result .domain_td_order a.btn-added:hover{ text-decoration:none !important; color:#fff !important; }

/* Als remove_link aanwezig is, toon alleen die knop */
.w_result .domain_td_order:has(a.remove_link) > :not(a.remove_link){ display:none !important; }

/* Fix: "Toegevoegd" nooit oranje */
.w_result .domain_td_order a.btn-added,
.w_result .domain_td_order a.btn-added.order-warn{
  background:var(--spix-green-hover) !important;
  border-color:var(--spix-green-hover) !important;
  color:#fff !important;
}

/* =========================================================
   iPad/tablet – kolommen compact houden, knop blijft binnen tabel
   ========================================================= */
@media (max-width:1024px){
  .w_result .styled_whois_table{ table-layout:fixed !important; width:100%; }
  .w_result .styled_whois_table th,
  .w_result .styled_whois_table td{ overflow:hidden; text-overflow:ellipsis; }
  .w_result .styled_whois_table thead th,
  .w_result .styled_whois_table tbody td{ padding:12px; }

  .w_result .domain_td_order{
    min-width:0; white-space:normal; gap:8px;
  }
  .w_result .domain_td_order .btn,
  .w_result .domain_td_order a.btn-added{
    width:auto; min-width:108px; max-width:100%; height:36px;
  }
}

/* Tablet tot 900px: compacter, maar 1 rij */
@media (max-width:900px){
  .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 zoals schets:
   [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; }

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

  /* 2-koloms 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; }

  /* Robuust toewijzen o.b.v. 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; }

  /* prijs + “per jaar” strak bij elkaar rechts */
  .w_result .period{
    display:inline-block; margin-left:4px; vertical-align:baseline;
    font-size:12px; opacity:.85; white-space:nowrap; margin-top:0;
  }
  .w_result .styled_whois_table tbody td:has(.price){
    display:flex; justify-content:flex-end; align-items:baseline; gap:4px;
  }

  .w_result .whois_domain_name{ font-size:15.5px; margin:0; }
  .w_result .badge{ font-size:11px; padding:3px 7px; white-space:nowrap; }
  .w_result .price{ font-size:15.5px; white-space:nowrap; }

  /* knop full-width */
  .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;
  }
}

/* =========================================================
   Winkelwagen – toon precies 1 knop, op de juiste plek
   ========================================================= */

/* Standaard ALLE goto_orderform knoppen verbergen (dus ook boven zoekveld) */
.goto_orderform{ display:none !important; }

/* Alleen tonen in de resultaten-header, en alleen als er iets is toegevoegd */
.w_result:has(.domain_td_order a.btn-added) .dc-head .goto_orderform,
.w_result:has(.domain_td_order a.remove_link.btn-added) .dc-head .goto_orderform{
  display:inline-flex !important;
}