@import url('/home-economy-premium-2026.css');

/* PreçoCerto — focused autocomplete interaction.
   When typing, the search elevates into a comfortable focused position and results stay directly below it. */

html:has(.pcn-search-dropdown),
body:has(.pcn-search-dropdown) {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body:has(.pcn-search-dropdown) {
  width: 100%;
}

.pcn-home:has(.pcn-search-dropdown) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.pcn-home:has(.pcn-search-dropdown)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: rgba(7, 24, 38, .22);
  backdrop-filter: blur(2px) saturate(.95);
  -webkit-backdrop-filter: blur(2px) saturate(.95);
  animation: pc-search-focus-fade .16s ease-out both;
}

/* During active search, the hero must not clip the elevated search/dropdown. */
.pcn-home .pcn-hero:has(.pcn-search-dropdown) {
  overflow: visible;
  position: relative;
  z-index: 120;
  touch-action: none;
}

.pcn-home .pcn-hero:has(.pcn-search-dropdown) .pcn-hero__content,
.pcn-home .pcn-hero:has(.pcn-search-dropdown) .pcn-hero__copy {
  position: relative;
  z-index: 130;
  overflow: visible;
}

/* Elevate and center the entire search experience, not just the dropdown. */
.pcn-search-shell:has(.pcn-search-dropdown) {
  position: fixed;
  top: clamp(110px, 22vh, 210px);
  left: 50%;
  width: min(760px, calc(100vw - 40px));
  margin: 0;
  z-index: 214;
  isolation: isolate;
  transform: translateX(-50%);
  animation: pc-search-elevate .22s cubic-bezier(.2,.8,.2,1) both;
  touch-action: none;
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search {
  position: relative;
  z-index: 216;
  width: 100%;
  margin: 0;
  border-color: rgba(87, 148, 255, .72);
  box-shadow:
    0 24px 70px rgba(3, 22, 38, .28),
    0 0 0 5px rgba(93, 151, 255, .13),
    0 1px 0 rgba(255,255,255,.8) inset;
  touch-action: manipulation;
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown {
  position: absolute;
  z-index: 215;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  max-height: min(500px, 58vh);
  border-color: rgba(114, 154, 187, .46);
  box-shadow: 0 34px 90px rgba(2, 18, 31, .34), 0 5px 16px rgba(3, 24, 40, .12);
  touch-action: none;
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__head {
  min-height: 46px;
  padding-inline: 17px;
  background: linear-gradient(180deg, rgba(247,250,253,.99), rgba(242,247,251,.98));
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list {
  max-height: min(440px, 50vh);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list > button {
  min-height: 72px;
  padding: 9px 11px;
}

.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list > button:hover,
.pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list > button:focus-visible {
  background: linear-gradient(90deg, rgba(37,99,235,.085), rgba(37,99,235,.035));
  border-color: rgba(76, 126, 203, .24);
  box-shadow: inset 3px 0 0 #2563eb;
}

[data-theme="dark"] .pcn-home:has(.pcn-search-dropdown)::after {
  background: rgba(2, 13, 22, .38);
}

[data-theme="dark"] .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search {
  border-color: rgba(125, 177, 255, .72);
  box-shadow:
    0 26px 76px rgba(0, 10, 18, .46),
    0 0 0 5px rgba(116, 167, 255, .12);
}

[data-theme="dark"] .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__head {
  background: linear-gradient(180deg, rgba(29,64,88,.99), rgba(22,53,75,.98));
}

@keyframes pc-search-focus-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pc-search-elevate {
  from {
    opacity: .88;
    transform: translateX(-50%) translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  html:has(.pcn-search-dropdown),
  body:has(.pcn-search-dropdown),
  .pcn-home:has(.pcn-search-dropdown) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  .pcn-home:has(.pcn-search-dropdown)::after {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgba(7, 24, 38, .30);
  }

  .pcn-search-shell:has(.pcn-search-dropdown) {
    top: max(calc(env(safe-area-inset-top) + 58px), 10dvh);
    width: calc(100vw - 20px);
    max-width: 620px;
  }

  /* Active mobile search mirrors desktop: one compact bar, results immediately below. */
  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search {
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 17px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search > svg {
    width: 18px;
    height: 18px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search input {
    height: 44px;
    padding: 0 4px;
    font-size: 16px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search .pcn-search__clear {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search .pcn-search__submit {
    display: none;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown {
    top: calc(100% + 8px);
    max-height: min(440px, calc(100dvh - env(safe-area-inset-top) - 150px));
    border-radius: 17px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__head {
    min-height: 42px;
    padding-inline: 13px;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list {
    max-height: min(382px, calc(100dvh - env(safe-area-inset-top) - 208px));
    padding: 6px;
    touch-action: pan-y;
  }

  .pcn-search-shell:has(.pcn-search-dropdown) .pcn-search-dropdown__list > button {
    min-height: 64px;
    padding: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcn-home:has(.pcn-search-dropdown)::after,
  .pcn-search-shell:has(.pcn-search-dropdown) {
    animation: none;
  }
}