/* ================================================================
   Register-a-Domain page — reskinned to match the home page's v4
   design system (public/css/home-v4.css, loaded alongside this file).
   Every class name below is kept exactly as domain-search-page.js /
   domain-pricing-page.js expect — visual retheme only, no markup
   contract changes. Was previously part of the shared style.css
   (var(--primary) blue palette); now self-contained here using
   home-v4.css's --v4-* tokens, since this page no longer loads
   style.css at all.
   ================================================================ */

/* ---------------- Base buttons (generated by the domain JS) ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:99px;font-weight:700;font-size:14.5px;cursor:pointer;border:1.5px solid transparent;transition:all .18s ease;white-space:nowrap;text-decoration:none;font-family:'Manrope',sans-serif;}
.btn-primary{background:var(--v4-orange);color:#fff;box-shadow:var(--v4-shadow-glow);}
.btn-primary:hover{background:#0f766e;transform:translateY(-1px);}
.btn-ghost{background:#fff;color:var(--v4-ink);border-color:var(--v4-line);}
.btn-ghost:hover{border-color:var(--v4-orange);color:var(--v4-orange);}
.btn-sm{padding:10px 18px;font-size:13px;}

body#domregPage{background:var(--v4-bg);}

/* This page's hero — less top padding than the homepage's (no sticky-fold
   layout to fill here), and the heading needs a bit more room + a touch
   less size than the homepage's default h1 scale to stay on one line
   instead of wrapping to two. */
body#domregPage .v4-hero{padding-top:32px;}
body#domregPage .v4-hero-center{max-width:900px;}
body#domregPage .v4-hero h1{font-size:38px;white-space:nowrap;}
@media(min-width:640px){body#domregPage .v4-hero h1{font-size:44px;}}
@media(min-width:1024px){body#domregPage .v4-hero h1{font-size:48px;}}
@media(max-width:520px){body#domregPage .v4-hero h1{white-space:normal;}}

/* ---------------- Results / suggestions list ---------------- */
.dsg-footnote{text-align:center;font-size:13px;color:var(--v4-muted);font-weight:600;margin:20px 0 0;}
.dsg-footnote a{color:var(--v4-orange);text-decoration:underline;font-weight:600;}
.dsg-footnote a:hover{color:#0f766e;}

.domain-results-section{padding:56px 0 100px;}
.domain-results-inner{max-width:920px;margin:0 auto;}

.domain-result-card{
  background:#fff;border:1.5px solid var(--v4-line);border-radius:22px;
  box-shadow:var(--v4-shadow-hard-sm);overflow:hidden;
  animation:drcIn .35s ease both;
}
@keyframes drcIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.drc-top{display:flex;align-items:center;gap:16px;padding:26px 30px;background:var(--v4-bg-tint);}
.domain-result-card.is-available .drc-top{background:#f0fdf9;}
.domain-result-card.is-taken .drc-top{background:#fdf3f2;}
.domain-result-card.is-error .drc-top{background:#fff8ec;}
.drc-icon{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#fff;animation:drcPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes drcPop{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
.drc-icon svg{width:23px;height:23px;}
.drc-icon.loading{color:var(--v4-orange);box-shadow:0 0 0 5px rgba(13,148,136,.12);}
.drc-icon.available{color:#0f766e;box-shadow:0 0 0 5px rgba(15,118,110,.12);}
.drc-icon.taken{color:#c0392b;box-shadow:0 0 0 5px rgba(192,57,43,.1);}
.drc-icon.error{color:#b8860b;box-shadow:0 0 0 5px rgba(184,134,11,.1);}
.drc-icon.available svg path{stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;animation:drcDraw .4s ease .15s forwards;}
.drc-icon.taken svg line{stroke-linecap:round;stroke-dasharray:17;stroke-dashoffset:17;animation:drcDraw .3s ease forwards;}
.drc-icon.taken svg line:last-child{animation-delay:.18s;}
@keyframes drcDraw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .domain-result-card,.drc-icon,.drc-icon.available svg path,.drc-icon.taken svg line{animation:none;}
}
.drc-info{flex:1;min-width:0;}
.drc-domain{display:flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:var(--v4-ink);word-break:break-word;}
.drc-tld{color:var(--v4-orange);}
.drc-copy{width:26px;height:26px;border-radius:8px;border:none;background:transparent;color:var(--v4-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;}
.drc-copy svg{width:14px;height:14px;}
.drc-copy:hover{background:#fff;color:var(--v4-orange);}
.drc-copy.copied{color:#0f766e;}
.drc-status-text{font-size:14px;color:var(--v4-muted);font-weight:600;margin-top:3px;}
.drc-status-text b{color:var(--v4-ink);}
.drc-badge{flex-shrink:0;font-size:12px;font-weight:700;padding:6px 14px;border-radius:var(--v4-radius-sm);letter-spacing:.02em;background:#fff;}
.drc-badge.available{color:#0f766e;}
.drc-badge.taken{color:#c0392b;}
.drc-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.drc-price-tag{background:#fff;border-radius:14px;padding:9px 16px;display:flex;align-items:baseline;gap:4px;}
.drc-price-amount{font-family:'Manrope',sans-serif;font-size:21px;font-weight:800;color:var(--v4-ink);}
.drc-price-period{font-size:12.5px;color:var(--v4-muted);font-weight:600;}
.drc-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 30px 26px;}
.drc-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.drc-cta{display:inline-flex;align-items:center;gap:8px;}
.drc-cta svg{width:15px;height:15px;transition:transform .2s;}
.drc-cta:hover svg{transform:translateX(3px);}
.drc-hint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--v4-muted);font-weight:600;background:var(--v4-bg-tint);padding:8px 14px;border-radius:20px;}

/* ---------------- Extension category tabs + row list ---------------- */
.domain-sugg-label{font-size:12.5px;font-weight:700;color:var(--v4-muted);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 12px;}
.domain-sugg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.tab-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:99px;border:1.5px solid var(--v4-line);background:#fff;font-weight:700;font-size:13px;color:var(--v4-muted);cursor:pointer;transition:.18s;font-family:'Manrope',sans-serif;}
.tab-btn.active{border-color:var(--v4-orange);color:#fff;background:var(--v4-orange);}
.domain-sugg-list{background:#fff;border:1.5px solid var(--v4-line);border-radius:14px;overflow:hidden;}
.dsg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--v4-line);font-weight:600;font-size:14.5px;color:var(--v4-ink);transition:background .15s;flex-wrap:wrap;}
.dsg-row:last-child{border-bottom:none;}
.dsg-row:hover{background:var(--v4-bg-tint);}
.dsg-row.taken{color:var(--v4-muted);}
.dsg-left{display:flex;align-items:center;gap:11px;min-width:0;flex:1;color:inherit;text-decoration:none;padding:5px 0;}
a.dsg-left:hover .dsg-domain{text-decoration:underline;}
.dsg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dsg-dot.avail{background:#0f766e;}
.dsg-dot.taken{background:var(--v4-line);}
.dsg-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsg-ext{color:var(--v4-orange);font-weight:700;}
.dsg-row.taken .dsg-ext{color:var(--v4-muted);}
.dsg-meta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.dsg-price{font-size:13.5px;font-weight:600;color:var(--v4-ink);}
.dsg-row.taken .dsg-price{color:var(--v4-muted);font-weight:600;}
.dsg-tag{font-size:11.5px;font-weight:700;color:var(--v4-muted);background:var(--v4-bg-tint);padding:3px 10px;border-radius:var(--v4-radius-sm);}
.dsg-buy{padding:7px 16px;font-size:12.5px;border-radius:9px;white-space:nowrap;}
.dsg-skeleton{pointer-events:none;}
.dsg-skel-bar{display:block;height:13px;border-radius:6px;background:var(--v4-bg-tint);animation:dsgPulse 1.2s ease-in-out infinite;}
.dsg-skel-name{width:150px;}
.dsg-skel-price{width:56px;}
@keyframes dsgPulse{0%,100%{opacity:1;}50%{opacity:.4;}}