/* =====================================================
   search.css
   Styles for /search/ and /search-results/ pages
   Skins the Google Programmable Search Engine widget
   to match the Reza Nassab Plastic Surgery site palette
   (dark background with gold #c9a96e accent).
===================================================== */

/* -----------------------------------------------------
   STACKING / LAYOUT
   Keep header & mega-menu above the search UI; give the
   results section its own stacking context so Google
   CSE elements cannot bleed behind other content.
----------------------------------------------------- */
#masthead,
.site-header { position: relative; z-index: 1000; }
.mega-menu   { z-index: 1001; }
.mobile-cta  { z-index: 1002; }

.search-results-section {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: #0c0c0c;
  padding: 60px 0 100px;
}

/* -----------------------------------------------------
   SEARCH PAGE (/search/) wrapper
----------------------------------------------------- */
.search-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.search-wrap .search-intro {
  color: #c9a96e;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
  text-align: center;
}
.search-wrap h1.search-title { color: #fff; text-align: center; }
.search-wrap p.search-sub {
  color: rgba(255, 255, 255, .75);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

/* Quick links under the search box */
.search-quicklinks { margin-top: 30px; text-align: center; }
.search-quicklinks p {
  color: rgba(255, 255, 255, .55);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.search-quicklinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.search-quicklinks ul li a {
  color: #c9a96e;
  text-decoration: none;
  font-size: .95rem;
  padding: 6px 14px;
  border: 1px solid rgba(201, 169, 110, .4);
  border-radius: 2px;
  transition: all .2s;
}
.search-quicklinks ul li a:hover {
  background: #c9a96e;
  color: #111;
  border-color: #c9a96e;
}

/* -----------------------------------------------------
   RESULTS PAGE (/search-results/) wrapper
----------------------------------------------------- */
.results-wrap { max-width: 880px; margin: 0 auto; }
.results-intro {
  color: #c9a96e;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
  text-align: center;
}
.results-sub {
  color: rgba(255, 255, 255, .75);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 20px;
}
.results-query { color: #c9a96e; font-style: italic; }

/* Card that wraps the Google CSE widget */
.results-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  padding: 30px 25px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* -----------------------------------------------------
   GOOGLE CSE THEME OVERRIDES
   Skin the Google widget to match the dark/gold palette
----------------------------------------------------- */
.gsc-control-cse,
.gsc-control-cse * {
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.gsc-control-cse {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Force inline rendering of results regardless of
   "Overlay" vs "Two page" engine layout. */
.gsc-control-cse,
.gsc-control-cse *,
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-nooverlay,
.gsc-resultsRoot,
.gsc-results,
.gsc-resultsbox-visible {
  position: static !important;
}
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-nooverlay {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  width: auto !important; max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gsc-modal-background-image,
.gsc-modal-background-image-visible,
.gsc-modal-background-image-invisible { display: none !important; }
.gsc-resultsbox-invisible { display: none !important; }
.gsc-resultsbox-visible   { display: block !important; }

/* Search input */
.gsc-search-box { margin: 0 0 25px !important; }
.gsc-input-box {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 2px !important;
  height: 48px !important;
}
.gsc-input-box:hover,
.gsc-input-box-focus {
  border-color: #c9a96e !important;
  box-shadow: none !important;
}
table.gsc-search-box td.gsc-input { padding: 0 !important; }
.gsc-input-box input.gsc-input {
  background: transparent !important;
  color: #fff !important;
  font-size: 1rem !important;
  padding: 0 16px !important;
}
.gsc-input-box input.gsc-input::placeholder { color: rgba(255, 255, 255, .5) !important; }
.gsc-search-button-v2 {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  border-radius: 2px !important;
  padding: 14px 18px !important;
  margin-left: 8px !important;
}
.gsc-search-button-v2:hover {
  background: #b9985d !important;
  border-color: #b9985d !important;
}
.gsc-search-button-v2 svg { fill: #111 !important; }
.gsc-clear-button { display: none !important; }

/* Result tabs (Web / Image) */
.gsc-tabsArea {
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
  margin-bottom: 20px !important;
}
.gsc-tabHeader {
  color: rgba(255, 255, 255, .6) !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 18px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem !important;
}
.gsc-tabHeader.gsc-tabhActive {
  color: #c9a96e !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #c9a96e !important;
}

/* Result row */
.gsc-result,
.gsc-webResult.gsc-result {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  padding: 18px 0 !important;
}
.gsc-webResult.gsc-result:hover { background: rgba(201, 169, 110, .04) !important; }
.gsc-result .gs-title,
.gsc-result .gs-title *,
.gs-title b {
  color: #c9a96e !important;
  text-decoration: none !important;
}
.gsc-result .gs-title:hover,
.gsc-result .gs-title:hover * { text-decoration: underline !important; }
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
  color: rgba(201, 169, 110, .6) !important;
  font-size: .85rem !important;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType { color: rgba(255, 255, 255, .75) !important; }
.gs-webResult .gs-snippet b,
.gs-imageResult .gs-snippet b {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Stats row */
.gsc-result-info {
  color: rgba(255, 255, 255, .55) !important;
  padding: 0 0 12px !important;
  font-size: .85rem !important;
}

/* No results / spelling */
.gs-no-results-result .gs-snippet,
.gs-spelling {
  color: rgba(255, 255, 255, .75) !important;
  background: transparent !important;
  border: none !important;
  padding: 20px 0 !important;
}

/* Pagination */
.gsc-cursor-box {
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  margin-top: 10px !important;
}
.gsc-cursor-page {
  color: rgba(255, 255, 255, .6) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  text-decoration: none !important;
}
.gsc-cursor-page:hover {
  border-color: #c9a96e !important;
  color: #c9a96e !important;
}
.gsc-cursor-current-page {
  color: #111 !important;
  background: #c9a96e !important;
  border-color: #c9a96e !important;
}

/* Refinements (related searches) */
.gsc-refinementHeader { color: rgba(255, 255, 255, .6) !important; }
.gsc-refinementBlock  { background: transparent !important; }
.gsc-refinementsArea .gsc-refinementHeader { padding: 10px 0 !important; }

/* Google "find more on Google" branding link */
.gcsc-find-more-on-google { color: #c9a96e !important; }
.gcsc-find-more-on-google-magnifier { fill: #c9a96e !important; }
.gs-image-box,
.gsc-thumbnail { background: transparent !important; }

/* -----------------------------------------------------
   NATIVE FALLBACK FORM
   Shown via <noscript> if Google CSE fails to load
----------------------------------------------------- */
.fallback-search {
  display: flex;
  gap: 12px;
  margin: 0 auto 20px;
  max-width: 640px;
}
.fallback-search input[type="search"] {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  border-radius: 2px;
  font-size: 1rem;
  outline: none;
}
.fallback-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .5); }
.fallback-search input[type="search"]:focus { border-color: #c9a96e; }
.fallback-search button {
  padding: 14px 28px;
  border: none;
  background: #c9a96e;
  color: #111;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  font-size: .9rem;
}
.fallback-search button:hover { background: #b9985d; }