/* Web majstor — stranica Cenovnik (/cenovnik/).
   Nadovezuje se na blog.css (pozadina, logo, .wm-blog-head, footer, tokeni).
   Paketi + održavanje (toggle Mesečno/Godišnje) + FAQ (klon generator-faktura.css
   FAQ sekcije). Logika toggle-a: assets/js/cenovnik.js. */

.wm-cen {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 24px 0;
}

/* Link u uvodnom podnaslovu (ka kalkulatoru) — accent, ne browser default
   (plavo/ljubičasto posle klika). */
.wm-blog-head .wm-blog-sub a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.wm-blog-head .wm-blog-sub a:hover,
.wm-blog-head .wm-blog-sub a:focus-visible {
	border-bottom-color: var(--accent);
	outline: none;
}

.wm-cen-sec {
	padding: 56px 0 64px;
	border-bottom: 1px solid var(--border);
}
.wm-cen-sec:last-of-type {
	border-bottom: 0;
}

.wm-cen-head {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 32px;
}
.wm-cen-num {
	font-family: var(--fm);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--accent);
}
.wm-cen-title {
	font-family: var(--fd);
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}

/* ============ Kartice dugmadi (deljeno) ============ */
.wm-cen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fd);
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 12px 22px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
	border: 1.5px solid var(--border-hi);
	color: var(--text);
	background: transparent;
	width: 100%;
	box-sizing: border-box;
}
.wm-cen-btn:hover,
.wm-cen-btn:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
	outline: none;
}
.wm-cen-btn--primary {
	color: var(--accent);
	background: #0a0a0a;
	border-color: var(--accent);
	width: auto;
	padding: 14px 32px;
}
.wm-cen-btn--primary:hover,
.wm-cen-btn--primary:focus-visible {
	background: var(--accent);
	color: #0a0a0a;
}

/* ============ 01 · Paketi ============ */
.wm-cen-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media screen and (max-width: 900px) {
	.wm-cen-tiers {
		grid-template-columns: 1fr;
	}
}
.wm-cen-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	padding: 28px 24px 24px;
}
.wm-cen-tier.is-featured {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.wm-cen-tier-badge {
	position: absolute;
	top: -13px;
	left: 24px;
	font-family: var(--fm);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0a0a0a;
	background: var(--accent);
	padding: 4px 10px;
	border-radius: 999px;
}
.wm-cen-tier-label {
	font-family: var(--fd);
	font-size: 1.6rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}
.wm-cen-tier-sub {
	font-family: var(--fm);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--text-dim);
	margin: 4px 0 18px;
}
.wm-cen-tier-price {
	font-family: var(--fm);
	color: var(--text-mid);
	margin: 0 0 20px;
}
.wm-cen-tier-price strong {
	font-family: var(--fd);
	font-size: 2.4rem;
	color: var(--accent);
	margin-right: 6px;
}
.wm-cen-tier-price span {
	font-size: 13px;
}
.wm-cen-tier-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex: 1;
}
.wm-cen-tier-list li {
	position: relative;
	font-family: var(--fm);
	font-size: 13px;
	line-height: 1.7;
	color: var(--text-mid);
	padding-left: 20px;
}
.wm-cen-tier-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}
.wm-cen-note {
	font-family: var(--fm);
	font-size: 12px;
	line-height: 1.7;
	color: var(--text-dim);
	max-width: 62ch;
	margin: 24px 0 0;
}

/* ============ 02 · Održavanje ============ */
.wm-cen-toggle {
	display: inline-flex;
	gap: 0;
	border: 1.5px solid var(--border-hi);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 28px;
}
.wm-cen-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fd);
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-mid);
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 9px 22px;
	cursor: pointer;
	transition: background 0.22s, color 0.22s;
}
.wm-cen-toggle-btn.is-active {
	background: var(--accent);
	color: #0a0a0a;
}
.wm-cen-toggle-badge {
	font-family: var(--fm);
	font-size: 11px;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.18);
}
.wm-cen-toggle-btn:not(.is-active) .wm-cen-toggle-badge {
	background: var(--accent);
	color: #0a0a0a;
}

.wm-cen-maint {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media screen and (max-width: 900px) {
	.wm-cen-maint {
		grid-template-columns: 1fr;
	}
}
.wm-cen-maint-card {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	padding: 24px;
	transition: border-color 0.2s;
}
.wm-cen-maint-price {
	margin: 6px 0 4px;
}
.wm-cen-maint-amount {
	font-family: var(--fd);
	font-size: 2rem;
	color: var(--accent);
	transition: opacity 0.15s;
}
.wm-cen-maint-period {
	font-family: var(--fm);
	font-size: 12px;
	color: var(--text-dim);
	margin-left: 4px;
}
.wm-cen-maint-save {
	font-family: var(--fm);
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--text-mid);
	margin: 0;
	min-height: 1.4em;
}
.wm-cen-maint-save-amount {
	color: var(--accent);
	font-weight: 500;
}
.wm-cen-maint-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--border);
}
.wm-cen-maint-list li {
	position: relative;
	font-family: var(--fm);
	font-size: 13px;
	line-height: 1.7;
	color: var(--text-mid);
	padding-left: 20px;
}
.wm-cen-maint-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

/* ============ FAQ (klon generator-faktura.css) ============ */
.wm-cen-sechead {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 28px;
}
.wm-cen-sechead-num {
	font-family: var(--fm);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}
.wm-cen-sechead-title {
	font-family: var(--fd);
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}
.wm-cen-faq {
	padding: 56px 0 8px;
	border-top: 1px solid var(--border);
	margin-top: 8px;
}
.wm-cen-faq-list {
	margin: 0;
}
.wm-cen-faq-item {
	border-bottom: 1px solid var(--border);
}
.wm-cen-faq-item:first-child {
	border-top: 1px solid var(--border);
}
.wm-cen-faq-q {
	position: relative;
	list-style: none;
	cursor: pointer;
	font-family: var(--fb);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--text);
	padding: 20px 44px 20px 0;
	transition: color 0.2s;
}
.wm-cen-faq-q::-webkit-details-marker {
	display: none;
}
.wm-cen-faq-q:hover {
	color: var(--accent);
}
.wm-cen-faq-q::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat,
		linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat;
	transform: translateY(-50%);
	transition: transform 0.25s;
}
.wm-cen-faq-item[open] .wm-cen-faq-q::after {
	transform: translateY(-50%) rotate(45deg);
}
.wm-cen-faq-item[open] .wm-cen-faq-q {
	color: var(--accent);
}
.wm-cen-faq-a {
	padding: 0 44px 22px 0;
}
.wm-cen-faq-a p {
	font-family: var(--fb);
	font-size: 0.98rem;
	line-height: 1.75;
	color: rgba(240, 237, 230, 0.82);
	margin: 0;
}

/* ============ CTA finale ============ */
.wm-cen-cta {
	padding: 64px 0 80px;
	text-align: center;
}
.wm-cen-cta-title {
	font-family: var(--fd);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text);
	margin: 0 0 10px;
}
.wm-cen-cta-sub {
	font-family: var(--fm);
	font-size: 0.95rem;
	color: var(--text-mid);
	max-width: 52ch;
	margin: 0 auto 26px;
}

/* ============ Mobilno ============ */
@media screen and (max-width: 767px) {
	.wm-cen {
		padding-left: 20px;
		padding-right: 20px;
	}
}