/* hotel-base.css — стили карточки отеля, ОДНИ на обе версии дизайна.
 *
 * Перенесено 2026-08-29 из <style> внутри pages/hotel/index.html без единой правки.
 * Здесь же весь мобильный вид: по решению владельца телефон в новой версии выглядит
 * так же, как сегодня, поэтому новая версия подключает этот файл первым и лишь
 * надстраивает над ним десктоп.
 */

  /* Tailwind CDN's .flex/.block utilities have the same specificity as base [hidden]{display:none},
     so a node with class="flex" + the hidden attribute stayed VISIBLE (e.g. the account-menu links,
     incl. "Сайт"). Force [hidden] to win so JS `el.hidden = true` actually hides. (matches /pms, /admin) */
  [hidden] { display: none !important; }
  body {
    background-color: #fcf9f8;
    color: #1c1b1b;
    font-family: 'Manrope', sans-serif;
    /* ERR-018 guard: NO overflow-x:hidden on html/body — it breaks position:fixed on Android.
       Horizontal bleed is contained per-section instead. */
  }
  /* D-06 MAJOR fix: contain any horizontal bleed on IN-FLOW content containers only (never
     html/body — ERR-018). */
  /* overflow-y stays explicit "visible" — setting only overflow-x would otherwise force the
     browser to promote overflow-y to "auto" (CSS spec: mismatched visible/non-visible pairs are
     not allowed), which would turn main into its own scroll container and break the descendant
     sticky booking-form panel (position:sticky needs the document as scroller). */
  #site-header, main, footer { overflow-x: clip; overflow-y: visible; max-width: 100vw; }
  /* iconify icons inherit color + size; default optical sizing for crisp render */
  iconify-icon { display: inline-block; vertical-align: -0.125em; }
  .price-num { font-variant-numeric: tabular-nums; }
  /* Gallery carousel: hide the scrollbar (webkit) — arrows + drag/swipe drive it. */
  #gallery-thumbs::-webkit-scrollbar { display: none; }
  #gallery-thumbs > * { scroll-snap-align: start; }

  /* ===== Module-5 effects (mechanics 1:1 from home S-05/S-06, palette light B/W) ===== */
  /* E7 scroll-reveal fade-up + cascade. Fallback: .js-ready not set => content visible (no-aos safety). */
  .reveal { opacity: 1; transform: none; }
  html.js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform 1.25s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  html.js-ready .reveal.is-in { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: .06s; }
  .reveal.delay-2 { transition-delay: .12s; }
  .reveal.delay-3 { transition-delay: .18s; }
  .reveal.delay-4 { transition-delay: .24s; }

  /* D-06 CRIT fix: mobile nav drawer (burger). Mirrors the desktop nav + account actions below md.
     Reuses the SAME open/close/outside-click/Escape JS pattern as #acct-menu. */
  #mobile-menu {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(28,27,27,0.45);
  }
  #mobile-menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 340px);
    background: #fcf9f8; box-shadow: -16px 0 48px -24px rgba(0,0,0,0.45);
    padding: 20px; display: flex; flex-direction: column; gap: 4px;
    overflow-y: auto;
  }

  /* E1 sticky header: transparent over page → blurred panel on scroll */
  #site-header { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
  #site-header.scrolled {
    background-color: rgba(252, 249, 248, 0.82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
  }

  /* E8 gallery main photo: plain placeholder, then whole image appears at once (no top-down curtain) */
  .clip-reveal { background: #efeae8; opacity: 0; transition: opacity .2s ease; }
  .clip-reveal.is-in { opacity: 1; }

  /* E15 back-to-top spring slide-in */
  #backToTop {
    position: fixed; right: 24px; bottom: 24px; z-index: 40;
    width: 48px; height: 48px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: #000; color: #fff;
    opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  }
  #backToTop.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

  /* E21 micro: focus-visible rings (accessibility) */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid #000; outline-offset: 2px; border-radius: 4px;
  }

  /* Amenity accordion chevron rotate (matches Stitch) */
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .acc-chevron { transform: rotate(180deg); }
  .acc-chevron { transition: transform .25s ease; }

  /* Room photo rail (E17): horizontal scroll-snap on desktop */
  .room-rail { scroll-snap-type: x mandatory; }
  .room-rail > * { scroll-snap-align: start; }

  /* Tap targets ≥44px on mobile (success-criteria E2 / RG-5). Desktop keeps the compact sizes.
     lg breakpoint = 1024px. Room CTA, breadcrumb, share + small icon buttons get a 44px floor on touch. */
  @media (max-width: 1023px) {
    [data-room-id] { min-height: 44px; display: inline-flex; align-items: center; }
    #bc-search { min-height: 44px; display: inline-flex; align-items: center; }
    #share-btn, #backToTop { min-width: 44px; min-height: 44px; }
    /* S-08 guest stepper buttons get a 44px touch floor on mobile (success-criteria E2) */
    .bk-step { min-width: 44px; min-height: 44px; }
  }

  /* ===== flatpickr theme override → light B/W aggregator palette (NOT brass) ===== */
  .flatpickr-calendar {
    font-family: 'Inter', sans-serif;
    border-radius: 0.75rem;
    border: 1px solid #c4c7c7;            /* outline-variant */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18), 0 0 20px rgba(0,0,0,0.04);
    background: #fcf9f8;                   /* surface */
  }
  .flatpickr-months, .flatpickr-month,
  .flatpickr-current-month, .flatpickr-weekday { color: #1c1b1b; fill: #1c1b1b; }
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year { color: #1c1b1b; font-weight: 600; }
  .flatpickr-weekday { color: #444748; font-weight: 600; }   /* on-surface-variant */
  .flatpickr-day { color: #1c1b1b; border-radius: 9999px; }
  .flatpickr-day:hover,
  .flatpickr-day:focus { background: #ebe7e7; border-color: #ebe7e7; }  /* surface-container-high */
  /* selected + range = primary black */
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
  .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: #000; border-color: #000; color: #fff;
  }
  .flatpickr-day.inRange {
    background: #ebe7e7; border-color: #ebe7e7; color: #1c1b1b;
    box-shadow: -5px 0 0 #ebe7e7, 5px 0 0 #ebe7e7;
  }
  .flatpickr-day.today { border-color: #c4c7c7; }
  .flatpickr-day.today:hover { background: #ebe7e7; color: #1c1b1b; }
  /* disabled (mock "occupied") days — struck/dim, clearly unavailable */
  .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: #c4c7c7; background: transparent; text-decoration: line-through; cursor: not-allowed;
  }
  .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #c4c7c7; }
  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg { fill: #000; }

  /* ===== Booking form (S-08) ===== */
  .bk-field { width: 100%; background: #f6f3f2; border: 1px solid transparent; border-radius: 0.75rem;
    padding: 0.875rem 1rem; color: #1c1b1b; font-family: 'Inter', sans-serif; font-size: 16px; transition: border-color .2s ease, background-color .2s ease; }
  .bk-field::placeholder { color: #747878; }
  .bk-field:hover { background: #f0edec; }
  .bk-field:focus { outline: none; border-color: #000; background: #fff; }
  /* Country combobox: force brand-black focus border (palette has no blue — overrides UA combobox default). */
  #bk-country:focus, #bk-country:focus-visible { outline: none; border-color: #000; background: #fff; }
  .bk-field[readonly] { cursor: pointer; }
  /* Reviews collapse/expand — explicit rules so clamp works even if the Tailwind CDN
     JIT never sees these classes (they are injected via innerHTML, not static markup). */
  .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .line-clamp-none { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; }
  .rv-toggle-icon.rotate-180 { transform: rotate(180deg); }
  /* guest stepper round buttons */
  .bk-step { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    background: #fcf9f8; color: #1c1b1b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: scale .15s ease, background-color .2s ease, opacity .2s ease; }
  .bk-step:hover:not(:disabled) { background: #ebe7e7; }
  .bk-step:disabled { opacity: 0.35; cursor: not-allowed; }
  .bk-step.plus { background: #000; color: #fff; }
  .bk-step.plus:hover:not(:disabled) { background: #444748; }

  /* ===== Confirmation modal (E18 slide+fade) ===== */
  #bk-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; }
  #bk-modal.open { display: flex; }
  #bk-modal .bk-backdrop { position: absolute; inset: 0; background: rgba(28,27,27,0.45); opacity: 0; transition: opacity .3s ease; }
  #bk-modal.open .bk-backdrop { opacity: 1; }
  #bk-modal .bk-dialog { position: relative; width: 100%; max-width: 26rem; background: #fcf9f8; border-radius: 1.5rem;
    padding: 2rem; box-shadow: 0 30px 60px -12px rgba(0,0,0,0.3);
    opacity: 0; transform: translateY(24px) scale(.97);
    transition: opacity .35s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.34,1.56,.64,1); }
  #bk-modal.open .bk-dialog { opacity: 1; transform: translateY(0) scale(1); }

  /* Значок типа помещения на кнопке (миграция 046). Размер задан здесь, а не классом
     Tailwind в разметке: имя значка обязано стоять в коде БУКВАЛЬНО (сторож имён), поэтому
     тег целиком лежит таблицей в hotel-core.js и своего размера не несёт. */
  .facility-pill .fac-ico { font-size: 18px; margin-right: .5rem; flex-shrink: 0; }

  /* ===== Facility detail modal (U-10) — desktop photo-left/text-right, mobile bottom-sheet photo-fixed-top ===== */
  #facility-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: flex-end; justify-content: center; }
  #facility-modal.open { display: flex; }
  @media (min-width: 768px) { #facility-modal { align-items: center; padding: 1rem; } }
  #facility-modal .fm-backdrop { position: absolute; inset: 0; background: rgba(28,27,27,0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease; }
  #facility-modal.open .fm-backdrop { opacity: 1; }
  /* Mobile: bottom sheet, photo fixed on top, only text scrolls */
  #facility-modal .fm-dialog { position: relative; width: 100%; max-width: 30rem; height: 85vh; background: #fcf9f8;
    border-radius: 1.5rem 1.5rem 0 0; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 -12px 40px -12px rgba(0,0,0,0.3);
    opacity: 0; transform: translateY(28px); transition: opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
  #facility-modal.open .fm-dialog { opacity: 1; transform: translateY(0); }
  #facility-modal .fm-photo { position: relative; flex-shrink: 0; height: 260px; background: #e8e6e4; }
  #facility-modal .fm-photo img { width: 100%; height: 100%; object-fit: cover; }
  #facility-modal .fm-text { flex: 1 1 auto; overflow-y: auto; padding: 1.5rem; }
  /* Desktop: photo-left 55% / text-right 45%, side by side */
  @media (min-width: 768px) {
    #facility-modal .fm-dialog { flex-direction: row; max-width: 60rem; height: 600px; max-height: 88vh; border-radius: 1.25rem; }
    #facility-modal .fm-photo { width: 55%; height: 100%; }
    #facility-modal .fm-text { width: 45%; padding: 2.5rem; }
  }
  #facility-modal .fm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem;
    border-radius: 9999px; background: rgba(252,249,248,0.92); color: #000; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25); transition: background .15s ease, scale .15s ease; }
  #facility-modal .fm-nav:hover { background: #fff; }
  #facility-modal .fm-prev { left: .75rem; }
  #facility-modal .fm-next { right: .75rem; }
  #facility-modal .fm-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    background: rgba(28,27,27,0.6); color: #fff; font-size: 12px; padding: .25rem .75rem; border-radius: 9999px; }

  /* ===== Удобства отеля (WP15, 11.09.2026): только значок в клетке сетки =====
     «Все удобства» и окно за ней владелец убрал целиком (см. hotel/v2.html) — блок теперь
     показывает только hotel-level удобства без разворота. Размер значка задан здесь: имя
     значка обязано стоять в коде БУКВАЛЬНО (сторож имён), поэтому тег целиком лежит таблицей
     в hotel-core.js и своего размера не несёт. */
  #amenities-grid .amn-ico { font-size: 22px; }

  /* Reduced motion: kill all decorative motion, content always visible */
  @media (prefers-reduced-motion: reduce) {
    html.js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .clip-reveal { transition: none !important; }
    #site-header, #backToTop, .reveal { transition: none !important; }
    #bk-modal .bk-backdrop, #bk-modal .bk-dialog { transition: none !important; }
    #facility-modal .fm-backdrop, #facility-modal .fm-dialog, #facility-modal .fm-nav { transition: none !important; }
    #ccy-note, #ccy-note #ccy-note-card { transition: none !important; }
    html { scroll-behavior: auto !important; }
  }
  /* Reference-price notice: fade overlay + spring-up card */
  #ccy-note.is-open { opacity: 1; }
  #ccy-note.is-open #ccy-note-card { transform: translateY(0) scale(1); }

  /* U-5+6c: room-availability filter marks (rendered only when the «Найти» filter is active).
     Badge/overlay are absolute INSIDE the photo container (which gets `relative`) — html/body
     overflow is never touched, so the fixed concierge FAB stays clickable on Android (ERR-018). */
  .room-badge-free {
    position: absolute; top: .5rem; left: .5rem; z-index: 10;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem; border-radius: 9999px;
    background: #1b7f4b; color: #fff;
    font-size: .75rem; line-height: 1; font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(27,127,75,.5); }
  .room-badge-cap {
    position: absolute; top: .5rem; left: .5rem; z-index: 10;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .625rem; border-radius: 9999px;
    background: rgba(28,27,27,.78); color: #fcf9f8;
    font-size: .75rem; line-height: 1; font-weight: 600; }
  .room-overlay-busy {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0 .75rem;
    background: rgba(28,27,27,.55); color: #fcf9f8;
    font-size: .8125rem; line-height: 1.2; font-weight: 600; }
  .room-dimmed { opacity: .6; }

  /* Наезд фото в карточке номера. Раньше это были классы Tailwind прямо в шаблоне, БЕЗ
     оговорки про мышь: на телефоне первое касание считалось наведением и фото оставалось
     увеличенным до следующего тапа. Теперь наезд живёт здесь, мягкий, 450ms в обе стороны
     (решение владельца 31.08.2026). */
  .room-photo {
    transition: transform 450ms cubic-bezier(0.25,0.46,0.45,0.94);
    backface-visibility: hidden;
  }
  @media (hover: hover) and (pointer: fine) {
    #rooms-list .group:hover .room-photo {
      transform: scale(1.04) translateZ(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-photo { transition: none !important; }
    #rooms-list .group:hover .room-photo { transform: none; }
  }

  /* Звёзды формы отзыва: касание обязано попадать в саму кнопку, а не в иконку внутри неё.
     Иконку перерисовка подменяет новым узлом, и если палец «схватил» именно её, то
     mousedown/click с телефона приходят в узел, уже выброшенный из страницы, — оценка не
     ставилась (31.08.2026). Кнопка живёт всё время, поэтому цель касания уводим на неё. */
  #rv-stars .rv-star iconify-icon { pointer-events: none; }
  /* И никакой задержки на «вдруг это двойной тап» между соседними звёздами. */
  #rv-stars .rv-star { touch-action: manipulation; }