/* MediaCraft alati: provjera weba i kalkulator. Koristi boje teme MediaCraft. */
.mca-alat {
	--mca-tinta: var(--mc-tinta, #18222E);
	--mca-siva: var(--mc-siva, #4F5B67);
	--mca-magla: var(--mc-magla, #EEF1F4);
	--mca-rub: var(--mc-rub, #E2E6EA);
	--mca-naranca: var(--mc-naranca, #ED7625);
	--mca-tamna: var(--mc-naranca-tamna, #B4470E);
	--mca-breskva: var(--mc-breskva, #FDE6D8);
	--mca-zelena: #1E7D4F;
	--mca-crvena: #B42318;
	background: #fff;
	border: 1px solid var(--mca-rub);
	border-radius: 20px;
	padding: clamp(20px, 4vw, 40px);
	box-shadow: 0 12px 40px rgba(24, 34, 46, .06);
	color: var(--mca-tinta);
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.mca-alat [hidden] { display: none !important; }
.mca-alat h3 { margin: 0 0 8px; }
.mca-sitno { font-size: .9375rem; color: var(--mca-siva); margin: 12px 0 0; }
.mca-neobavezno { font-weight: 400; color: var(--mca-siva); font-size: .875em; }
.mca-oznaka { margin: 0 0 4px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mca-tamna); }
.mca-poruka { margin: 12px 0; padding: 12px 16px; border-radius: 10px; background: #FDECEA; color: var(--mca-crvena); font-weight: 600; }
.mca-uspjeh { margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: #E7F5EE; color: var(--mca-zelena); font-weight: 600; }
.mca-greska { padding: 12px 16px; border-radius: 10px; background: #FDECEA; color: var(--mca-crvena); }
.mca-polje--veliko input { font-size: 1.1875rem; padding-top: 16px; padding-bottom: 16px; }
.mca-obrazac .mc-privola { font-size: .9375rem; }

/* Napredak */
.mca-napredak__naslov { font-size: 1.1875rem; margin: 0 0 16px; }
.mca-koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mca-koraci li { position: relative; padding: 12px 16px 12px 48px; border-radius: 12px; background: var(--mca-magla); color: var(--mca-siva); transition: background .3s, color .3s; }
.mca-koraci li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--mca-svijetla, #C9D0D7); box-sizing: border-box; }
.mca-koraci li.aktivno { background: var(--mca-breskva); color: var(--mca-tinta); font-weight: 600; }
.mca-koraci li.aktivno::before { border-color: var(--mca-naranca); border-right-color: transparent; animation: mca-vrti .8s linear infinite; }
.mca-koraci li.gotovo { color: var(--mca-tinta); }
.mca-koraci li.gotovo::before { border: 0; background: var(--mca-zelena); }
.mca-koraci li.gotovo::after { content: ""; position: absolute; left: 22px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mca-koraci li.preskoceno { opacity: .5; }
@keyframes mca-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mca-koraci li.aktivno::before { animation: none; } }

/* Izvještaj */
.mca-izvjestaj__vrh { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.mca-izvjestaj__sazetak { flex: 1 1 280px; }
.mca-izvjestaj__sazetak p { margin: 0; }
.mca-izvjestaj__naslov { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.25; margin: 4px 0 8px; }
.mca-krug { --mca-boja: var(--mca-naranca); flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
	background: conic-gradient(var(--mca-boja) calc(var(--mca-ocjena) * 1%), var(--mca-magla) 0); }
.mca-krug::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.mca-krug > * { position: relative; }
.mca-krug__broj { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.mca-krug__od { font-size: .8125rem; color: var(--mca-siva); }
.mca-kategorije { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px; padding: 20px; border-radius: 14px; background: var(--mca-magla); margin-bottom: 28px; }
.mca-kategorija__red { display: flex; justify-content: space-between; font-size: .9375rem; margin-bottom: 6px; }
.mca-traka { height: 8px; border-radius: 8px; background: #fff; overflow: hidden; }
.mca-traka span { display: block; height: 100%; border-radius: 8px; background: var(--mca-naranca); }
.mca-podnaslov { font-size: 1.25rem; margin: 28px 0 12px; }
.mca-prioriteti { margin: 0; padding-left: 1.25em; }
.mca-prioriteti li { margin-bottom: 10px; }
.mca-grupa { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mca-siva); margin: 22px 0 8px; }
.mca-stavka { border: 1px solid var(--mca-rub); border-radius: 12px; margin-bottom: 8px; background: #fff; }
.mca-stavka summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.mca-stavka summary::-webkit-details-marker { display: none; }
.mca-stavka__naslov { flex: 1; font-weight: 600; }
.mca-stavka__status { font-size: .8125rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.mca-znak { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.mca-stavka--ok .mca-znak { background: var(--mca-zelena); }
.mca-stavka--ok .mca-stavka__status { background: #E7F5EE; color: var(--mca-zelena); }
.mca-stavka--upozorenje .mca-znak { background: var(--mca-naranca); }
.mca-stavka--upozorenje .mca-stavka__status { background: var(--mca-breskva); color: var(--mca-tamna); }
.mca-stavka--problem .mca-znak { background: var(--mca-crvena); }
.mca-stavka--problem .mca-stavka__status { background: #FDECEA; color: var(--mca-crvena); }
div.mca-stavka--problem { padding: 4px 16px; }
.mca-stavka__tijelo { padding: 0 16px 14px 40px; font-size: .9875rem; }
.mca-stavka__tijelo p { margin: 0 0 8px; }
.mca-cta { margin-top: 32px; padding: 24px; border-radius: 16px; background: var(--mca-tinta); color: #fff; }
.mca-cta h3 { color: #fff; font-size: 1.375rem; }
.mca-cta p { color: #D8DEE4; margin: 0 0 16px; }
.mca-cta__gumbi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mca-gumb { display: inline-block; padding: 13px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent; font: inherit; font-weight: 700; }
a.mca-gumb.wp-element-button, button.mca-gumb.wp-element-button { background: var(--mca-naranca); color: var(--mca-tinta); }
.mca-gumb--obrub { border-color: currentColor; color: inherit; background: transparent; }
.mca-cta .mca-gumb--obrub { color: #fff; }
.mca-gumb--tekst { background: none; border: 0; padding-left: 4px; padding-right: 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mca-cta .mca-gumb--tekst { color: #fff; }
.mca-napomena { font-size: .875rem; color: var(--mca-siva); margin: 16px 0 0; }
.mca-nova { margin-top: 20px; }

/* Kalkulator */
.mca-traka-koraka { height: 6px; border-radius: 6px; background: var(--mca-magla); margin-bottom: 24px; overflow: hidden; }
.mca-traka-koraka span { display: block; height: 100%; width: 25%; background: var(--mca-naranca); transition: width .35s; }
.mca-korak { border: 0; margin: 0; padding: 0; min-width: 0; }
.mca-korak legend { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; margin-bottom: 16px; padding: 0; }
.mca-pitanje { font-weight: 700; margin: 24px 0 10px; }
.mca-izbori { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mca-izbori--uski { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mca-izbor { position: relative; cursor: pointer; }
.mca-izbor input { position: absolute; opacity: 0; pointer-events: none; }
.mca-izbor span { display: block; height: 100%; padding: 16px 18px; border: 2px solid var(--mca-rub); border-radius: 14px; color: var(--mca-siva); font-size: .9375rem; transition: border-color .2s, background .2s; box-sizing: border-box; }
.mca-izbor strong { display: block; color: var(--mca-tinta); font-size: 1.0625rem; margin-bottom: 2px; }
.mca-izbor:hover span { border-color: var(--mca-svijetla, #C9D0D7); }
.mca-izbor input:checked + span { border-color: var(--mca-naranca); background: var(--mca-breskva); }
.mca-izbor input:focus-visible + span { outline: 3px solid var(--mca-naranca); outline-offset: 2px; }
.mca-kvacice { display: grid; gap: 10px; }
.mca-kvacice label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mca-kvacice input { margin-top: 5px; accent-color: var(--mca-naranca); width: 18px; height: 18px; flex: 0 0 auto; }
.mca-navigacija { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.mca-navigacija .mca-dalje { margin-left: auto; }
.mca-dalje:disabled { opacity: .45; cursor: not-allowed; }
.mca-ishod__naslov { font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 6px; }
.mca-ishod__opis { color: var(--mca-siva); margin: 0 0 20px; }
.mca-cijene { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mca-cijena { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; background: var(--mca-magla); }
.mca-cijena--glavna { background: var(--mca-breskva); outline: 2px solid var(--mca-naranca); }
.mca-cijena__oznaka { font-size: .875rem; font-weight: 700; color: var(--mca-siva); }
.mca-cijena__iznos { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.mca-cijena__iznos small { font-size: .9375rem; font-weight: 500; color: var(--mca-siva); }
.mca-cijena__sitno { font-size: .875rem; color: var(--mca-siva); }
.mca-napomene { margin: 16px 0 0; padding-left: 1.25em; }
.mca-posalji { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--mca-rub); }
.mca-hvala { margin-top: 24px; padding: 20px; border-radius: 14px; background: #E7F5EE; }

@media (max-width: 600px) {
	.mca-alat { border-radius: 16px; }
	.mca-krug { width: 108px; height: 108px; }
	.mca-krug__broj { font-size: 2rem; }
	.mca-stavka__tijelo { padding-left: 16px; }
	.mca-cta__gumbi .mca-gumb { width: 100%; text-align: center; box-sizing: border-box; }
}