/* ════════════════════════════════════════════════════════════════════════
   Theme token bridge — PSB semantic colors resolve through a chain,
   first defined wins:
     1. --psb-theme-*            generic hook — ANY theme can define these
                                 (e.g. :root { --psb-theme-primary: #fff })
     2. --jt-*                   Jetting theme tokens (jetting.ba)
     3. --e-global-color-*       Elementor global colors (megasystems.ba …)
     4. built-in default         every other site stays unchanged
   Selector is :root, body — Elementor defines --e-global-color-* on the
   body-scoped .elementor-kit-* selector, so the chain must also resolve
   at body scope to pick up Elementor global colors.
   The whole surface system follows the theme too (text, page bg, cards,
   inputs, borders, hover), so on dark themes the entire UI adapts.
   ════════════════════════════════════════════════════════════════════════ */
:root, body {
	--psb-primary:        var(--psb-theme-primary,        var(--jt-gold, var(--e-global-color-primary,   #2E6DA4)));
	--psb-accent:         var(--psb-theme-accent,         var(--jt-cyan, var(--e-global-color-accent,    #f39c12)));
	--psb-secondary:      var(--psb-theme-secondary,      var(--jt-muted, var(--e-global-color-secondary, #6b7280)));
	--psb-text:           var(--psb-theme-text,           var(--jt-text, var(--e-global-color-text, #1f2937)));
	--psb-on-primary:     var(--psb-theme-on-primary,     var(--jt-on-gold, #ffffff));
	--psb-on-accent:      var(--psb-theme-on-accent,      var(--jt-on-cyan, #ffffff));
	--psb-inverse:        var(--psb-theme-inverse,        var(--jt-border-strong, #1f2937));
	--psb-on-inverse:     var(--psb-theme-on-inverse,     var(--jt-text, #ffffff));
	--psb-bg:             var(--psb-theme-bg,             var(--jt-bg, #ffffff));
	--psb-surface:        var(--psb-theme-surface,        var(--jt-card, #ffffff));
	--psb-surface-alt:    var(--psb-theme-surface-alt,    var(--jt-bg, #f5f6f7));
	--psb-input:          var(--psb-theme-input,          var(--jt-input-bg, #ffffff));
	--psb-hover:          var(--psb-theme-hover,          var(--jt-hover, #f0f4ff));
	--psb-border:         var(--psb-theme-border,         var(--jt-border, #e5e7eb));
	--psb-border-strong:  var(--psb-theme-border-strong,  var(--jt-border-strong, #cbd5e0));
}

/* PSB Notion Products — inquiry-context card for /zahtjev-za-ponudu page ([psb_contact_context]) */

.psb-inquiry-card {
	--psb-ic-primary: var(--psb-primary);
	--psb-ic-text:    var(--psb-text);

	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 18px;
	background: var(--psb-surface-alt);
	border: 1px solid var(--psb-border);
	border-left: 1px solid var(--psb-ic-primary);
	border-radius: 0 5px 5px 0;
	font-family: inherit;
	color: var(--psb-ic-text);
	box-sizing: border-box;
}
.psb-inquiry-card * { box-sizing: border-box; }

.psb-inquiry-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.psb-inquiry-card__icon {
	display: inline-flex;
	color: var(--psb-ic-primary);
}
.psb-inquiry-card__icon svg { display: block; }
.psb-inquiry-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--psb-text);
	line-height: 1.2;
}

/* ── Identity row: thumb + name ──────────────────────────────────────────── */

.psb-inquiry-card__body {
	display: flex;
	flex-direction: column;
}

.psb-inquiry-card__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.psb-inquiry-card__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--psb-surface);
	border: 1px solid var(--psb-border);
}
.psb-inquiry-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The name fills whatever horizontal space the thumb leaves free.
 * It wraps lines naturally for long product names.
 */
.psb-inquiry-card__name {
	flex: 1 1 0;
	min-width: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}
a.psb-inquiry-card__name:hover,
a.psb-inquiry-card__name:focus {
	color: var(--psb-ic-primary);
}

/*
 * Term mode only: a subtitle column (kind + name) sits next to the thumb.
 * When present, .psb-inquiry-card__main wraps .psb-inquiry-card__kind and
 * .psb-inquiry-card__name — a flex-column that fills remaining width.
 */
.psb-inquiry-card__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.psb-inquiry-card__main .psb-inquiry-card__name {
	flex: none;
}
.psb-inquiry-card__kind {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--psb-secondary);
}

/* ── Meta rows ───────────────────────────────────────────────────────────── */

/*
 * Three stacked rows, each with a label on the left and a chip cluster
 * on the right.  In-chip labels are hidden — the standalone row-label
 * serves that purpose.
 */
.psb-inquiry-card__meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
}

.psb-inquiry-card__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.psb-inquiry-card__row-label {
	flex: 0 0 auto;
	width: 82px;
	min-width: 82px;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--psb-secondary);
	line-height: 1.3;
}

.psb-inquiry-card__row-values {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	flex: 1 1 auto;
}

.psb-inquiry-card__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	background: var(--psb-surface);
	border: 1px solid var(--psb-border);
	border-radius: 999px;
	font-size: .78rem;
	line-height: 1.4;
}

/* The inline label inside each chip is hidden — the row-label handles it. */
.psb-inquiry-card__chip-label {
	display: none;
}

/* ── Mobile (≤ 480px) ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.psb-inquiry-card {
		max-width: none;
		width: 100%;
		padding: 12px 14px;
	}

	.psb-inquiry-card__head {
		gap: 6px;
	}
	.psb-inquiry-card__title {
		font-size: .92rem;
	}
	
	/*
	 * Thumb and name stay side-by-side.  The name fills the space to the
	 * right of the thumb and wraps freely.
	 */
	.psb-inquiry-card__item {
		gap: 12px;
	}

	.psb-inquiry-card__thumb {
		width: 52px;
		height: 52px;
		border-radius: 6px;
	}

	.psb-inquiry-card__name {
		font-size: .9rem;
	}

	.psb-inquiry-card__row-label {
		width: 72px;
		min-width: 72px;
		font-size: .68rem;
	}

	.psb-inquiry-card__chip {
		font-size: .72rem;
		padding: 2px 8px;
		word-break: break-word;
	}
}

@media (min-width: 767.98px) {
	.psb-inquiry-card__body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.psb-inquiry-card__item {
		align-items: center;
	}

	.psb-inquiry-card__meta {
		width: fit-content;
	}
}