/* =====================================================================
   NestDaddy web results, laid out like a Google results page (owner 2026-11-08:
   "ikut je la sebijik2 susunan google tu dan font etc", "search bar kau tgk google.. tiru die").
   Loaded only by templates/results.html, after nd.css. Prefix html body:not(#nd):not(#serp)
   outranks nd.css. NestDaddy keeps its own logo and name; this copies layout and type only.
   ===================================================================== */
:root {
  --g-text: #202124; --g-meta: #4d5156; --g-muted: #70757a; --g-link: #1a0dab; --g-visited: #681da8;
  --g-blue: #1a73e8; --g-line: #dfe1e5; --g-rule: #ebebeb; --g-chip: #f1f3f4;
  --g-left: 180px;            /* results column starts here on desktop, like Google */
}

/* one face, like Google results */
html body:not(#nd):not(#serp), html body:not(#nd):not(#serp) *:not(svg):not(svg *) { font-family: arial, sans-serif; }
html body:not(#nd):not(#serp) { color: var(--g-text); background: #fff !important; }

/* header: logo at the left edge, search box starting at the results column */
html body:not(#nd):not(#serp) header.header { border-bottom: 0; box-shadow: none; }
html body:not(#nd):not(#serp) .header-content {
  max-width: none; margin: 0; padding: 20px 28px 8px; display: flex; align-items: center; gap: 0;
}
html body:not(#nd):not(#serp) .logo-small { margin: 0; width: calc(var(--g-left) - 28px); flex: none; }
html body:not(#nd):not(#serp) .search-form-header { flex: 0 1 692px; margin: 0; }
html body:not(#nd):not(#serp) .search-box-header {
  display: flex; align-items: center; height: 46px; padding: 0 6px 0 20px; background: #fff;
  border: 1px solid var(--g-line); border-radius: 24px; box-shadow: none;
}
html body:not(#nd):not(#serp) .search-box-header:hover,
html body:not(#nd):not(#serp) .search-box-header:focus-within {
  border-color: rgba(223, 225, 229, 0); box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
}
html body:not(#nd):not(#serp) .search-input-header {
  flex: 1; min-width: 0; height: 44px; padding: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; font-size: 16px; color: var(--g-text); outline: none;
}
html body:not(#nd):not(#serp) .clear-search-btn {
  /* the page placed it absolutely (right: 80px) for the old text button; Google keeps it in line:
     text, x, a thin divider, then the magnifier */
  position: static !important; transform: none !important; flex: none; order: 2;
  height: 24px; margin: 0; padding: 0 12px 0 8px; border: 0; border-right: 1px solid var(--g-line); border-radius: 0;
  background: none !important; box-shadow: none !important; color: var(--g-muted); font-size: 24px; line-height: 22px; cursor: pointer;
}
html body:not(#nd):not(#serp) .clear-search-btn:hover { color: var(--g-text); }
html body:not(#nd):not(#serp) .search-input-header { order: 1; }
/* the Search button becomes Google's blue magnifier */
html body:not(#nd):not(#serp) .search-button-header {
  position: static !important; transform: none !important; right: auto !important; top: auto !important;
  order: 3; width: 40px; height: 40px; flex: none; padding: 0; margin-left: 4px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 0; color: transparent; background: transparent center / 22px 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E");
}
html body:not(#nd):not(#serp) .search-button-header:hover { background-color: var(--g-chip); }

/* results column */
html body:not(#nd):not(#serp) .results-container {
  max-width: 652px; margin: 0 0 0 var(--g-left); padding: 0; background: #fff !important;
}

/* tabs: Google's grey text, blue active with a 3px bar, one light rule under the row */
html body:not(#nd):not(#serp) a.tab {
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #5f6368;
  padding: 12px 12px 9px; margin: 0; border-bottom: 3px solid transparent;
}
html body:not(#nd):not(#serp) a.tab:first-child { margin-left: -12px; }
html body:not(#nd):not(#serp) a.tab:hover { color: var(--g-text); }
html body:not(#nd):not(#serp) a.tab.active { color: var(--g-blue); border-bottom-color: var(--g-blue); font-weight: 400; }
html body:not(#nd):not(#serp) a.tab + * , html body:not(#nd):not(#serp) .results-container > div:first-child {
  border-bottom-color: var(--g-rule);
}

/* "About N results (x seconds)" */
html body:not(#nd):not(#serp) .results-info { margin: 14px 0 22px; padding: 0; border: 0; }
html body:not(#nd):not(#serp) .results-info, html body:not(#nd):not(#serp) .results-info * {
  font-size: 14px; color: var(--g-muted); font-weight: 400;
}

/* one result: site row, blue title, grey snippet, 30px apart, no rules or boxes */
html body:not(#nd):not(#serp) .result-item-modern {
  margin: 0 0 30px; padding: 0; border: 0 !important; background: none; box-shadow: none;
}
html body:not(#nd):not(#serp) .result-url-bar-modern { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
html body:not(#nd):not(#serp) .favicon-modern {
  width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 50%;
  background: var(--g-chip); border: 1px solid #ecedef; object-fit: contain;
}
html body:not(#nd):not(#serp) .result-domain-modern { font-size: 14px; color: var(--g-text); }
html body:not(#nd):not(#serp) a.result-title-modern {
  display: inline-block; font-family: arial, sans-serif; font-size: 20px; line-height: 26px; font-weight: 400;
  letter-spacing: 0; color: var(--g-link); margin: 0 0 3px;
}
html body:not(#nd):not(#serp) a.result-title-modern:visited { color: var(--g-visited); }
html body:not(#nd):not(#serp) a.result-title-modern:hover { text-decoration: underline; text-underline-offset: 2px; }
html body:not(#nd):not(#serp) .result-description-modern {
  font-family: arial, sans-serif !important; font-size: 14px; line-height: 22px; color: var(--g-meta);
}
html body:not(#nd):not(#serp) .result-thumbnail { border-radius: 8px; }

/* market prices block in Google's plain style */
html body:not(#nd):not(#serp) .price-widget { border-top: 0; border: 1px solid var(--g-line); border-radius: 8px; }
html body:not(#nd):not(#serp) .price-widget-header { padding: 12px 16px; border-bottom: 1px solid var(--g-rule); }
html body:not(#nd):not(#serp) .price-widget-header, html body:not(#nd):not(#serp) .price-widget-header * {
  font-family: arial, sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--g-text);
}

/* phones: Google's mobile layout, full width with a 16px edge */
@media (max-width: 900px) {
  html body:not(#nd):not(#serp) .header-content { padding: 12px 16px 4px; flex-wrap: wrap; row-gap: 10px; }
  html body:not(#nd):not(#serp) .logo-small { width: 100%; }
  html body:not(#nd):not(#serp) .search-form-header { flex: 1 1 100%; }
  html body:not(#nd):not(#serp) .results-container { margin: 0 16px; max-width: none; }
}

/* "Latest news" cards like Google's Top stories: a thin card, no drawn placeholder when a story has
   no picture (the gradient box with a document icon read as an empty box) */
html body:not(#nd):not(#serp) a.news-card {
  border: 1px solid var(--g-line) !important; border-radius: 8px !important; overflow: hidden; background: #fff !important;
}
html body:not(#nd):not(#serp) a.news-card:hover { box-shadow: 0 1px 6px rgba(32, 33, 36, .2) !important; }
html body:not(#nd):not(#serp) .news-card-img-placeholder { display: none !important; }
html body:not(#nd):not(#serp) .news-card-img { border-radius: 0; background-color: var(--g-chip); }
html body:not(#nd):not(#serp) .news-card-body { padding: 12px 14px 14px; }
html body:not(#nd):not(#serp) .news-card-title { font-size: 16px; line-height: 22px; color: var(--g-text); font-weight: 400; }
html body:not(#nd):not(#serp) a.news-card:hover .news-card-title { text-decoration: underline; }
html body:not(#nd):not(#serp) .news-card-meta, html body:not(#nd):not(#serp) .news-card-meta * { font-size: 12px; color: var(--g-muted); }
html body:not(#nd):not(#serp) .news-cat-badge { font-size: 11px; letter-spacing: 0; text-transform: none; border-radius: 4px; }