/* Plan A članstvo – pristupnica */
.pacl {
	--pacl-navy: #12304b;
	--pacl-text: #24323f;
	--pacl-muted: #5f6b77;
	--pacl-line: #d7e0e8;
	--pacl-accent: #1a73b8;
	--pacl-cta: #e8862a;
	--pacl-cta-dark: #c96a12;
	--pacl-err: #b32d2e;
	container-type: inline-size;
	max-width: 760px;
	margin: 0 auto;
	color: var(--pacl-text);
	font-size: 16px;
	line-height: 1.5;
}

.pacl *,
.pacl *::before,
.pacl *::after {
	box-sizing: border-box;
}

.pacl .pacl-form {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--pacl-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(18, 48, 75, 0.08);
}

.pacl .pacl-grid {
	display: grid;
	gap: 14px 18px;
}

@container (min-width: 560px) {
	.pacl .pacl-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.pacl .pacl-field {
	display: grid;
	gap: 6px;
	align-content: start;
	min-width: 0;
}

.pacl .pacl-field label,
.pacl .pacl-minor legend {
	margin: 0;
	color: var(--pacl-navy);
	font-size: 15px;
	font-weight: 700;
}

.pacl .pacl-field input {
	width: 100%;
	min-height: 48px;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 2px solid var(--pacl-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--pacl-text) !important;
	font-size: 16px !important;
}

.pacl .pacl-field input:focus {
	border-color: var(--pacl-accent) !important;
	outline: 3px solid rgba(26, 115, 184, 0.18);
}

.pacl .has-error input,
.pacl .pacl-field input[aria-invalid="true"] {
	border-color: var(--pacl-err) !important;
}

.pacl .pacl-help {
	color: var(--pacl-muted);
	font-size: 13px;
}

.pacl .pacl-err {
	color: var(--pacl-err);
	font-size: 14px;
	font-weight: 700;
}

.pacl .pacl-ok-hint {
	color: #1e7d3a;
	font-size: 13px;
	font-weight: 700;
}

.pacl .pacl-minor {
	margin: 0;
	padding: 16px;
	border: 2px dashed var(--pacl-line);
	border-radius: 14px;
	background: #fafcfd;
}

.pacl.is-js .pacl-minor:not(.is-on) {
	display: none;
}

.pacl .pacl-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: 15px;
	cursor: pointer;
}

.pacl .pacl-check input {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 1px 0 0 !important;
	accent-color: var(--pacl-cta);
}

.pacl .pacl-check.has-error span {
	color: var(--pacl-err);
}

.pacl .pacl-izjava {
	border: 1px solid var(--pacl-line);
	border-radius: 12px;
	background: #f6f9fb;
}

.pacl .pacl-izjava summary {
	padding: 12px 16px;
	color: var(--pacl-accent);
	font-weight: 700;
	cursor: pointer;
}

.pacl .pacl-izjava__text {
	max-height: 340px;
	overflow-y: auto;
	padding: 0 16px 14px;
	font-size: 14px;
}

.pacl .pacl-izjava__text h4 {
	margin: 14px 0 6px;
	color: var(--pacl-navy);
	font-size: 15px;
}

.pacl .pacl-izjava__text p {
	margin: 0 0 6px;
}

.pacl .pacl-btn,
.pacl button.pacl-btn,
.pacl a.pacl-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 0 !important;
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--pacl-cta) !important;
	box-shadow: 0 6px 16px rgba(232, 134, 42, 0.3) !important;
	color: #fff !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
}

.pacl .pacl-btn:hover {
	background: var(--pacl-cta-dark) !important;
}

.pacl .pacl-btn--big {
	width: 100%;
	min-height: 56px;
	font-size: 18px !important;
}

.pacl .pacl-btn.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.pacl .pacl-muted {
	margin: 0;
	color: var(--pacl-muted);
	font-size: 14px;
}

.pacl .pacl-after {
	text-align: center;
}

.pacl .pacl-alert {
	padding: 12px 16px;
	border-left: 4px solid var(--pacl-err);
	border-radius: 0 12px 12px 0;
	background: #fdeceb;
	color: var(--pacl-err);
	font-weight: 700;
}

.pacl .pacl-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Poruke (poslano, potvrđeno, isteklo) */
.pacl .pacl-box {
	padding: 30px 24px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(18, 48, 75, 0.1);
	text-align: center;
	outline: none;
}

.pacl .pacl-box__icon {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	color: #fff;
	animation: pacl-pop 0.45s ease-out both;
}

.pacl .pacl-box--ok .pacl-box__icon {
	background: #1e9e55;
}

.pacl .pacl-box--info .pacl-box__icon {
	background: var(--pacl-accent);
}

.pacl .pacl-box--warn .pacl-box__icon {
	background: var(--pacl-cta);
}

.pacl .pacl-box__title {
	margin: 0 0 12px;
	color: var(--pacl-navy);
	font-size: clamp(24px, 6cqw, 32px);
	line-height: 1.2;
}

.pacl .pacl-box p {
	margin: 0 0 12px;
}

.pacl .pacl-lead {
	font-size: 19px;
}

.pacl .pacl-steps {
	display: grid;
	gap: 10px;
	max-width: 520px;
	margin: 6px auto 16px;
	padding: 0;
	counter-reset: pacl;
	list-style: none;
	text-align: left;
}

.pacl .pacl-steps li {
	position: relative;
	padding: 12px 14px 12px 54px;
	border-radius: 12px;
	background: #f3f8fc;
	counter-increment: pacl;
}

.pacl .pacl-steps li::before {
	content: counter(pacl);
	position: absolute;
	top: 10px;
	left: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--pacl-cta);
	color: #fff;
	font-weight: 800;
}

.pacl .pacl-box table {
	text-align: left;
}

.pacl .pacl-inline {
	margin: 0;
}

@keyframes pacl-pop {
	from {
		transform: scale(0.4);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pacl .pacl-box__icon {
		animation: none;
	}
}

.pacl .pacl-box table,
.pacl .pacl-box td,
.pacl .pacl-box th {
	border: 0 !important;
}

/* ---------------------------------------------------------------------
 * Cijela stranica pristupnice (uvod, kako postati član, obrazac)
 * ------------------------------------------------------------------- */
.pacl.pacl--page {
	max-width: 1180px;
	padding: 8px 0 24px;
}

.pacl .pacl-layout {
	display: grid;
	gap: 22px;
	align-items: start;
}

@container (min-width: 900px) {
	.pacl .pacl-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 30px;
	}

	.pacl .pacl-side {
		position: sticky;
		top: 110px;
	}

	.pacl a.pacl-btn.pacl-hero__cta {
		display: none !important;
	}
}

.pacl .pacl-side {
	display: grid;
	gap: 22px;
}

.pacl .pacl-hero {
	position: relative;
	overflow: hidden;
	padding: 30px 26px 26px;
	border-radius: 22px;
	background: radial-gradient(700px 400px at 85% -10%, #2a6aa0 0%, rgba(42, 106, 160, 0) 60%), linear-gradient(160deg, #163b5c 0%, #12304b 55%, #0d2338 100%);
	box-shadow: 0 14px 34px rgba(18, 48, 75, 0.28);
	color: #fff;
}



.pacl .pacl-kicker {
	margin: 0 0 8px;
	color: #ffd29e;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pacl .pacl-hero__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(28px, 7cqw, 40px);
	font-weight: 800;
	line-height: 1.12;
}

.pacl .pacl-hero__lead {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.55;
}

.pacl .pacl-hero__sub {
	margin: 0 0 10px;
	color: #fff;
	font-weight: 800;
}

.pacl .pacl-ben {
	display: grid;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.pacl .pacl-ben li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: 16px;
	line-height: 1.45;
}

.pacl .pacl-ben__icon {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(232, 134, 42, 0.18);
	color: #ffb168;
}

.pacl .pacl-ben__icon svg {
	width: 20px;
	height: 20px;
}

.pacl .pacl-fee {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
}

.pacl .pacl-fee__amount {
	color: #fff;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.pacl .pacl-fee__text {
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.pacl .pacl-fee__text small {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 400;
}

.pacl .pacl-hero__cta {
	gap: 8px;
	width: 100%;
}

.pacl .pacl-hero__cta svg {
	width: 20px;
	height: 20px;
}

.pacl .pacl-h2 {
	margin: 0 0 14px;
	color: var(--pacl-navy);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

.pacl .pacl-how {
	padding: 22px 22px 16px;
	border: 1px solid var(--pacl-line);
	border-radius: 20px;
	background: #fff;
}

.pacl .pacl-how ol {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pacl .pacl-how li {
	position: relative;
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 2px 12px;
	align-items: center;
	margin: 0;
	padding: 12px 12px 12px 12px;
	border-radius: 14px;
	background: #f3f8fc;
}

.pacl .pacl-how__icon {
	display: grid;
	grid-row: span 2;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #fff;
	color: var(--pacl-accent);
	box-shadow: 0 2px 8px rgba(18, 48, 75, 0.08);
}

.pacl .pacl-how__num {
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pacl-cta);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	z-index: 1;
}

.pacl .pacl-how strong {
	color: var(--pacl-navy);
	font-size: 16px;
	line-height: 1.3;
}

.pacl .pacl-how small {
	grid-column: 2;
	color: var(--pacl-muted);
	font-size: 14px;
	line-height: 1.4;
}

.pacl .pacl-formcard {
	padding: 26px 22px 24px;
	border: 1px solid var(--pacl-line);
	border-top: 5px solid var(--pacl-cta);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(18, 48, 75, 0.1);
	scroll-margin-top: 90px;
}

.pacl .pacl-formcard__lead {
	margin: -6px 0 18px;
}

.pacl .pacl-formcard .pacl-form {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.pacl .pacl-contact {
	margin: 24px 0 0;
	color: var(--pacl-muted);
	font-size: 15px;
	text-align: center;
}

@container (max-width: 420px) {
	.pacl .pacl-hero {
		padding: 24px 18px 20px;
	}

	.pacl .pacl-formcard {
		padding: 22px 16px 20px;
	}

	.pacl .pacl-how {
		padding: 18px 14px 12px;
	}
}