/* Offer page (/oferta/<slug>, built from the Tripora tour page).
   Only small additions for data the template has no slot for; layout stays the template's. */

/* hero: category pill + promo pill side by side */
.tours-hero .ih-hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap--gap-2); }
.tours-hero .badge.ih-badge-promo { background-color: var(--ih-promo); color: var(--color--white); font-weight: 600; }
.tours-hero .badge.ih-badge-label { font-weight: 600; letter-spacing: .01em; }

/* sidebar price: struck-through old price sits on the same baseline as „/ човек” */
.tours-price .ih-old-price { padding-bottom: .375rem; margin-right: .625rem; }
/* „/ човек” never breaks in two (a 4-digit promo price next to the old one at 1024 to 1100 wide) */
.tours-price .pricing-text { white-space: nowrap; }

/* sticky sidebar on short, narrow laptop windows: below 1280px the Bulgarian facts wrap to two lines, the sidebar
   grows and „Резервирай” ended under the bottom edge of a ~600px tall window while the sidebar was stuck at 50px.
   There it sticks a little higher (at most 40px of the price box's top padding goes under the top edge), so the
   button stays in view. The numbers are the tallest current offer's button bottom (626px at 1024, 572px at 1152)
   plus 10px; windows at least 690 / 640px tall keep the template's 50px. */
@media screen and (min-width: 992px) and (max-width: 1151px) {
  .tours-detail-right { top: min(50px, calc(100vh - 640px)); }
}
@media screen and (min-width: 1152px) and (max-width: 1279px) {
  .tours-detail-right { top: min(50px, calc(100vh - 590px)); }
}

/* sidebar: extra departure dates as a small pill next to the next date */
.tours-info-list .ih-dates { display: inline-flex; align-items: center; gap: var(--gap--gap-2); white-space: nowrap; }
.tours-info-list .ih-more-dates {
  border-radius: var(--border-radius--xl); background-color: var(--color--primary-2); color: var(--color--secondary-2);
  font-size: var(--_typography---body--body-xs); line-height: var(--_typography---body--line-height-2);
  font-weight: 600; padding: .0625rem .5rem; text-decoration: none; transition: background-color .3s ease-in-out;
}
.tours-info-list .ih-more-dates:hover { background-color: var(--color--primary-4); }

/* Viber button: white label and icon on Viber purple; dark on the white hover state */
.tours-cta-inline .ih-viber { color: var(--color--white); }
.tours-cta-inline .ih-viber:hover { color: var(--color--gray-1); }
.tours-cta-inline .ih-viber:hover .button-icon { filter: brightness(0); }

/* hero title: same 90px size and 2 lines as the template; long titles get a wider column */
.tours-hero h1 { text-wrap: balance; }
.tours-hero.ih-hero-wide { max-width: 1200px; }

/* hero, short laptop windows (2026-10-05, the client's ~1280x650 Windows laptop): the photo card is 730px tall under
   the 120px menu bar, so at 1440x900 the whole card and its title are in the first screen; on windows under ~770px
   tall the title's second line opened under the bottom edge and the card never fitted the window. There the space
   above the pills (370px, down to 200) shrinks in step with the window: the title ends 20px above the bottom edge
   when the page opens, and the card is 40px shorter than the window (560px at 600px tall). The photo fills the
   smaller card (object-fit: cover); the pills, the title and the 100px under it are unchanged, as are taller windows. */
@media screen and (min-width: 992px) and (max-height: 863px) {
  .tours-hero-content { padding-top: clamp(200px, 100vh - 400px, 370px); }
}

/* programme PDF (offer field program_pdf): the template's white secondary button, after the „Програма” intro (left
   aligned like the text) and under „Резервирай” in the sidebar (full width, a small gap under the button) */
.ih-pdf-row { display: flex; justify-content: flex-start; }
.ih-book-group { display: flex; flex-direction: column; gap: var(--gap--gap-4); }
.ih-book-group .ih-pdf-side { width: 100%; }

/* ===== phones & tablets: offer =====
   Every rule below sits in a ≤ 991 / 767 / 479 px or phone-landscape query: laptops and desktops never see them.
   Phones get a facts card at the top of the text column (.ih-offer-facts: price, duration, transport, every date as a
   link, „Резервирай”) and a booking bar fixed to the bottom of the window (.ih-mbar, also on phones in landscape;
   offer.js hides it while a „Резервирай” button or the footer is on screen, and while the menu, the contacts sheet or
   the lightbox is open). Both carry .ih-m-only, so they never show from 992 px. */
@media screen and (max-width: 991px) {
  .ih-offer-facts, .ih-mbar { display: none; }
  /* „+N дати”: a 44 x 32 px hit area round the small pill */
  .tours-info-list .ih-more-dates { position: relative; }
  .tours-info-list .ih-more-dates::after { content: ""; position: absolute; left: -6px; right: -6px; top: calc(50% - 16px); height: 32px; min-width: 44px; }
}
/* tablets and phones in landscape with short windows: the sticky sidebar was taller than the window */
@media screen and (max-width: 991px) and (max-height: 700px) {
  .tours-detail-right { position: static; }
}
@media screen and (max-width: 767px) {
  /* facts card: last in the markup, first on screen. Its dates row must not widen the column (the row scrolls) */
  .tours-detail-left { min-width: 0; }
  .ih-offer-facts {
    order: -1; display: flex; flex-direction: column; gap: 10px; min-width: 0; contain: inline-size;
    padding: 16px var(--_layout---container--container-gutter);
    border-radius: var(--border-radius--md); background-color: var(--color--gray-4); color: var(--color--gray-1);
  }
  .ih-of-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ih-of-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
  .ih-of-from, .ih-of-per { font-size: .875rem; color: var(--color--gray-1-op70); }
  .ih-of-old { font-size: .9375rem; color: var(--color--gray-1-op70); }
  .ih-of-num { font-family: var(--_typography---font-family--heading); font-size: 1.75rem; line-height: 1.15; font-weight: 600; white-space: nowrap; }
  .ih-of-promo {
    flex: none; padding: 3px 10px; border-radius: var(--border-radius--xl); background-color: var(--ih-promo);
    color: var(--color--white); font-size: .8125rem; font-weight: 600; line-height: 1.4;
  }
  .ih-of-meta { font-size: .9375rem; line-height: 1.4; color: var(--color--gray-1-op70); }
  .ih-of-dates-wrap { display: flex; flex-direction: column; gap: 6px; }
  .ih-of-label { font-size: .875rem; font-weight: 600; line-height: 1.4; }
  .ih-of-dates { gap: 8px; }
  .ih-of-date {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
    padding: 3px 14px; border: 1px dashed var(--color--gray-1-op30); border-radius: var(--border-radius--md);
    background-color: var(--color--white); color: var(--color--gray-1); text-decoration: none;
    font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  }
  .ih-of-date-price { font-size: .75rem; font-weight: 500; color: var(--color--gray-1-op70); }
  .ih-of-book.button-black { width: 100%; justify-content: space-between; }
  /* related offers: one swipeable row (theme.css .ih-scroll-row), the next card peeking in */
  .tours-section .grid-tours-item.ih-scroll-row { gap: 12px; }
  .tours-section .grid-tours-item.ih-scroll-row > * { width: 82%; }
}
/* booking bar: phones, and phones in landscape */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (max-height: 500px) {
  .ih-mbar {
    position: fixed; inset: auto 0 0; z-index: 90; display: flex; align-items: center; gap: 8px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #fff; box-shadow: 0 -6px 20px rgba(15, 39, 69, .12); color: var(--color--gray-1);
    transition: translate .25s ease, visibility 0s linear 0s;
  }
  /* hidden: slid below the window (no layout shift) */
  .ih-mbar.ih-mbar-off, html.ih-menu-open .ih-mbar, html.ih-contact-open .ih-mbar, html.w-lightbox-noscroll .ih-mbar {
    translate: 0 calc(100% + 24px); visibility: hidden; transition: translate .25s ease, visibility 0s linear .25s;
  }
  .ih-mbar-price { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .ih-mbar-from { font-size: .8125rem; color: var(--color--gray-1-op70); }
  /* „/ човек” drops under the price when a long price leaves no room beside it (never under the buttons) */
  .ih-mbar-num { font-family: var(--_typography---font-family--heading); font-size: 1.25rem; font-weight: 600; }
  .ih-mbar-per { font-family: var(--_typography---font-family--body); font-size: .8125rem; font-weight: 400; color: var(--color--gray-1-op70); white-space: nowrap; }
  .ih-mbar-round {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--color--gray-1-op30); background-color: var(--color--white);
  }
  .ih-mbar-round img { width: 18px; height: 18px; }
  .ih-mbar-viber { border-color: var(--color--secondary-1); background-color: var(--color--secondary-1); }
  .ih-mbar-book {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
    border-radius: var(--border-radius--xl); background-color: var(--color--black); color: var(--color--white);
    font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  }
}
@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce), screen and (max-width: 991px) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
  .ih-mbar, .ih-mbar.ih-mbar-off, html.ih-menu-open .ih-mbar, html.ih-contact-open .ih-mbar, html.w-lightbox-noscroll .ih-mbar { transition: none; }
}
@media screen and (max-width: 479px) {
  /* sidebar facts: label left, value right (top-aligned) on one line */
  .tours-info-list { flex-wrap: nowrap; align-items: flex-start; column-gap: 12px; }
  .tours-info-list .tours-info { flex: none; }
  .tours-info-list > .text-gray-1 { min-width: 0; text-align: right; }
}
@media screen and (max-width: 479px) {
  /* booking bar on small phones: a little tighter, so the price keeps its line beside the buttons */
  .ih-mbar { gap: 6px; }
  .ih-mbar-num { font-size: 1.125rem; }
  .ih-mbar-per { font-size: .75rem; }
  .ih-mbar-book { padding: 0 16px; }
}
@media screen and (max-width: 359px) {
  .ih-mbar-viber { display: none; }
}
@media screen and (max-width: 991px) and (max-height: 500px) {
  .ih-mbar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .ih-mbar-book { padding: 0 28px; }
}