/* ================================================================
   CLAP TEES — HEADER SEARCH POPUP (Simple WooCommerce Search)
   Submits standard form to /?s=query&post_type=product
   ================================================================ */

/* ── Overlay ── */
.ct-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(26,13,6,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s cubic-bezier(.22,1,.36,1), visibility .3s cubic-bezier(.22,1,.36,1);
}
.ct-search-overlay.open { opacity: 1; visibility: visible; }
body.ct-search-open { overflow: hidden; }

/* ── Close button ── */
.ct-search-close {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(253,248,242,.07);
  border: 1.5px solid rgba(253,248,242,.15);
  color: rgba(253,248,242,.65);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.ct-search-close:hover {
  background: #cd2536; border-color: #cd2536; color: #fff;
  transform: rotate(90deg);
}

/* ── Inner ── */
.ct-search-inner {
  width: 100%; max-width: 680px;
  padding: 0 clamp(1rem,5vw,2rem);
  transform: translateY(20px);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.ct-search-overlay.open .ct-search-inner { transform: translateY(0); }

/* ── Label ── */
.ct-search-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,152,69,.8);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.ct-search-label::before {
  content: ''; width: 22px; height: 2px;
  background: #f49845; border-radius: 1px;
}

/* ── Search form ── */
.ct-search-form {
  display: flex; align-items: center;
  background: rgba(253,248,242,.06);
  border: 1.5px solid rgba(253,248,242,.15);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: .65rem;
}
.ct-search-form:focus-within {
  border-color: rgba(205,37,54,.65);
  box-shadow: 0 0 0 3px rgba(205,37,54,.14);
  background: rgba(253,248,242,.09);
}
.ct-search-form .ct-form-icon {
  padding: 0 1.15rem;
  color: #cd2536; font-size: 17px;
  flex-shrink: 0; pointer-events: none;
}
.ct-search-form input[type="search"] {
  flex: 1; height: 64px;
  background: transparent; border: none; outline: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem,3.5vw,2.1rem); font-weight: 600;
  color: #FFF; letter-spacing: -.01em;
  caret-color: #cd2536; padding: 0;
  -webkit-appearance: none; appearance: none;
}
/*.ct-search-form input[type="search"]::placeholder {
  color: color: rgba(253,248,242,.75); font-weight: 400;
}*/
input#ctSearchInput::placeholder {
    color: #FFF !important;
}
.ct-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.ct-search-form button[type="submit"] {
  flex-shrink: 0; width: 52px; height: 52px; margin: .35rem;
  background: #cd2536; border: none; border-radius: 10px;
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
}
.ct-search-form button[type="submit"]:hover {
  background: #a01c2a; transform: scale(1.07);
}

/* ── Hint ── */
.ct-search-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px; font-weight: 400;
  color: rgba(253,248,242,.25);
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: 2.5rem;
}
.ct-search-hint kbd {
  padding: .18rem .55rem;
  background: rgba(253,248,242,.07);
  border: 1px solid rgba(253,248,242,.14);
  border-radius: 5px;
  font-family: 'Outfit', sans-serif; font-size: 10.5px;
  color: rgba(253,248,242,.42);
}

/* ── Popular tags ── */
.ct-popular-title {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(253,248,242,.28); margin-bottom: .85rem; display: none;
}
.ct-search-tags { display: none; flex-wrap: wrap; gap: .45rem; }
.ct-search-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .95rem;
  background: rgba(253,248,242,.05);
  border: 1.5px solid rgba(253,248,242,.11);
  border-radius: 50px;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600;
  color: rgba(253,248,242,.5);
  cursor: pointer; text-decoration: none; transition: all .18s;
}
.ct-search-tag:hover {
  background: rgba(205,37,54,.15); border-color: rgba(205,37,54,.4);
  color: #fff; text-decoration: none;
}
.ct-search-tag i { font-size: 10px; color: #f49845; }

/* ── Header icon active ── */
.hdr-btn[aria-label="Search"].active {
  color: #cd2536; background: rgba(205,37,54,.1);
  border-color: rgba(205,37,54,.25);
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .ct-search-close { top: 1rem; right: 1rem; width: 38px; height: 38px; font-size: 15px; }
  .ct-search-form input[type="search"] { height: 54px; font-size: 1.35rem; }
  .ct-search-form button[type="submit"] { width: 44px; height: 44px; }
  .ct-search-form .ct-form-icon { padding: 0 .9rem; }
}
@media (max-width: 480px) {
  .ct-search-form input[type="search"] { height: 50px; font-size: 1.2rem; }
  .ct-search-tag { font-size: 11px; padding: .32rem .8rem; }
}