/* JKD Regate - obrazac za prijavu i javni popis prijavljenih. Boje i naslovni font prate stil
   Arena Kup stranice (tamno plava #023349/#0E3855, naslovi u fontu "Secular One"). Sve je slozeno
   "mobile first": najprije jedan stupac, pa se na sirem zaslonu polja slazu u mrezu. */

.jkd-obrazac,
.jkd-popis {
	--jkd-plava: #023349;
	--jkd-plava-tamna: #0E3855;
	--jkd-plava-hover: #1B6BA2;
	--jkd-plava-svijetla: #eaf3f8;
	--jkd-font-naslov: "Secular One", "Roboto", sans-serif;
}

.jkd-poruka {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 6px;
	background: #f1f5f8;
	color: #333;
	font-size: 16px;
}
.jkd-poruka--uspjeh {
	background: #eaf3f8;
	border: 1px solid #023349;
	color: #023349;
}
.jkd-poruka--uspjeh a {
	color: #023349;
	font-weight: 700;
	text-decoration: underline;
}
.jkd-poruka--greska {
	background: #fdeeee;
	border: 1px solid #cf2e2e;
	color: #9a1f1f;
}

/* ---------- Uvodni tekst regate (iznad obrasca) ---------- */
/* Rezervni prikaz ako regata ima "Uvodni tekst" u adminu, a stranica nije uredjena u Elementoru;
   na stranici "Prijava na regatu" taj je tekst sada dio Elementor zaglavlja koje vlasnica sama uredjuje. */
.jkd-obrazac__uvod {
	max-width: 760px;
	margin: 0 auto 20px;
	padding: 20px 24px;
	background: #eef4f8;
	border: 1px solid #cfe0ea;
	border-radius: 10px;
	color: #0b2436;
	font-size: 16px;
	line-height: 1.6;
}
.jkd-obrazac__uvod p:first-child {
	margin-top: 0;
}
.jkd-obrazac__uvod p:last-child {
	margin-bottom: 0;
}
.jkd-obrazac__uvod strong {
	color: #023349;
}

/* ---------- Obrazac ---------- */
.jkd-obrazac {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 24px 32px;
	background: #fff;
	border: 1px solid #e3e9ec;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(15, 23, 42, .03), 0 14px 32px rgba(15, 23, 42, .06);
}
.jkd-obrazac__naslov {
	margin: 0 0 24px;
	color: var(--jkd-plava-tamna);
	font-family: var(--jkd-font-naslov);
	font-size: 27px;
	font-weight: 500;
	text-align: center;
}
.jkd-obrazac__naslov-sekcije {
	margin: 32px 0 14px;
	padding-top: 20px;
	border-top: 1px solid #ebeef1;
	color: var(--jkd-plava-tamna);
	font-family: var(--jkd-font-naslov);
	font-size: 21px;
	font-weight: 500;
}
.jkd-obrazac__naslov-sekcije:first-child,
.jkd-obrazac__naslov + .jkd-obrazac__naslov-sekcije {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.jkd-mreza {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) {
	.jkd-mreza {
		grid-template-columns: 1fr 1fr;
	}
}
.jkd-red {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	position: relative;
}
.jkd-red:last-child {
	margin-bottom: 0;
}
.jkd-red label {
	font-size: 15px;
	font-weight: 600;
	color: #334;
}
.jkd-red input[type="text"],
.jkd-red input[type="tel"],
.jkd-red input[type="number"],
.jkd-red input[type="file"],
.jkd-red input[type="date"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d7dde2;
	border-radius: 6px;
	font-size: 17px;
	box-sizing: border-box;
}
.jkd-red input:focus {
	outline: none;
	border-color: #023349;
	box-shadow: 0 0 0 3px rgba(2, 51, 73, .15);
}
/* "!important" na max-width je nuzan: OceanWP ima pravilo "form input[type=number]{max-width:50px}"
   s vecom specificnoscu od same klase ".jkd-input--usko", pa bi inace ostavilo premalo mjesta za broj. */
.jkd-input--usko {
	max-width: 220px !important;
	padding-right: 10px !important;
}
.jkd-pomoc {
	margin: 2px 0 0;
	color: #6b7280;
	font-size: 14px;
}

.jkd-red--radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 20px;
}
.jkd-opcija {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	color: #333;
	cursor: pointer;
}
.jkd-red--radio .jkd-opcija {
	padding: 10px 16px;
	border: 1px solid #d7dde2;
	border-radius: 999px;
	font-weight: 600;
}
.jkd-red--radio .jkd-opcija:has(input:checked) {
	border-color: #023349;
	background: #eaf3f8;
	color: #023349;
}
.jkd-opcija input {
	margin-top: 3px;
	flex: none;
}

.jkd-posada {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.jkd-posada {
		grid-template-columns: 1fr 1fr;
	}
}
.jkd-posada .jkd-red {
	margin-bottom: 0;
}

.jkd-gumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 6px;
	font-family: var(--jkd-font-naslov);
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}
/* "!important" je nuzan: OceanWP ima vlastito pravilo "body button[type=submit], body button" s vecom
   specificnoscu (dva oznacena selektora) od jedne klase, pa bi inace pregazilo nasu plavu/bijelu boju
   i gumbi bi ispali u temi zadanoj narancastoj. */
.jkd-gumb--sporedni {
	margin-top: 16px;
	background: #fff !important;
	border: 2px solid #023349 !important;
	color: #023349 !important;
}
.jkd-gumb--sporedni:hover {
	background: #eaf3f8 !important;
}
.jkd-gumb--glavni {
	margin-top: 28px;
	width: 100%;
	padding: 16px 22px;
	background: #023349 !important;
	border-color: #023349 !important;
	color: #fff !important;
	font-size: 18px;
}
.jkd-gumb--glavni:hover {
	background: #1B6BA2 !important;
	border-color: #1B6BA2 !important;
}

/* Prijedlozi (autocomplete) naziva broda */
.jkd-prijedlozi {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #d7dde2;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
	overflow: hidden;
}
.jkd-prijedlozi__napomena {
	padding: 8px 14px;
	background: #f6f9fb;
	border-bottom: 1px solid #e3e9ed;
	color: #5b6b77;
	font-size: 12px;
}
.jkd-prijedlozi__stavka {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid #f0f2f4;
	background: #fff;
	text-align: left;
	font-size: 15px;
	cursor: pointer;
}
.jkd-prijedlozi__stavka:last-child {
	border-bottom: 0;
}
.jkd-prijedlozi__stavka:hover,
.jkd-prijedlozi__stavka:focus {
	background: #eaf3f8;
}

/* ---------- Javni popis prijavljenih ---------- */
.jkd-popis {
	max-width: 1100px;
	margin: 0 auto;
}
.jkd-popis__naslov {
	margin: 0 0 20px;
	color: var(--jkd-plava-tamna);
	font-family: var(--jkd-font-naslov);
	font-size: 27px;
	font-weight: 500;
	text-align: center;
}
.jkd-popis__vrh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.jkd-popis__broj {
	margin: 0 0 24px;
	color: #475569;
	font-size: 16px;
}
.jkd-popis__prekidac {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 24px;
	background: #eef4f8;
	border-radius: 999px;
	padding: 4px;
}
/* "!important" je nuzan: OceanWP ima vlastito pravilo "body button[type=submit], body button" s vecom
   specificnoscu od jedne klase, pa bi inace pregazilo nasu plavu/sivu boju (vidljivo narancasto/smedje
   na hover) - isti razlog kao kod .jkd-gumb--sporedni/.jkd-gumb--glavni. */
.jkd-popis__gumb-prikaza {
	border: 0 !important;
	background: transparent !important;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #475569 !important;
	cursor: pointer;
}
.jkd-popis__gumb-prikaza:hover {
	background: #e3edf3 !important;
	color: #023349 !important;
}
.jkd-popis__gumb-prikaza.is-active,
.jkd-popis__gumb-prikaza.is-active:hover {
	background: #023349 !important;
	color: #fff !important;
}
.jkd-popis__kategorija {
	margin: 36px 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid #023349;
	color: var(--jkd-plava-tamna);
	font-family: var(--jkd-font-naslov);
	font-size: 23px;
	font-weight: 500;
}
.jkd-popis__kategorija:first-of-type {
	margin-top: 0;
}
.jkd-popis__broj-u-kat {
	color: #6b7280;
	font-weight: 400;
	font-size: 16px;
}
.jkd-kartice {
	display: none;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 560px) {
	.jkd-kartice {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 900px) {
	.jkd-kartice {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
.jkd-kartica {
	display: flex;
	flex-direction: column;
	border: 1px solid #e3e9ec;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: box-shadow .2s, transform .2s;
}
.jkd-kartica:hover {
	box-shadow: 0 10px 26px rgba(15, 23, 42, .1);
	transform: translateY(-2px);
}
.jkd-kartica__slika {
	height: 170px;
	background-color: #eef4f8;
	background-size: cover;
	background-position: center;
}
.jkd-kartica__sadrzaj {
	padding: 14px 16px 18px;
}
.jkd-kartica__naziv {
	margin: 0 0 4px;
	color: #0f172a;
	font-family: var(--jkd-font-naslov);
	font-size: 19px;
	font-weight: 500;
}
.jkd-kartica__skiper {
	margin: 0 0 6px;
	color: #023349;
	font-size: 15px;
	font-weight: 600;
}
.jkd-kartica__model {
	margin: 0;
	color: #6b7280;
	font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {
	.jkd-kartica {
		transition: none;
	}
}

/* ---------- Popis (list prikaz, zadano) - tablica, preklop na kartice preko .jkd-popis--kartice ---------- */
/* Omot oko tablice je taj koji (po potrebi) vodoravno kliza - sama <table> ostaje prava tablica
   (display: table) da redovi/stupci ostanu poravnati; da je tablica sama display:block, izgubila bi
   pravo tablicno poravnanje i jednostavno bi izlazila izvan ekrana na uzem zaslonu. */
.jkd-popis-tablica-omot {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.jkd-popis-tablica {
	display: table;
	width: 100%;
	margin-bottom: 8px;
	border-collapse: collapse;
}
.jkd-popis--kartice .jkd-kartice {
	display: grid;
}
.jkd-popis--kartice .jkd-popis-tablica-omot {
	display: none;
}
.jkd-popis-tablica th {
	padding: 10px 12px;
	border-bottom: 2px solid #023349;
	color: var(--jkd-plava-tamna);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}
.jkd-popis-tablica td {
	padding: 10px 12px;
	border-bottom: 1px solid #e3e9ec;
	color: #475569;
	font-size: 15px;
	vertical-align: middle;
}
.jkd-popis-tablica tr:hover td {
	background: #f7fafc;
}
/* Crta ispod zadnjeg retka svake LOA grupe u OPEN kategoriji (razdvaja grupe vizualno) - tanja od
   podebljane crte u zaglavlju (2px), ali u istoj boji da se ipak razlikuje od obicne sive crte medju
   redcima. Cjelobrojna sirina (1px), ne necjelobrojna - neki preglednici (npr. mobilni Safari/Chrome)
   necjelobrojne debljine zaokruzuju na najblizi cijeli piksel, pa bi "1,5px" ispalo isto kao obicna
   crta (1px) i razlika bi nestala. */
.jkd-popis-tablica__kraj-grupe td {
	border-bottom: 1px solid #023349;
}
.jkd-popis-tablica th.jkd-popis-tablica__mjera,
.jkd-popis-tablica td.jkd-popis-tablica__mjera {
	text-align: right;
	padding-right: 36px;
}
.jkd-popis-tablica__naziv {
	color: #0f172a;
	font-family: var(--jkd-font-naslov);
	font-size: 16px;
	font-weight: 500;
}
/* Na mobitelu je smislen samo popis (tablica) - nema prekidaca ni kartica, a naslov "PRIJAVLJENI"
   dobije malo vise razmaka iznad sebe da poglavlje ne bude prilijepljeno uz ono prije njega. Ako
   stupci ni tako ne stanu (dugi model broda i sl.), tablicu se smije vodoravno listati prstom unutar
   njenog omota, bez da probije rub zaslona. */
@media (max-width: 760px) {
	.jkd-popis__prekidac {
		display: none;
	}
	.jkd-popis .jkd-kartice {
		display: none !important;
	}
	.jkd-popis .jkd-popis-tablica-omot {
		display: block !important;
	}
	.jkd-popis-tablica th,
	.jkd-popis-tablica td {
		white-space: nowrap;
	}
	.jkd-popis__naslov {
		margin-top: 36px;
	}
}

/* ---------- Mali obrazac "Molim izmjenu u poslanoj prijavi" - bocni/sporedni blok ---------- */
.jkd-izmjena {
	max-width: 420px;
	margin: 0 auto;
	padding: 24px 24px 28px;
	background: #f6f9fb;
	border: 1px solid #dde6ec;
	border-left: 4px solid #023349;
	border-radius: 10px;
}
/* <summary> je ujedno i naslov i gumb za otvaranje/zatvaranje (na racunalu i na mobitelu) - zato
   kursor, bez zadanog trokutica preglednika i s vlastitim +/- znakom koji prati stanje. */
.jkd-izmjena__naslov {
	margin: 0 0 18px;
	padding-right: 28px;
	position: relative;
	color: var(--jkd-plava-tamna, #0E3855);
	font-family: "Secular One", "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .02em;
	cursor: pointer;
	list-style: none;
}
.jkd-izmjena__naslov::-webkit-details-marker {
	display: none;
}
/* "Prijavljeni / Preliminary list" nije sklopivo kao gornja dva - samo skace na popis nize na
   stranici, pa nema donju marginu (nema sadrzaja ispod koji bi tu prazninu opravdao) ni +/- znak,
   nego strelicu dolje koja govori da se stranica pomice, ne otvara. */
.jkd-izmjena--veza {
	display: block;
	padding-bottom: 24px;
	text-decoration: none;
}
.jkd-izmjena__naslov--veza {
	/* Blok, ne inline (span je zadano inline) - inace se kod duljeg teksta koji se prelomi u dva
	   retka (npr. "PRIJAVLJENI / PRELIMINARY LIST" na uzem zaslonu) strelica ispod ("::after",
	   position:absolute) pozicionira prema zadnjem retku umjesto prema cijeloj kutiji i zna ispasti
	   na pogresnom mjestu (lijevo/preko teksta umjesto gore desno). */
	display: block;
	margin-bottom: 0;
}
.jkd-izmjena__naslov.jkd-izmjena__naslov--veza::after {
	content: "\2193";
	position: absolute;
	right: 0;
	top: 0;
}
.jkd-izmjena__naslov::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
}
.jkd-izmjena[open] > .jkd-izmjena__naslov::after {
	content: "\2212";
}
/* Drugi skloplji blok (npr. "Podaci za uplatu") ispod prvog - malo razmaka izmedju njih. */
.jkd-izmjena + .jkd-izmjena {
	margin-top: 20px;
}
.jkd-izmjena__tekst {
	color: #334155;
	font-size: 15px;
	line-height: 1.6;
}
.jkd-izmjena__tekst p {
	margin: 0 0 12px;
}
.jkd-izmjena__tekst p:last-child {
	margin-bottom: 0;
}
.jkd-izmjena__tekst strong {
	color: #023349;
}

/* === JKD Hero slider (Elementor widget "JKD Hero slider", vidi includes/elementor-hero-widget.php) -
   hero slajder potpuno uredljiv u Elementoru (dodavanje/brisanje/uredjivanje slajdova), namjerno rucno
   napisan (bez Prime Slider Dragon) jer je taj widget potvrdjeno nepouzdan na pravom mobilnom Safariju.
   Ista velicina/tipografija/boje kao dosadasnji hero slajderi na /arena-kup/ i /full-moon.../. === */
.jkd-hero-slider { position:relative; width:100%; height:810px; max-height:90vh; overflow:hidden; background:#111; }
.jkd-hero-slider__slajd { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; display:flex; align-items:center; text-decoration:none; }
.jkd-hero-slider__slajd--aktivan { opacity:1; z-index:1; }
.jkd-hero-slider__slika {
	position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover !important; margin: 0 !important;
	transform: scale(1) !important;
	transition: transform 8s linear !important;
}
.jkd-hero-slider__slajd--aktivan .jkd-hero-slider__slika {
	transform: scale(1.12) !important;
}
.jkd-hero-slider__zastor { position:absolute; inset:0; background:#02010185; }
.jkd-hero-slider__sadrzaj { position:relative; z-index:2; padding:0 7%; max-width:840px; color:#fff; }
.jkd-hero-slider__podnaslov { font-family:"Secular One", sans-serif; font-weight:300; font-size:32px; letter-spacing:1px; line-height:1.7; margin:0 0 10px; }
.jkd-hero-slider__naslov { font-family:"EB Garamond", serif; font-weight:700; font-size:63px; letter-spacing:1px; line-height:1; margin:0 0 20px; color:#fff; }
.jkd-hero-slider__opis { font-family:"Secular One", sans-serif; font-weight:300; font-size:18px; line-height:1.8; margin:0; }
@media (max-width:767px) {
	.jkd-hero-slider { height:440px; }
	.jkd-hero-slider__podnaslov { font-size:15px; }
	.jkd-hero-slider__naslov { font-size:18px; }
	.jkd-hero-slider__opis { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
	.jkd-hero-slider__slika { transition: none !important; transform: scale(1) !important; }
}