/**
 * PZS Search B bridge — staging styles.
 *
 * Places the FiboSearch Pro bar inside the search space reserved by the owner-approved Concept A
 * header, with the SAME geometry and appearance as the accepted field:
 *   desktop >=1190 : grid column 1 of the main row, margin-right 32px, height 52px (704px @1440/1920)
 *   tablet/mobile  : the reserved search row, width min(976px,100%), height 48px
 * The accepted Additional CSS is not modified; everything here is scoped to the bridge.
 */

/* the PZS (Relevanssi) field is hidden only while FiboSearch is the active option */
body.pzs-sb-mode-fibosearch #js-header-desktop .pzs-sv2-form,
body.pzs-sb-mode-fibosearch .pzs-ca-search-row .pzs-sv2-form {
	display: none !important;
}

.pzs-sb-source {
	display: none !important;
}

/* ---------------------------------------------------------------- desktop */
#js-header-desktop .pzs-sb-slot {
	grid-column: 1 !important;
	grid-row: 1 !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 52px !important;
	margin: 0 32px 0 0 !important;
	box-sizing: border-box !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-search-wrapp {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-search-form {
	height: 52px !important;
	margin: 0 !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	position: relative !important;
	width: 100% !important;
	height: 52px !important;
	padding: 0 6px 0 46px !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	border: 1px solid #D9E5EE !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-search-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: Outfit, sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: #173246 !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-search-input::placeholder {
	color: #5A6B7A !important;
	opacity: 1 !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-search-submit {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	align-self: center !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: 40px !important;
	padding: 0 22px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #1268B3 !important;
	color: #FFFFFF !important;
	font-family: Outfit, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	overflow: visible !important;
}

/* magnifier on the left, exactly like the accepted Concept A field */
#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp::before {
	content: "" !important;
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
	pointer-events: none !important;
}

/* --------------------------------------------------- tablet / mobile row */
.pzs-ca-search-row .pzs-sb-slot {
	display: block !important;
	box-sizing: border-box !important;
	width: min(976px, 100%) !important;
	margin: 0 auto !important;
	height: 48px !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-search-wrapp {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-search-form,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp {
	height: 48px !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	position: relative !important;
	width: 100% !important;
	padding: 0 6px 0 44px !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	border: 1px solid #D9E5EE !important;
	border-radius: 10px !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-search-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: Outfit, sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: #173246 !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-search-input::placeholder {
	color: #5A6B7A !important;
	opacity: 1 !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-search-submit {
	flex: 0 0 auto !important;
	display: block !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	align-self: center !important;
	width: 52px !important;
	min-width: 52px !important;
	max-width: 52px !important;
	min-height: 0 !important;
	max-height: none !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #1268B3
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E")
		center / 20px 20px no-repeat !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	cursor: pointer !important;
}

.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp::before {
	content: "" !important;
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
	pointer-events: none !important;
}

/* The plugin positions its dropdown itself (inline top/left, width = field width), which is exactly
   what we want: directly under the field, same width, page stays visible. We only restyle it. */
body.pzs-sb-mode-fibosearch .dgwt-wcas-suggestions-wrapp {
	margin-top: 10px !important;
	max-height: min(70vh, 520px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	border: 1px solid #D9E5EE !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 40px rgba(23, 50, 70, 0.16) !important;
	background: #FFFFFF !important;
}

/* the page must stay visible: no darkened overlay, no fullscreen container */
body.pzs-sb-mode-fibosearch .dgwt-wcas-darkened-overlay,
body.pzs-sb-mode-fibosearch .dgwt-wcas-suggestions-wrapp-fixed {
	display: none !important;
}

/* preloader / voice search are not part of the accepted field look */
#js-header-desktop .pzs-sb-slot .dgwt-wcas-voice-search,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-voice-search {
	display: none !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-preloader,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-preloader {
	right: 96px !important;
}

/* ---------------------------------------------------------------------------
   CLOSE / PRELOADER ORNAMENT INSIDE THE FIELD (owner QA, 24-09-2026)
   ---------------------------------------------------------------------------
   At tablet/mobile widths FiboSearch lays out its preloader box
   (.dgwt-wcas-preloader, 40x46 at 390px) at the input's right side and paints a
   grey "✕" through  .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader)::before .
   The owner's accepted field may contain ONLY: magnifier, input, the blue
   "Pretraži" button and the dropdown — so the close/preloader ornament is
   hidden here, scoped to our two field slots. Loading state still works.
   --------------------------------------------------------------------------- */
#js-header-desktop .pzs-sb-slot .dgwt-wcas-preloader,
#js-header-desktop .pzs-sb-slot .dgwt-wcas-close,
#js-header-desktop .pzs-sb-slot .dgwt-wcas-close::before,
#js-header-desktop .pzs-sb-slot .dgwt-wcas-close::after,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-preloader,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-close,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-close::before,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-close::after {
	display: none !important;
	visibility: hidden !important;
	content: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

@media (max-width: 1189.98px) {
	body.pzs-sb-mode-fibosearch .dgwt-wcas-suggestions-wrapp {
		max-height: min(62vh, 460px) !important;
	}
}

/* ---------------------------------------------------------------------------
   STRAY ARROWS AROUND THE FIELD — exact source (owner QA, 24-09-2026)
   ---------------------------------------------------------------------------
   LEFT triangle: it is FiboSearch's own rule (plugin assets/css/style.css):

     .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
       content:''; position:absolute; border-width:8px 8px 8px 0;
       border-style:solid solid solid none; border-color:transparent #333;
       top:12px; left:-6px;
     }

   That is a CSS border-triangle pointing left, meant for theme integrations where the
   submit button sits on the field's LEFT edge. In the accepted Concept A geometry the
   submit is the blue "Pretraži" pill inside the field, so the arrow is meaningless — and
   because our CSS makes the pill position:static, the arrow's absolute position resolves
   against .dgwt-wcas-sf-wrapp and lands on the field's left border.
   We neutralize exactly that arrow (both ::before and any ::after sibling), scoped to our
   two field slots only. No FiboSearch core file is modified.

   RIGHT ✕: the native WebKit clear button of input[type=search]
   (::-webkit-search-cancel-button / -decoration) — not part of Concept A either.
   --------------------------------------------------------------------------- */
#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before,
#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::after,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::after {
	content: none !important;
	display: none !important;
	border: 0 none transparent !important;
	background: none !important;
}

#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-webkit-search-cancel-button,
#js-header-desktop .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-webkit-search-decoration,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-webkit-search-cancel-button,
.pzs-ca-search-row .pzs-sb-slot .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input::-webkit-search-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	content: none !important;
}