/* Reservation page (/rezervacia). Only the elements the contact template does not have:
   selects, checkboxes and the selected-offer summary. Everything else uses template classes. */

/* ---------- selects: same look as the template's dark contact inputs ---------- */
.ih-res-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: 50px; padding-right: 2.75rem; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 12px 8px;
}
.ih-res-select option,
.ih-res-select optgroup { color: var(--color--gray-1); background-color: var(--color--white); }
.ih-res-select:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- rows: widths inside the template's flex rows ---------- */
.ih-res-row-offer > .input-group:first-child { flex: 1.75 1 0; min-width: 0; }
.ih-res-row-offer > .input-group:last-child { flex: 1 1 0; min-width: 0; }
.ih-res-row-people > .input-group { flex: 1 1 0; min-width: 0; }
.ih-res-row-people > .input-group:last-child { flex: 2.1 1 0; }
.ih-res-kids > .input-group { flex: 0 0 calc((100% - 3 * var(--gap--gap-8)) / 4); min-width: 0; }

/* Narrower laptop windows (thresholds leave room for a 17 px Windows scrollbar). Wide screens are untouched.
   - children's ages: four to a row, a select is too narrow for „под 1 година” below ~1400 px of layout and the
     labels wrap below ~1260 px, so they go two to a row (same spacing as the rows above);
   - name / phone / email: at 1024 px the three fields are 148 px and „ime@primer.bg” lost its last letters. */
@media screen and (min-width: 992px) and (max-width: 1419px) {
  .ih-res-kids { flex-wrap: wrap; row-gap: 0; }
  .ih-res-kids > .input-group { flex-basis: calc((100% - var(--gap--gap-8)) / 2); }
}
@media screen and (min-width: 992px) and (max-width: 1079px) {
  .ih-res-row-contact .contact-input { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- consent checkboxes on the dark panel ---------- */
.ih-res-consents { margin-bottom: 1.875rem; }
.ih-res-check { align-items: flex-start; margin-bottom: .75rem; padding-left: 0; cursor: pointer; }
.ih-res-check:before, .ih-res-check:after { display: none; }
.ih-res-check .checkbox {
  float: none; flex: none; margin: 1px 0 0; min-width: 18px; min-height: 18px; width: 18px; height: 18px;
  border: 1px dashed var(--color--white-op20); border-radius: 4px; background-color: var(--color--white-op5);
}
.ih-res-check .checkbox.w--redirected-checked {
  border: 1px solid var(--ih-turq-deep); border-radius: 4px; background-color: var(--ih-turq-deep);
  background-image: url(/assets/6a0182a6a372d31842dd4580/6a0182a6a372d31842dd45b1_check-white.svg);
  background-position: 50%; background-repeat: no-repeat; background-size: 11px;
}
.ih-res-check .checkbox-label {
  color: var(--color--gray-3); font-size: var(--_typography---body--body-sm);
  line-height: var(--_typography---body--line-height-2); padding-left: 10px;
}
.ih-res-check .checkbox-label a { color: var(--color--white); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- validation ---------- */
.contact-input.ih-invalid { border-style: solid; border-color: var(--ih-promo); }
.ih-res-check.ih-invalid .checkbox { border-style: solid; border-color: var(--ih-promo); }

/* ---------- left: selected offer summary (sits where the template's quote was) ---------- */
.ih-res-info { max-width: 440px; }
/* The template's left column is 108% wide and its last 8% sits under the form panel, so on windows of about
   1100 to 1300 px the full-width summary box ran a few px over the panel (6 px at 1280). Keep it at least 20 px
   clear of the panel; from about 1366 px up the 440 px max-width is narrower anyway and nothing moves. */
@media screen and (min-width: 992px) {
  .contact-hero-info.ih-res-info { right: calc(200% / 27 + 20px); }
}
.ih-res-summary { display: flex; flex-direction: column; gap: var(--gap--gap-7); }
.ih-res-head { display: flex; flex-direction: column; gap: var(--gap--gap-4); }
.ih-res-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap--gap-3); }
.ih-res-title { font-weight: var(--_typography---body--font-weight-2); }
.ih-res-meta {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--color--white-op70); font-size: var(--_typography---body--body-sm);
  line-height: var(--_typography---body--line-height-2);
}
.ih-res-icon { filter: brightness(0) invert(1); opacity: .75; }
.ih-res-money { display: flex; flex-direction: column; gap: var(--gap--gap-4); }
.ih-res-price { color: var(--color--white-op70); font-size: var(--_typography---body--body-md); line-height: var(--_typography---body--line-height-2); }
.ih-res-price .ih-old-price { color: var(--color--white-op50); margin-left: 2px; }
.ih-res-price-num { color: var(--color--white); font-size: var(--_typography---body--body-xl); font-weight: var(--_typography---body--font-weight-2); }
.ih-res-total {
  border: 1px dashed var(--color--white-op20); border-radius: var(--border-radius--md);
  background-color: var(--color--white-op5); padding: 1rem 1.25rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ih-res-total-label { color: var(--color--gray-3); font-size: var(--_typography---body--body-sm); line-height: var(--_typography---body--line-height-2); }
.ih-res-total-sum {
  font-family: var(--_typography---font-family--heading); color: var(--color--white);
  font-size: var(--_typography---h4--h4); line-height: 1.25; margin: 2px 0 4px;
}
.ih-res-total-note { color: var(--color--white-op70); font-size: var(--_typography---body--body-xs); line-height: 1.5; }
.ih-res-links { gap: var(--gap--gap-7); }
.ih-res-link { text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease-in-out; }
.ih-res-link:hover { color: var(--color--white); }

/* ---------- sent: keep the panel from collapsing around the success message ---------- */
.ih-res-sent .w-form { display: flex; flex-direction: column; justify-content: center; min-height: 560px; }

/* ---------- short laptop windows (2026-10-05, the client's ~1280x650 Windows laptop) ---------- */
/* The form panel is 880px tall: it just fits a 1440x900 window, but on shorter windows the button and the consents
   ran below the screen. Under 864px of window height its spacing tightens in step with the window (panel padding,
   the gaps between rows, the two text boxes, the space around the payment chips and the consents), so the panel stays
   40px shorter than the window down to 720px at 760px tall; shorter windows keep those 720px (the fields, selects,
   chips, button and fonts keep their size, and tighter than this the form would look cramped).
   --ih-fit-cut = how much shorter the panel gets; the parts below add up to exactly that (with the children's ages
   row shown the panel is one row taller, as on every screen). Windows at least 864px tall are unchanged. */
@media screen and (min-width: 992px) and (max-height: 863px) {
  .contact-hero-section { --ih-fit-cut: clamp(0px, 920px - 100vh, 160px); }
  .contact-hero-right {
    padding-top: calc(50px - var(--ih-fit-cut) / 8);
    padding-bottom: calc(50px - var(--ih-fit-cut) / 8);
  }
  .contact-hero-right .input-group { margin-bottom: calc(20px - var(--ih-fit-cut) * 3 / 40); }
  .contact-hero-right .form-input.form-textarea.contact-input { height: calc(100px - var(--ih-fit-cut) * 9 / 40); }
  .contact-hero-right .radio-group { margin-bottom: calc(50px - var(--ih-fit-cut) / 8); }
  .ih-res-consents { margin-bottom: calc(30px - var(--ih-fit-cut) / 10); }
}

/* ===== phones & tablets: reservation =====
   Every rule below sits in a ≤ 991 / 767 px query: laptops and desktops never see them. */
@media screen and (max-width: 991px) {
  .contact-input.ih-invalid:focus { border-color: var(--ih-promo); }
  /* the estimate again, right above the button (.ih-m-only: reservation.js keeps it equal to the summary's) */
  .ih-res-total-mini { margin-bottom: 1rem; color: var(--color--white-op70); font-size: var(--_typography---body--body-md); line-height: 1.4; }
  .ih-res-total-mini strong { color: var(--color--white); font-weight: var(--_typography---body--font-weight-2); }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* tablets: the offer and the date one under the other; name full width, phone and e-mail side by side while each
     still gets 240 px (else one under the other) */
  .ih-res-row-offer { flex-direction: column; }
  .ih-res-row-offer > .input-group:first-child, .ih-res-row-offer > .input-group:last-child { flex: none; width: 100%; }
  .ih-res-row-contact { flex-wrap: wrap; row-gap: 0; }
  .ih-res-row-contact > .input-group:first-child { flex-basis: 100%; }
  .ih-res-row-contact > .input-group:not(:first-child) { flex: 1 1 240px; min-width: 0; }
}
@media screen and (max-width: 767px) {
  /* the selected offer's summary grows with its content (the template's 300 to 400 px photo box covered its top) */
  .contact-hero-left.ih-res-left { height: auto; min-height: 300px; }
  .ih-res-left .contact-bg-item, .ih-res-left .contact-hero-wrap { position: absolute; inset: 0; height: auto; }
  .ih-res-left .contact-bg-item::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to top, rgba(15, 39, 69, .92) 0%, rgba(15, 39, 69, .7) 55%, rgba(15, 39, 69, .15) 100%);
  }
  .contact-hero-info.ih-res-info { position: relative; inset: auto; max-width: none; padding: 7.5rem 1.25rem 1.25rem; }
}