.kartyadiv.availability-unavailable .card-img-top {
  filter: grayscale(1);
  opacity: .45;
}
.kartyadiv.availability-unavailable .card { border-color: #b9a7ac; }
.kartyadiv.availability-unavailable .r { cursor: not-allowed; }
.availability-card-status {
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
  background: #39272c;
}
.availability-notice {
  max-width: 65rem;
  margin: 1.5rem auto;
  padding: 1.1rem 1.4rem;
  border: 1px solid #d1b89b;
  border-radius: .5rem;
  background: #fff4e5;
  color: #4b0e1e;
  line-height: 1.6;
  text-align: center;
}

/* Every personal-data row and the extras share one grid and the same sizes. */
#login-form.booking-details {
  --booking-label-size: clamp(1rem, 1.25vw, 1.25rem);
  --booking-input-size: 1rem;
  --booking-input-height: 2.375rem;
  display: grid;
  gap: 1.5rem;
  box-sizing: border-box;
  width: calc(100% - 3rem);
  max-width: 1000px;
  margin: 0 auto;
  color: #fff;
  font-family: montserrat_medium, sans-serif;
}
#login-form .booking-detail-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#login-form .booking-detail-label,
#login-form .booking-extra-option {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: var(--booking-label-size);
  font-weight: 400;
  line-height: 1.5;
}
/* Older breakpoint styles center every label with !important. Override that
   within this form so labels and the extras title share the same right edge. */
#login-form .booking-detail-label { text-align: right !important; }
#login-form .booking-detail-control { min-width: 0; }
#login-form .form-control {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  height: var(--booking-input-height);
  min-height: var(--booking-input-height);
  margin: 0 !important;
  padding: .375rem .75rem;
  border: 1px solid #fff;
  border-radius: 25px;
  background: #7f0e2c;
  color: #fff;
  font-size: var(--booking-input-size);
  line-height: 1.5;
}
#login-form .form-control:focus { background: #fff; color: #000; box-shadow: none; outline: 2px solid #fff; outline-offset: 3px; }
#login-form .form-control:focus::placeholder { color: #686868 !important; }
#login-form .booking-extras { align-items: start; }
#login-form .booking-extras-title { padding-top: max(0px, calc((var(--booking-input-height) - 1.5em) / 2)); }
#login-form .booking-extras-options { display: grid; gap: .75rem; }
#login-form .booking-extra-option {
  display: flex;
  align-items: center;
  gap: .65em;
  min-width: 0;
  min-height: var(--booking-input-height);
  text-align: left !important;
  cursor: pointer;
}
#login-form .booking-extra-option span { min-width: 0; overflow-wrap: anywhere; }
#login-form .booking-extra-option input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 1.1em;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  border: 1px solid #fff;
  border-radius: .22em;
  background: #7f0e2c;
  color: #fff;
  font-size: inherit;
  cursor: pointer;
}
#login-form .booking-extra-option input:checked { background: #fff; }
#login-form .booking-extra-option input:checked::after {
  content: "";
  position: absolute;
  left: .34em;
  top: .12em;
  width: .32em;
  height: .6em;
  border: solid #7f0e2c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#login-form .booking-extra-option input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#login-form .booking-extra-option input:disabled { opacity: .6; cursor: default; }
#login-form #kisallat-adatok[hidden] { display: none !important; }
#login-form .booking-pets-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 1rem; align-items: center; }
#login-form #kisallat-adatok { min-width: 0; }
.booking-request.subgombform { flex-direction: column; align-items: center; gap: 1.75rem; margin: 1rem auto 2rem; }
.booking-request .butkuld { margin: 0 auto !important; }
@media (max-width: 991px) {
  #login-form.booking-details { max-width: 680px; width: 80%; }
  #login-form .booking-detail-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  #login-form .booking-detail-label { text-align: center !important; }
  #login-form .booking-extras-title { padding-top: 0; }
  #login-form .booking-pets-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  #login-form .booking-extra-option { justify-content: center; }
  #login-form #kisallat-adatok { width: min(7rem, 100%); justify-self: center; }
}
@media (max-width: 575px) {
  #login-form.booking-details { width: calc(100% - 2rem); --booking-label-size: 1rem; }
}

/* One rounded field, with an inset separator for the fixed country code. */
#login-form .booking-phone { position: relative; flex-wrap: nowrap; }
#login-form .booking-phone .input-group-text {
  position: absolute; z-index: 2; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 1.25rem; justify-content: center; padding: 0 .75rem 0 0;
  color: #fff; background: transparent; border: 0; border-right: 1px solid rgb(255 255 255 / 55%);
  border-radius: 0; font-size: var(--booking-input-size); font-weight: 400;
}
#login-form .booking-phone .form-control {
  flex: 1 1 0; min-width: 0; width: 100% !important;
  border-radius: 25px; padding-left: 4rem; padding-right: 4rem; text-align: center !important;
}
#login-form .booking-phone:focus-within .input-group-text { color: #686868; border-color: #c9c9c9; }