/* ===== Brand boje — akcent #feb406 ===== */
/* Renteon narančastu (#FF8E42) mijenjamo u našu #feb406.
   Pokriva sve što koristi var(--color-accent): gumbe, aktivna stanja,
   cijene, datepicker, okvire, tiles... */
:root {
	--color-accent: #feb406;
}

/* Inline SVG ikone u markupu imaju hardkodiran #FF8E42 (varijabla ih ne hvata) */
[stroke="#FF8E42"] {
	stroke: #feb406;
}

[fill="#FF8E42"] {
	fill: #feb406;
}

/* ===== Korak 1 — Search forma ===== */
/* Crna traka forme: ostaje crna, ali 50% prozirna */
.booking_wrapper .form-booking-wrapper {
	background-color: rgba(0, 0, 0, 0.5);
}

/* Sva polja poravnata po dnu ćelije — ništa više ne "pada" niže */
.booking_wrapper .form[data-show] {
	align-items: end;
}

/* Manje, urednije labele */
.booking_wrapper .form-booking-wrapper .form label {
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

/* "Datum i vrijeme preuzimanja" — bez prelamanja u dva reda */
.booking_wrapper .form .time-wrapper > label {
	white-space: nowrap;
}

/* Datum + vrijeme: uži unutarnji razmak, sve stane u jedan red */
.booking_wrapper .form .time-wrapper span {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 8px;
	margin-top: 5px;
}

/* Kompaktnija polja */
.booking_wrapper .form-booking-wrapper .form input,
.booking_wrapper .form-booking-wrapper .form select {
	padding: 0 12px;
	font-size: 14px;
}

/* Bijeli tanki chevron na dropdownima (umjesto crnog debelog) */
.booking_wrapper .form-booking-wrapper .form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: calc(100% - 12px) center;
	padding-right: 32px;
}

/* Gumb "Započni rezervaciju" u liniji s poljima */
.booking_wrapper .form .submit-wrapp {
	margin: 0;
	align-items: flex-end;
}

/* Gumb: tekst centriran, uvijek u jednom redu */
.booking_wrapper .form-booking-wrapper .form .submit-wrapp button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.2;
	min-height: 50px;
	padding: 0 16px;
}

/* "Uredi rezervaciju" — manji, diskretniji */
.booking_wrapper .toggle_forms {
	font-size: 15px;
	margin-top: 20px;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
}

.booking_wrapper .toggle_forms:hover {
	opacity: 1;
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
	/* Crna traka preko cijele širine ekrana (poništava theme container margine) */
	.booking_wrapper .form-booking-wrapper {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 30px 22px;
	}
}

/* ===== Korak 2 — Rezultati i kartice vozila ===== */
/* Nazivi vozila — bijeli (vendor default je navy, nevidljiv na tamnoj pozadini)
   + razmak između naslova i slike vozila */
.booking_wrapper .carsList-item h3 {
	color: #fff;
	margin-bottom: 14px;
	font-size: 18px;
}

/* Vendor fiksira swiper na 270px — auto visina miče prazan prostor ispod slike */
.booking_wrapper .carsList-item .swiper {
	height: auto;
	margin-bottom: 18px;
}

.booking_wrapper .carsList-item .swiper-slide {
	height: auto;
}

/* Cjenovnik: cijene u jednom redu, gumb "Odaberi" pune širine ispod */
.car_pricing .car_pricing_total .pricewrapp {
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	gap: 4px;
}

.car_pricing .car_pricing_total .price_car_total {
	padding: 12px 10px;
}

.booking_wrapper .carsList-item .price_car_total_button {
	flex: 1 1 100%;
	margin: 6px 4px 2px !important;
	text-align: center;
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
	.booking_wrapper .carsList {
		margin-top: 30px;
	}

	/* Kartica bez lijevog/desnog paddinga — sadržaj pune širine */
	.booking_wrapper .carsList-item {
		padding: 24px 0;
	}

	/* Manji font cijena da "dnevno" i "Ukupno" stanu u isti red */
	.car_pricing .car_pricing_total .price_car_total {
		font-size: 22px;
		padding: 8px 4px;
	}
}

/* ===== Koraci 3-5 — Osiguranja, dodaci, checkout ===== */
/* Gumbi "Sljedeći korak" i slični — bez prelamanja teksta u dva reda */
.booking_wrapper .next_steps button,
.booking_wrapper .next_steps .button {
	white-space: nowrap;
	padding: 12px 30px;
}

/* ============ KORAK 3 — OSIGURANJA I DODACI ============ */

/* Osiguranja: sve lijevo — checkbox | štit | tekst (rasteže se) | cijena skroz desno.
   Vendor koristi space-between pa ikone "plutaju" ovisno o širini teksta. */
.available_insurances .single_insurance {
	justify-content: flex-start;
	text-align: left;
}

.available_insurances .single_insurance .insurence_details {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.available_insurances .single_insurance .insurance_price {
	margin-left: auto;
}

/* Dodaci: qty kontrole + cijena uredno desno u svojoj koloni */
.available_addons .single_addon .qty_total_group {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

/* Mobile: umjesto centriranog stupca — sve poravnato lijevo.
   Osiguranja: checkbox + štit JEDAN POKRAJ DRUGOG u istom redu,
   tekst ispod pune širine, cijena ispod desno. */
@media (max-width: 767px) {
	.available_insurances .single_insurance {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 16px;
	}

	.available_insurances .single_insurance .insurence_details {
		flex: 1 1 100%;
	}

	.available_insurances .single_insurance .insurance_price {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.available_addons .single_addon {
		align-items: flex-start;
	}

	.available_addons .single_addon .addon_detail {
		text-align: left;
	}

	.available_addons .single_addon .qty_total_group {
		justify-content: flex-start;
	}
}

/* ============ KORAK 5 — PODACI O KLIJENTU ============ */

/* Salient gazi vendorov padding pravilom
   "body .container .container:not(...) { padding: 0 !important }" (spec. 0,5,1)
   → naslov viri iz plavog boksa, forma dodiruje dno.
   ID selektor (1,1,1) pobjeđuje — vraćamo prostor gore i dolje. */
main#step5.stepFifth {
	padding: 50px 24px 60px !important;
}

@media (min-width: 768px) {
	main#step5.stepFifth {
		padding: 70px 40px 90px !important;
	}
}

/* Slova u poljima forme — crna (tema/autofill zna nametnuti bijelu).
   Submit gumbi su isključeni — oni su tamni i trebaju bijeli tekst! */
.booking_wrapper.stepFifth .finalForm form input:not([type=submit]):not([type=button]),
.booking_wrapper.stepFifth .finalForm form textarea,
.booking_wrapper.stepFifth .finalForm form select,
.finalForm .form_input {
	color: #000 !important;
}

.finalForm input::placeholder,
.finalForm textarea::placeholder {
	color: #8a8a8a;
}

/* Tamni (navy/crni) gumbi — UVIJEK bijeli tekst */
#procesToPaymentButton,
#processToUpdateBooking,
.booking_wrapper input[type=submit],
.booking_wrapper button[type=submit],
.finalForm input[type=submit],
.finalForm .buttonProcess,
.apply-booking-changes,
.sendEmailButton {
	color: #fff !important;
}

/* ===== Mobile — puna širina renteon sekcija (linija logotipa) ===== */
/* Na mobitelu se svi Renteon containeri poravnavaju s rubom theme containera
   (vertikalna linija logotipa). Dva uzroka neporavnanja:
   1) Renteon dodaje padding-inline: 20px na .booking_summary .container
   2) Salient ugniježđene .container elemente ponovno sužava na 88% širine */
@media (max-width: 767px) {
	.booking_wrapper.container,
	.booking_wrapper .container,
	.booking_summary .container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ===== Modal — Uredi rezervaciju (edit booking) ===== */
/* Vendor modal je pun inline stilova (float + flex + transparentna polja) pa je
   raspored kaotičan, a datum/vrijeme/kategorija nevidljivi na bijeloj podlozi.
   ID selektori + !important pobjeđuju inline stilove. */

.modal-overlay {
	overflow-y: auto;
}

#edit_booking_criteria_dialog .modal-content {
	margin: 140px auto 40px !important;
	width: 440px;
	max-width: calc(100vw - 32px);
	padding: 28px 24px !important;
	box-sizing: border-box;
}

/* Svaki red forme: ikona + polje, čisti flex bez float-a */
#frm_edit_booking_criteria > div:not(.location-delivery-collection-checkbox) {
	float: none !important;
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100% !important;
	margin: 0 0 14px !important;
}

/* Prazni "spacer" divovi — van */
#frm_edit_booking_criteria > div:empty {
	display: none !important;
}

#frm_edit_booking_criteria svg {
	flex-shrink: 0;
	float: none !important;
}

/* Selecti (lokacije, kategorija) — vidljivi, na svijetloj podlozi */
#frm_edit_booking_criteria select {
	background-color: #F1F0F0 !important;
	border: none !important;
	border-radius: 6px !important;
	height: 40px !important;
	padding: 0 12px !important;
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	color: #000 !important;
	display: block !important;
}

/* Datum + vrijeme: uvučeno ispod selecta (ikona 30px + razmak), u jednom redu */
#frm_edit_booking_criteria .time-wrapper {
	margin-left: 42px !important;
	width: calc(100% - 42px) !important;
}

#frm_edit_booking_criteria .time-wrapper span {
	display: flex !important;
	gap: 10px;
	margin: 0 !important;
	width: 100%;
}

#frm_edit_booking_criteria .time-wrapper input {
	background-color: #F1F0F0 !important;
	border: none !important;
	border-radius: 6px !important;
	height: 40px !important;
	width: 130px !important;
	padding: 0 12px !important;
	float: none !important;
	color: #000 !important;
	box-sizing: border-box;
}

#frm_edit_booking_criteria .select-time {
	padding: 0 !important;
	float: none !important;
	flex: 1 1 auto;
}

#frm_edit_booking_criteria .select-time select {
	width: 100% !important;
}

/* Gumbi — desno, uredni */
#frm_edit_booking_criteria .form_buttons {
	justify-content: flex-end !important;
	gap: 10px;
	margin: 20px 0 0 !important;
}

#frm_edit_booking_criteria .form_buttons .button {
	padding: 10px 22px;
	border-radius: 24px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	#edit_booking_criteria_dialog .modal-content {
		margin: 90px auto 30px !important;
	}
}

/* ===== Darcode ===== */
.booking_wrapper .carsList-item .thumb img {
    width: auto !important;
    height: auto !important;
}


@media (min-width: 1024px) {
    .booking_wrapper .carsList-item {
        /* height: 620px; */
        width: calc(33.3333333333% - 15px);
    }
}


.booking_wrapper .carsList-item{
       background: #181616 !important;
    }

/* ===== DC2 ===== */
@media (max-width: 768px) {
    .single_addon,
    .single_addon * {
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
		text-align: center;
		line-height: 1.4;
    }
    .single_addon {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center !important;
        padding: 16px !important;
    }
    .addon_icon {
        display: inline-block !important;
        width: 28px !important;
        height: 28px !important;
    }
    .addon_detail p:empty {
        display: none !important;
    }
}

/* ===== Datepicker - Mobile ===== */
@media (max-width: 767px) {
    .ui-datepicker.ui-widget,
    .ui-datepicker.ui-widget .ui-widget {
        font-size: 14px !important;
    }

    .ui-datepicker.ui-widget {
        max-width: calc(100vw - 16px) !important;
    }
}