/* ==========================================================================
   Domain Name Search / Results page (domain-name-search.php controller)
   Redesign 2026-08-24 - built on the site's existing tokens already
   declared in css/product/styles.css (--ss-font-body/--ss-font-heading,
   --ss-border/--ss-radius/--ss-shadow) plus the dominant ServerSea brand
   blue actually used sitewide (#0551e5 family - see the homepage's own
   .home-domain-search-bar/.home-domain-options, 218 occurrences vs. the
   newer, barely-used --ss-brand:#2f80ed token). The three status colors
   below (available/error/waiting) are the exact ones already prepared for
   this page in styles.css's own "Search bar button (match your design)" /
   "Result area" block - reused, not reinvented.

   SECOND PASS (2026-08-24): the first pass matched the site's edge-to-edge
   .mainPadding convention (no max-width, fixed side padding) which, at
   review, made the page feel inconsistent instead - the ~680px search bar
   sat centered in a much-wider results area below it. Replaced with a
   single, consistent max-width:1200px container (width system below) used
   by every section - search bar, primary result, suggestions, trust,
   extensions - so they all share the same left/right edges. This does not
   reintroduce the earlier "boxed in" problem the first pass fixed: at the
   review's own tested widths (1440/1280/1024) a 1200px container still
   fills nearly the full viewport once side padding is subtracted; it only
   stops growing further on screens wider than that. */

/* PALETTE ON :root, NOT ON .dns (2026-09-23).
   These used to be declared on .dns, which meant they only resolved for
   elements INSIDE that container. Anything this page appends to <body> -
   the registration-requirements modal does exactly that, because a fixed
   overlay cannot live inside a container with overflow-x:hidden - fell
   outside the scope, so `background: var(--dns-brand)` resolved to nothing.
   .dns-btn-primary's `color:#fff` is a literal and still applied, so the
   modal's primary button rendered as white text on a white footer: present,
   full size and clickable, but invisible.
   A palette is not layout, so it belongs at the root. .dns keeps its own
   layout and font properties below; its descendants resolve exactly the same
   values they did before. */
:root{
  --dns-brand:#0551e5;
  --dns-brand-dark:#0546c4;
  --dns-brand-light:#0a58ef;
  --dns-bg-tint:#f3f6fd;
  --dns-border:#e6e8ef;
  --dns-text:#1b1f24;
  --dns-muted:#6b7280;
  --dns-radius:14px;
  --dns-radius-sm:10px;
  --dns-shadow:0 10px 30px rgba(5,81,229,.08);
  --dns-avail-bg:#e9f8ef;
  --dns-avail-text:#146c34;
  --dns-avail-border:#bfead0;
  --dns-taken-bg:#ffe1e1;
  --dns-taken-text:#8a0f0f;
  --dns-taken-border:#ffb6b6;
  --dns-wait-bg:#e8f1ff;
  --dns-wait-text:#0b3f8a;
  --dns-wait-border:#bcd6ff;
}

.dns{
  font-family: var(--ss-font-body);
  color: var(--dns-text);
  display:block;
  width:100%;
  max-width:100vw;
  overflow-x:hidden; /* safety net - the real fixes are the flex/wrap rules below, this just guarantees no section can force page-wide horizontal scroll even if one is missed */
}

.dns *, .dns *::before, .dns *::after{ box-sizing:border-box; }

/* THIRD PASS (2026-08-24): search.js's own scrollIntoView() call (fired
   after a search completes) was landing the result directly behind the
   site header - confirmed by measuring it live: .ss-header carries
   `position:sticky; top:0` in css/product/modern-menu.css (loaded
   sitewide via template.php, missed in the first two passes' own CSS
   audit - grep only covered header-unified.css/styles.css), a real
   131px tall at this breakpoint, pinned over whatever scrolls beneath
   it. scroll-margin-top tells the browser's own scrollIntoView() to
   stop short of the very top by this much, same technique already
   established elsewhere on this site for the identical problem (see
   styles.css's own .paym-section / .paym-nav / .faq-nav, which use
   110-120px against the same sticky header). 150px here for a bit of
   breathing room beyond the measured 131px. */
.scrollIntoView{ scroll-margin-top:150px; }

/* Alpine's own convention: hide [x-cloak] elements until Alpine has
   initialized, avoiding a flash of unstyled/premature content. This rule
   lived in the vendored widget's additional.css (dropped by this
   redesign) - ported forward as-is, still required by the same x-cloak
   attributes already present on this page's markup. */
[x-cloak]{ display:none !important; }

/* Single width system for the whole page - every section (search bar,
   primary result, suggestions, trust, extensions) uses this same
   container so they share identical left/right edges, per review. */
.dns-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
  padding:0 24px;
}

/* Desktop gutters bumped to the ~40-60px range requested at review
   (was 32px, which read as too tight against the browser edge on large
   desktop). */
@media (min-width:1024px){ .dns-container{ padding:0 48px; } }
@media (max-width:767px){ .dns-container{ padding:0 16px; } }

/* -------------------------------------------------------------------- */
/* 1. HERO / SEARCH                                                      */
/* -------------------------------------------------------------------- */

.dns-hero{
  width:100%;
  background: var(--dns-bg-tint);
  padding:28px 0 24px; /* compact - the actual result should appear sooner, per review */
  text-align:center;
}

.dns-hero h1{
  font-family: var(--ss-font-heading);
  font-size:30px;
  line-height:1.2;
  margin:0 0 6px;
  color: var(--dns-text);
}

.dns-hero p{
  font-size:15px;
  line-height:1.5;
  color: var(--dns-muted);
  margin:0 auto 18px;
  max-width:560px;
}

/* Fills the same .dns-container the rest of the page uses (no separate
   narrower max-width) - the search bar is the primary interaction on this
   page and should read as wide/prominent, not a small form floating in a
   wide hero, per review. */
.dns-searchbar{
  display:flex;
  align-items:stretch;
  gap:12px;
  background:#fff;
  padding:10px;
  border-radius:var(--dns-radius);
  box-shadow: var(--dns-shadow);
  border:1px solid var(--dns-border);
}

.dns-search-input-wrap{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
}

.dns-search-input{
  width:100%;
  height:56px;
  border:none;
  outline:none;
  background:transparent;
  font-size:17px;
  font-family: var(--ss-font-body);
  color: var(--dns-text);
  padding:0 40px 0 18px;
}

.dns-search-input::placeholder{ color:#9aa1ac; }
.dns-search-input.has-error{ box-shadow: inset 0 0 0 2px var(--dns-taken-border); border-radius:8px; }

.dns-search-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:#9aa1ac;
  cursor:pointer;
  border-radius:50%;
}
.dns-search-clear:hover{ background:#f1f2f5; color:#666; }

.dns-search-btn{
  border:none;
  cursor:pointer;
  padding:0 40px;
  height:56px;
  min-width:160px;
  flex:none;
  border-radius:var(--dns-radius-sm);
  background: var(--dns-brand);
  color:#fff;
  font-size:16px;
  font-family: var(--ss-font-heading);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s ease, transform .05s ease;
}
.dns-search-btn:hover{ background: var(--dns-brand-dark); }
.dns-search-btn:active{ transform:translateY(1px); }
.dns-search-btn:disabled{ opacity:.7; cursor:not-allowed; }
.dns-search-btn:focus-visible, .dns-search-input:focus-visible{ outline:2px solid var(--dns-brand); outline-offset:2px; }

.dns-search-spinner{
  width:18px; height:18px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation: dns-spin .7s linear infinite;
}
@keyframes dns-spin{ to{ transform:rotate(360deg); } }

/* TLD selection chips - align to the same width as the search bar above
   them (no separate narrower cap), wrapping naturally in a centered row. */
.dns-tlds-select{
  margin:18px 0 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  list-style:none;
  padding:0;
}

.dns-tld-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border:1px solid var(--dns-border);
  border-radius:20px;
  padding:7px 14px 7px 10px;
  font-size:13.5px;
  color: var(--dns-muted);
  cursor:pointer;
  user-select:none;
}
.dns-tld-chip input{ accent-color: var(--dns-brand); margin:0; cursor:pointer; }
.dns-tld-chip:has(input:checked){
  background: var(--dns-bg-tint);
  border-color: var(--dns-brand);
  color: var(--dns-brand-dark);
}

/* TLD chips that don't fit on one line get moved by search.js's own
   resize()/teleporter-receiver logic from #teleporter into #receiver,
   revealed via the "More" toggle - styled to look like an intentional
   pill control (matching the TLD chips it expands), not a bare link. */
.receiver-more-btn{
  display:none; /* search.js's resize() flips this to block via inline style once it measures real overflow */
  width:100%;
  text-align:center;
  margin-top:10px;
}
.nav-show-more-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-family: var(--ss-font-heading);
  color: var(--dns-brand);
  background: var(--dns-bg-tint);
  border:1px solid var(--dns-border);
  border-radius:20px;
  cursor:pointer;
  padding:7px 16px;
  user-select:none;
}
.nav-show-more-btn::after{ content:"\25BE"; font-size:10px; }
.nav-show-more-btn:hover{ border-color: var(--dns-brand); }
.receiver-domains{
  display:none;
  list-style:none;
  margin:10px 0 0;
  padding:0;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.receiver-domains.show{ display:flex; }
.receiver-domains li{ list-style:none; }

.dns-error-alert{
  margin:14px 0 0;
  background: var(--dns-taken-bg);
  color: var(--dns-taken-text);
  border:1px solid var(--dns-taken-border);
  border-radius:var(--dns-radius-sm);
  padding:12px 16px;
  font-size:14px;
  text-align:left;
}

/* -------------------------------------------------------------------- */
/* Loading state                                                        */
/* -------------------------------------------------------------------- */

.dns-loading{
  width:100%;
  padding:34px 0;
  text-align:center;
}
.dns-loading-inner{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background: var(--dns-wait-bg);
  color: var(--dns-wait-text);
  border:1px solid var(--dns-wait-border);
  border-radius:999px;
  padding:12px 22px;
  font-size:15px;
  font-family: var(--ss-font-heading);
}
.dns-loading-spinner{
  width:20px; height:20px;
  border-radius:50%;
  border:2.5px solid rgba(11,63,138,.25);
  border-top-color: var(--dns-wait-text);
  animation: dns-spin .7s linear infinite;
  flex:none;
}
.dns-loading-dots::after{
  content:"";
  display:inline-block;
  width:16px;
  text-align:left;
  animation: dns-dots 1.2s steps(4,end) infinite;
}
@keyframes dns-dots{
  0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} 100%{content:"";}
}

/* -------------------------------------------------------------------- */
/* 2. PRIMARY DOMAIN RESULT                                              */
/* -------------------------------------------------------------------- */

.dns-primary{
  width:100%;
  padding-top:20px; /* keep .dns-container's horizontal gutters */
  padding-bottom:8px;
}

/* Result card, not an alert banner: a plain white card with a thin
   top accent line (2nd pass - the earlier full-width solid-color status
   band read as a system error message, not a domain-search result,
   which is exactly what review flagged). Unavailable uses a soft accent
   only, never a large red fill; available is the visually STRONGER of
   the two states (bigger name, prominent price+CTA row), matching
   review's explicit "don't only optimize the unavailable state". */
.dns-primary-card{
  margin:0 auto;
  border-radius:var(--dns-radius);
  border:1px solid var(--dns-border);
  border-top:4px solid var(--dns-border);
  box-shadow: var(--dns-shadow);
  background:#fff;
  padding:28px 32px;
}
@media (max-width:575px){ .dns-primary-card{ padding:24px 20px; } }

.dns-primary-card.is-available{ border-top-color: var(--dns-avail-text); }
.dns-primary-card.is-taken{ border-top-color:#e6a3a3; }

.dns-primary-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-size:13.5px;
  font-family: var(--ss-font-heading);
  margin-bottom:14px;
}
.dns-primary-card.is-available .dns-primary-badge{ background: var(--dns-avail-bg); color: var(--dns-avail-text); }
.dns-primary-card.is-taken .dns-primary-badge{ background:#fbeeee; color:#a83a3a; }
.dns-primary-badge i{ font-size:14px; }

.dns-primary-name{
  font-family: var(--ss-font-heading);
  font-size:30px;
  color: var(--dns-text);
  overflow-wrap:break-word;
  margin:0 0 8px;
}

.dns-primary-taken-msg{
  font-size:15px;
  color: var(--dns-muted);
  line-height:1.5;
  overflow-wrap:break-word;
  max-width:60ch;
  margin:0 0 16px;
}
.dns-primary-taken-msg strong{ color: var(--dns-text); font-family:var(--ss-font-heading); font-weight:normal; }

.dns-primary-available-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  margin-top:16px;
}

.dns-primary-price .amount{
  font-family: var(--ss-font-heading);
  font-size:26px;
  color: var(--dns-text);
  display:block;
}
.dns-primary-price .period{
  font-size:13.5px;
  color: var(--dns-muted);
}

.dns-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 26px;
  border-radius:var(--dns-radius-sm);
  font-family: var(--ss-font-heading);
  font-weight:normal; /* the theme's Poppins Semibold face already carries the intended weight */
  font-size:15px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dns-btn-primary{ background: var(--dns-brand); color:#fff; }
.dns-btn-primary:hover{ background: var(--dns-brand-dark); color:#fff; }
.dns-btn-outline{ background:#fff; color: var(--dns-brand); border:1.5px solid var(--dns-brand); }
.dns-btn-outline:hover{ background: var(--dns-bg-tint); }
.dns-btn-lg{ height:54px; padding:0 32px; font-size:16px; }
.dns-btn:focus-visible{ outline:2px solid var(--dns-brand); outline-offset:2px; }
.dns-btn:disabled{ opacity:.65; cursor:not-allowed; }

/* Small contextual line between the primary result and the alternatives
   below it, per review point 10 - subtle, not another card. */
.dns-context-note{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  color: var(--dns-muted);
  margin:16px 0 0;
}
.dns-context-note i{ color: var(--dns-brand); flex:none; }

/* -------------------------------------------------------------------- */
/* 3. SUGGESTIONS / MORE OPTIONS                                        */
/* -------------------------------------------------------------------- */

.dns-suggestions{
  width:100%;
  padding-top:40px; /* keep .dns-container's horizontal gutters */
  padding-bottom:12px;
}

/* Shared by every section heading on the page (suggestions, trust,
   extensions) so size/icon/spacing stay consistent, per review point 9. */
.dns-section-title{
  font-family: var(--ss-font-heading);
  font-size:21px;
  color: var(--dns-text);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.dns-section-title i{ color: var(--dns-brand); font-size:17px; }

.dns-suggestions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}
/* A result row contains three meaningful pieces of information (domain,
   price and CTA). Two columns become cramped throughout tablet/small-laptop
   widths, even before they technically overflow. Keep the results in one
   clear column until a 1200px desktop viewport provides enough room for
   both columns. minmax(0,1fr) above also prevents unusually long domains
   from widening the grid beyond its container. */
@media (max-width:1199px){ .dns-suggestions-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }

.dns-result-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dns-result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid var(--dns-border);
  border-radius:var(--dns-radius-sm);
  padding:18px 20px;
  min-height:72px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dns-result-row.is-available:hover{ border-color: var(--dns-brand); box-shadow:0 6px 16px rgba(5,81,229,.08); }
/* Taken rows: a muted tint to differentiate them, never a "disabled"
   look - the domain name itself stays legible, no strikethrough, per
   review point 7 (that read as broken/cancelled, not just unavailable). */
.dns-result-row.is-taken{ background: var(--dns-bg-tint); }

.dns-result-domain{
  font-family: var(--ss-font-heading);
  font-weight:600;
  font-size:16px;
  color: var(--dns-text);
  overflow-wrap:break-word; /* breaks at a sensible point (e.g. before the .tld) rather than break-all's mid-word wrapping, which looked awkward on medium-width columns at review */
  flex:1;
  min-width:0;
}
.dns-result-domain.is-taken{ color:#5b6472; }

.dns-result-meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex:none;
}

.dns-result-price{
  font-size:12.5px;
  color:#b42318;
  white-space:nowrap;
  text-align:right;
  line-height:1.3;
}
.dns-result-price .was{
  display:block;
  text-decoration:line-through;
  color: var(--dns-muted);
}
.dns-result-price .now{
  display:block;
  font-family: var(--ss-font-heading);
  font-weight:700;
  font-size:16px;
  color: var(--dns-text);
}

.dns-result-badge{
  font-size:12.5px;
  font-family: var(--ss-font-heading);
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.dns-result-badge.taken{ background:#fbeeee; color:#a83a3a; }

.dns-btn-sm{
  height:40px;
  min-width:96px;
  padding:0 18px;
  font-size:13.5px;
  border-radius:9px;
}
/* WHOIS is the secondary action in a row (Add to Cart, primary, stays at
   the size above) - a touch smaller so the hierarchy reads correctly. */
.dns-btn-sm.dns-btn-outline{ height:36px; min-width:84px; padding:0 14px; font-size:13px; }

.dns-result-loading{
  width:20px;height:20px;
  border-radius:50%;
  border:2.5px solid var(--dns-border);
  border-top-color: var(--dns-brand);
  animation: dns-spin .7s linear infinite;
}

.dns-showmore{
  text-align:center;
  margin-top:26px;
}
.dns-showmore .dns-btn{ min-width:180px; }

/* Generator-only introduction. It deliberately reuses the result grid and
   cards below so both tools remain visually identical. */
.dns-generator-intro{
  margin-bottom:30px;
  padding:24px 26px;
  border:1px solid var(--dns-wait-border);
  border-radius:var(--dns-radius);
  background:linear-gradient(135deg,#f6f9ff 0%,#eef4ff 100%);
}
.dns-generator-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:var(--dns-brand);
  font-family:var(--ss-font-heading);
  font-size:13.5px;
}
.dns-generator-intro h2{
  margin:0 0 5px;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:24px;
  line-height:1.35;
}
.dns-generator-intro h2 span{ color:var(--dns-brand-dark); overflow-wrap:anywhere; }
.dns-generator-intro p{ margin:0; color:var(--dns-muted); font-size:14.5px; }

/* -------------------------------------------------------------------- */
/* WHOIS lookup                                                          */
/* -------------------------------------------------------------------- */

.dns-whois-result{
  padding-top:28px;
  padding-bottom:12px;
}
.dns-whois-card{
  overflow:hidden;
  border:1px solid var(--dns-border);
  border-radius:var(--dns-radius);
  background:#fff;
  box-shadow:var(--dns-shadow);
}
.dns-whois-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 26px;
  border-bottom:1px solid var(--dns-border);
  background:linear-gradient(135deg,#f6f9ff 0%,#eef4ff 100%);
}
.dns-whois-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--dns-brand);
  color:#fff;
  font-size:19px;
}
.dns-whois-eyebrow{
  display:block;
  margin-bottom:2px;
  color:var(--dns-brand);
  font-family:var(--ss-font-heading);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.dns-whois-card-head h2{
  margin:0;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:22px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.dns-whois-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  padding:7px 12px;
  border-radius:999px;
  background:var(--dns-avail-bg);
  color:var(--dns-avail-text);
  font-family:var(--ss-font-heading);
  font-size:12.5px;
  white-space:nowrap;
}
.dns-epp-summary{
  padding:24px 26px 26px;
  border-bottom:1px solid var(--dns-border);
  background:#fff;
}
.dns-epp-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.dns-epp-summary-head h3{
  margin:0;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:19px;
  line-height:1.35;
}
.dns-epp-count{
  flex:none;
  padding:6px 11px;
  border:1px solid var(--dns-border);
  border-radius:999px;
  background:#f8fafc;
  color:var(--dns-muted);
  font-size:12px;
  white-space:nowrap;
}
.dns-epp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.dns-epp-item{
  --epp-accent:#64748b;
  --epp-bg:#f8fafc;
  --epp-border:#dbe2ea;
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-width:0;
  padding:16px;
  border:1px solid var(--epp-border);
  border-left:4px solid var(--epp-accent);
  border-radius:11px;
  background:var(--epp-bg);
}
.dns-epp-item.is-success{ --epp-accent:#168346; --epp-bg:#f0faf4; --epp-border:#c9ead6; }
.dns-epp-item.is-info{ --epp-accent:#0551e5; --epp-bg:#f2f6ff; --epp-border:#cad9ff; }
.dns-epp-item.is-warning{ --epp-accent:#b76e00; --epp-bg:#fff9ed; --epp-border:#f2d9a7; }
.dns-epp-item.is-danger{ --epp-accent:#c92a2a; --epp-bg:#fff3f3; --epp-border:#f2c5c5; }
.dns-epp-item-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#fff;
  color:var(--epp-accent);
  box-shadow:0 1px 5px rgba(16,24,40,.07);
  font-size:15px;
}
.dns-epp-item-body{ min-width:0; flex:1; }
.dns-epp-item-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:5px 10px;
  margin-bottom:6px;
}
.dns-epp-item-title h4{
  margin:0;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:15px;
  line-height:1.35;
}
.dns-epp-item-title code{
  color:var(--epp-accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:10.5px;
  overflow-wrap:anywhere;
}
.dns-epp-item p{
  margin:0 0 8px;
  color:#556070;
  font-size:12.75px;
  line-height:1.5;
}
.dns-epp-item a{
  color:var(--epp-accent);
  font-family:var(--ss-font-heading);
  font-size:11.5px;
  text-decoration:none;
}
.dns-epp-item a:hover{ text-decoration:underline; }
.dns-epp-item a i{ margin-left:3px; font-size:9px; }
@media (max-width:991px){ .dns-epp-grid{ grid-template-columns:1fr; } }
.dns-whois-record{
  max-height:620px;
  overflow:auto;
  padding:26px;
  background:#fbfcfe;
  color:#2f3744;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:13.5px;
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:4;
}

.dns-whois-features{
  margin-top:44px;
  padding:52px 0;
  background:var(--dns-bg-tint);
}
.dns-whois-features-head{
  max-width:720px;
  margin:0 auto 28px;
  text-align:center;
}
.dns-whois-features-head > span{
  color:var(--dns-brand);
  font-family:var(--ss-font-heading);
  font-size:13.5px;
}
.dns-whois-features-head h2{
  margin:7px 0 8px;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:26px;
  line-height:1.3;
}
.dns-whois-features-head p{ margin:0; color:var(--dns-muted); font-size:14.5px; line-height:1.6; }
.dns-whois-features-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.dns-whois-feature{
  padding:26px 24px;
  border:1px solid var(--dns-border);
  border-radius:var(--dns-radius-sm);
  background:#fff;
  box-shadow:0 4px 16px rgba(16,24,40,.04);
}
.dns-whois-feature > i{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border-radius:11px;
  background:#eaf1ff;
  color:var(--dns-brand);
  font-size:18px;
}
.dns-whois-feature h3{
  margin:0 0 7px;
  color:var(--dns-text);
  font-family:var(--ss-font-heading);
  font-size:17px;
}
.dns-whois-feature p{ margin:0; color:var(--dns-muted); font-size:14px; line-height:1.55; }
.dns-whois-faq{ padding-top:54px; padding-bottom:54px; }

/* -------------------------------------------------------------------- */
/* Add to cart success state                                            */
/* -------------------------------------------------------------------- */

.dns-btn-added{
  background: var(--dns-avail-bg);
  color: var(--dns-avail-text);
  border:1.5px solid var(--dns-avail-border);
  cursor:default;
}

/* -------------------------------------------------------------------- */
/* 6. TRUST / BENEFITS                                                  */
/* -------------------------------------------------------------------- */

.dns-trust{
  width:100%;
  background: var(--dns-bg-tint);
  padding:56px 0;
  margin-top:48px;
}

/* Uses the same .dns-section-title as the other sections now (was its
   own centered 24px h2, inconsistent with the rest of the page - review
   point 9). Centered alignment kept since this section reads as a
   standalone strip, but size/icon now match. */
.dns-trust .dns-section-title{ justify-content:center; margin-bottom:28px; }

.dns-trust-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
@media (max-width:991px){ .dns-trust-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px){ .dns-trust-grid{ grid-template-columns:repeat(2,1fr); } }

.dns-trust-item{
  background:#fff;
  border:1px solid var(--dns-border);
  border-radius:var(--dns-radius-sm);
  box-shadow:0 2px 8px rgba(16,24,40,.04);
  padding:26px 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:130px;
}
.dns-trust-item i{
  font-size:28px;
  color: var(--dns-brand);
  margin-bottom:14px;
  display:block;
}
.dns-trust-item span{
  font-size:14px;
  font-family: var(--ss-font-heading);
  color: var(--dns-text);
  line-height:1.4;
  display:block;
}

/* -------------------------------------------------------------------- */
/* 7. POPULAR EXTENSIONS                                                 */
/* -------------------------------------------------------------------- */

.dns-extensions{
  width:100%;
  padding:48px 0 56px;
}

.dns-extensions-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.dns-extension-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--dns-border);
  border-radius:999px;
  padding:12px 20px;
  font-family: var(--ss-font-heading);
  color: var(--dns-text);
  font-size:15px;
  line-height:1;
}
.dns-extension-pill i{ color: var(--dns-brand); font-size:13px; }

/* -------------------------------------------------------------------- */
/* Mobile                                                                */
/* -------------------------------------------------------------------- */

@media (max-width:767px){
  .scrollIntoView{ scroll-margin-top:110px; } /* mobile header is shorter (no topbar row at this width) */

  .dns-hero{ padding:22px 0 20px; }
  .dns-hero h1{ font-size:24px; }
  .dns-hero p{ font-size:14px; margin-bottom:16px; }

  .dns-searchbar{ flex-direction:column; padding:10px; gap:8px; }
  .dns-search-input{ height:50px; }
  .dns-search-btn{ width:100%; height:50px; }

  .dns-primary-card{ padding:22px 18px; }
  .dns-primary-name{ font-size:24px; }
  .dns-primary-available-row{ flex-direction:column; align-items:stretch; gap:16px; }
  .dns-primary-price{ text-align:left; }
  .dns-btn-lg{ width:100%; }

  /* Result rows: domain name on its own line, price+action on a second
     full-width line - price text + "Add to Cart" button never wrapped
     here before, forcing the whole page wider than the viewport and
     clipping content everywhere (confirmed via a real mobile screenshot
     during the first pass's own review). */
  .dns-result-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:16px;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(16,24,40,.045);
  }
  .dns-result-domain{ white-space:normal; }
  .dns-result-meta{
    width:100%;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .dns-result-price{ text-align:left; }
  .dns-btn-sm{ flex:1; min-width:132px; }

  .dns-section-title{
    font-size:18px;
    gap:10px;
    line-height:1.35;
  }
  .dns-suggestions .dns-section-title i{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eaf1ff;
    font-size:15px;
  }

  .dns-trust{ padding:40px 0; }
  .dns-trust-item{ padding:18px 10px; min-height:auto; }

  .dns-suggestions{ padding-top:32px; padding-bottom:8px; }
  .dns-generator-intro{ padding:20px 18px; margin-bottom:26px; }
  .dns-generator-intro h2{ font-size:20px; }

  .dns-whois-result{ padding-top:20px; }
  .dns-whois-card-head{ align-items:flex-start; flex-wrap:wrap; padding:18px; }
  .dns-whois-card-head h2{ font-size:19px; }
  .dns-whois-status{ width:100%; margin-left:0; justify-content:center; }
  .dns-epp-summary{ padding:20px 18px; }
  .dns-epp-summary-head{ align-items:flex-start; flex-direction:column; gap:10px; }
  .dns-epp-summary-head h3{ font-size:17px; }
  .dns-epp-item{ padding:14px; }
  .dns-epp-item-title{ display:block; }
  .dns-epp-item-title code{ display:block; margin-top:3px; }
  .dns-whois-record{ max-height:520px; padding:18px; font-size:12.5px; line-height:1.7; }
  .dns-whois-features{ margin-top:34px; padding:40px 0; }
  .dns-whois-features-head h2{ font-size:22px; }
  .dns-whois-features-grid{ grid-template-columns:1fr; gap:14px; }
  .dns-whois-feature{ padding:20px 18px; }
  .dns-whois-faq{ padding-top:40px; padding-bottom:40px; }
  .dns-extensions{ padding:36px 0 40px; }
}

@media (max-width:575px){
  .dns-hero h1{ font-size:21px; }
  .dns-primary-name{ font-size:22px; }
}