.available_insurances .single_insurance_tile{
  background-color: var(--color-light-background);
  color: var(--color-accent-second);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 35px;
  cursor: pointer;
  position: relative;

  display: grid;
  grid-template-areas:
    "title"
    "desc"
    "footer";
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}

/* desktop: samo povećaj razmake/fontove po želji (ne vraćamo u row layout) */
@media (min-width: 768px){
  .available_insurances .single_insurance_tile{
    gap: 16px;
  }
  .available_insurances .single_insurance_tile .insurence_details p{
    font-size: 16px;
  }
}

/* title / desc */
.available_insurances .single_insurance_tile .insurence_details h3{
  grid-area: title;
  color: var(--color-accent-second);
  font-weight: 700;
  font-size: 24px;
  font-family: "Barlow Condensed", sans-serif;
  margin: 0;
}

.available_insurances .single_insurance_tile .insurence_details{
  grid-area: desc;
}

.available_insurances .single_insurance_tile .insurence_details p{
  font-size: 14px;
  margin: 0;
  padding: 0;
}

/* footer row: cijena centar + checkbox desno */
.available_insurances .single_insurance_tile .insurance_price{
  grid-area: footer;
  justify-self: center;
  align-self: end;

  font-family: "Barlow Condensed", sans-serif;
  display: flex;
  align-items: baseline;
  font-weight: 800;
  gap: 10px;
  font-size: 32px;
  flex-shrink: 0;
}

.available_insurances .single_insurance_tile .insurance_price span{
  font-weight: 400;
  font-size: 14px;
  flex-shrink: 0;
}

.available_insurances .single_insurance_tile .addon_checkbox{
  grid-area: footer;
  justify-self: end;
  align-self: end;
}

/* active stanje */
.available_insurances .single_insurance_tile.active{
  background-color: var(--color-accent);
}

/* opcionalno: CSS-only active bez klase (ako browser podržava :has) */
.available_insurances .single_insurance_tile:has(.insurance_radio:checked){
  background-color: var(--color-accent);
}


.available_insurances_tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* razmak između tileova */
}


@media (min-width: 768px){
  .available_insurances_tiles .single_insurance_tile{
    min-height: 260px;
  }
}

.available_insurances_tiles .single_insurance_tile{
  grid-template-rows: auto auto 1fr;
}



.available_insurances_tiles{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr; /* mobile: full width */
  gap: 20px;
}

@media (min-width: 768px){
  .available_insurances_tiles{
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 24px;
  }
}

/* === ADDONS TILES – WIDE CARDS WITHOUT OVERFLOW === */

.available_addons_tiles{
  display: grid;
  gap: 24px;

  /* ključno: tile ne smije biti širi od kontejnera */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

@media (min-width: 1200px){
  .available_addons_tiles{
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  }
}

.available_addons_tiles .single_addon_tile{
  background-color: var(--color-light-background);
  color: var(--color-accent-second);
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease;

  display: grid;
  grid-template-areas:
    "detail detail"
    "qty checkbox";
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 18px;
}

.available_addons_tiles .single_addon_tile:hover{
  box-shadow: inset 0 0 0 2px var(--color-accent-second);
}

.available_addons_tiles .single_addon_tile.selected{
  background-color: var(--color-accent);
}

/* TOP */
.available_addons_tiles .single_addon_tile .addon_detail{
  grid-area: detail;
  align-self: start;
  min-height: 0;
}

.available_addons_tiles .single_addon_tile .addon_detail h5{
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  line-height: 26px;
  margin: 0;
  font-weight: 700;
}

.available_addons_tiles .single_addon_tile .addon_detail p{
  font-size: 14px;
  margin: 10px 0 0 0;
}

@media (min-width: 768px){
  .available_addons_tiles .single_addon_tile .addon_detail p{
    font-size: 16px;
  }
}

/* BOTTOM LEFT */
.available_addons_tiles .single_addon_tile .qty_total_group{
  grid-area: qty;
  align-self: end;

  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 90px; /* mjesta za + / − */
}

.available_addons_tiles .single_addon_tile .addon_qty{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

/* PRICE */
.available_addons_tiles .single_addon_tile .addon_price{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 28px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.available_addons_tiles .single_addon_tile .addon_price span{
  font-weight: 400;
  font-size: 14px;
}

/* BOTTOM RIGHT */
.available_addons_tiles .single_addon_tile .checkbox_qty{
  grid-area: checkbox;
  align-self: end;
  justify-self: end;
}

@media (min-width: 992px){
  .available_addons_tiles .single_addon_tile .qty_total_group{
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .available_addons_tiles .single_addon_tile .addon_price{
    margin-left: auto; /* gurne cijenu udesno unutar lijevog bloka */
  }
}


.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sendEmailButton {
    width: auto;
    padding: 8px 20px;
    height: 40px;
    margin-top: 20px;
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.big_text {
  height: 100px;
}

.captcha_container {
  margin-top: 20px;
}

.no_selection_heighlight.selected {
  background-color: var(--color-light-background) !important;
}

.no_selection_heighlight.active {
  background-color: var(--color-light-background) !important;
}


/*pretty checkbox*/

.addon_checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.addon_checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.addon_icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    transition: 0.25s ease;
    background: currentColor;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.addon_checkbox input:checked + .addon_icon {
    background: currentColor;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 12.5 L10.5 16 L17 8' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 12.5 L10.5 16 L17 8' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.addon_checkbox {
    width: 60px;
    height: 60px;
}

.addon_icon {
    width: 60px;
    height: 60px;
}

.addon_icon {
    background-color: var(--color-accent-second);
}


.addon_checkbox input:checked + .addon_icon {
    background-color: var(--color-accent);
}

.checkbox_qty {
  display: flex;
}

.addon_qty {
  display: none;
}

.insurance_radio {
  width: 200px;
}

.pricewrapp {
  border: 4px solid var(--color-accent);
  border-radius: 10px;
}

.price_car_total_button {
  margin-top: 9px !important;
}


.coupon_code_input {
    box-sizing: border-box;
    margin-top: 5px;
}


.select-country {

    background-color: #F1F0F0;
    width: calc(100%);
    border-radius: 5px;
    border: none;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    &:focus,
    &:active {
        outline: none;
    }


}

.automargin {
    margin: auto !important ;
}

.coupon-container {
  margin-top: 15px;
  border-radius: 10px;
  border: 4px solid var(--color-accent-second);
  padding: 5px;
  float:none; 
  display: flex;
  margin-left: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;

}

input.coupon-code {
  background-color: transparent;
  color: var(--color-accent-second);
  border: 0px;
  outline: 0px;
  width: 100%;
  box-sizing: border-box;
 
}

.apply-coupon-code {
  margin-left: 0;
  max-width: 100%;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;    
    background: rgba(0,0,0,0.5);
    display: none; /* hidden by default */
    z-index: 9999;
    margin: 0px !important;
}

.modal-content {
    background: white;
    padding: 20px;
    width: 450px;
    margin: 100px auto;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .g-recaptcha {
      display: block;
    }

    .modal-content {
      width: 340px;
  }
}

.recaptcha-responsive {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.recaptcha-responsive .g-recaptcha {
    transform-origin: 0 0;
}

.edit_booking_form_item {
  display: flex;  
  margin-left: 5px;
}

.apply-booking-changes {
  background-color: var(--color-accent-second);
  color: var(--color-white);
  border-radius: 8px;
  padding: 5px;
  margin: 10px;
  cursor: pointer;
  display: flex;
  width: auto;
  float: right;
}
.hidden {
  display: none !important;
}


.location-dropdown-small{
  --color-accent-second-inner: var(--color-accent-second);
  float:left;
  background-color: transparent; 
  border: none;
  color: var(--color-accent-second);
  width: 95%;
  margin-left: 5px;
}

.location-dropdown-small option  {
  float:left;
  background-color: transparent; 
  border: none;
}

.color-accent-second  {
  color: var(--color-accent-second);
}

.location-delivery-collection-checkbox{
  color: var(--color-accent-second);
  float:left; 
  display: flex; 
  margin-left: 45px;  
  width: 80%; 
  font-size: small;
}



.autowidth {
  width: auto !important;
  float: left;
}

.form_buttons.edit_booking_form_item.form_buttons  {
  margin-top: 40px;
  height: 50px;
  width: 100%;
   display: flex;
    justify-content: flex-end; /* gura gumbe desno */
    gap: 0px; /* razmak između gumba */
}

.qty_total_group {
  display: flex;
}

.addon_detail {
  height: -webkit-fill-available;
  flex-direction: column;
  justify-content: center;
  display: flex;
}


.delivery_collection_label {
  display: inline-flex;          /* ne block */
  align-items: center;           /* 🔑 vertikalno poravnanje */
  gap: 8px;
  cursor: pointer;
  margin-top: 8px;
}

.delivery_collection_label input {
  width: 18px !important;
  height: 18px !important;
  margin: 0;                     /* 🔑 makni default margin */
}

.time-wrapper span {
  margin-top: 5px;
}

.submit-wrapp {
  align-items: flex-start;
  margin-top: 15px;

}



.additional-insurance-currency {
  font-size: 14px;
  font-weight: 400;
}


.additional-insurance-items {
    width: 50%;
  margin-top: 30px;
  float: right;
}

.additional-insurance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.additional-insurance-label {
    text-align: left;
}

.additional-insurance-right {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.additional-insurance-value {
    font-weight: 600;
}


div.additionalInsuranceInfoContainer {
  margin-top: 20px;
}


/* Search form — two-column option only.
   Nothing here applies unless the "Search form in two columns" setting is on,
   which adds .renteon-form-two-columns to .form-booking-wrapper. The default
   layout is left entirely to style.css so existing sites are untouched.
   :not(.form-edit-reservation) — that form keeps its own 4-column layout. */

/* Labels are blocks holding bare text + a width:100% control. In a wide column
   both fit on one line and the control overflows. Force text above, control
   below; 6px matches .time-wrapper so grid rows line up. */
.form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Date needs more room than "13:00". */
.form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) .time-wrapper span {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

/* 20px each side ate more than the text needed. */
.form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) input,
.form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) select {
  padding-inline: 10px;
}

.form-booking-wrapper.renteon-form-two-columns .form .submit-wrapp button {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .booking_wrapper .form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  /* style.css spans this across both columns and centers it, leaving a hole
     next to the promo code. */
  .booking_wrapper .form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) .submit-wrapp {
    grid-column: auto;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .booking_wrapper .form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) .submit-wrapp button {
    width: auto;
    min-width: 220px;
  }

  .booking_wrapper .form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) > label,
  .booking_wrapper .form-booking-wrapper.renteon-form-two-columns .form:not(.form-edit-reservation) .time-wrapper > label {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .additional-insurance-items {
    width: 100%;
    float: none;
  }

    .ui-datepicker {
        font-size: 11px;          /* default ispadne ~14–16px; 11px = ~30% manji kalendar */
        max-width: calc(100vw - 16px);   /* sigurnosna ograda da nikad ne prijeđe viewport */
    }

  .additional-insurance-item {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .additional-insurance-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .additional-insurance-right {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .booking_step_details .total_info,
  .booking_step_details .choosed_insurance_and_extras,
  .booking_step_details .additionalInsuranceInfoContainer,
  .booking_step_details .booking_totals,
  .booking_step_details .total_price {
    min-width: 0;
  }

  .booking_step_details .total_info .booking_totals .total_price {
    font-size: 28px;
  }
}

/* Cars list: reveal once ready.
   WordPress adds loading="lazy" to most car images, so cards fill in one by
   one. Hidden until renteon_reveal_cars_list (custom.js) says the above-the-
   fold images are done.
   The 1600ms delay is a fail-safe: if that JS never runs, CSS still reveals
   the list. !important survives themes that reset animation-duration to
   0.01ms under prefers-reduced-motion. */

@keyframes renteon-cars-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.carsList {
  opacity: 0;
  animation: renteon-cars-reveal 260ms ease 1600ms forwards !important;
}

.carsList.renteon-cars-ready {
  animation: renteon-cars-reveal 260ms ease 0ms forwards !important;
}

/* Below-the-fold images stay lazy; this keeps them from flashing as white
   holes. --color-light-background is background-only in style.css. */
.carsList .thumb.carImage {
  background-color: var(--color-light-background, #f5f5f5);
}

/* "Please wait" dots.
   style.css animates `l1 1s steps(4)` from clip-path: inset(0 100% 0 0), so
   the first of four frames is empty and the cycle reads as flicker:
   nothing -> 1 -> 2 -> 3. Three frames here, none empty.
   Colour is left alone (--color-accent from style.css).
   !important: themes commonly reset animation-duration to 0.01ms under
   prefers-reduced-motion, which spins this ~100k times a second. Specificity
   decides between two !important rules, and (0,2,0) beats `*`. */

.booking_wrapper .payment_loader {
  clip-path: inset(0 66.66% 0 0);
  animation: renteon-dots 1.2s steps(1, end) infinite !important;
}

/* 66.66% = first dot only, 33.33% = first two, 0 = all three. */
@keyframes renteon-dots {
  0%,   32%  { clip-path: inset(0 66.66% 0 0); }
  33%,  65%  { clip-path: inset(0 33.33% 0 0); }
  66%,  100% { clip-path: inset(0 0 0 0); }
}

/* style.css also sets cursor: wait, which adds the OS spinner on top of the
   dots - two loading indicators at different speeds. */
.booking_wrapper .renteon-busy-overlay,
.booking_wrapper.renteon-is-busy .button,
.booking_wrapper.renteon-is-busy button,
.booking_wrapper.renteon-is-busy input[type="submit"],
.booking_wrapper.renteon-is-busy a.choose-car {
  cursor: default;
}

/* ==========================================================================
   Booking summary grid: do not let a foreign element take a cell
   --------------------------------------------------------------------------
   style.css turns .booking_summary .container into a 4-column grid with named
   areas, but only .booking_step_details is pinned (grid-area: item5). The four
   step headings rely purely on auto-placement, so ANY extra grid item shifts
   them one cell to the right - the fourth then wraps to the next row.

   .container is a generic class name, and themes commonly carry the Bootstrap
   clearfix on it:  .container:before, .container:after { content: " " }
   Those pseudo-elements become grid items here. Reported on a customer site,
   and it persisted with their own overrides removed.

   Two defences: drop the inherited pseudo-elements, and pin each step to its
   area so auto-placement cannot move them even if something else appears.
   ========================================================================== */

.booking_summary .container::before,
.booking_summary .container::after {
	content: none;
}

@media (min-width: 1200px) {
	.booking_summary .container > .step-first  { grid-area: item1; }
	.booking_summary .container > .step-second { grid-area: item2; }
	.booking_summary .container > .step-third  { grid-area: item3; }
	.booking_summary .container > .step-fourth { grid-area: item4; }
}

/* ==========================================================================
   Anchor price ("Show anchor prices" option)
   --------------------------------------------------------------------------
   A smaller price under vehicle, insurance and addition prices and in the
   booking summary. Hovering or focusing it (tap on touch screens) shows the
   anchor date; the date text stays readable by screen readers meanwhile.

   The price blocks are flex rows of amount and currency, and the row decides
   how wide a block is and how far it may shrink. The anchor price is taken
   out of the flow into extra bottom padding, so the row lays out exactly as
   it does without one.
   ========================================================================== */

.car_pricing .car_pricing_total .price_car_total:has(> .renteon-anchor-price),
.available_insurances .single_insurance .insurance_price:has(> .renteon-anchor-price),
.available_insurances .single_insurance_tile .insurance_price:has(> .renteon-anchor-price),
.available_addons .single_addon .addon_price:has(> .renteon-anchor-price),
.available_addons .single_addon_tile .addon_price:has(> .renteon-anchor-price) {
	position: relative;
	padding-bottom: 20px;
}

/* On top of the block's own 22px padding from style.css. */
.car_pricing .car_pricing_total .price_car_total:has(> .renteon-anchor-price) {
	padding-bottom: 42px;
}

/* style.css fixes the list addon price at 58px, one line high. */
.available_addons .single_addon .addon_price:has(> .renteon-anchor-price) {
	box-sizing: border-box;
	height: auto;
	min-height: 58px;
}

.renteon-anchor-price {
	/* Small: the line carries the "Anchor price" label as well, and the price blocks
	   it sits under are narrow. */
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

/* A nested <small> would shrink again; the label only reads lighter than the amount. */
.renteon-anchor-price-label {
	font-size: inherit;
	font-weight: 400;
}

.price_car_total > .renteon-anchor-price,
.insurance_price > .renteon-anchor-price,
.addon_price > .renteon-anchor-price {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

.car_pricing .car_pricing_total .price_car_total > .renteon-anchor-price {
	bottom: 22px;
}

/* Summary: its own line under the total. */
.totalAdditions > .renteon-anchor-price {
	position: relative;
	display: block;
	font-size: 12px;
	text-align: right;
}

.renteon-anchor-price-tooltip {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.renteon-anchor-price:hover .renteon-anchor-price-tooltip,
.renteon-anchor-price:focus .renteon-anchor-price-tooltip {
	left: 50%;
	bottom: calc(100% + 8px);
	z-index: 10;
	width: max-content;
	max-width: 220px;
	height: auto;
	margin: 0;
	padding: 8px 10px;
	overflow: visible;
	clip-path: none;
	transform: translateX(-50%);
	border-radius: 8px;
	background-color: var(--color-accent-second);
	color: var(--color-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.renteon-anchor-price:hover .renteon-anchor-price-tooltip::after,
.renteon-anchor-price:focus .renteon-anchor-price-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--color-accent-second);
}

/* Summary totals sit at the right edge: open the tooltip leftwards. */
.totalAdditions .renteon-anchor-price:hover .renteon-anchor-price-tooltip,
.totalAdditions .renteon-anchor-price:focus .renteon-anchor-price-tooltip {
	left: auto;
	right: 0;
	transform: none;
}

.totalAdditions .renteon-anchor-price:hover .renteon-anchor-price-tooltip::after,
.totalAdditions .renteon-anchor-price:focus .renteon-anchor-price-tooltip::after {
	left: auto;
	right: 12px;
	margin-left: 0;
}

/* ==========================================================================
   Pricelist history page (PRICELISTS-HISTORY) - the downloaded daily CSVs,
   newest first. Colours come from the theme; only spacing and rules here.
   ========================================================================== */

.renteon-pricelist-history {
	overflow-x: auto;
}

.renteon-pricelist-history-table {
	width: 100%;
	border-collapse: collapse;
}

.renteon-pricelist-history-table th,
.renteon-pricelist-history-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-grey);
	text-align: left;
	white-space: nowrap;
}