/**
 * Pricing page v2 — hero, sticky category sidebar (desktop) / filter bar
 * (mobile), flat numbered price tables, CTA.
 *
 * Sticky offsets below approximate the real (rendered) site-header height —
 * nudge if it drifts visually from the header at a given breakpoint.
 */

/* Hero -------------------------------------------------------------- */

.pricing-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding) var(--space-9);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.pricing-hero__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-display);
	line-height: var(--text-display-lh);
	color: var(--color-black);
}

.pricing-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.pricing-hero__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-text-muted);
	max-width: 760px;
}

.pricing-hero__validity {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-gray-800);
	white-space: nowrap;
}

/* Sidrena cijena (reference-price law) legend — plain, always-visible text
   under the hero row, not a tooltip. Individually killable via the
   sidrena_enabled options-page toggle (bival_sidrena_enabled()). */
.pricing-hero__sidrena-legend {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-gray-500);
	max-width: 760px;
}

.pricing-hero__feed-links {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-gray-500);
}

.pricing-hero__feed-links a {
	color: var(--color-primary-text);
	text-decoration: underline;
}

.pricing-hero__image {
	height: 400px;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.pricing-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content layout: sidebar + sections -------------------------------- */

.pricing-content__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding) var(--space-12);
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

/* Desktop sidebar ----------------------------------------------------- */

.pricing-sidebar {
	flex: 0 0 280px;
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pricing-sidebar__label {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-primary-text);
}

.pricing-sidebar__search {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.pricing-sidebar__search svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-text-muted);
}

.pricing-sidebar__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-text);
}

.pricing-sidebar__search input::placeholder {
	color: var(--color-text-muted);
}

.pricing-sidebar__search input:focus {
	outline: none;
}

.pricing-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pricing-sidebar__item {
	display: block;
	padding: var(--space-4);
	background: var(--color-surface);
	color: var(--color-gray-900);
	border-radius: var(--radius-lg);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
}

.pricing-sidebar__item.is-active {
	background: var(--color-black);
	color: var(--color-white);
	border-radius: var(--radius-md);
}

.pricing-sidebar__item.is-highlighted {
	background: var(--color-primary);
	/* White text on the old dark indigo bg had strong contrast; the lighter
	   brand teal needs dark text instead (white would be ~2.1:1). */
	color: var(--color-gray-900);
	border-radius: var(--radius-md);
}

/* Price sections & tables (shared desktop + mobile) -------------------- */

.pricing-sections {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}

.pricing-section {
	scroll-margin-top: 96px;
}

.pricing-sections__empty {
	font-family: var(--font-body);
	color: var(--color-text-muted);
	text-align: center;
	padding: var(--space-6) 0;
}

.pricing-section__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-primary-text);
	margin-bottom: var(--space-4);
}

.pricing-table {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	/* Was overflow: hidden to clip row backgrounds to the rounded corners,
	   but that also clipped the sidrena tooltip bubble whenever it popped
	   up near the table's edge. Corners are rounded on the first/last row
	   directly instead (below), so overflow can stay visible. */
	overflow: visible;
}

.pricing-table__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 14px var(--space-4);
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

/* :nth-of-type / :first-of-type / :last-of-type, not the :nth-child /
   :last-child equivalents — the optional .pricing-table__header row is a
   preceding sibling of a different type when sidrena is enabled, which
   would otherwise shift row-banding parity and misplace the rounded
   corners onto the header instead of the first price row. */
.pricing-table__row:nth-of-type(even) {
	background: var(--color-surface);
}

.pricing-table__row:first-of-type {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
}

.pricing-table__row:last-of-type {
	border-bottom: 0;
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.pricing-table__num {
	flex: 0 0 32px;
	font-family: var(--font-heading);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-text-muted);
}

.pricing-table__name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-gray-900);
}

.pricing-table__prices {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--space-2) var(--space-3);
}

.pricing-table__price {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-primary-text);
	text-align: right;
	white-space: nowrap;
}

/* Sidrena (reference) price — plain visible text to the left of the
   current price, never hover-only. The value itself is also the tooltip
   trigger (see .sidrena-tooltip in components.css, dotted-underline style)
   as a hover/focus enhancement explaining what it is — never a
   replacement for the visible text, which is what satisfies the law. */
.pricing-table__sidrena {
	display: flex;
	align-items: baseline;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-gray-500);
	white-space: nowrap;
}

/* Smiley (discounted) price — always shown to everyone, no member gate.
   Highlighted as a solid brand-color badge so it visually pops against the
   plain sidrena/current-price text next to it, per client request. */
.pricing-table__smiley {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body-sm);
	color: var(--color-white);
	white-space: nowrap;
}

.pricing-table__smiley-icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: block;
}

/* Smiley discount tooltip — same accessible hover/focus pattern as
   .sidrena-tooltip (see components.css), kept as an independent copy
   rather than a shared refactor since sidrena's version is tied to legal
   reference-price compliance. */
.smiley-tooltip {
	position: relative;
	display: inline-flex;
}

.smiley-tooltip__trigger {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

/* An icon trigger (the per-row Smiley badge) shouldn't get the text
   underline meant for the plain-text header trigger. */
.smiley-tooltip__trigger:has(img) {
	text-decoration: none;
}

.smiley-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	z-index: 20;
	width: 240px;
	padding: var(--space-3) var(--space-4);
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	border-radius: var(--radius-md);
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.smiley-tooltip:hover .smiley-tooltip__bubble,
.smiley-tooltip:focus-within .smiley-tooltip__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (max-width: 560px) {
	.smiley-tooltip__bubble {
		width: 200px;
		right: -8px;
	}
}

.pricing-table__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	/* +16px top and bottom vs. the previous 0/var(--space-2) — lands exactly
	   on var(--space-4)/var(--space-5), client request. */
	padding: var(--space-4) var(--space-4) var(--space-5);
}

.pricing-table__header-num {
	flex: 0 0 32px;
}

.pricing-table__header-name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.pricing-table__header-prices {
	flex: 0 0 auto;
	min-width: 120px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
}

.pricing-table__header-sc .sidrena-tooltip__trigger {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	color: var(--color-gray-500);
}

.pricing-table__header-price {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	/* Matches the teal price values below it — the only header label using
	   the primary color, per client request; USLUGA and SC stay muted. */
	color: var(--color-primary-text);
}

.pricing-table__header-smiley {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-primary);
}

.pricing-table__row.is-hidden {
	display: none;
}

/* Mobile filter bar (hidden on desktop) --------------------------------- */

.pricing-mobile-bar {
	display: none;
}

/* CTA — shared .cta-section styles live in components.css */

/* Responsive: below 900px, sidebar is replaced by the mobile filter bar */

@media (max-width: 900px) {
	.pricing-sidebar {
		display: none;
	}

	.pricing-content__inner {
		padding-top: var(--space-6);
	}

	.pricing-section__title {
		font-size: var(--text-h3);
		line-height: var(--text-h3-lh);
	}

	.pricing-mobile-bar {
		display: block;
		position: sticky;
		top: 64px;
		z-index: 90;
		background: var(--color-white);
		padding: var(--space-4) var(--container-padding);
	}

	.pricing-section {
		scroll-margin-top: 128px;
	}

	.pricing-mobile-bar__inner {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.pricing-mobile-bar__search-toggle {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		color: var(--color-text);
	}

	.pricing-mobile-bar__search-toggle svg {
		width: 24px;
		height: 24px;
	}

	.pricing-mobile-bar__search-toggle[hidden] {
		display: none;
	}

	.pricing-mobile-bar__search {
		flex: 1;
		display: flex;
		align-items: center;
		gap: var(--space-2);
		height: 48px;
		padding-inline: var(--space-3);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.pricing-mobile-bar__search svg {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		color: var(--color-text-muted);
	}

	.pricing-mobile-bar__search input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-heading);
		font-size: var(--text-body);
	}

	.pricing-mobile-bar__search input:focus {
		outline: none;
	}

	.pricing-mobile-bar__search[hidden] {
		display: none;
	}

	.pricing-mobile-bar__search-close {
		flex-shrink: 0;
		font-size: 20px;
		line-height: 1;
		color: var(--color-text-muted);
		padding: var(--space-1);
	}

	.pricing-mobile-bar__select-wrap {
		flex: 1;
		min-width: 0;
		position: relative;
	}

	.pricing-mobile-bar__select-wrap[hidden] {
		display: none;
	}

	.pricing-mobile-bar__select-wrap::after {
		content: '';
		position: absolute;
		right: var(--space-4);
		top: 50%;
		width: 12px;
		height: 6px;
		transform: translateY(-50%);
		background-color: currentColor;
		-webkit-mask: url("../images/icons/chevron-down.svg") no-repeat center / contain;
		mask: url("../images/icons/chevron-down.svg") no-repeat center / contain;
		pointer-events: none;
	}

	.pricing-mobile-bar__select {
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		height: 48px;
		padding: 0 var(--space-8) 0 var(--space-4);
		background: var(--color-black);
		color: var(--color-white);
		border: 0;
		border-radius: var(--radius-pill);
		font-family: var(--font-heading);
		font-weight: var(--weight-bold);
		font-size: var(--text-tag);
		letter-spacing: var(--text-tag-ls);
		text-transform: uppercase;
	}

	.pricing-table__num,
	.pricing-table__header-num {
		flex-basis: 24px;
	}

	.pricing-table__header-prices {
		min-width: 100px;
	}
}