/* Header Search — scoped widget styles. */
.cp-hsearch,
.cp-hsearch__overlay {
  --ino-hsearch-accent: var(--inoforest-color-primary, #0b7a75);
  --ino-hsearch-overlay-bg: rgba(13, 27, 42, 0.95);
  --ino-hsearch-overlay-color: #ffffff;
  --ino-hsearch-field-bg: #ffffff;
  --ino-hsearch-field-color: var(--inoforest-color-heading, #0d1b2a);
  --ino-hsearch-panel-width: 760px;
  --ino-hsearch-label-color: var(--ino-hsearch-accent);
  --ino-hsearch-close-ring: 1px;
  --ino-hsearch-popular-hover-color: var(--inoforest-color-heading, #0d1b2a);
}

.cp-hsearch {
  --ino-hsearch-toggle-size: 44px;
  --ino-hsearch-icon-size: 20px;
  --ino-hsearch-icon-color: var(--inoforest-color-heading, #0d1b2a);
  --ino-hsearch-icon-color-hover: var(--ino-hsearch-accent);
  --ino-hsearch-toggle-bg: transparent;
  --ino-hsearch-toggle-bg-hover: transparent;
  --ino-hsearch-toggle-radius: 50%;
  --ino-hsearch-inline-height: 52px;
  --ino-hsearch-inline-bg: var(--inoforest-color-surface, #f4f8f8);
  --ino-hsearch-inline-border: transparent;
  --ino-hsearch-inline-radius: 999px;
  display: inline-flex;
  max-width: 100%;
}

.cp-hsearch *,
.cp-hsearch__overlay * { box-sizing: border-box; }

/* ---- Icon toggle ---- */
.cp-hsearch__toggle {
  display: grid;
  place-items: center;
  width: var(--ino-hsearch-toggle-size);
  height: var(--ino-hsearch-toggle-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--ino-hsearch-toggle-radius);
  background: var(--ino-hsearch-toggle-bg);
  color: var(--ino-hsearch-icon-color);
  font-size: var(--ino-hsearch-icon-size);
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.cp-hsearch__toggle:hover,
.cp-hsearch__toggle:focus-visible {
  color: var(--ino-hsearch-icon-color-hover);
  background: var(--ino-hsearch-toggle-bg-hover);
}
.cp-hsearch__toggle svg { width: 1em; height: 1em; fill: currentColor; }
.cp-hsearch__toggle:focus-visible { outline: 2px solid var(--ino-hsearch-accent); outline-offset: 2px; }

/* ---- Full-screen overlay ---- */
.cp-hsearch__overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ino-hsearch-overlay-bg);
  color: var(--ino-hsearch-overlay-color);
  opacity: 0;
  transition: opacity .25s ease;
}
.cp-hsearch__overlay[hidden] { display: none; }
.cp-hsearch__overlay.is-open { opacity: 1; }
html.cp-hsearch-locked { overflow: hidden; }

.cp-hsearch__panel {
  width: min(var(--ino-hsearch-panel-width), 100%);
  transform: translateY(16px);
  transition: transform .35s ease;
}
.cp-hsearch__overlay.is-open .cp-hsearch__panel { transform: none; }

.cp-hsearch__label {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ino-hsearch-label-color);
}

.cp-hsearch__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--ino-hsearch-close-ring) solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 30px;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
  transition: transform .3s ease, background-color .3s ease, opacity .3s ease;
}
.cp-hsearch__close:hover { opacity: 1; transform: rotate(90deg); background: var(--ino-hsearch-accent); border-color: var(--ino-hsearch-accent); }

.cp-hsearch__overlay .cp-hsearch__form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid currentColor;
}
.cp-hsearch__overlay .cp-hsearch__input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 700;
}
.cp-hsearch__overlay .cp-hsearch__input::placeholder { color: currentColor; opacity: .45; }
/* Site-wide input focus rings (theme / design system) don't belong on the overlay field;
   the underline already marks focus. */
.cp-hsearch__overlay .cp-hsearch__input:focus,
.cp-hsearch__overlay .cp-hsearch__input:focus-visible { box-shadow: none; outline: 0; }
.cp-hsearch__overlay .cp-hsearch__form:focus-within { border-bottom-color: var(--ino-hsearch-accent); }
.cp-hsearch__overlay .cp-hsearch__submit {
  padding: 0 4px 0 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 28px;
  cursor: pointer;
}
.cp-hsearch__overlay .cp-hsearch__submit:hover { color: var(--ino-hsearch-accent); }
.cp-hsearch__submit svg { width: 1em; height: 1em; fill: currentColor; }

/* ---- Overlay: Field Style "pill" (a rounded field with a round accent button) ---- */
.cp-hsearch__overlay--pill .cp-hsearch__label { font-size: 1.8rem; line-height: 1.2; letter-spacing: 0; }
.cp-hsearch__overlay--pill .cp-hsearch__form { position: relative; border: 0; }
.cp-hsearch__overlay--pill .cp-hsearch__input {
  height: 64px;
  padding: 0 72px 0 24px;
  font-size: inherit;
  font-weight: 400;
  color: var(--ino-hsearch-field-color);
  background: var(--ino-hsearch-field-bg);
  border-radius: 999px;
}
.cp-hsearch__overlay--pill .cp-hsearch__input:focus-visible { outline: 2px solid var(--ino-hsearch-accent); outline-offset: 2px; }
.cp-hsearch__overlay--pill .cp-hsearch__submit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 20px;
  color: #ffffff;
  background: var(--ino-hsearch-accent);
  border-radius: 50%;
}
.cp-hsearch__overlay--pill .cp-hsearch__submit:hover { color: #ffffff; filter: brightness(.9); }
[dir="rtl"] .cp-hsearch__overlay--pill .cp-hsearch__input { padding: 0 24px 0 72px; }
[dir="rtl"] .cp-hsearch__overlay--pill .cp-hsearch__submit { right: auto; left: 8px; }

/* ---- Overlay: popular searches ---- */
.cp-hsearch__popular { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.cp-hsearch__popular a {
  display: inline-block;
  padding: 6px 14px;
  font-size: .875rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.cp-hsearch__popular a:hover,
.cp-hsearch__popular a:focus-visible { color: var(--ino-hsearch-popular-hover-color); background: var(--ino-hsearch-overlay-color); border-color: var(--ino-hsearch-overlay-color); }

/* ---- Inline layout ---- */
.cp-hsearch--inline { display: block; width: 100%; }
.cp-hsearch--inline .cp-hsearch__form {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-hsearch--inline .cp-hsearch__input {
  width: 100%;
  height: var(--ino-hsearch-inline-height);
  padding: 0 calc(var(--ino-hsearch-inline-height) + 8px) 0 20px;
  border: 1px solid var(--ino-hsearch-inline-border);
  border-radius: var(--ino-hsearch-inline-radius);
  background: var(--ino-hsearch-inline-bg);
  color: inherit;
  outline: 0;
  transition: border-color .25s ease, background-color .25s ease;
}
.cp-hsearch--inline .cp-hsearch__input:focus { border-color: var(--ino-hsearch-accent); box-shadow: none; outline: 0; }
.cp-hsearch--inline .cp-hsearch__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  width: calc(var(--ino-hsearch-inline-height) - 12px);
  height: calc(var(--ino-hsearch-inline-height) - 12px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--ino-hsearch-inline-radius);
  background: var(--ino-hsearch-accent);
  color: #ffffff;
  transform: translateY(-50%);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cp-hsearch__overlay,
  .cp-hsearch__panel,
  .cp-hsearch__close { transition: none; }
}