/* ==========================================================================
   Booking — Resort Kostelec

   Booking karta (na HP), booking panel (overlay) a kalendář.
   Závisí na tokenech z base.css.
   ========================================================================== */

/* --- Booking card --------------------------------------------------------- */

.booking-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.2fr;
  align-items: stretch;
  gap: 0;
  width: min(920px, 100%);
  margin: 20px auto -44px;
  position: relative;
  z-index: 3;
  background: #fffbf5;
  border-radius: 8px;
  box-shadow: 0 14px 26px rgba(39, 23, 12, 0.2);
  overflow: hidden;
}

.booking-card__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-height: 86px;
  padding: 12px 24px 14px;
  border-right: 1px solid rgba(125, 78, 36, 0.1);
  align-items: center;
  text-align: center;
}

.booking-card__item--counter {
  gap: 12px;
  padding: 12px 20px 14px;
}

.booking-card__item--date {
  padding-left: 18px;
  padding-right: 18px;
}

.booking-card__label {
  color: rgba(177, 127, 74, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
}

.booking-card strong {
  color: var(--color-primary);
  font-family: "DM Serif Display", serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}

.booking-card__item > span:last-child {
  color: var(--color-secondary);
  font-size: 12px;
}

.booking-card .button {
  width: 100%;
  border-radius: 0;
}

/* --- Date button ---------------------------------------------------------- */

.booking-date-button {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.booking-date-button__day {
  color: var(--color-primary);
  font-family: "DM Serif Display", serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}

.booking-date-button__month {
  color: var(--color-primary);
  font-family: "DM Serif Display", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
}

.booking-date-button.is-empty .booking-date-button__day,
.booking-date-button.is-empty .booking-date-button__month {
  color: rgba(131, 20, 39, 0.48);
}

/* --- Guest counter -------------------------------------------------------- */

.booking-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
}

.booking-counter__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(125, 78, 36, 0.35);
  padding: 0;
  background: transparent;
  color: var(--color-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.booking-counter__button:hover:not(:disabled) {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff;
}

.booking-counter__button:disabled {
  opacity: 0.3;
  cursor: default;
}

.booking-counter__button--plus {
  transform: none;
}

.booking-counter__value {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

/* --- Booking panel (overlay) ---------------------------------------------- */

.booking-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.booking-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 21, 13, 0.2);
  backdrop-filter: blur(4px);
}

.booking-panel__dialog {
  position: relative;
  width: min(1120px, calc(100% - 40px));
  margin: 128px auto 0;
  background: rgba(255, 252, 247, 0.98);
  border: 1px solid rgba(177, 127, 74, 0.18);
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(52, 31, 18, 0.22);
  overflow: hidden;
}

.booking-panel__summary {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  border-bottom: 1px solid rgba(177, 127, 74, 0.18);
}

.booking-panel__summary-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-height: 104px;
  padding: 26px 36px;
  border: 0;
  background: transparent;
  text-align: left;
}

.booking-panel__summary-item + .booking-panel__summary-item,
.booking-panel__summary-arrow + .booking-panel__summary-item {
  border-left: 1px solid rgba(177, 127, 74, 0.18);
}

.booking-panel__summary-item.is-active .booking-panel__summary-value {
  color: var(--color-primary);
}

.booking-panel__summary-label {
  color: #6d6d6d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  font-weight: 500;
}

.booking-panel__summary-value {
  color: var(--color-secondary);
  font-family: "DM Serif Display", serif;
  font-size: 28px;
  line-height: 1.1;
}

.booking-panel__summary-arrow {
  display: grid;
  place-items: center;
  color: var(--color-secondary);
  font-size: 34px;
  border-left: 1px solid rgba(177, 127, 74, 0.18);
  border-right: 1px solid rgba(177, 127, 74, 0.18);
}

/* --- Calendar ------------------------------------------------------------- */

.booking-panel__calendars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 34px 36px 40px;
}

.booking-calendar__header {
  margin-bottom: 24px;
}

.booking-calendar__header--split {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 12px;
}

.booking-calendar__header h3 {
  grid-column: 2;
  color: var(--color-primary);
  font-size: 22px;
  text-align: center;
}

.booking-calendar__weekdays,
.booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.booking-calendar__weekdays {
  margin-bottom: 14px;
}

.booking-calendar__weekdays span {
  color: var(--color-secondary);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.booking-calendar__grid {
  gap: 8px;
}

.booking-calendar__day {
  min-height: 60px;
  border: 0;
  border-radius: 10px;
  background: #fffdfa;
  color: #3e3e3e;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.booking-calendar__day:hover {
  background: rgba(177, 127, 74, 0.14);
}

.booking-calendar__day.is-outside {
  color: rgba(62, 62, 62, 0.28);
  background: rgba(255, 255, 255, 0.55);
}

.booking-calendar__day.is-today {
  color: var(--color-accent);
  font-weight: 600;
}

.booking-calendar__day.is-past {
  color: rgba(62, 62, 62, 0.28);
  background: rgba(255, 255, 255, 0.42);
  cursor: default;
  text-decoration: line-through;
  text-decoration-color: rgba(62, 62, 62, 0.15);
}

/* Zavřený den (hotel mimo provoz) — nejde vybrat, odliší se šrafováním */
.booking-calendar__day.is-closed {
  color: rgba(62, 62, 62, 0.3);
  background: repeating-linear-gradient(
    135deg,
    rgba(131, 20, 39, 0.05),
    rgba(131, 20, 39, 0.05) 4px,
    rgba(255, 255, 255, 0.42) 4px,
    rgba(255, 255, 255, 0.42) 8px
  );
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(131, 20, 39, 0.35);
}

.booking-calendar__day:disabled:not(.is-arrival),
.booking-calendar__day.is-disabled:not(.is-arrival) {
  color: rgba(62, 62, 62, 0.22);
  background: rgba(255, 255, 255, 0.42);
  cursor: default;
  box-shadow: none;
}

.booking-calendar__day:disabled:not(.is-arrival):hover,
.booking-calendar__day.is-disabled:not(.is-arrival):hover {
  background: rgba(255, 255, 255, 0.42);
}

.booking-calendar__day.is-preview-range {
  background: rgba(131, 20, 39, 0.1);
  color: var(--color-primary);
}

.booking-calendar__day.is-selected-range {
  background: rgba(131, 20, 39, 0.1);
  color: var(--color-primary);
}

.booking-calendar__day.is-preview-end {
  background: rgba(131, 20, 39, 0.18);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px rgba(131, 20, 39, 0.32);
}

.booking-calendar__day.is-current,
.booking-calendar__day.is-arrival,
.booking-calendar__day.is-departure {
  background: #831427;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(131, 20, 39, 0.18);
}

.booking-calendar__nav {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(177, 127, 74, 0.14);
  color: var(--color-secondary);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.booking-calendar__nav[data-calendar-prev] {
  grid-column: 1;
  grid-row: 1;
}

.booking-calendar__nav[data-calendar-next] {
  grid-column: 3;
  grid-row: 1;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .booking-card {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-card .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .booking-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 auto -96px;
    border-radius: 12px;
  }

  .booking-card__item {
    min-height: 78px;
    padding: 14px 18px 15px;
    border-right: 1px solid rgba(125, 78, 36, 0.1);
    border-bottom: 1px solid rgba(125, 78, 36, 0.1);
  }

  .booking-card__item:nth-child(2n) {
    border-right: 0;
  }

  .booking-card .button {
    grid-column: 1 / -1;
  }

  .booking-card__item--counter {
    padding: 14px 18px 15px;
  }

  .booking-card__label {
    font-size: 10px;
  }

  .booking-card strong,
  .booking-date-button__day {
    font-size: 38px;
  }

  .booking-date-button__month {
    font-size: 16px;
  }

  .booking-counter {
    gap: 16px;
    min-height: 42px;
  }

  .booking-counter__button {
    font-size: 30px;
  }

  .booking-panel__dialog {
    width: min(100%, calc(100% - 16px));
    margin-top: 74px;
    border-radius: 12px;
  }

  .booking-panel__summary {
    grid-template-columns: 1fr 40px 1fr;
  }

  .booking-panel__summary-item {
    min-height: 84px;
    padding: 18px 16px;
    gap: 8px;
  }

  .booking-panel__summary-label {
    font-size: 11px;
  }

  .booking-panel__summary-value {
    font-size: 21px;
  }

  .booking-panel__summary-arrow {
    font-size: 26px;
  }

  .booking-panel__calendars {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px 24px;
    position: relative;
  }

  .booking-calendar__header {
    margin-bottom: 16px;
  }

  .booking-calendar__header h3 {
    font-size: 20px;
  }

  .booking-calendar__weekdays span {
    font-size: 12px;
  }

  .booking-calendar__grid {
    gap: 6px;
  }

  .booking-calendar__day {
    min-height: 46px;
    font-size: 15px;
  }

  .booking-calendar__nav {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }

  .booking-panel__calendars .booking-calendar:nth-child(2) {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 38px;
    height: 38px;
  }

  .booking-panel__calendars .booking-calendar:nth-child(2) .booking-calendar__header {
    display: block;
    margin: 0;
  }

  .booking-panel__calendars .booking-calendar:nth-child(2) .booking-calendar__header h3,
  .booking-panel__calendars .booking-calendar:nth-child(2) .booking-calendar__weekdays,
  .booking-panel__calendars .booking-calendar:nth-child(2) .booking-calendar__grid {
    display: none;
  }
}


/* --- Inline calendar (booking flow) --------------------------------------- */

.booking-panel__summary--inline {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px 10px 0 0;
}

.booking-panel__summary--inline .booking-panel__summary-item {
  min-height: 80px;
  padding: 20px 28px;
}

.booking-panel__summary--inline + .booking-panel__calendars {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 28px 28px 32px;
}


/* ==========================================================================
   Booking Flow — kroky rezervace
   ========================================================================== */

/* --- Booking flow page background ---------------------------------------- */

.booking-flow-page {
  background: rgba(177, 127, 74, 0.08);
}

/* --- Booking flow header -------------------------------------------------- */

.booking-flow-header {
  position: static;
  background: #ffffff;
  border-bottom: 1px solid rgba(177, 127, 74, 0.15);
}

.booking-flow-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 0;
  width: var(--container);
  margin: 0 auto;
}

.booking-flow-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.booking-flow-header__logo {
  width: 86px;
  height: auto;
}

.booking-flow-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.booking-flow-header__back:hover {
  color: var(--color-primary);
}

.booking-flow-header__back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Progress bar --------------------------------------------------------- */

.booking-progress {
  background: rgba(177, 127, 74, 0.08);
  border-bottom: 1px solid rgba(177, 127, 74, 0.12);
}

.booking-progress__inner {
  display: flex;
  align-items: stretch;
  width: var(--container);
  margin: 0 auto;
}

/* 5-krokový progress — zmenšit font a gap */
.booking-progress__inner--5 .booking-progress__step {
  font-size: 12px;
  gap: 8px;
}

.booking-progress__inner--5 .booking-progress__num {
  width: 22px;
  height: 22px;
  font-size: 11px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .booking-progress__inner--5 .booking-progress__step-label {
    display: none;
  }
  .booking-progress__inner--5 .booking-progress__step {
    justify-content: center;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.booking-progress__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 3px solid transparent;
}

.booking-progress__step + .booking-progress__step {
  border-left: 1px solid rgba(177, 127, 74, 0.15);
  padding-left: 20px;
}

.booking-progress__step:first-child {
  padding-right: 20px;
}

.booking-progress__step.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.booking-progress__step.is-done {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

a.booking-progress__step.is-done {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s, background 0.2s;
}

a.booking-progress__step.is-done:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  background: rgba(177, 127, 74, 0.06);
}

a.booking-progress__step.is-done:hover .booking-progress__step-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.booking-progress__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: rgba(177, 127, 74, 0.12);
  color: var(--color-muted);
  flex-shrink: 0;
}

.booking-progress__step.is-active .booking-progress__num {
  background: var(--color-primary);
  color: #fff;
}

.booking-progress__step.is-done .booking-progress__num {
  background: var(--color-accent);
  color: #fff;
}

/* --- Mobile progress header (skrytý na desktopu) -------------------------- */

.booking-progress-mobile {
  display: none;
}

@media (max-width: 640px) {
  .booking-progress {
    display: none;
  }

  .booking-progress-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid rgba(177, 127, 74, 0.12);
    position: relative;
  }

  .booking-progress-mobile__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(177, 127, 74, 0.25);
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
  }

  .booking-progress-mobile__back:hover {
    border-color: var(--color-accent);
    background: rgba(177, 127, 74, 0.06);
  }

  .booking-progress-mobile__back svg {
    width: 16px;
    height: 16px;
  }

  .booking-progress-mobile__title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .booking-progress-mobile__counter {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .booking-progress-mobile__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: var(--progress, 20%);
    background: var(--color-primary);
    border-radius: 0 2px 0 0;
  }

}

/* --- Layout --------------------------------------------------------------- */

.booking-flow {
  min-height: calc(100dvh - 68px - 57px);
  padding: 52px 0 80px;
}

@media (max-width: 640px) {
  .booking-flow {
    padding-bottom: 100px;
  }
}

.booking-flow__inner {
  width: min(760px, var(--container));
  margin: 0 auto;
}

.booking-flow__heading {
  margin-bottom: 40px;
}

/* --- Typ pobytu — stránka výběru kategorie -------------------------------- */

.booking-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-type-grid .stay-type-tile {
  min-height: 280px;
}

@media (max-width: 580px) {
  .booking-type-grid {
    grid-template-columns: 1fr;
  }
  .booking-type-grid .stay-type-tile {
    min-height: 220px;
  }
}

.booking-type-all {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
}

.booking-type-all__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.booking-flow__heading h1 {
  font-size: 36px;
}

.booking-flow__heading p {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 15px;
}

/* --- Section label -------------------------------------------------------- */

.booking-flow__section {
  margin-bottom: 48px;
}

.booking-flow__section-label {
  display: block;
  margin-bottom: 12px;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  font-weight: 700;
}

/* --- Date inputs ---------------------------------------------------------- */

.booking-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.booking-field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.booking-field__input {
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  transition: border-color 0.2s;
  width: 100%;
}

.booking-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.booking-field__input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.booking-field__hint {
  font-size: 13px;
  color: var(--color-accent);
  line-height: 1.55;
  margin: 0 0 10px;
}

.booking-nights {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
}

/* --- Guest card ----------------------------------------------------------- */

.booking-guests-card {
  background: transparent;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}


.booking-card-title {
  /* typografie děděna ze sdíleného pravidla výše */
}

.booking-guests-card__remove {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 13px;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.booking-guests-card__remove:hover {
  color: var(--color-primary);
}

.booking-guests-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.18);
  border-radius: 8px;
}


.booking-guests-row__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.booking-guests-row__sub {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 400;
  margin-top: 5px;
}

.booking-guests-row .booking-counter {
  width: auto;
  flex-shrink: 0;
}

/* --- Add room button ------------------------------------------------------ */

.booking-add-room {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px dashed rgba(177, 127, 74, 0.4);
  border-radius: 8px;
  width: 100%;
  padding: 14px 20px;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  margin-bottom: 12px;
}

.booking-add-room:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(177, 127, 74, 0.04);
}

/* --- Flow footer (CTA) ---------------------------------------------------- */

.booking-flow-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(177, 127, 74, 0.15);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.booking-flow-footer__summary {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.4;
}

.booking-flow-footer__summary strong {
  color: var(--color-text);
  font-size: 16px;
  display: block;
}

@media (max-width: 640px) {
  .booking-flow-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(61, 36, 17, 0.12);
  }

  .booking-flow-footer__inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 16px;
  }

  .booking-flow-footer {
    justify-content: center;
    align-items: center;
    padding: 18px 16px;
  }

  .booking-flow-footer__inner-wrap {
    display: none;
  }

  .booking-flow-footer .button {
    border-radius: 100px;
    width: 100%;
    justify-content: center;
  }
}

/* --- Extra cards ---------------------------------------------------------- */

.booking-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-extra-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  user-select: none;
}

.booking-extra-card:hover {
  border-color: rgba(177, 127, 74, 0.45);
}

.booking-extra-card.is-selected {
  border-color: var(--color-primary);
  background: rgba(131, 20, 39, 0.03);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-extra-card.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.booking-extra-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(177, 127, 74, 0.1);
  color: var(--color-accent);
  flex-shrink: 0;
}

.booking-extra-card.is-selected .booking-extra-card__icon {
  background: rgba(131, 20, 39, 0.08);
  color: var(--color-primary);
}

.booking-extra-card__info {
  flex: 1;
  min-width: 0;
}

.booking-extra-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-extra-card__desc {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 2px;
}

.booking-extra-card__price {
  text-align: right;
  flex-shrink: 0;
}

.booking-extra-card__price-total {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  display: block;
}

.booking-extra-card__price-note {
  font-size: 12px;
  color: var(--color-muted);
}

.booking-extra-card__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(177, 127, 74, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.booking-extra-card.is-selected .booking-extra-card__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* --- Procedure upgrade card ----------------------------------------------- */

.booking-procedure-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  user-select: none;
}

.booking-procedure-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.booking-procedure-card:hover {
  border-color: rgba(177, 127, 74, 0.45);
}

.booking-procedure-card.is-selected {
  border-color: var(--color-primary);
  background: rgba(131, 20, 39, 0.03);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-procedure-card__content {
  flex: 1;
  min-width: 0;
}

.booking-procedure-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-procedure-card__meta {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  margin-top: 4px;
}

.booking-procedure-card__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.booking-procedure-card__price {
  text-align: right;
}

.booking-procedure-card__price-total {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  display: block;
}

.booking-procedure-card__price-note {
  font-size: 12px;
  color: var(--color-muted);
}

.booking-procedure-card__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(177, 127, 74, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.booking-procedure-card.is-selected .booking-procedure-card__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.booking-procedure-card__desc {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.booking-procedure-card__note {
  font-size: 13px;
  color: var(--color-stone, #3d3530);
  background: rgba(177, 127, 74, 0.07);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 14px 0 0;
  line-height: 1.55;
}

/* --- Summary blocks ------------------------------------------------------- */

.booking-summary-block {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 25px;
}

/* Sdílená typografie nadpisů bloků */
.booking-card-label,
.booking-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
}

/* Záhlaví bloků — layout + pozadí */
.booking-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(177, 127, 74, 0.15);
  border-bottom: 1px solid rgba(125, 78, 36, 0.15);
  color: #111;
}

.booking-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 20px;
  font-size: 14px;
}

.booking-summary-row + .booking-summary-row {
  border-top: 1px solid rgba(177, 127, 74, 0.08);
}

.booking-summary-row__label { color: var(--color-muted); }
.booking-summary-row__label--muted { font-size: 13px; color: var(--color-accent); font-style: italic; }
.booking-summary-row__value { font-weight: 600; color: var(--color-text); }

/* --- Contact form --------------------------------------------------------- */

.booking-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.booking-summary-block .booking-form-grid {
  padding: 20px;
}

.booking-form-grid .booking-field--full {
  grid-column: 1 / -1;
}

.booking-field__select {
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline points='1,1 6,7 11,1' fill='none' stroke='%23b17f4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.booking-field__select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* --- Toggle row ----------------------------------------------------------- */

.booking-toggle-card {
  border: 1.5px dashed rgba(177, 127, 74, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.booking-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.booking-toggle-row__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.booking-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.booking-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.booking-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: rgba(177, 127, 74, 0.25);
  transition: background 0.2s;
}

.booking-toggle input:checked + .booking-toggle__track {
  background: var(--color-primary);
}

.booking-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.booking-toggle input:checked ~ .booking-toggle__thumb {
  transform: translateX(18px);
}

/* --- Coupon --------------------------------------------------------------- */

.booking-coupon {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

/* ZOO banner pod slevovým kupónem (doplnky.html) */
.booking-zoo-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}


.booking-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-card-body .booking-field__input,
.booking-card-body .booking-coupon__input,
.booking-card-body .booking-gift-option {
  background: #faf8f5;
  border-color: rgba(177, 127, 74, 0.2);
}

.booking-coupon__input {
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  transition: border-color 0.2s;
}

.booking-coupon__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.booking-coupon__feedback {
  font-size: 13px;
  padding: 0 2px;
}

.booking-coupon__feedback.is-success { color: #2e7d32; }
.booking-coupon__feedback.is-error   { color: var(--color-primary); }

.booking-diet-info {
  padding: 14px 16px;
  background: rgba(131, 20, 39, 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
}

.booking-field__input[rows] {
  height: auto;
  padding: 12px 16px;
  resize: vertical;
  margin-top: 10px;
}

/* --- Sidebar layout ------------------------------------------------------- */

.booking-flow__inner--with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  width: min(1060px, var(--container));
}

.booking-flow__content {
  min-width: 0;
}

.booking-flow__sidebar {
  position: sticky;
  top: calc(68px + 57px + 24px); /* header + progress + mezera */
}

.booking-sidebar {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.booking-sidebar__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(177, 127, 74, 0.12);
  font-size: 13px;
  color: var(--color-muted);
}

.booking-sidebar__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.booking-sidebar__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.booking-sidebar__price {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(177, 127, 74, 0.12);
}

.booking-sidebar__price-row[hidden] { display: none; }
.booking-summary-row[hidden]        { display: none; }

.booking-sidebar__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--color-muted);
}

.booking-sidebar__price-row + .booking-sidebar__price-row {
  margin-top: 8px;
}

/* Poznámka k ceně dětí v souhrnu (cena se teprve upřesní) */
.booking-sidebar__children-note {
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-muted);
  text-align: right;
}

.booking-sidebar__price-row.is-discount {
  color: #2e7d32;
  font-weight: 600;
}

.booking-sidebar__price-row.is-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(177, 127, 74, 0.15);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-sidebar__price-row.is-total span:last-child {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.booking-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

.booking-sidebar__actions .button {
  width: 100%;
  justify-content: center;
}

/* --- Platba — layout ------------------------------------------------------ */

.booking-flow__inner--payment {
  width: min(560px, var(--container));
}

/* --- Rozpis ceny — varianty řádků ---------------------------------------- */

.booking-summary-row--sub .booking-summary-row__label,
.booking-summary-row--sub .booking-summary-row__value {
  font-size: 12px;
  color: var(--color-muted);
}

.booking-summary-row--sub .booking-summary-row__label {
  padding-left: 12px;
}

.booking-summary-row--subtotal {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(177, 127, 74, 0.12);
  color: var(--color-muted);
}

.booking-summary-row--discount .booking-summary-row__label,
.booking-summary-row--discount .booking-summary-row__value {
  color: #2e7d32;
  font-weight: 600;
}

.booking-summary-row--total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1.5px solid rgba(177, 127, 74, 0.2);
}

.booking-summary-row--total .booking-summary-row__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.booking-summary-row--total .booking-summary-row__value {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- Platba meta (DPH + storno) ------------------------------------------ */

.booking-payment-meta {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.booking-payment-meta__link {
  background: none;
  border: none;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s;
}

.booking-payment-meta__link:hover { color: var(--color-primary); }

/* --- Souhlas — sub-note --------------------------------------------------- */

.booking-agree__sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.55;
  padding-left: 30px;
}

.booking-agree--mt { margin-top: 16px; }

/* --- Možnosti platby ------------------------------------------------------ */

.booking-payment-options .booking-card-label {
  margin-bottom: 0;
}

.booking-payment-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid rgba(177, 127, 74, 0.1);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.booking-payment-option:hover {
  background: rgba(177, 127, 74, 0.04);
}

.booking-payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.booking-payment-option__body {
  flex: 1;
  min-width: 0;
}

.booking-payment-option__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 3px;
}

.booking-payment-option__desc {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}

.booking-payment-option__indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(177, 127, 74, 0.35);
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.booking-payment-option:has(input:checked) {
  background: rgba(131, 20, 39, 0.02);
}

.booking-payment-option:has(input:checked) .booking-payment-option__name {
  color: var(--color-primary);
}

.booking-payment-option:has(input:checked) .booking-payment-option__indicator {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

/* --- Platba — CTA footer -------------------------------------------------- */

.booking-flow-footer--payment {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(177, 127, 74, 0.15);
  justify-content: center;
}

.booking-flow-footer--payment .button {
  width: 100%;
  justify-content: center;
}

/* --- Dárek k rezervaci ---------------------------------------------------- */

.booking-gift-intro {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}

.booking-gift-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-gift-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  user-select: none;
}

.booking-gift-option:hover {
  border-color: rgba(177, 127, 74, 0.45);
}

.booking-gift-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.booking-gift-option__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(177, 127, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.booking-gift-option__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}

/* Vybraný stav */
.booking-gift-option:has(input:checked) {
  border-color: var(--color-secondary);
  background: rgba(177, 127, 74, 0.04);
  box-shadow: 0 0 0 1px var(--color-secondary);
}

.booking-gift-option:has(input:checked) .booking-gift-option__radio {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* --- Storno modal --------------------------------------------------------- */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.booking-modal[hidden] { display: none; }

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 21, 13, 0.45);
  backdrop-filter: blur(3px);
}

.booking-modal__dialog {
  position: relative;
  width: min(480px, 100%);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(34, 21, 13, 0.22);
  overflow: hidden;
}

.booking-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(177, 127, 74, 0.15);
}

.booking-modal__title {
  font-size: 20px;
  color: var(--color-secondary);
}

.booking-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(177, 127, 74, 0.1);
  color: var(--color-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.booking-modal__close:hover {
  background: rgba(131, 20, 39, 0.1);
  color: var(--color-primary);
}

.booking-modal__body {
  padding: 8px 24px 28px;
}

.booking-storno-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-storno-list li {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
  padding: 14px 0;
  border-bottom: 1px solid rgba(177, 127, 74, 0.1);
}

.booking-storno-list li:last-child {
  border-bottom: none;
}

.booking-storno-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Sidebar footer ------------------------------------------------------- */

.booking-sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-top: 1px solid rgba(177, 127, 74, 0.12);
  border-bottom: 1px solid rgba(177, 127, 74, 0.12);
  text-align: center;
}

.booking-sidebar__footer-link {
  background: none;
  border: none;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s;
}

.booking-sidebar__footer-link:hover {
  color: var(--color-primary);
}

.booking-sidebar__footer-note {
  font-size: 12px;
  color: var(--color-muted);
}

/* --- Souhlas — button jako link ------------------------------------------- */

.booking-agree__link[type="button"] {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s;
}

.booking-agree__link[type="button"]:hover {
  color: var(--color-primary);
}

/* --- Storno podmínky (details) — DEPRECATED, zachováno pro zpětnou kompatibilitu */

.booking-storno {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}

.booking-storno__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.booking-storno__summary::-webkit-details-marker { display: none; }

.booking-storno__summary::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.2s;
  margin-bottom: 3px;
}

.booking-storno[open] .booking-storno__summary::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}

.booking-storno__body {
  border-top: 1px solid rgba(177, 127, 74, 0.1);
  padding: 0 20px 14px;
}

.booking-storno__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-storno__body li {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.55;
  padding: 10px 0;
  border-top: 1px solid rgba(177, 127, 74, 0.08);
}

.booking-storno__body li:first-child {
  border-top: none;
  padding-top: 14px;
}

/* --- Souhlas s podmínkami ------------------------------------------------- */

.booking-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  cursor: pointer;
  padding: 6px 0 2px;
}

.booking-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.booking-agree__link {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.booking-agree__link:hover {
  color: var(--color-primary);
}

.booking-agree__error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-primary);
}

/* --- Chybový stav pole ---------------------------------------------------- */

.booking-field__input.is-error {
  border-color: var(--color-primary);
}

.booking-field__error-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(131, 20, 39, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 5px 5px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.booking-field__error-msg[hidden] { display: none; }

/* --- Děkovací stránka ----------------------------------------------------- */

.booking-thankyou {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
}

.booking-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(131, 20, 39, 0.06);
  color: var(--color-primary);
  margin-bottom: 28px;
}

.booking-thankyou__title {
  font-size: 36px;
  color: var(--color-secondary);
  margin-bottom: 18px;
}

.booking-thankyou__text {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

.booking-thankyou__link {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.booking-thankyou__link:hover {
  color: var(--color-primary);
}

.booking-thankyou__actions {
  margin-top: 36px;
}

/* --- Multi-room selection progress --------------------------------------- */

.booking-room-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.booking-room-step-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
}

.booking-room-step-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Room listing override ------------------------------------------------ */

.booking-flow .room-listing-stack {
  grid-template-columns: 1fr;
  max-width: 680px;
}

.booking-flow .room-listing-card__img {
  max-height: 360px;
}

@media (max-width: 640px) {
  .booking-flow .room-listing-card__body {
    padding: 16px;
  }

  .booking-flow .room-listing-header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .booking-flow .room-listing-header h3 {
    font-size: 16px;
    flex: 1;
    min-width: 0;
  }

  .booking-flow .room-listing-price {
    flex-shrink: 0;
    text-align: right;
  }

  .booking-flow .room-listing-price strong {
    font-size: 16px;
  }

  .booking-flow .room-listing-actions {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .booking-flow .room-listing-actions .button {
    border-radius: 100px;
    justify-content: center;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .booking-flow__inner--with-sidebar {
    grid-template-columns: 1fr;
  }

  .booking-flow__sidebar {
    display: none;
  }
}

@media (max-width: 640px) {
  .booking-progress__step-label {
    display: none;
  }

  .booking-date-row {
    grid-template-columns: 1fr;
  }

  .booking-flow {
    padding-top: 32px;
    padding-bottom: 220px;
  }

  .booking-flow__heading {
    margin-bottom: 24px;
  }

  .booking-flow__heading h1 {
    font-size: 28px;
  }

  .booking-flow__section {
    margin-bottom: 32px;
  }

  .booking-flow-footer__summary {
    display: none;
  }

  /* Tighter container padding */
  .booking-flow-page {
    --container: calc(100% - 32px);
  }

  /* Block headers + body */
  .booking-card-label {
    padding: 10px 16px;
  }

  .booking-card-body {
    padding: 12px 14px 16px;
  }

  /* Guest rows */
  .booking-guests-row {
    padding: 12px 14px;
  }

  /* Extra cards */
  .booking-extra-card {
    padding: 14px 16px;
    gap: 12px;
  }

  .booking-extra-card__icon {
    width: 38px;
    height: 38px;
  }

  .booking-extra-card__price-total {
    font-size: 16px;
  }

  /* Summary rows */
  .booking-summary-row {
    padding: 11px 16px;
  }

  /* Toggle row */
  .booking-toggle-row {
    padding: 14px 16px;
  }

  /* Contact form grid → 1 column */
  .booking-form-grid {
    grid-template-columns: 1fr;
  }

  /* Payment options */
  .booking-payment-option {
    padding: 14px 16px;
  }

  /* Gift options */
  .booking-gift-option {
    padding: 12px 14px;
  }

  /* Mobile-only sidebar CTA footer — skrytý na desktopu */
  .booking-flow-footer--mobile-cta {
    display: flex;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .booking-flow-footer--mobile-cta .booking-flow-footer__inner-wrap {
    width: 100%;
    justify-content: center;
  }

  .booking-flow-footer--mobile-cta .button {
    width: 100%;
    justify-content: center;
  }
}

/* Desktop — mobilní CTA footer skrytý */
@media (min-width: 641px) {
  .booking-flow-footer--mobile-cta {
    display: none;
  }
}

/* --- Mobilní CTA panel (doplňky, souhrn) ---------------------------------- */

.booking-mobile-cta {
  display: none;
}

.booking-mobile-cta.is-keyboard-hidden {
  display: none !important;
}

/* Poznámka o ceně dětí v mobilním CTA panelu — těsně pod cenou */
.booking-mobile-cta__children-note {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  color: var(--color-muted);
}

.booking-mobile-cta__children-note[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .booking-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 14px 16px 24px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(61, 36, 17, 0.12);
  }

  .booking-mobile-cta__meta {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .booking-mobile-cta__meta-item {
    font-size: 12px;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .booking-mobile-cta__meta-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--color-accent);
  }

  .booking-mobile-cta__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid transparent;
    transition: border-color 0.2s;
  }

  .booking-mobile-cta.is-expanded .booking-mobile-cta__price,
  .booking-mobile-cta:has(.booking-mobile-cta__meta) .booking-mobile-cta__price {
    border-top-color: rgba(177, 127, 74, 0.15);
  }

  .booking-mobile-cta__price-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .booking-mobile-cta__price-value {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
  }

  .booking-mobile-cta__submit {
    border-radius: 100px;
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  .booking-mobile-cta__footnote {
    font-size: 12px;
    color: var(--color-muted);
    text-align: center;
  }

  .booking-mobile-cta__storno {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
  }

  .booking-mobile-cta__storno:hover {
    text-decoration: underline;
  }

  .booking-mobile-cta__discount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .booking-mobile-cta__discount[hidden] {
    display: none;
  }

  .booking-mobile-cta__discount-label {
    font-size: 13px;
    color: var(--color-muted);
  }

  .booking-mobile-cta__discount-value {
    font-size: 13px;
    font-weight: 600;
    color: #2a7a3c;
  }

  .booking-mobile-cta__actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }

  .booking-mobile-cta__actions .button {
    border-radius: 100px;
    justify-content: center;
    min-height: 48px;
  }

  /* Handle — toggle rozpisu */
  .booking-mobile-cta__handle {
    align-self: center;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(61, 36, 17, 0.18);
    border: none;
    padding: 0;
    margin-bottom: -4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
  }

  .booking-mobile-cta__handle:hover {
    background: rgba(61, 36, 17, 0.35);
  }

  /* Cenový řádek — klikatelný */
  .booking-mobile-cta__price {
    cursor: pointer;
    user-select: none;
  }

  /* Rozpis ceny */
  .booking-mobile-cta__breakdown {
    padding-bottom: 4px;
  }

  .booking-mobile-cta__breakdown-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .booking-mobile-cta__breakdown[hidden] {
    display: none;
  }

  .booking-mobile-cta__breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    color: var(--color-muted);
  }

  .booking-mobile-cta__breakdown-row span:last-child {
    font-weight: 600;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .booking-mobile-cta__breakdown-row--discount span:first-child {
    color: var(--color-muted);
  }

  .booking-mobile-cta__breakdown-row--discount span:last-child {
    color: var(--color-text);
  }
}

/* ==========================================================================
   Flow B — Pobyty
   ========================================================================== */

/* --- Filtr balíčků (délka pobytu + nástupní měsíc) ----------------------- */

.booking-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
  margin-top: 28px;
  display: block;
}

.booking-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.booking-filter-pill {
  height: 36px;
  padding: 0 16px;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 100px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}

.booking-filter-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-secondary);
}

.booking-filter-pill[data-active="true"],
.booking-filter-pill.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

/* --- Výběr měsíce --------------------------------------------------------- */

.booking-month-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}

.booking-month-trigger:hover {
  border-color: var(--color-accent);
}

.booking-month-trigger[data-selected="true"] {
  border-color: var(--color-secondary);
}

.booking-month-trigger__icon {
  flex-shrink: 0;
  font-size: 16px;
}

.booking-month-trigger__text {
  flex: 1;
}

.booking-month-trigger__clear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(177, 127, 74, 0.15);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.booking-month-trigger__clear:hover {
  background: rgba(131, 20, 39, 0.12);
  color: var(--color-primary);
}

.booking-month-trigger__chevron {
  font-size: 10px;
  color: var(--color-muted);
  flex-shrink: 0;
}

.booking-season-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.booking-season-tag--high {
  background: rgba(131, 20, 39, 0.1);
  color: var(--color-primary);
}

.booking-season-tag--low {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.booking-month-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 12px;
}

.booking-month-scroll::-webkit-scrollbar {
  display: none;
}

.booking-month-scroll[hidden] {
  display: none;
}

.booking-month-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.booking-month-pill {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 90px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1.5px solid rgba(177, 127, 74, 0.25);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: border-color 0.2s, background 0.2s;
}

.booking-month-pill:hover,
.booking-month-pill[data-active="true"],
.booking-month-pill.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.booking-month-pill__name {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}

.booking-month-pill__year {
  font-size: 11px;
  font-weight: 600;
  color: #9e9189;
  margin-top: 4px;
}

.booking-month-pill[data-active="true"] .booking-month-pill__year,
.booking-month-pill.is-active .booking-month-pill__year {
  color: rgba(255, 255, 255, 0.72);
}

/* --- Pobytový detail modal ------------------------------------------------- */

.pkg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 10, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pkgFadeIn 0.2s ease;
}

/* Pozadí se pod otevřeným detailem nesmí posouvat. */
body.is-modal-open {
  overflow: hidden;
}

@keyframes pkgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pkg-modal-sheet {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: pkgSheetIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes pkgSheetIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pkg-modal-handle {
  display: none;
}

.pkg-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f0ebe3;
  flex-shrink: 0;
}

.pkg-modal-header-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b1834a;
  margin-bottom: 4px;
}

.pkg-modal-header-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: #3d2411;
  line-height: 1.2;
}

.pkg-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #e0d8d0;
  background: #faf8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: #6b5b4e;
  flex-shrink: 0;
  margin-left: 12px;
  transition: background 0.15s;
}

.pkg-modal-close:hover {
  background: #f0ebe3;
}

.pkg-modal-body {
  overflow-y: auto;
  min-height: 0;
  padding: 0 20px 8px;
  -webkit-overflow-scrolling: touch;
}

.pkg-modal-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 0;
}

.pkg-modal-info-cell {
  background: #faf8f5;
  border: 1.5px solid #f0ebe3;
  border-radius: 10px;
  padding: 12px 14px;
}

.pkg-modal-info-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9e9189;
  margin-bottom: 5px;
}

.pkg-modal-info-value {
  font-size: 15px;
  font-weight: 600;
  color: #3d2411;
}

.pkg-modal-info-price {
  font-size: 18px;
  font-weight: 700;
  color: #831427;
}

.pkg-modal-divider {
  height: 1px;
  background: #f0ebe3;
  margin: 4px 0;
}

.pkg-modal-section-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: #3d2411;
  margin: 16px 0 10px;
}

.pkg-modal-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #5a4a3e;
  margin: 0 0 16px;
}

.pkg-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pkg-modal-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #5a4a3e;
  padding: 4px 0;
  line-height: 1.5;
}

.pkg-modal-list--includes li::before {
  content: "✓";
  color: #547858;
  font-weight: 700;
  flex-shrink: 0;
}

.pkg-modal-list--inprice li::before {
  content: "✔";
  color: #831427;
  font-weight: 700;
  flex-shrink: 0;
}

.pkg-modal-cta {
  border-top: 1px solid #f0ebe3;
  padding: 14px 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  background: #ffffff;
}

.pkg-modal-cta-info {
  min-width: 0;
}

.pkg-modal-cta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9e9189;
  margin-bottom: 3px;
}

.pkg-modal-cta-price {
  font-size: 22px;
  font-weight: 700;
  color: #831427;
}

.pkg-modal-cta-btn {
  flex-shrink: 0;
}

.pkg-modal-help {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #faf8f5;
  border: 1.5px solid #f0ebe3;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0 20px;
}

.pkg-modal-help__icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.pkg-modal-help__text {
  flex: 1;
  min-width: 0;
}

.pkg-modal-help__title {
  font-size: 14px;
  font-weight: 700;
  color: #3d2411;
  margin-bottom: 2px;
}

.pkg-modal-help__sub {
  font-size: 13px;
  color: #7a6a5a;
  line-height: 1.4;
}

.pkg-modal-help__btn {
  flex-shrink: 0;
}

/* --- Package karty v booking flow ---------------------------------------- */

.booking-pkg-card {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.booking-pkg-card:hover {
  border-color: rgba(177, 127, 74, 0.45);
  box-shadow: 0 4px 16px rgba(61, 36, 17, 0.07);
}

.booking-pkg-card__body {
  padding: 20px 20px 16px;
}

.booking-pkg-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.booking-pkg-card__name {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.booking-pkg-nights {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(177, 127, 74, 0.12);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.booking-pkg-card__desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}

.booking-pkg-card__includes {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.booking-pkg-card__includes li {
  font-size: 13px;
  color: var(--color-muted);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}

.booking-pkg-card__includes li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--color-accent);
  font-weight: 700;
}

.booking-pkg-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(177, 127, 74, 0.1);
}

.booking-pkg-price {
  font-size: 13px;
  color: var(--color-muted);
}

.booking-pkg-price strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  font-family: "Montserrat", sans-serif;
}

.booking-pkg-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* --- Per-host sekce v termínu -------------------------------------------- */

.booking-guest-pkg-card {
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}

.booking-guest-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 16px 10px;
}

.booking-guest-pkg-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: rgba(177, 127, 74, 0.07);
  border: 2px solid rgba(177, 127, 74, 0.45);
  border-radius: 8px;
}

.booking-guest-pkg-selected__info {
  flex: 1;
  min-width: 0;
}

.booking-guest-pkg-selected__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-guest-pkg-selected__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2px;
}

.booking-guest-pkg-options {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(177, 127, 74, 0.03);
}

.booking-guest-pkg-options[hidden] { display: none; }

.booking-guest-pkg-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgba(177, 127, 74, 0.2);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-align: left;
}

.booking-guest-pkg-option:hover {
  border-color: rgba(177, 127, 74, 0.45);
}

.booking-guest-pkg-option[data-active="true"] {
  border-color: var(--color-primary);
  background: rgba(131, 20, 39, 0.03);
}

.booking-guest-pkg-option__name {
  flex: 1;
  font-weight: 600;
  color: var(--color-text);
}

.booking-guest-pkg-option__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.booking-guest-pkg-option__detail-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
  border: 1.5px solid rgba(177, 127, 74, 0.35);
  border-radius: 100px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.booking-guest-pkg-option__detail-btn:hover {
  background: rgba(177, 127, 74, 0.07);
  border-color: var(--color-secondary);
}

.booking-guest-pkg-option__price {
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
}

.booking-guest-pkg-change {
  background: none;
  border: 1.5px solid rgba(177, 127, 74, 0.3);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: var(--color-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}

.booking-guest-pkg-change:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* --- Přidatelné doplňky per host (RelaxPass, Plná penze) ------------------ */

.booking-guest-extra-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid rgba(177, 127, 74, 0.08);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.booking-guest-extra-row:hover {
  background: rgba(177, 127, 74, 0.03);
}

.booking-guest-extra-row.is-selected {
  background: rgba(131, 20, 39, 0.02);
}

.booking-guest-extra-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(177, 127, 74, 0.1);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.booking-guest-extra-row.is-selected .booking-guest-extra-row__icon {
  background: rgba(131, 20, 39, 0.08);
  color: var(--color-primary);
}

.booking-guest-extra-row__info {
  flex: 1;
  min-width: 0;
}

.booking-guest-extra-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-guest-extra-row__note {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 1px;
}

.booking-guest-extra-row__check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(177, 127, 74, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-secondary);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.booking-guest-extra-row.is-selected .booking-guest-extra-row__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* --- Per-host karta v souhrnu -------------------------------------------- */

.booking-guest-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: rgba(177, 127, 74, 0.06);
  border-top: 1px solid rgba(177, 127, 74, 0.1);
  font-size: 14px;
}

.booking-guest-price-row span {
  color: var(--color-muted);
  font-weight: 600;
}

.booking-guest-price-row strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: "Montserrat", sans-serif;
}

/* Vnitřní odsazení obsahu karty dítěte (stejně jako u karet hosta) */
.booking-child-body {
  padding: 0 16px 16px;
}

/* Pravá strana total řádku u dítěte — místo ceny info „Cena bude upřesněna" */
.booking-guest-price-row__tbd {
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  color: var(--color-muted);
  text-align: right;
}

/* --- Vybraný pobyt / Informace o osobě sekce v souhrnu -------------------- */

.booking-guest-stay-info {
  border-top: 1px solid rgba(177, 127, 74, 0.12);
  padding-top: 4px;
}

.booking-guest-stay-info__header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 10px 20px 4px;
}

/* --- Mobilní CTA s celkovou cenou (termin + souhrn) ----------------------- */

.booking-cta-totals {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(177, 127, 74, 0.12);
  margin-bottom: 4px;
  gap: 2px;
}

.booking-cta-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Skrytý řádek (např. Sleva bez aktivního kupónu) — display:flex jinak přebíjí [hidden] */
.booking-cta-total[hidden] {
  display: none;
}

.booking-cta-total__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.booking-cta-total__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  font-family: "Montserrat", sans-serif;
}

.booking-cta-total--discount .booking-cta-total__label {
  font-size: 12px;
  font-weight: 500;
  color: #2e7d32;
}

.booking-cta-total--discount .booking-cta-total__value {
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
}

/* --- Guests counter (Flow B — jednoduchý) --------------------------------- */

.booking-guests-simple {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1.5px solid rgba(177, 127, 74, 0.18);
  border-radius: 8px;
}

/* Odsazení mezi po sobě jdoucími řádky (dospělí / děti) */
.booking-guests-simple + .booking-guests-simple {
  margin-top: 12px;
}

/* Hláška k pobytu dětí (zobrazí se při počtu dětí > 0) */
.booking-children-note {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  background: #fffdf8;
  font-size: 14px;
  line-height: 1.6;
  color: #5a4535;
}

.booking-children-note[hidden] {
  display: none;
}

.booking-guests-simple__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.booking-guests-simple .booking-counter {
  width: auto;
  margin-left: auto;
}

/* --- Datum příjezdu (Flow B) ----------------------------------------------- */

.booking-arrival-info {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-muted);
}

.booking-arrival-info strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Chip — vybraný pobyt ------------------------------------------------- */

.booking-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(177, 127, 74, 0.1);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.booking-selected-chip__muted {
  font-weight: 500;
  color: var(--color-muted);
}

/* --- Notice (varování) --------------------------------------------------- */

.booking-notice {
  padding: 12px 16px;
  background: rgba(30, 90, 170, 0.07);
  border-left: 3px solid rgba(30, 90, 170, 0.4);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #1e3a5a;
  line-height: 1.55;
  margin: 14px 0;
}

/* ==========================================================================
   Desktop — minimální velikost písma 16 px
   Platí pro viewporty ≥ 641 px (desktop breakpoint)
   ========================================================================== */

@media (min-width: 641px) {

  /* Nadpis stránky — podtitulek */
  .booking-flow__heading p            { font-size: 16px; }

  /* Formulářová pole */
  .booking-field__label               { font-size: 11px; }
  .booking-field__input               { font-size: 16px; }
  .booking-field__select              { font-size: 16px; }
  .booking-field__hint                { font-size: 15px; }

  /* Hosté — counter karta */
  .booking-guests-row__label          { font-size: 16px; }

  /* Extra karty */
  .booking-extra-card__name           { font-size: 16px; }
  .booking-extra-card__desc           { font-size: 14px; }

  /* Toggle row */
  .booking-toggle-row__label          { font-size: 16px; }

  /* Dieta info */
  .booking-diet-info                  { font-size: 15px; }

  /* Sidebar — meta a ceny */
  .booking-sidebar__meta              { font-size: 16px; }
  .booking-sidebar__price-row         { font-size: 15px; }
  .booking-sidebar__price-row.is-total { font-size: 16px; }
  .booking-sidebar__footer-link       { font-size: 14px; }
  .booking-sidebar__footer-note       { font-size: 13px; }

  /* Shrnutí — bloky */
  .booking-summary-row                { font-size: 16px; }

  /* Kupón */
  .booking-coupon__feedback           { font-size: 14px; }

  /* Storno modal */
  .booking-storno-list li             { font-size: 16px; }

  /* Platba */
  .booking-payment-meta               { font-size: 14px; }
  .booking-payment-meta__link         { font-size: 14px; }
  .booking-payment-option__name       { font-size: 16px; }
  .booking-payment-option__desc       { font-size: 15px; }

  /* Souhlas a podmínky */
  .booking-agree                      { font-size: 16px; }
  .booking-agree__sub                 { font-size: 14px; }
  .booking-agree__error               { font-size: 14px; }

  /* Dárek */
  .booking-gift-intro                 { font-size: 16px; }
  .booking-gift-option__label         { font-size: 16px; }

  /* CTA footer */
  .booking-flow-footer__summary       { font-size: 16px; }

  /* Děkujeme */
  .booking-thankyou__text             { font-size: 16px; }

}


/* ==========================================================================
   Potvrzený termín — box s předvyplněným termínem + „Změnit termín"
   (převzato z kod-13-07/rezervace/index.html, kde bylo inline ve <style>)
   ========================================================================== */

.booking-date-confirmed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: #fffdf8;
  border: 1px solid rgba(177, 127, 74, 0.25);
  border-radius: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Přepis browserového defaultu – display:flex na třídě by jinak vyhrál nad [hidden] */
#date-confirmed[hidden],
#date-picker-ui[hidden] {
  display: none !important;
}

.booking-date-confirmed__dates {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.booking-date-confirmed__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-date-confirmed__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b17f4a;
}

.booking-date-confirmed__value {
  font-size: 18px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  color: #3f2f25;
}

.booking-date-confirmed__arrow {
  color: #c4a882;
  font-size: 18px;
}

.booking-date-confirmed__nights {
  font-size: 13px;
  color: #9e9189;
  margin-left: 4px;
}

.booking-date-confirmed__change {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid rgba(131, 20, 39, 0.25);
  border-radius: 8px;
  background: transparent;
  color: #831427;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.booking-date-confirmed__change:hover {
  background: rgba(131, 20, 39, 0.05);
  border-color: #831427;
}