/* Domainovus — style.css (FULL, UPDATED)
   Changes:
   - OFF-WHITE BG retained for page.
   - Make Offer stays dark green.
   - FIX: remove zebra striping that made right column rows white.
*/

/* ===== Reset / Base ===== */
:root{
  --bg:#f7f7f7;              /* OFF-WHITE BG */
  --text:#0b0b0b;
  --muted:#6b7280;
  --line:#e5e7eb;
  --btn-green:#22c55e;
  --btn-red:#dc2626;
  --chip:#111827;
  --jade-bright:#00FF7F;     /* Forward Thinking color (unchanged) */
  --btn-green-dark:#0A6A40;  /* DARK GREEN MAKE OFFER */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
a:focus,button:focus{outline:2px solid #000;outline-offset:2px}
button{font:inherit}

/* Keep footer at bottom on short pages */
html, body { height:100%; }
body { display:flex; flex-direction:column; }

/* ===== Layout ===== */
.wrap{
  /* MIN 300px, fluid 92vw, MAX 1000px */
  width:clamp(300px, 92vw, 1000px);
  margin:32px auto;
}

/* ===== Header & nav ===== */
header{padding:12px 16px 8px;color:#fff;background:#1f2937;}
.headwrap{
  max-width:1000px;
  margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
h1{margin:0;font-size:1.5rem;font-weight:700;color:#fff;line-height:1.2;}
h1 .subtitle{font-size:1em;font-weight:400;margin-left:8px;color:var(--jade-bright);}
.controls{display:flex;gap:8px;align-items:center;margin-left:auto;}
.controls input,.controls select{
  padding:8px 10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);
  color:#fff;min-width:220px;font-size:inherit;font-weight:400;border-radius:4px;
}
.controls input::placeholder{color:rgba(255,255,255,.6);}

nav.menu{
  max-width:1000px;
  margin:8px auto 0;
  display:flex;gap:8px;overflow-x:auto;padding:0 16px 6px;justify-content:center;
}
nav.menu a{color:#fff;text-decoration:none;font-weight:400;font-size:inherit;padding:6px 10px;border-radius:6px;opacity:.9;white-space:nowrap;}
nav.menu a:hover{opacity:1;transform:translateY(-1px);}
nav.menu a.active{background:rgba(255,255,255,.16);opacity:1;}

/* ===== Titles ===== */
.page-title{font-weight:700;font-size:22px;margin:14px 0 8px}
.subtle{color:var(--muted);font-size:14px}

/* ===== Domains Grid ===== */
.domain-grid,#list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:6px;                 /* vertical spacing between horizontal lines */
  column-gap:6px;              /* baseline column spacing for narrow viewports */
}

/* ===== Row (mobile default = flex; desktop switches to grid) ===== */
.domain-row,.row{
  display:flex;
  align-items:center;
  padding:4px 0;
  border-bottom:1px solid var(--line);
  background:transparent;
}
.domain-row:last-of-type,.row:last-of-type{border-bottom:none;}

/* FIX: remove white zebra for even rows */
.domain-row:nth-child(even),.row:nth-child(even){background-color:transparent;}

/* Domain name cell */
.domain-name,.domain{
  font-weight:500;            /* slightly bolder than normal */
  letter-spacing:.1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}

/* Actions (buttons on the right) — no auto-push */
.actions,.tools{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-left:0;white-space:nowrap;
}

/* ===== Buttons (equal dimensions; centered labels) ===== */
.btn,
.btn-ghost,.email-offer,
.btn-red,.cta{
  display:inline-flex;                 /* for perfect centering */
  align-items:center;                  /* vertical centering */
  justify-content:center;              /* horizontal centering */
  text-align:center;
  line-height:1;                       /* remove baseline bias */
  height:21px;                         /* final size */
  width:90px;                          /* final size */
  padding:0 6px;                       /* tighter padding to fit labels */
  border-radius:4px;border:1px solid transparent;
  font-weight:400;font-size:13px;letter-spacing:.2px;cursor:pointer;user-select:none;
  transition:background .15s ease,border-color .15s ease,transform .02s ease-in,filter .15s ease;
  text-decoration:none;
  white-space:nowrap;                  /* keep labels on one line */
  box-sizing:border-box;
}
.btn:active{transform:translateY(1px)}

/* Red primary (price) */
.btn-red,.cta{background:var(--btn-red);color:#fff;border-color:var(--btn-red);}
.btn-red:hover,.cta:hover{filter:brightness(1.06)}

/* Make Offer (DARK GREEN MAKE OFFER — scoped to button only) */
.btn-ghost,.email-offer{
  background:var(--btn-green-dark);    /* dark green on white UI */
  color:#fff;
  border-color:var(--btn-green-dark);
}
.btn-ghost:hover,.email-offer:hover{filter:brightness(0.96)}

/* “Make Offer” label via pseudo (works even if HTML label differs) */
.email-offer{font-size:0;}
.email-offer::after{
  content:"Make Offer";
  font-size:13px;
  line-height:1;
  display:block;
}

/* ===== Footer ===== */
footer{margin-top:auto;padding:12px;color:#fff;background:#1f2937;}
.footer-wrap{display:flex;justify-content:center;gap:8px;}
footer .by{display:inline;opacity:.9;margin-top:0;color:#var(--jade-bright);} /* kept */
.footer-note{text-align:center;margin-top:2px;}
.jade-text{color:var(--jade-bright);}
footer .by small{color:inherit;}

/* ===== Mobile ===== */
@media (max-width:780px){
  .headwrap{flex-direction:column;align-items:stretch;gap:8px;}
  .controls{margin-left:0;width:100%;}
  .controls input,.controls select{min-width:0;flex-grow:1;}

  .domain-grid,#list{grid-template-columns:1fr;}
  .domain-row,.row{flex-direction:column;align-items:flex-start;}
  .actions,.tools{margin-top:6px;}
  .nav{gap:8px;}
}

/* ===== Desktop base (grid rows + initial gap) ===== */
@media (min-width:781px){
  .domain-row,.row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto; /* name | buttons */
    column-gap:4px; /* base; safety net below enforces 0px inside each row */
    align-items:center;
  }
  .actions,.tools{justify-self:end;}
}

/* ===== High-specificity safety net (wins cascade inside each row) ===== */
#list > .row,
#list > .domain-row,
.domain-grid > .row,
.domain-grid > .domain-row,
.domains > .row,
.domains > .domain-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  align-items:center !important;
  column-gap:0px !important;              /* ZERO gap between name and red button */
}
#list .actions,
.domain-grid .actions,
.domains .actions,
#list .tools,
.domain-grid .tools,
.domains .tools{
  justify-self:end !important;
  margin-left:0 !important;
  gap:6px !important;
  white-space:nowrap !important;
}

/* ===== DESKTOP COLUMN-TO-COLUMN GAP (between the two page columns) ===== */
@media (min-width:781px){
  .domain-grid, #list{
    column-gap:40px !important; /* keep your 40px inter-column gap */
  }
}

/* ===== FINAL HARD OVERRIDES ===== */
.btn,
.btn-ghost,.email-offer,
.btn-red,.cta{
  width:90px !important;
  height:21px !important;
  padding:0 6px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
.email-offer::after{display:block !important;line-height:1 !important;}