/* Hide HTML Scroll on results state */
[html-search-has-results] { overflow:hidden; }

/* MAIN WRAPPER
--------------------------- */
.zc-search {
  box-sizing: border-box;
  display: none;
  height: calc(100% - 50px);
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 50px;
  width: 100vw;
}
[html-search-active] .zc-search { display:block; }

/* FORM
--------------------------- */
.zc-search-form { 
  background: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
}
[html-search-active] .zc-search-form {
  opacity: 1;
  pointer-events: visible;
  position: relative;
  z-index: 1;
}
[html-search-has-results] .zc-search-form {
  height: 100%;
}


/* SEARCH INPUT
--------------------------- */
.zc-search-input-wrap {
  background: linear-gradient(#073c4e, #205160);
  align-items: center;
  display: flex;
  min-height: 58px;
  padding: 0 2rem;
  position: relative;
  transition: background .3s;
  z-index: 1;
}
[html-search-active] .zc-search-input-wrap {
  background: linear-gradient(#073c4e, #073c4e);
}
.zc-search-input-wrap > .algolia-autocomplete {
  display: block !important;
  margin: 0 auto;
  max-width: 1600px;
}
.zc-search-icon {
  --icon-fill: #00bbf1;
  height: 18px;
  left: 2px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  width: 18px;
  z-index: 1;
}
.zc-search-input,
.zc-search-input:hover {
  background: linear-gradient(90deg, #0c4a5f, #063646);
  border: 1px solid #0c4a5f !important;
  border-radius: 19px;
  box-shadow: inset 1px 0 3px rgba(6,54,70,.6)!important;
  box-sizing: border-box;
  caret-color: #0094bf;
  color: #fff;
  height: 38px;
  font-family: 'Avenir Light',helvetica,sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  padding-left: 40px;
  width: 100%;
  transform: translate(-10px,0);
}
.zc-search-input:focus {
  border: 0 !important;
  box-shadow: none !important;
}
/* PLACEHOLDER */
.zc-search-input::-webkit-input-placeholder { color:#fff !important; font-weight:600; font-size: 1.125rem; }
:focus::-webkit-input-placeholder { color:#fff; font-weight:600; font-size: 1.125rem; opacity:.5; }
.zc-search-input:-moz-placeholder, ::-moz-placeholder { color:#fff; font-weight:600; font-size: 1.125rem; }
.zc-search-input:-ms-input-placeholder { color:#fff; font-weight:600; font-size: 1.125rem; }
.algolia-autocomplete { width:100%; }


/* RESULTS DROPDOWN
--------------------------- */
.zc-search-results { 
  flex: 1 0 auto;
  overflow: auto;
  padding:25px 20px 80px; 
}
.zc-search-results-wrap { margin:0 auto; max-width:1000px; }
.zc-search-results-wrap > div { margin:0 auto; max-width:1600px; }
.zc-search-results-wrap > div + div { margin-top:30px; }
[class*="aa-dropdown-menu"] { position:relative !important; }
[data-zc-row] [class*="aa-dropdown-menu"],
[data-zc-row] [class*="aa-dataset"] { height:100%; display:flex; flex-direction:column; }
/* Card */
[class*="aa-dataset"] { padding:1rem; width:100%; background:#fff; box-sizing:border-box; border:1px solid #dedede; border-radius:4px; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px; }
[class*="aa-dataset"] > :first-child { margin-top:0; }
[class*="aa-dataset"] > :last-child { margin-bottom:0; border-bottom:1px solid #d9d9d9; }
[class*="aa-dataset"] .card-header { padding-bottom:.5rem; border-bottom: 1px solid #d9d9d9; }
[class*="aa-dataset"] .card-footer { border-top-color: #eaeaea; }
/* Card Body */
.aa-suggestions { margin:0 -1rem -1rem !important; padding:1rem 1rem 1.125rem; flex:1 0 auto; background:#f9f9f9; border-radius:4px 4px 0 0; }
.aa-suggestions > :first-child { margin-top:0; }
.aa-suggestions > :last-child { margin-bottom:0 !important; }
.aa-suggestions + .card-footer { margin-top:1rem !important; }
.aa-suggestion { padding:10px; background:#fdfdfd; border:1px solid #e2ecef; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.aa-suggestion + .aa-suggestion { margin-top:12px; }
.aa-suggestion strong { text-transform:capitalize; }
.aa-suggestion > div { margin-top:3px; }
.zc-result-description { margin-top:4px; display:block; font-size:.8125rem; }


/* CLOSE BUTTON
--------------------------- */
.zc-search-close {
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 50px;
}
.zc-search-close svg {
  --icon-fill: #dc1257;
  height: 22px;
  width: 22px;
  transform: scale(1) rotate(0);
  transition: .3s transform;
}
[html-search-active] .zc-search-close svg {
  transform: scale(.9) rotate(-90deg);
}
.zc-search-close:hover svg {
  transform: scale(1) rotate(-180deg);
}
.zc-search-close [icon-check] { --icon-fill:#7da82b; display:none; visibility:hidden; pointer-events:none; transform: scale(1.1) rotate(90deg) !important; }

/* MASK */
.zc-search-mask { position:absolute; top:0; left:0; right:0; width:100%; height:100%; cursor:pointer; }

/* SEARCH HELP */
.zc-search-help { z-index:1; position:absolute; top:calc(50px + 58px + 4px); right:15px; color:#c7c7c7; font-family:monospace; font-size:10px; }



/* MEDIA QUERIES (MIN)
--------------------------- */
@media screen and (min-width:768px) {
  .zc-search-help { top:calc(50px + 58px + 4px); }
  /* PLACEHOLDER */
  .zc-search-input::-webkit-input-placeholder { font-size: 1.25rem; }
  :focus::-webkit-input-placeholder { font-size: 1.25rem; }
  .zc-search-input:-moz-placeholder, ::-moz-placeholder { font-size: 1.25rem; }
  .zc-search-input:-ms-input-placeholder { font-size: 1.25rem; }
}

@media screen and (min-width:1024px) {
  .zc-search-icon { left:2px; }
  .zc-search-input, .zc-search-input:hover { padding-left:42px; }
  .zc-search-results { padding-top:40px; }
  #help_center_search .aa-suggestions {
    display:grid !important; 
    grid-column-gap:2%; 
    grid-row-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  #help_center_search .aa-suggestion {
    margin:0 !important;
  }
}
@media screen and (min-width:1300px) {
  .zc-search-help { top:calc(50px + 72px + 4px); }
  
  /* SEARCH INPUT
  --------------------------- */
  .zc-search-input-wrap { min-height:72px; }

  #help_center_search .aa-suggestions {
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 15px;
  }
}
@media screen and (min-width:1400px) {
  .zc-search-input-wrap { min-height:72px; }
  .zc-search-icon { width:22px; height:22px; }
  .zc-search-input, .zc-search-input:hover { padding-left:45px; font-size:1.25rem; transform: translate(-10px,-1px); }
  [html-search-has-results] .zc-search-close {
    top: 105px;
    background: #f9f9f9;
    border: 1px solid #f3f3f3;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    right: 50px;
    left: auto;
    margin-left: -72px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  [html-search-has-results] .zc-search-close svg { position:absolute; }
  [html-search-has-results] .zc-search-close [icon-check] { display:block; }
  [html-search-has-results] .zc-search-close:hover [icon-check] { visibility:visible; pointer-events:auto; transform: scale(1.4) rotate(0) !important; }
  [html-search-has-results] .zc-search-close:hover [icon-close] { width:0; visibility:hidden; pointer-events:none; }
}
@media screen and (min-width:1670px) {
  .zc-search-close { right:-4px; }
}


/* BOTH
--------------------------- */
@media screen and (min-width:768px) and (max-width:1299px) {
  .zc-search-input-wrap { min-height:58px; }
}


/* MEDIA QUERIES (MAX)
--------------------------- */
@media screen and (max-width:1669px) {
  .zc-search-input { width:calc(100% - 60px); }
}

@media screen and (max-width:1023px) {
  .zc-search-results [data-zc-row] > * { width:100%; }
  .zc-search-results [data-zc-row] > * + * { margin-top:30px; }
}

@media screen and (max-width:767px) {
  .zc-search-input, .zc-search-input:hover { max-height:32px; }
  .zc-search-mask { height:calc(100% - 50px); }

  .algolia-autocomplete { max-width: 100vw; }
  .algolia-autocomplete .ds-dropdown-menu { min-width: 300px; max-width: 100vw; margin-inline-start: 0.5rem; margin-inline-end: 0.5rem; }
}

/* MEDIA QUERIES (MAX)
--------------------------- */
@media screen and (max-height:1099px) {
  /* SEARCH HELP */
  .zc-search-help { top:calc(50px + 44px + 4px); }

  /* SEARCH INPUT
  --------------------------- */
  .zc-search-input-wrap { min-height:44px; }
}