/* =========================================
   HEADER – INLINE EXPANDING SEARCH
   Aktivacija: Extra class cr-header-inline-search
   na postojecem tagDiv Header Search elementu.
   ====================================== */

.cr-header-inline-search {
  --cr-search-width: 286px;
  --cr-search-icon-width: 32px;
}


/* =========================================
   ICON + SEARCH FORMA U JEDNOM REDU
   ====================================== */

.cr-header-inline-search .tdb-block-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  overflow: visible !important;
}


/* =========================================
   SEARCH ICON
   ====================================== */

/* Lupa ide prva. */
.cr-header-inline-search .tdb-head-search-btn {
  order: 1 !important;
  flex: 0 0 var(--cr-search-icon-width) !important;
  width: var(--cr-search-icon-width) !important;
  justify-content: flex-start !important;
  z-index: 2 !important;
}

/* Uklanja TagDiv trougao za dropdown. */
.cr-header-inline-search .tdb-head-search-btn::after {
  display: none !important;
}

.cr-header-inline-search .tdb-search-icon-svg {
  width: var(--cr-search-icon-width) !important;
  height: 40px !important;
  justify-content: flex-start !important;
}

.cr-header-inline-search .tdb-search-icon-svg svg {
  width: 20px !important;
}


/* =========================================
   SEARCH FORMA
   ====================================== */

.cr-header-inline-search .tdb-drop-down-search {
  order: 2 !important;

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  max-width: 0 !important;
  min-width: 0 !important;

  visibility: hidden !important;
  opacity: 0 !important;

  transform: none !important;

  pointer-events: none !important;
  overflow: hidden !important;

  transition:
    max-width 0.28s ease,
    opacity 0.18s ease !important;
}


/* OPEN */

.cr-header-inline-search
.tdb-drop-down-search.tdb-drop-down-search-open {
  max-width: var(--cr-search-width) !important;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
  overflow: visible !important;
}


/* =========================================
   SEARCH INNER
   ====================================== */

.cr-header-inline-search .tdb-drop-down-search-inner {
  position: relative !important;

  width: var(--cr-search-width) !important;
  max-width: var(--cr-search-width) !important;

  left: auto !important;
  right: auto !important;

  margin: 0 !important;

  box-shadow: none !important;
}


/* =========================================
   SAMA FORMA
   ====================================== */

.cr-header-inline-search .tdb-search-form {
  width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;

  background: transparent !important;
}

.cr-header-inline-search .tdb-search-form::before {
  display: none !important;
}


/* =========================================
   FORM INNER
   ====================================== */

.cr-header-inline-search .tdb-search-form-inner {
  position: relative !important;

  height: 40px !important;

  display: flex !important;
  align-items: center !important;

  background: transparent !important;
}

.cr-header-inline-search .tdb-search-form-inner::after {
  display: none !important;
}


/* =========================================
   INPUT
   ====================================== */

.cr-header-inline-search .tdb-head-search-form-input {
  flex: 1 1 auto !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 4px !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;

  color: #231f20 !important;

  box-sizing: border-box !important;

  transition: padding-right 0.15s ease !important;
}


/* =========================================
   PROSTOR ZA SEARCH ACTIONS
   ====================================== */

/* Fallback mode: Go to results + X. */
.cr-header-inline-search
.tdb-search-form-inner:has(.cr-search-actions.is-visible.has-results-button)
.tdb-head-search-form-input {
  padding-right: 145px !important;
}


/* Native Live Search mode: samo X.
   Native "View all results" ostaje u AJAX panelu. */
.cr-header-inline-search
.tdb-search-form-inner:has(.cr-search-actions.is-visible:not(.has-results-button))
.tdb-head-search-form-input {
  padding-right: 40px !important;
}


/* =========================================
   PLACEHOLDER
   ====================================== */

.cr-header-inline-search .tdb-head-search-placeholder {
  display: none !important;
}

.cr-header-inline-search
.tdb-head-search-form-input::placeholder {
  color: #8a8a8a !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}


/* =========================================
   NATIVE TAGDIV SUBMIT BUTTON
   ====================================== */

/* Ostaje dostupan JS-u,
   ali nije vizuelno prikazan. */
.cr-header-inline-search .tdb-head-search-form-btn {
  display: none !important;
}


/* =========================================
   SEARCH ACTIONS
   ====================================== */

.cr-header-inline-search .cr-search-actions {
  display: none;

  position: absolute;

  right: 4px;
  top: 50%;

  transform: translateY(-50%);

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  height: 32px;

  white-space: nowrap;

  z-index: 3;
}

.cr-header-inline-search
.cr-search-actions.is-visible {
  display: flex;
}


/* =========================================
   GO TO RESULTS
   ====================================== */

.cr-header-inline-search .cr-search-results-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 21px;

  padding: 0 9px;

  border: 0;
  border-radius: 12px;

  background: transparent;

  color: #2c2c2c;

  font-family: 'Mona Sans', sans-serif;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 500 !important;

  white-space: nowrap;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;

  letter-spacing: 0.4px;
}

.cr-header-inline-search
.cr-search-results-btn[hidden] {
  display: none !important;
}


/* =========================================
   CLEAR SEARCH – X
   ====================================== */

.cr-header-inline-search .cr-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 28px;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #231f20;

  font-family: 'Mona Sans', sans-serif !important;
  font-size: 24px !important;
  line-height: 28px !important;
  font-weight: 300 !important;

  cursor: pointer;

  box-sizing: border-box;
}


/* =========================================
   LIVE SEARCH RESULTS
   ====================================== */

/*
 * Search forma = 286px.
 *
 * Results panel obuhvata i lupu:
 * 286px + 32px = 318px.
 *
 * right: 0 zadržava desnu ivicu poravnatu,
 * a panel se širi ulevo preko prostora lupe.
 */

.cr-header-inline-search .tdb-aj-search {
  position: absolute !important;

  top: 110% !important;

  right: 0 !important;
  left: auto !important;

  width:
    calc(
      var(--cr-search-width) +
      var(--cr-search-icon-width)
    ) !important;

  max-width:
    calc(
      var(--cr-search-width) +
      var(--cr-search-icon-width)
    ) !important;

  background: #fff !important;

  box-shadow:
    0 3px 16px rgba(0, 0, 0, 0.12) !important;

  z-index: 1000 !important;
}

.cr-header-inline-search .tdb-aj-search:empty {
  display: none !important;
}

.cr-header-inline-search .tdb-aj-srs-title {
    display: none !important;
}

/* =========================================
   LIVE SEARCH – TITLE CLAMP
   ====================================== */

/*
 * Naslov se prikazuje u najviše 3 reda.
 * Duži naslov se završava sa ...
 *
 * Pokrivena su oba česta TagDiv title selektora.
 */

.cr-header-inline-search
.tdb-aj-search
.td-module-title,

.cr-header-inline-search
.tdb-aj-search
.entry-title {
  display: -webkit-box !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;

  overflow: hidden !important;
}


/*
 * Ako je naslov zapravo link unutar title elementa,
 * clamp primenjujemo i direktno na link.
 */

.cr-header-inline-search
.tdb-aj-search
.td-module-title > a,

.cr-header-inline-search
.tdb-aj-search
.entry-title > a {
  display: -webkit-box !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;

  overflow: hidden !important;
}


/* =========================================
   DONJA LINIJA OTVORENOG SEARCH-A
   ====================================== */

.cr-header-inline-search
.tdb-drop-down-search.tdb-drop-down-search-open {
  border-bottom:
    1px solid #e8e8e8 !important;
}

.cr-header-inline-search
.tdb-drop-down-search.tdb-drop-down-search-open
+ .tdb-head-search-btn {
  height: 40px !important;

  border-bottom:
    1px solid #e8e8e8 !important;

  box-sizing: border-box !important;
}

/* =========================================
   VIEW ALL RESULTS – SHARED BUTTON STYLE
   Desktop header + popup menu
   ====================================== */

.cr-header-inline-search .tdb-aj-search .result-msg,
.cr-menu-live-search .tdb-aj-search .result-msg {
  width: auto !important;
  margin: 8px 12px 12px 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.cr-header-inline-search .tdb-aj-search .result-msg > a,
.cr-menu-live-search .tdb-aj-search .result-msg > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 12px 16px !important;
  background: #fda100 !important;
  color: #231f20 !important;
  border: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* =========================================
   MOBILE
   ====================================== */

/*
 * Za sada zadržavamo postojeće mobile
 * ponašanje. Finalno ćemo ga podesiti
 * prema Ivaninom mobile dizajnu.
 */

@media (max-width: 767px) {

  .cr-header-inline-search {
    --cr-search-width:
      min(28.3em, calc(100vw - 80px));
  }

  .cr-header-inline-search .tdb-aj-search {
    width:
      min(580px, calc(100vw - 24px)) !important;

    max-width:
      calc(100vw - 24px) !important;
  }
}

/* =========================================
   POPUP MENU – LIVE SEARCH
   Aktivacija: Extra class cr-menu-live-search
   ====================================== */

.cr-menu-live-search {
  display: block !important;
  width: 100% !important;
}


/* =========================================
   POPUP – FORMA JE STALNO OTVORENA
   ====================================== */

.cr-menu-live-search .tdb-drop-down-search {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;

  transform: none !important;

  pointer-events: auto !important;
  overflow: visible !important;
}

.cr-menu-live-search .tdb-drop-down-search-inner {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  left: auto !important;
  right: auto !important;

  margin: 0 !important;

  box-shadow: none !important;
}


/* =========================================
   POPUP – SEARCH FORM
   ====================================== */

.cr-menu-live-search .tdb-search-form {
  width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;

  background: transparent !important;
}

.cr-menu-live-search .tdb-search-form::before {
  display: none !important;
}

.cr-menu-live-search .tdb-search-form-inner {
  position: relative !important;

  width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
}


/* =========================================
   POPUP – INPUT
   ====================================== */

.cr-menu-live-search .tdb-head-search-form-input {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 42px 0 42px !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  font-family: 'Mona Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;

  color: #231f20 !important;

  box-sizing: border-box !important;
}

.cr-menu-live-search
.tdb-head-search-form-input::placeholder {
  color: #8a8a8a !important;
  opacity: 1 !important;
}


/* =========================================
   POPUP – TAGDIV FAKE PLACEHOLDER
   ====================================== */

.cr-menu-live-search .tdb-head-search-placeholder {
  position: absolute !important;

  left: 42px !important;
  right: 42px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: 'Mona Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;

  color: #8a8a8a !important;

  pointer-events: none !important;
}


/* =========================================
   POPUP – LUPA
   ====================================== */

/* Krug lupe */
.cr-menu-live-search .tdb-search-form-inner::before {
  content: "" !important;

  position: absolute !important;

  left: 13px !important;
  top: 50% !important;

  width: 16px !important;
  height: 16px !important;

  transform: translateY(-50%) !important;

  border: 2px solid #231f20 !important;
  border-radius: 50% !important;

  background: transparent !important;

  box-sizing: border-box !important;

  display: block !important;

  pointer-events: none !important;

  z-index: 2 !important;
}


/* Drška lupe */
.cr-menu-live-search .tdb-search-form-inner::after {
  content: "" !important;

  position: absolute !important;

  left: 26px !important;
  top: calc(50% + 5px) !important;

  width: 7px !important;
  height: 1px !important;

  background: #636363 !important;

  border: 1px solid #262223 !important;

  transform: rotate(45deg) !important;
  transform-origin: left center !important;

  display: block !important;

  pointer-events: none !important;

  z-index: 2 !important;
}


/* =========================================
   POPUP – NATIVE SUBMIT BUTTON
   ====================================== */

.cr-menu-live-search .tdb-head-search-form-btn {
  display: none !important;
}


/* =========================================
   POPUP – CLEAR SEARCH X
   ====================================== */

.cr-menu-live-search .cr-menu-search-clear {
  display: none !important;

  position: absolute !important;

  right: 8px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  align-items: center !important;
  justify-content: center !important;

  width: 28px !important;
  height: 28px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  color: #231f20 !important;

  font-family: 'Mona Sans', sans-serif !important;
  font-size: 24px !important;
  line-height: 28px !important;
  font-weight: 300 !important;

  text-align: center !important;

  cursor: pointer !important;

  box-sizing: border-box !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  z-index: 3 !important;
}

.cr-menu-live-search
.cr-menu-search-clear.is-visible {
  display: inline-flex !important;
}


/* =========================================
   POPUP – LIVE SEARCH RESULTS
   ====================================== */

.cr-menu-live-search .tdb-aj-search {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: flow-root !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-top: 12px !important;

  background: #fff !important;

  box-shadow:
    0 3px 16px rgba(0, 0, 0, 0.12) !important;

  z-index: 2 !important;
}

.cr-menu-live-search .tdb-aj-search:empty {
  display: none !important;
}

/* Kada je popup search prazan, nikada ne prikazuj stare AJAX rezultate. */
.cr-menu-live-search.cr-menu-search-empty .tdb-aj-search {
  display: none !important;
}


/* "Posts" se ne prikazuje */
.cr-menu-live-search .tdb-aj-srs-title {
  display: none !important;
}


/* Maksimalno 3 reda naslova */
.cr-menu-live-search .td-module-title,
.cr-menu-live-search .entry-title,
.cr-menu-live-search .td-module-title > a,
.cr-menu-live-search .entry-title > a {
  display: -webkit-box !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;

  overflow: hidden !important;
}


/* View all results uses the shared button style above. */


/* =========================================
   MOBILE
   ====================================== */

/*
 * Za sada zadržavamo postojeće mobile
 * ponašanje za glavni header search.
 * Finalno podešavanje ide prema Figma dizajnu.
 */

@media (max-width: 767px) {

  .cr-header-inline-search {
    --cr-search-width:
      min(28.3em, calc(100vw - 80px));
  }

  .cr-header-inline-search .tdb-aj-search {
    width:
      min(580px, calc(100vw - 24px)) !important;

    max-width:
      calc(100vw - 24px) !important;
  }
}


/* =========================================
   END
   HEADER SEARCH
   ====================================== */