/* Site-specific overrides, loaded after theme.css.
   theme.css is a 300KB+ minified vendor build with a source map, so anything
   we own lives here instead of being appended to it. */

:root {
  /* Form controls. The palette stays the theme's — orange #ec791e on near-white
     — these just give the values names so the rules below read as a system. */
  --av-radius: 0.625rem; /* 10px. theme default was 4px, which reads dated */
  --av-brd: #d7dce6; /* theme's #e3e6f0 is so pale the fields barely exist */
  --av-brd-hover: #b6bfd0;
  --av-accent: #ec791e;
  --av-ring: rgba(236, 121, 30, 0.16);
  --av-ink: #151b26;
  --av-placeholder: #949eae;
}

/* ==========================================================================
   Form controls
   The theme ships stock Bootstrap 4 fields: 4px corners, a near-invisible
   border, no hover state, a 3.2px translucent focus glow, and <select>s left
   on the browser's native appearance. The rules below replace that with one
   consistent control: 10px corners, a border you can actually see, a hover
   step, a tight two-layer focus state, and a drawn chevron on every select.
   ========================================================================== */

.form-control,
.custom-select,
.input-group-text {
  border-color: var(--av-brd);
  border-radius: var(--av-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}

/* Bootstrap 4 gives fields no hover feedback at all — a large part of why they
   feel inert. One step darker is enough to register as interactive. */
.form-control:hover:not(:disabled),
.custom-select:hover:not(:disabled) {
  border-color: var(--av-brd-hover);
}

/* Replaces BS4's `0 0 0 .2rem rgba(236,121,30,.25)` — a fat, low-contrast glow
   that leaves the border pale. A solid accent border plus a tighter ring reads
   as deliberate and keeps the focused field obvious against the page. */
.form-control:focus,
.custom-select:focus {
  border-color: var(--av-accent);
  box-shadow: 0 0 0 3px var(--av-ring);
}

.form-control::placeholder {
  color: var(--av-placeholder);
  opacity: 1;
}

/* Chrome paints autofilled fields pale yellow and overrides the text colour —
   the single most dated-looking thing a form can do. Repaint them as normal
   fields. The absurd transition delay is the standard trick to outrun the UA's
   own background paint. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--av-ink);
  -webkit-box-shadow: 0 0 0 62.5rem #fff inset;
  caret-color: var(--av-ink);
  transition: background-color 9999s ease-in-out 0s;
}

textarea.form-control {
  min-height: 7.5rem;
  resize: vertical;
}

/* --- Selects -------------------------------------------------------------
   These were the worst offenders: `appearance: auto` means every OS draws its
   own arrow, so the control never matched the rest of the form. Draw our own
   chevron instead and keep the native one switched off. */
select.form-control,
.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23646f79' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

/* IE/old-Edge drew a second arrow next to ours. */
select.form-control::-ms-expand,
.custom-select::-ms-expand {
  display: none;
}

/* Chevron picks up the accent while the field is focused, so the whole control
   moves as one piece rather than the border changing on its own. */
select.form-control:focus,
.custom-select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%23ec791e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select.form-control-lg {
  background-position: right 1.125rem center;
  padding-right: 2.75rem;
}

/* While nothing is chosen a required select still shows "Izaberi lokaciju",
   which is placeholder text and should be greyed like one. The second rule
   keeps the open dropdown list readable, since options inherit that grey. */
select.form-control:invalid {
  color: var(--av-placeholder);
}

select.form-control option {
  color: var(--av-ink);
}

/* --- Date fields ---------------------------------------------------------
   Markup is `.u-datepicker > (.input-group-prepend > .input-group-text) +
   input`, and each half carried its own 1px border and its own corner radii.
   That painted a doubled seam down the middle and left the outer left corners
   square — the visible "two boxes glued together" look. Move the border onto
   the wrapper and strip the children, so icon and field are one control that
   highlights as one on focus. */
.u-datepicker {
  background-color: #fff;
  border: 1px solid var(--av-brd);
  border-radius: var(--av-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.u-datepicker:hover {
  border-color: var(--av-brd-hover);
}

.u-datepicker:focus-within {
  border-color: var(--av-accent);
  box-shadow: 0 0 0 3px var(--av-ring);
}

/* !important because the theme pins #checkInLabel / #checkOutLabel and the
   `bg-white` / `border-left-0` utilities on these same elements. */
.u-datepicker > .input-group-prepend > .input-group-text,
.u-datepicker > .form-control {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The icon and the field were each padded as if they were separate controls,
   which left a wide dead gap between the calendar glyph and the text. */
.u-datepicker > .input-group-prepend > .input-group-text {
  padding-right: 0.5rem;
}

/* `height` on .form-control is a fixed calc() that budgets for the 2px border
   we just moved to the wrapper, so the wrapper ended up 2px taller than the
   selects beside it. Letting the field size to its own padding puts date and
   select fields back on the same baseline — including inside the hero pill,
   where a 2px difference showed as a visible step. */
.u-datepicker > .form-control {
  padding-left: 0.5rem;
  height: auto;
  align-self: stretch;
}

/* flatpickr writes the chosen date into a readonly input. BS4 greys readonly
   fields out, and the theme's `text-muted` left the chosen date light grey —
   a picked date should read as a real value. */
.u-datepicker > .form-control[readonly] {
  color: var(--av-ink);
  cursor: pointer;
}

/* Calendar popover, so it matches the corner radius of the field it drops from.
   Its orange header and day states already come from the theme. */
.u-datepicker .flatpickr-calendar {
  border-radius: var(--av-radius);
  box-shadow: 0 0.75rem 2.25rem rgba(21, 27, 38, 0.14);
}

.u-datepicker .flatpickr-months {
  border-top-left-radius: var(--av-radius);
  border-top-right-radius: var(--av-radius);
}

/* --- Homepage hero search bar --------------------------------------------
   From lg up this is one pill: rounded select, two date segments, rounded
   submit. The wrapper border above would have broken it into three boxes, so
   drop the left edge and the radius and let each segment's right border act as
   the divider. */
@media (min-width: 992px) {
  #valiPage .u-datepicker {
    border-left: 0;
    border-radius: 0;
  }

  #valiPage .u-datepicker:focus-within {
    box-shadow: none;
  }
}

/* Below lg the pill unstacks into separate fields, and the theme squared every
   corner off (`border-radius: 0 !important`) — stacked square boxes are
   exactly the look we're replacing everywhere else. */
@media (max-width: 991.98px) {
  #valiPage .form-radius,
  #valiPage .form-radius-2,
  #valiPage .form-radius-3,
  #valiPage .form-button {
    border-radius: var(--av-radius) !important;
  }
}

/* ==========================================================================
   Mobile overflow fixes
   ========================================================================== */

/* FAQ accordion (/podrska/).
   .card-collapse__btn-arrow is rotated -90deg. Rotation does not change the
   layout box, so as a stretched flex item of a two-line button the span was
   ~54px tall and its rotated painted box stuck ~20px past the button — enough
   to give the whole page a horizontal scrollbar on mobile. Keeping the arrow
   centred and on a single line makes the painted box square again. */
.card-collapse__btn {
  align-items: center;
}

.card-collapse__btn-arrow {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Vehicle cards (/vozila/ and /rezervacija/).
   The thumbnail carries `margin-right: 150px` below 992px, so the image plus
   its margin reserves 300px inside a card that is only ~288px wide on a 320px
   phone — the card overflowed the screen. Drop the margin on the narrowest
   phones only; from 360px up there is room for it, so tablets and the common
   375px phones keep the spacing they have today. */
@media (max-width: 359.98px) {
  .cars .test,
  .cars .imgCamper,
  .reservation .imgMob,
  .reservation .imgCamper {
    margin-right: 0 !important;
  }
}