/* ============================================================
   CSS VARIJABLE
   ============================================================ */

:root {
	--color-primary:      #055963;
	--color-accent:       #c9252c;
	--color-bg:           #e9e8ea;
	--color-bg-light:     #f1f1f1;
	--color-white:        #fff;
	--color-text:         #333;
	--color-grey:         #959595;
	--color-border:       #707070;
	--color-error:        #c00;
	--color-correct:      #28a745;
	--color-wrong:        #dc3545;
	--color-quiz-select:  #007bff;
	--radius-btn:         0.5rem;
	--radius-circle:      50%;
	--shadow-header:      1px 2px 7px 0px rgba(0, 0, 0, 0.15);
	scroll-behavior:      smooth;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

* { outline: none; }

body {
	background: var(--color-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
	color: var(--color-primary);
}

.clear { clear: both; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	line-height: 1.2em;
}

h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }

p, ul, ol {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	line-height: 1.5em;
}

section {
	position: relative;
	width: 100%;
	padding: 0.9375rem 0;
}

.grid-container { max-width: 87.5rem; }

/* ============================================================
   HEADER
   ============================================================ */

header {
	width: 100%;
	height: auto;
	background-color: var(--color-bg);
	font-family: 'Roboto', sans-serif;
	color: var(--color-text);
	padding: 1rem 0;
	box-shadow: var(--shadow-header);
	z-index: 100;
}

header a       { color: var(--color-text); font-weight: 800; }
header a:hover,
header a:active { color: #000; }

h1 {
	width: 100%;
	height: 100%;
	min-height: 80px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
}

h1 a {
	width: 100%;
	height: 100%;
	display: block;
	background: url("/assets/img/hemonchub_logo.svg") center left no-repeat;
	background-size: contain;
}

/* ============================================================
   PRE-HEADER
   ============================================================ */

#preheader {
	background: var(--color-primary);
	height: 3.5rem;
	z-index: 101;
	text-align: right;
}

/* ============================================================
   GUMB (BTN)
   ============================================================ */

.btn {
	width: auto;
	min-width: 150px;
	padding: 0.2rem 0.5rem;
	margin: 0.5rem 0 0.5rem auto;
	border-radius: var(--radius-btn);
	line-height: 2rem;
	text-align: center;
	display: inline-block;
	position: relative;
	transition: all 0.3s ease;
	border: 2px solid var(--color-bg);
	color: var(--color-bg);
	background-color: var(--color-accent);
	cursor: pointer;
}

.btn:hover {
	color: var(--color-accent);
	background-color: var(--color-bg);
	border-color: var(--color-accent);
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
	border: inset 6px;
	border-color: var(--color-white) transparent transparent;
	right: 1rem;
}

/* ============================================================
   NAV
   ============================================================ */

nav {
	width: 100%;
	height: auto;
	color: var(--color-grey);
	padding: 0;
	position: relative;
	z-index: 100;
	margin: 0.5rem 0;
}

nav ul { margin: 0; padding: 0; list-style-type: none; }
nav ul li { margin: 0; display: inline-block; }
nav ul li ul li { margin: 0; }

nav a {
	color: #000;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	position: relative;
	display: block;
	font-weight: 400;
	padding: 0 0.5rem;
}

nav a:hover,
nav a:active,
nav a:focus,
nav ul li.active a { color: var(--color-accent); }

nav ul li a::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0.5rem;
	overflow: hidden;
	width: calc(100% - 1rem);
	height: 2px;
	background-color: var(--color-accent);
	transition: opacity .2s;
	white-space: nowrap;
	z-index: -1;
	opacity: 0;
}

nav ul li.active a::before,
nav ul li a:hover::before { opacity: 1; }

/* ============================================================
   SPINNER (hamburger)
   ============================================================ */

#spinner_master_container {
	display: none;
	z-index: 999999;
	position: absolute;
	top: 0;
	right: 0;
}

#spinner_master_container .columns { padding: 0; }

.spinner-master * {
	transition: all 0.3s;
	box-sizing: border-box;
}

.spinner-master {
	position: relative;
	margin: 10px;
	height: 30px;
	width: 40px;
	float: right;
}

.spinner-master input[type="checkbox"]                          { display: none; }
.spinner-master input[type="checkbox"] + label                  { height: 30px; }
.spinner-master input[type="checkbox"] + label:before,
.spinner-master input[type="checkbox"]:checked + label:before   { display: none; }

.spinner-master label {
	cursor: pointer;
	position: absolute;
	z-index: 99;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	margin: 0;
	text-indent: -999999px;
}

.spinner-master .spinner {
	position: absolute;
	height: 5px;
	width: 100%;
	background-color: #000;
	border-radius: 3px;
}

.spinner-master .diagonal.part-1 { position: relative; float: left; }
.spinner-master .horizontal      { position: relative; float: left; margin-top: 5px; }
.spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 5px; }

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .horizontal      { opacity: 0; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); margin-top: 10px; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg); margin-top: -15px; }

input[type='checkbox'] + label.spinner-spin,
input[type='radio']    + label.spinner-spin { width: 100% !important; }

/* ============================================================
   PRETRAGA (SEARCH)
   ============================================================ */

form#search_form {
	padding: 0.5rem 0 0 0.5rem;
	display: inline-block;
	position: relative;
	width: 100%;
	background-color: transparent;
}

form#search_form label { display: none; }

/* Konsolidacija svih placeholder varijanti u jedan moderan oblik */
#search_form input::placeholder,
input#search_term::placeholder {
	color: var(--color-grey);
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
}

.search-container {
	position: relative;
	display: inline-block;
	width: 100%;
}

#search_term {
	width: 100%;
	padding: 0 40px 0 10px;
	height: 40px;
	border: 1px solid var(--color-border);
	box-sizing: border-box;
	color: var(--color-accent);
	font-weight: 400;
	background: var(--color-bg-light);
	box-shadow: none;
	border-radius: 10px;
	margin: 0;
}

#search_term:focus {
	border-color: var(--color-border);
	background: var(--color-white);
}

.search_btn {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search_btn i       { font-size: 1.5rem; color: var(--color-primary); }
.search_btn:hover i { color: var(--color-primary); }

.fa-sharp, .fass { font-weight: 200; }

/* ============================================================
   HEADLINE
   ============================================================ */

#headline {
	background-position: center center; /* ispravljen typo: "background-poition" */
	background-repeat: no-repeat;       /* ispravljen typo: "bavkground-repeat" */
	background-size: cover;
	min-height: 20rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#headline h2 {
	color: var(--color-white);
	font-size: 4rem;
	text-align: center;
	font-weight: 400;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   INTRO (video pozadina)
   ============================================================ */

#intro {
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.video-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -2;
}

#bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

.video-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: -1;
}

#intro h2 { font-size: 3.75rem; margin: 0; padding: 1rem 0; color: var(--color-white); }
#intro p  { font-size: 1.5rem; line-height: 1.3125em; color: var(--color-white); }

/* ============================================================
   LOGIN / REGISTRACIJA
   ============================================================ */

#log-reg {
	background: url("/assets/img/login_bg.jpg") left center no-repeat;
	background-size: cover;
	flex: 1;
}

#log-reg .grid-container .grid-x .cell:nth-child(1) {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
}

#log-reg h2 { font-size: 2.5rem; margin: 0; padding: 1rem 0; text-align: left; color: var(--color-white); }

form,
.log-box {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 3rem;
}

/* Obavijesti unutar bijelog okvira (prijava, registracija, lozinka) */
form p.ok,
form p.notok,
.log-box p.ok,
.log-box p.notok {
	margin: 0 0 1.5rem 0;
	padding: 0.75rem 1rem;
	background-color: var(--color-white);
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.4;
}

form p.notok,
.log-box p.notok { color: var(--color-error); }

form label.notok { color: var(--color-error); }
form input.notok,
form select.notok { border-color: var(--color-error); }

.log-box p       { color: var(--color-primary); }
.log-box a       { text-decoration: underline; color: var(--color-primary); }
.log-box a:hover { color: #000; }

form h3,
.log-box h3 {
	text-transform: uppercase;
	text-align: center;
	font-weight: normal;
	margin: 0;
	padding: 0 0 2rem 0;
	font-size: 1.5rem;
}

form h4 {
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 1rem 0 0.5rem 0;
	font-size: 1.25rem;
	font-weight: 600;
}

label { font-size: 1rem; color: var(--color-primary); }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	border: 1px solid var(--color-primary);
	background-color: var(--color-white);
	font-size: 1rem;
	color: var(--color-primary);
	margin: 0 0 1rem 0;
}

input[type="submit"] { margin: 0 auto 2rem auto; display: block; }

form fieldset a         { text-decoration: underline; color: var(--color-primary); }
form fieldset a:hover   { color: #000; }
form fieldset a.forgotten { text-align: center; display: block; }

/* ============================================================
   CHECKBOX & RADIO — custom
   ============================================================ */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type='checkbox'],
	input[type='radio'] {
		--active:         var(--color-primary);
		--active-inner:   #fff;
		--border:         #000;
		--border-hover:   #000;
		--background:     #fff;
		--disabled:       #F6F8FF;
		--disabled-inner: #E1E6F9;
		-webkit-appearance: none;
		-moz-appearance:    none;
		height: 23px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background .3s, border-color .3s, box-shadow .2s;
	}

	input[type='checkbox']:after,
	input[type='radio']:after {
		content: '';
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: opacity var(--d-o, 0.2s), transform var(--d-t, 0.3s) var(--d-t-e, ease);
	}

	input[type='checkbox']:checked,
	input[type='radio']:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}

	input[type='checkbox']:disabled,
	input[type='radio']:disabled { --b: var(--disabled); cursor: not-allowed; opacity: .9; }

	input[type='checkbox']:disabled:checked,
	input[type='radio']:disabled:checked { --b: var(--disabled-inner); --bc: var(--border); }

	input[type='checkbox']:disabled + label,
	input[type='radio']:disabled + label { cursor: not-allowed; }

	input[type='checkbox']:hover:not(:checked):not(:disabled),
	input[type='radio']:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); }

	input[type='checkbox']:focus,
	input[type='radio']:focus { box-shadow: 0 0 0 var(--focus); }

	input[type='checkbox']:not(.switch),
	input[type='radio']:not(.switch) { width: 23px; }

	input[type='checkbox']:not(.switch):after,
	input[type='radio']:not(.switch):after { opacity: var(--o, 0); }

	input[type='checkbox']:not(.switch):checked,
	input[type='radio']:not(.switch):checked { --o: 1; }

	input[type='checkbox'] + label,
	input[type='radio'] + label {
		line-height: 23px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		margin-left: 1rem;
		top: 8px;
		font-size: 1rem;
		font-weight: 600;
		width: calc(100% - 60px);
		margin-bottom: 1rem;
	}

	/* Checkbox */
	input[type='checkbox']:not(.switch) { border-radius: 3px; }

	input[type='checkbox']:not(.switch):after {
		width: 7px;
		height: 12px;
		border: 3px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 6px;
		top: 2px;
		transform: rotate(var(--r, 20deg));
	}

	input[type='checkbox']:not(.switch):checked { --r: 43deg; }

	/* Switch */
	input[type='checkbox'].switch { width: 38px; border-radius: 11px; }
	input[type='checkbox'].switch:checked { --ab: var(--active-inner); --x: 17px; }
	input[type='checkbox'].switch:disabled:not(:checked):after { opacity: .6; }

	/* Radio */
	input[type='radio'] { border-radius: var(--radius-circle); }

	input[type='radio']:after {
		width: 21px;
		height: 21px;
		border-radius: var(--radius-circle);
		background: var(--active-inner);
		opacity: 0;
		transform: scale(var(--s, 0.7));
	}

	input[type='radio']:checked { --s: .5; }

	input[type='checkbox'].notok,
	input[type='radio'].notok { border: 1px solid var(--color-error); }
}

@media print {
	input[type='checkbox']:checked,
	input[type='radio']:checked {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}
	input[type='checkbox']:checked:after,
	input[type='radio']:checked:after { opacity: 1 !important; }
	input[type='checkbox']:checked {
		border: 2px solid var(--color-primary) !important;
		background: var(--color-primary) !important;
	}
}

/* ============================================================
   SADRŽAJ (CONTENT)
   ============================================================ */

.content { color: var(--color-primary); }

.content a          { color: var(--color-accent); font-weight: bold; }
.content a:hover    { color: var(--color-accent); }

.content p a:hover,
.content ul a:hover,
.content ol a:hover { text-decoration: underline; }

.content h2 { font-size: 2rem;   margin: 0; padding: 0 0 1rem 0; font-weight: 600;    color: var(--color-primary); text-transform: uppercase; }
.content h3 { font-size: 1.5rem; margin: 0; padding: 1rem 0;    font-weight: normal;  color: var(--color-primary); }
.content h4 { font-size: 1.2rem; margin: 0; padding: 1rem 0;    font-weight: 500;     color: var(--color-primary); }
.content h5 { font-size: 1.2rem; margin: 0; padding: 0.5rem 0; font-weight: normal;  color: var(--color-primary); }
.content h6 { font-size: 1rem;   margin: 0; padding: 0.5rem 0;                        color: var(--color-primary); }

.content p,
.content ul,
.content ol,
table td    { font-size: 1rem; line-height: 1.3125em; text-align: justify; color: var(--color-primary); }

thead, tbody, tfoot { background-color: transparent; border: 1px solid var(--color-primary); }
tbody tr:nth-child(even) { background-color: rgba(289, 0, 110, 0.05); }
td { vertical-align: top; }
p.reference { font-size: 0.8rem; margin-bottom: 0; }

.content .legal p { padding: 0; margin: 0; }

/* ============================================================
   HOME CARD
   ============================================================ */

.sub_container { padding-top: 2rem; }
.sub_container .grid-padding-y > .cell { padding-top: 2rem; }

/* Zajednička osnova za home i content kartice */
.home_sub_container,
.content_sub_container {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	border: 1px solid var(--color-white);
	text-align: center;
	height: 100%;
	background-color: var(--color-white);
}

.home_sub_container:hover,
.content_sub_container:hover { color: #000; }

/* Zajednički slikovni kontejneri */
.home_image_container,
.content_image_container {
	width: 100%;
	height: 200px;
	flex-shrink: 0;
	background-position: center center;
	background-size: cover;
}

.patients .content_image_container { padding-top: 56.25%; height: auto; }

/* Ikona na home kartici */
.home_icon_container {
	width: 55px;
	height: 55px;
	display: block;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-circle);
	background-size: 70% auto;
	background-repeat: no-repeat;
	background-position: center center;
	transition: transform .2s;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
}

.home_sub_container:hover .home_icon_container { transform: scale(1.5); }

/* Zajednički tekstualni kontejneri */
.home_text_container,
.content_text_container {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 2rem 1rem 6rem 1rem;
	text-align: center;
}

.home_text_container h3,
.content_text_container h4 {
	font-weight: 400;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 1rem;
}

.home_text_container p,
.content_text_container p { text-align: center; flex-grow: 1; }

.links .content_text_container p,
.partners .content_text_container p {
	margin: 0;
	padding: 0 0 0.5em 0;
	text-align: left;
	flex-grow: 0;
}

/* Gumbi unutar kartica */
.home_text_container .btn,
.content_text_container .btn,
.quiz-nav .btn,
.quiz-submit-btn {
	background-color: var(--color-white);
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 400;
	width: auto;
	white-space: nowrap;
}

/* Pozicioniranje gumba u home/content karticama */
.home_text_container .btn,
.content_text_container .btn {
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.home_text_container .btn:hover,
.content_text_container .btn:hover,
.quiz-nav .btn:hover,
.quiz-submit-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* ============================================================
   CONTENT — text container (pojačane sekcije)
   ============================================================ */

.text_container {
	background-color: var(--color-white);
	padding: 2rem 3rem;
	line-height: 1.5em;
}

.text_container h2 {
	font-size: 2rem;
	margin: 0 -4rem 1rem -4rem;
	text-align: center;
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: 1rem 0;
	text-transform: none;
}

/* Naslov sekcije (h3 direktno u sekciji — veliki banner stil) */
.therapeutic h3,
.events h3,
.experts h3,
.patients h3 {
	font-size: 3rem;
	margin: 0;
	text-align: center;
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* Naslov unutar text_containera */
.therapeutic .text_container h3,
.events .text_container h3,
.experts .text_container h3,
.patients .text_container h3 {
	font-size: 2rem;
	margin: 0 -4rem 2rem -4rem;
	text-align: center;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.text_container p,
.text_container ol,
.text_container ul { line-height: 1.5em; }

.text_container p.references,
.text_container ol.references { font-size: 0.8em; }

.text_container p.intro { font-size: 1.2em; }

/* ============================================================
   THERAPEUTIC — button-container i gumbi
   ============================================================ */

.therapeutic .content_text_container,
.experts .video_container .content_text_container { padding-bottom: 5rem; }

.therapeutic .content_text_container.has-connected { padding-bottom: 8rem; }

/* Button-container - zajednička osnova */
.button-container,
.therapeutic .button-container,
.content_text_container .button-container {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: auto;
}

.therapeutic .button-container    { width: calc(100% - 2rem); }
.partners .button-container       { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }

.patients .button-container {
	position: relative;
	bottom: auto;
	left: auto;
	transform: none;
}

/* Disease Background gumbi */
.therapeutic .content_text_container .btn,
.patients .content_text_container .btn {
	position: static;
	transform: none;
	left: auto;
	bottom: auto;
	background-color: var(--color-white);
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 400;
	white-space: nowrap;
	min-width: 0;
	border-radius: var(--radius-btn);
	line-height: 2rem;
	padding: 0.2rem 0.5rem;
	text-align: center;
	display: inline-block;
	transition: all 0.3s ease;
	cursor: pointer;
	width: 200px;
}

.patients .content_text_container .btn { width: auto; }

.therapeutic .content_text_container .btn:hover,
.patients .content_text_container .btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background-color: var(--color-white);
}

/* Connected content gumb */
.therapeutic .btn-connected {
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
	color: var(--color-white);
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	line-height: 2rem;
	border-radius: var(--radius-btn);
	font-size: inherit;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 200px;
	min-width: 0;
	text-align: center;
	transition: all 0.3s ease;
}

.therapeutic .btn-connected:hover,
.therapeutic .btn-connected.open {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}

.therapeutic .btn-connected i           { transition: transform 0.25s ease; font-size: 0.75em; }
.therapeutic .btn-connected.open i      { transform: rotate(180deg); }

/* ============================================================
   CONNECTED DROPDOWN PORTAL
   ============================================================ */

.connected-list-portal {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
	position: absolute;
	z-index: 9999;
	background: var(--color-white);
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
}

.connected-list-portal.open { display: block; }

.connected-list-portal li             { border-bottom: 1px solid #f0f0f0; }
.connected-list-portal li:last-child  { border-bottom: none; }

.connected-list-portal li a {
	display: block;
	padding: 0.6rem 1rem;
	color: var(--color-primary);
	text-align: left;
	font-size: 0.85rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: normal;
	word-break: break-word;
	transition: background 0.15s, color 0.15s;
}

.connected-list-portal li a:hover {
	background: #f4f9fa;
	color: var(--color-accent);
}

/* ============================================================
   CONNECTED ACCORDION
   ============================================================ */

.connected-accordion-portal {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
    padding: 0;
    margin: 0;
}

.connected-accordion-portal.open {
    display: block;
}

.accordion-group {
    border-bottom: 1px solid #f0f0f0;
}

.accordion-group:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
    user-select: none;
}

.accordion-header:hover {
    background: #f8f9fa;
}

.accordion-header i {
    transition: transform 0.25s ease;
    font-size: 0.85em;
    color: var(--color-primary);
}

.accordion-group.open .accordion-header i {
    transform: rotate(180deg);
}

.accordion-content {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
	border: none;
}

.accordion-group.open .accordion-content {
    display: block;
}

.accordion-content li {
    border-top: 1px solid #f0f0f0;
}

.accordion-content li:first-child {
    border-top: none;
}

.accordion-content li a {
    display: block;
    padding: 0.6rem 1rem 0.6rem 1rem;
    color: var(--color-primary);
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    transition: background 0.15s, color 0.15s;
}

.accordion-content li a:hover {
    background: #f4f9fa;
    color: var(--color-accent);
}

/* ============================================================
   DOCS LISTA
   ============================================================ */

.docs_container {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.docs_container li  { padding: 0.5rem 1rem; }
.docs_container i   { font-size: 1.5rem; }
.docs_container a   { font-weight: normal; }

/* ============================================================
   VIDEO
   ============================================================ */

.responsive-video-container {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	height: 0;
}

.responsive-video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_container .content_text_container          { padding: 1rem; }
.video_container .content_text_container h4       { margin-bottom: 0; padding-bottom: 0; }
.patients .video_container .content_text_container { padding: 1rem; }

/* ============================================================
   DROPDOWN (Foundation)
   ============================================================ */

.content_text_container .dropdown.menu { margin: 0; }
.dropdown.menu > li > a                { padding: 0; }
.dropdown.menu > li > a:hover          { text-decoration: none; }

/* ============================================================
   BACK LINK
   ============================================================ */

.back {
	margin: 3rem 0 0 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	width: 50%;
}

.back i {
	font-size: 3em;
	margin-right: 1rem;
	color: var(--color-primary);
	background-color: var(--color-white);
	border-radius: var(--radius-circle);
}

.back span {
	height: 2em;
	line-height: 2em;
	color: var(--color-primary);
	font-weight: 500;
}

/* ============================================================
   PARTNERS — collapsible tekst
   ============================================================ */

.partners .content_text_container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0 1rem 6rem 1rem;
	gap: 0.5rem;
}

.partners .content_text_container .text-collapsible {
	position: relative;
	max-height: 120px;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.partners .content_text_container .text-collapsible.expanded { max-height: 2000px; }

.partners .content_text_container .text-collapsible.has-overflow:not(.expanded)::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	pointer-events: none;
}

.partners .btn-read-more {
	display: none;
	margin: 0.5rem auto 0;
	background: none;
	border: none;
	color: var(--color-primary);
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.partners .btn-read-more.visible { display: inline-block; }
.partners .btn-read-more:hover   { color: var(--color-accent); }

/* ============================================================
   KONTAKTI
   ============================================================ */

.contacts {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	justify-items: center;
}

.contact {
	background: var(--color-bg-light);
	padding: 1rem;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.contact h5  { text-transform: uppercase; font-weight: 400; }
.contact p   { margin: 0; padding: 0; }
.contact a   { font-weight: 600; }

/* ============================================================
   QUIZ
   ============================================================ */

.quiz-wrap   { padding: 1rem 0.5rem 1.5rem; }
.quiz-step   { display: none; }
.quiz-step.active { display: block; }

.quiz-section-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 1.2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-primary);
}

.quiz-text p { margin-bottom: 0.8rem; line-height: 1.6; font-size: 1rem; }

.quiz-progress {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin-bottom: 0.6rem;
}

.quiz-question { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.2rem; line-height: 1.5; }

.quiz-answers {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.quiz-answer {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
	border: 1px solid #ddd;
	border-radius: var(--radius-btn);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	font-size: 1rem;
	line-height: 1.5;
	user-select: none;
}

.quiz-answer:hover:not(.answered) { border-color: #aaa; background: #f8f8f8; }

.quiz-answer.selected             { border-color: var(--color-quiz-select); background: #e7f3ff; }
.quiz-answer.selected .quiz-label { background: var(--color-quiz-select); color: var(--color-white); }

.quiz-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius-circle);
	background: #eee;
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
	transition: background 0.15s;
}

.quiz-answer.correct              { border-color: var(--color-correct); background: #f0fff4; font-weight: 700; }
.quiz-answer.correct .quiz-label  { background: var(--color-correct); color: var(--color-white); }

.quiz-answer.wrong                { border-color: var(--color-wrong); background: #fff5f5; }
.quiz-answer.wrong .quiz-label    { background: var(--color-wrong); color: var(--color-white); }

.quiz-answers.answered .quiz-answer { cursor: default; pointer-events: none; }

.quiz-answer .quiz-ref {
	display: none;
	font-size: 0.75rem;
	vertical-align: super;
	line-height: 1;
	color: var(--color-correct);
	margin-left: -7px;
}

.quiz-answer.correct .quiz-ref { display: inline; }

.quiz-references {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #eee;
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
}

.quiz-references p { margin-bottom: 0.4rem; }
.quiz-nav          { margin-top: 1.2rem; text-align: right; }

.quiz-case-study {
	background: #f8f9fa;
	padding: 1rem;
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.quiz-case-study ul  { margin: 0.5rem 0; padding-left: 1.5rem; }
.quiz-case-study li  { margin-bottom: 0.3rem; }
.quiz-case-abbrev    { margin-top: 0.75rem; font-style: italic; color: #666; }

.quiz-results { text-align: center; padding: 2rem 1rem; }

.quiz-results-icon { font-size: 3rem; margin-bottom: 1rem; }

.quiz-results-icon::before {
	font-family: "Font Awesome 6 Sharp";
	font-weight: 300;
	content: "\f5f3";
}

.quiz-results-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.quiz-results-score { font-size: 1.05rem; color: #444; }
.quiz-note          { font-style: italic; color: #555; margin-top: 0.5rem; }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
	background: var(--color-primary);
	width: 100%;
	position: relative;
	margin-top: auto;
	padding: 2rem 0;
	color: var(--color-white);
}

#swixx_logo { max-width: 250px; padding: 0 0 0.5rem 0; }

footer nav {
	width: 100%;
	margin: 0 -0.5rem 1rem -0.5rem;
	padding: 0;
}

footer nav ul li a,
footer nav ul li.active a { color: var(--color-white); font-size: 1rem; font-weight: 400; }

footer p { font-size: 0.75rem; margin: 0; }

footer a        { color: var(--color-white); font-weight: bold; }
footer a:hover,
footer a:focus  { color: var(--color-white); }

/* ============================================================
   BANNERI NA NASLOVNICI (intro, samo prijavljenima)
   ============================================================ */

.banners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 10rem;
	padding: 3rem 0 1rem 0;
}

.banners .banner {
	display: block;
	flex: 0 1 22rem;
	line-height: 0;
	transition: transform 0.2s ease;
}

.banners a.banner:hover,
.banners a.banner:focus-visible { transform: translateY(-3px); }

.banners .banner img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 63.9375em) {
	.banners { gap: 1.5rem 2rem; }
	.banners .banner { flex-basis: 20rem; }
}

@media screen and (max-width: 39.9375em) {
	.banners { gap: 1rem; padding: 2rem 0 0 0; }
	.banners .banner { flex: 1 1 100%; }
}