*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
main {
  flex: 1 0 auto;
}
header,
footer {
  flex-shrink: 0;
}

select:user-valid,
input:user-valid {
  outline-color: green !important;
  border-color: green !important;
}

select:user-invalid,
input:user-invalid {
  outline-color: red !important;
  border-color: red !important;
  background-color: rgb(255, 0, 0, 0.1) !important;
}

.form-floating > label.notes {
  font-size: 0.85em;
}

#res:hover {
  background-color: #fde16d !important;
  color: black !important;
  cursor: pointer;
}

#res a:hover {
  color: black !important;
}

#res a {
  text-decoration: none;
}

#country::placeholder {
  color: black;
  opacity: 1;
}

#search::-ms-input-placeholder,
#country::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: black;
}

#results-country {
  position: absolute;
  /* width: clamp(150px, 15rem, 350px); */
  width: 100%;
  height: 100px;
  background-color: hsla(210 15.8% 89% / 0.9);
  padding: 3px !important;
  overflow: auto;
  z-index: 10;
}

.gri {
  background-color: #e9ecef !important;
}

/*dezactiveaza afisarea numelui limbii selectate */
a.notranslate span:first-of-type {
  display: none !important;
}

.btn-primary:hover {
  background-color: #00439b !important;
  transition: all 500ms;
  scale: 110%;
}

.btn-secondary:hover {
  scale: 110%;
  transition: all 500ms;
  background-color: #4f5153 !important;
}

/*      formatare nr telefon       */
.iti {
  width: 100% !important;
  top: -30px;
  left: -10px;
}
.iti__country-container {
  margin-left: 0.5rem !important;
}
#phone {
  margin-left: 9px !important;
}
#phone_label {
  position: relative;
  z-index: 2;
  left: 5px;
  font-size: 0.8rem;
}
/* ---------------------------------------- */

/*CSP*/
#rezmenu,
.backgroundimage {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5)),
    url("../images/rentacar.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
}
/*
#rezmenu > div:first-child {
    max-width: 550px;
    width: 100%; 
    margin-top: -10rem
} */

/* nav + footer */
nav {
  background-color: hsla(210 15.8% 89% / 0.9);
}
nav > div > * {
  opacity: 1;
}
footer {
  bottom: 0;
  width: -moz-available;
  width: -webkit-fill-available;
  background-color: hsla(210 15.8% 89% / 1);
}
.footer-child {
  max-width: 49%;
}

/*rez noua */

#section {
  max-width: 800px;
}

#search-container-country {
  position: relative;
  display: none;
}
#optiuni_suplimentare > * {
  flex-basis: 32%;
}
#plati {
  background-color: #f4f4f4;
}
#plati > div > span {
  font-size: 1.3em;
  height: auto;
  vertical-align: middle;
}
.text-lg-center > img {
  max-width: 100%;
  width: 20rem;
}
textarea {
  height: 100px !important;
}
/*country select2*/
.select2-container--default .select2-selection--single {
  height: calc(3.5rem + 2px);
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single:focus {
  background-color: whitesmoke;
  border: 1px solid #aaa;
}
.select2-selection__placeholder {
  position: absolute;
  top: 30%;
}
.select2-dropdown {
  background-color: whitesmoke;
}
.select2-container {
  width: 100% !important;
  margin-top: 0px;
}
.select2-selection__rendered {
  top: 7px;
  left: -8px;
  position: relative;
}

#country_label {
  top: -7px;
}
#tara + div {
  height: 60px;
}

#tara:has(option) #country_label {
  font-size: 0.85rem;
}
/*end country select2*/

/* ****************************** */
.imagine-masina {
  max-width: 20px;
  max-height: 20px;
  aspect-ratio: 1/1;
}
/* ************************ */

#masini tbody tr td {
  text-align: center;
  cursor: pointer;
  max-height: 65vh;
  overflow-y: auto;
  /* border-radius: 0.3rem; */
}
#masini tbody tr td:first-child {
  text-align: left;
  text-wrap: auto;
}

/* Make the table header sticky */
.sticky-header tr th {
  position: sticky !important;
  top: 0px;
  z-index: 999 !important;
  border-left: none !important;
  border-right: none !important;
}

.sticky-header th:first-child {
  border-left: 1px solid #022a52 !important;
}

.sticky-header th:last-child {
  border-right: 1px solid #022a52 !important;
}

#masini .sticky-header tr th,
#masini .sticky-header tr {
  padding: 1px 0.33rem;
  border-color: #022a52;
  background-color: #022a52;
  color: #fff;
  border: 2px solid;
  user-select: none;
}

/* Border radius for table */
table tr:first-child th:first-child {
  border-top-left-radius: 0.3rem !important;
}

table tr:first-child th:last-child {
  border-top-right-radius: 0.3rem !important;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 0.3rem !important;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 0.3rem !important;
}
.selected_row_marked {
  background: rgb(0, 123, 255);
  background: linear-gradient(
    0deg,
    rgba(0, 123, 255, 0.75) 60%,
    rgba(0, 212, 255, 0.5) 100%
  );
}

.form-floating:hover > *:not(.gri):not(.input-group-text):not(.form-label),
.telefon:hover,
.form-check:hover,
.form-check-label:hover,
.form-check-input:hover {
  transform: translateY(-2px);
  transition: transform 0.35s ease-in-out;
}
.gri {
  pointer-events: none;
  cursor: default;
}
.telefon:hover,
.form-select:hover,
.form-check:hover,
.form-check-label:hover,
.form-check-input:hover {
  cursor: pointer !important;
}
.input-group-text {
  align-items: end;
  padding-bottom: 8px;
}

/* =====================================================================
   3-step booking wizard (rezervareNoua.php) - progress line, step cards,
   sticky selected-car card, sticky mobile footer.
   ===================================================================== */

.booking-wizard {
  max-width: 1200px;
  width: 100%;
}

#step1 {
  margin-top: 28px;
}

/* Fade for progressively-disclosed blocks (voucher input, notes) - ported
   from rezervari-rent/www/css/rent.css. Re-runs automatically whenever an
   element flips from display:none to visible, no JS trigger needed. */
.fade-in {
  animation: fadeIn 0.7s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
  }
}

/* ---- progress line: 1 -> 2 -> 3 ---- */
.wizard-progress {
  /* The site header (include/head.php) is position:fixed, which always
     paints above position:static content regardless of DOM order - without
     its own position, this bar was rendering underneath it, effectively
     invisible. "relative" (no visual offset) promotes it into the same
     "positioned, z-index:auto" paint layer as the header, where DOM order
     wins ties - it comes after the header in the document, so it now paints
     on top. */
  position: relative;
  top: 1.3rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px 10px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0.8rem;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
}
.wizard-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  background: #e9ecef;
  color: #6c757d;
  border: 2px solid #e9ecef;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.wizard-step-label {
  font-size: 0.72rem;
  color: #6c757d;
  text-align: center;
  white-space: nowrap;
}
.wizard-step.active .wizard-step-circle {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.wizard-step.active .wizard-step-label {
  color: #0d6efd;
  font-weight: 600;
}
.wizard-step.completed .wizard-step-circle {
  background: #198754;
  border-color: #198754;
  color: #fff;
}
.wizard-step.completed .wizard-step-label {
  color: #198754;
}
.wizard-line {
  flex: 1 1 40px;
  max-width: 80px;
  height: 2px;
  background: #e9ecef;
  margin-bottom: 18px;
}

/* ---- step 1: car cards grid + filters ---- */
.cars-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
}
.cars-filters .form-select {
  font-size: 0.88rem;
  border-radius: 8px;
  min-width: 160px;
  flex: 1 1 180px;
}
.cars-grid-empty {
  font-size: 0.92rem;
  color: #666;
  padding: 14px 4px;
  text-align: center;
}
.cars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) {
  .cars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .cars-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Each card is include/car-preview-card.php's server-rendered .preview-card
   (the same component rezervari-rent/www/grid.php and the sticky booking-page
   panel use), wrapped in this .car-card-wrapper for click/select/disabled
   state and the data-* attributes the filter bar reads. */
.car-card-wrapper {
  cursor: pointer;
  transition: transform 0.15s;
}
.car-card-wrapper:hover {
  transform: translateY(-2px);
}
.car-card-wrapper .preview-card {
  transition: border-color 0.15s, box-shadow 0.15s;
}
.car-card-wrapper.selected .preview-card {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.car-card-wrapper.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* preview card (ported from rezervari-rent/www/css/rent.css) */
.preview-card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-width: 5px !important;
  border-style: inset !important;
  border-color: #3b3b3b8a !important;
}
/* Values below match the live computed styles on rezervari-rent/www's own
   rezervareNoua.php (getComputedStyle-verified against
   https://rezervari.ubx.ro/rezervareNoua, 2026-08) rather than guessed. */
.preview-card .card-price {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #e0e0e0;
  margin-top: 8px;
  padding-top: 8px;
}
/* decorative "Rezervă" hint, floating centered over the card-price
   separator - see include/car-preview-card.php for why it's inert. */
.btn-rezerva-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #0d6efd;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.preview-card .card-price .price-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}
.preview-card .card-price .price-days {
  font-size: 0.8rem;
  color: #0d6efd;
}
/* not scoped to .preview-card - also reused by the mobile price bar
   (#mpbDays) to match the card's own "+taxe"/"+opțiuni" notes exactly. */
.price-note {
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 4px;
}
.preview-card .card-price .price-total {
  font-weight: 700;
  font-size: 1.15rem;
}
.preview-card .card-price .price-unavailable {
  color: #dc3545;
  font-weight: 600;
}

/* fallback local brand-logo shown in place of a missing API photo - small,
   centered, square (1:1), not stretched into the surrounding 3:2 photo slot */
.preview-img-fallback {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
}
.preview-img-fallback-logo {
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ---- sticky selected-car card (desktop, step 2+): #selectedCarCard is filled
   with the exact same server-rendered .preview-card markup as the step-1
   grid (function2/cautaMasiniDisponibile.php's data.html, reused as-is) - so
   this wrapper only handles sticky positioning, same as
   rezervari-rent/www/css/rent.css's .sticky-lg-top-card, and supplies no
   visual styling of its own (the reused .preview-card already has its
   background/shadow/border). ---- */
.sticky-lg-top-card {
  position: static;
}
@media (min-width: 992px) {
  .sticky-lg-top-card {
    position: sticky;
    top: calc(var(--header-h, 70px) + 12px);
    z-index: 5;
  }
}

/* ---- sticky mobile footer (all 3 steps) ---- */
.mobile-price-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding: 0.6rem 1rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mobile-price-bar-info {
  font-size: 0.85rem;
  color: #495057;
}
/* same color split as the card's own price block (.price-days blue,
   .price-total default/dark bold) - see include/car-preview-card.php */
.mobile-price-bar-info .mpb-days {
  color: #0d6efd;
  display: block;
  font-size: 0.8rem;
}
.mobile-price-bar-info .mpb-total {
  font-size: 1.1rem;
}
@media (max-width: 991.98px) {
  .mobile-price-bar {
    display: flex;
  }
  .booking-wizard {
    margin-bottom: 70px;
  }
}

/* ---- cost/summary rows - ported verbatim from rezervari-rent/www/css/rent.css
   (getComputedStyle-verified against the live page, 2026-08), reused both for
   step 2's live cost preview and step 3's final summary so both match the
   overbooking variant's actual "Detalii costuri" box exactly. ---- */
.cost-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.95rem;
}
.cost-row span:first-child {
  color: #6c757d;
}
.cost-row span:last-child {
  /* Single-line values already end up flush right from justify-content:
     space-between - this only matters once a value (e.g. "Opțiuni selectate")
     wraps onto more than one line, where the wrapped lines default to
     text-align:left inside their own box and look misaligned against every
     other row's right-flush value. */
  text-align: right;
}
.cost-row-spaced {
  margin-top: 0.75rem;
}
.cost-row.total {
  font-weight: 700;
  border-top: 1px solid #dee2e6;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

/* Pickup/return date+time+location rows (step 3 summary): label and value
   side-by-side (.cost-row default) squeeze both onto too little width on
   phones once an address is longer than the ones tested with - stack them
   instead so the value gets the full row width to wrap into. */
@media (max-width: 575.98px) {
  .cost-row-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .cost-row-stack span:last-child {
    font-weight: 500;
    text-align: left;
  }
}