/* .be-entry below sets overflow-x:hidden on , but is this page's actual root scroller — without this too, window can still be scrolled/dragged horizontally past body's clipped edge (Chromium does not always propagate body's overflow-x up to the viewport). */ html { overflow-x: hidden; } .be-entry { --be-body-bg: #f8fafc; --be-primary: #0f766e; --be-primary-light: #14b8a6; --be-accent: #0f766e; --be-heading: #0f172a; --be-heading-alt: #334155; --be-link: #0f766e; --be-link-hover: #0d5c56; --be-nav-link: #4a4a4a; --be-nav-link-hover: #0f766e; --be-price: #0f766e; --be-muted: #64748b; --be-surface-tint: #f0fdfa; --be-panel-bg: #f8fffe; --be-footer-bg: #f4f4f2; --be-primary-rgb: 15, 118, 110; --be-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.02), 0 1px 1px rgba(15, 23, 42, 0.015); --be-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.032), 0 1px 2px rgba(15, 23, 42, 0.02); --be-shadow-lg: 0 8px 18px rgba(15, 23, 42, 0.045), 0 2px 6px rgba(15, 23, 42, 0.025); --be-shadow-lg-up: 0 -5px 13px rgba(15, 23, 42, 0.032); margin: 0; min-height: 100vh; /* Off-screen absolutely-positioned elements (tooltip bubbles, nav dropdown popovers) keep their laid-out geometry even while hidden via opacity/visibility (not display:none — needed for their open/close transitions), which otherwise lets the page scroll/drag horizontally on mobile even though nothing visible is actually there. */ overflow-x: hidden; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--be-heading); /* Owner binding: ALL properties — flat theme colors only (no brand gradients). */ background: var(--be-body-bg); } .be-entry__header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(var(--be-primary-rgb), 0.12); background: #fff; } .be-entry__brand { display: flex; gap: 0.85rem; align-items: center; } .be-entry__logo { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 0.65rem; background: var(--be-primary); color: #fff; font-weight: 700; font-size: 0.85rem; } .be-entry__logo-img { display: inline-block; width: 2.5rem; height: 2.5rem; border-radius: 0.65rem; object-fit: contain; background: #fff; } .be-entry__title { margin: 0; font-size: 1.25rem; } .be-entry__subtitle { margin: 0.15rem 0 0; font-size: 0.85rem; color: #64748b; } .be-entry__mode { font-size: 0.85rem; color: #475569; } .be-entry__mode-label { margin-right: 0.35rem; } .be-entry__main { max-width: 720px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .be-entry__card { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.75rem; padding: 1.25rem; box-shadow: var(--be-shadow-sm); } .be-entry__card--info { background: #f8fafc; } .be-entry__card-title { margin: 0 0 0.75rem; font-size: 1rem; } .be-entry__room-full-detail { color: #334155; font-size: 0.9rem; line-height: 1.65; } .be-entry__room-full-detail img { max-width: 100%; height: auto; border-radius: 8px; } .be-entry__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 0; } .be-entry__meta dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 0.15rem; } .be-entry__meta dd { margin: 0; font-weight: 600; } /* Confirmation page (confirm_success.php / confirm_payment_pending.php): these render as a standalone page (not inside .be-home__flow-content), so they already keep the bordered/shadowed .be-entry__card look by default — this only adds the same "grand total stands out" treatment used on Review. */ .be-entry__meta--highlight { grid-column: 1 / -1; margin-top: 0.4rem; padding: 0.75rem 1rem; background: #f8fafc; border-radius: 0.5rem; } .be-entry__meta--highlight dt { color: var(--be-primary); } .be-entry__meta--highlight dd { font-size: 1.2rem; color: var(--be-primary); } /* HACE: confirmation — denser first screen, session-language payment block */ .be-entry--confirm .be-entry__main--confirm { gap: 0.75rem; max-width: 1040px; padding-top: 1rem; padding-bottom: 1.25rem; } .be-entry--confirm .be-entry__card { padding: 0.9rem 1rem; } .be-entry--confirm .be-entry__card-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; } .be-entry--confirm .be-entry__alert { margin-bottom: 0; } .be-confirm__skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.5rem 0.85rem; background: #fff; color: var(--be-primary); border: 1px solid rgba(var(--be-primary-rgb), 0.25); border-radius: 0.35rem; text-decoration: none; font-size: 0.85rem; } .be-confirm__skip:focus { left: 0.75rem; top: 0.75rem; } .be-confirm__header { padding: 0.85rem 1.25rem; gap: 0.75rem; } .be-confirm__logo { width: auto !important; height: auto !important; max-height: 44px; max-width: 160px; border-radius: 0.35rem; } .be-confirm__brand-text { font-weight: 700; font-size: 1rem; color: var(--be-heading); } .be-confirm__header-copy .be-confirm__property { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .be-confirm__header-copy .be-entry__title { font-size: 1.1rem; line-height: 1.25; } .be-confirm__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.85rem 1.25rem; align-items: start; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.65rem; padding: 0.95rem 1.1rem; box-shadow: var(--be-shadow-sm); } .be-confirm__eyebrow { margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--be-primary); text-transform: uppercase; letter-spacing: 0.04em; } .be-confirm__booking-label { margin: 0; font-size: 0.8rem; font-weight: 600; color: #64748b; } .be-confirm__booking-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.2rem; } .be-confirm__booking-no { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.02em; color: var(--be-heading); word-break: break-word; } .be-confirm__copy { appearance: none; border: 1px solid rgba(var(--be-primary-rgb), 0.35); background: #fff; color: var(--be-primary); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 0.35rem; cursor: pointer; } .be-confirm__copy:hover, .be-confirm__copy:focus-visible { background: var(--be-surface-tint, #f0fdfa); outline: 2px solid rgba(var(--be-primary-rgb), 0.35); outline-offset: 1px; } .be-confirm__copy-feedback { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--be-primary); } .be-confirm__status-wrap { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; } .be-confirm__status-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; } .be-confirm__multi-note { margin: 0.45rem 0 0; text-align: right; font-size: 0.8rem; } .be-confirm__alert { display: flex; flex-direction: column; gap: 0.25rem; } .be-confirm__alert strong { font-weight: 700; } .be-confirm__deadline { margin: 0.35rem 0 0; } .be-confirm__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 0.75rem; align-items: start; } .be-confirm__grid--single { grid-template-columns: 1fr; } .be-confirm__col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .be-confirm__col--payment { position: sticky; top: 0.75rem; } .be-confirm__panel--cta { border-color: rgba(var(--be-primary-rgb), 0.22); background: var(--be-surface-tint, #f0fdfa); } .be-confirm__cta-copy { margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.45; color: #334155; } .be-confirm__cta-btn { display: inline-flex; width: 100%; justify-content: center; text-align: center; text-decoration: none; } .be-confirm__pay-note { margin: 0; font-size: 0.85rem; line-height: 1.45; } .be-confirm__footer { padding: 0.85rem 1rem 1.25rem; } .be-confirm__footer-copy { margin: 0; } .be-confirm__footer-copy a { color: inherit; text-decoration: none; } .be-confirm__footer-copy a:hover, .be-confirm__footer-copy a:focus-visible { color: var(--be-primary); text-decoration: underline; } .be-entry__status-badge--success { background: #ecfdf5; color: #047857; } .be-entry__status-badge--warn { background: #fff7ed; color: #c2410c; } .be-entry__status-badge--danger { background: #fef2f2; color: #b91c1c; } .be-entry__status-badge--muted { background: #f1f5f9; color: #475569; } .be-confirm-empty { max-width: 36rem; margin: 0 auto; text-align: left; } .be-confirm-empty__eyebrow { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--be-primary); text-transform: uppercase; letter-spacing: 0.04em; } .be-confirm-empty__hint { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.5; } .be-entry__card--payment .be-entry__payment-note { margin: 0.75rem 0 0; line-height: 1.45; } .be-entry__payment-qr { margin-top: 0.9rem; text-align: center; } .be-entry__payment-qr-label { margin: 0 0 0.45rem; font-weight: 600; } .be-entry__payment-qr img { display: inline-block; max-width: 220px; max-height: 220px; width: auto; height: auto; border: 1px solid #dbe4ee; border-radius: 8px; padding: 8px; background: #fff; } @media (max-width: 899.98px) { .be-confirm__grid { grid-template-columns: 1fr; } .be-confirm__col--payment { position: static; order: -1; } } @media (max-width: 767.98px) { .be-entry--confirm .be-entry__header { gap: 0.65rem; } .be-entry--confirm .be-entry__card { padding: 0.85rem 0.9rem; } .be-confirm__hero { grid-template-columns: 1fr; } .be-confirm__status-wrap, .be-confirm__multi-note { align-items: flex-start; text-align: left; } .be-confirm__booking-no { font-size: 1.25rem; } } .be-entry__status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--be-surface-tint, #f0fdfa); color: var(--be-primary); } .be-entry__search { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; align-items: end; } .be-entry__field label { display: block; font-size: 0.8125rem; font-weight: 700; color: #333333; margin-bottom: 0.25rem; } .be-entry__field input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.4rem; background: #f1f5f9; color: #64748b; } .be-entry__actions { grid-column: 1 / -1; } .be-entry__btn { box-sizing: border-box; padding: 0.6rem 1.25rem; border: 0; border-radius: 0.5rem; background: #94a3b8; color: #fff; font-weight: 600; cursor: not-allowed; } .be-entry__btn--primary { background: var(--be-primary); cursor: pointer; } .be-entry__btn--primary:hover { background: var(--be-link-hover); } .be-entry__btn--primary:disabled { background: #94a3b8; cursor: not-allowed; } .be-entry__btn--primary:disabled:hover { background: #94a3b8; } .be-entry__btn--inline { display: inline-block; text-decoration: none; margin-top: 0.75rem; } .be-entry__room-card-side [data-be-cart-feedback] { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.35; } .be-entry__field input:not(:disabled) { background: #fff; color: #0f172a; } .be-entry__field select, .be-entry__field textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.4rem; background: #fff; color: #0f172a; font: inherit; } .be-entry__guest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .be-entry__field--wide { grid-column: 1 / -1; } .be-entry__guest-form { margin: 0; } .be-entry__guest-actions { margin-top: 0.75rem; } label.be-entry__checkbox { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; color: #334155; margin: 0.75rem 0; cursor: pointer; } .be-entry__terms-row { display: flex; align-items: flex-start; gap: 0.4rem; } .be-entry__terms-row label.be-entry__checkbox { margin: 0.75rem 0; } .be-entry__checkbox-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .be-entry__tooltip { position: relative; display: inline-flex; margin-top: 0.85rem; outline: none; } .be-entry__tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #cbd5e1; color: #fff; font-size: 0.7rem; font-style: italic; font-weight: 700; cursor: help; flex-shrink: 0; } .be-entry__tooltip-bubble { position: absolute; bottom: calc(100% + 0.5rem); left: 0; z-index: 20; width: max-content; width: min(26rem, 90vw); max-width: 26rem; max-height: 60vh; overflow-y: auto; background: #0f172a; color: #fff; font-size: 0.85rem; line-height: 1.6; padding: 0.85rem 1rem; border-radius: 0.5rem; box-shadow: var(--be-shadow-md); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } /* Terms content is rich admin-authored HTML (often Word-pasted) — force our own readable typography over any inline font-family/font-size/color so it never fights the dark tooltip background or breaks the layout. */ .be-entry__tooltip-bubble * { font-family: inherit !important; color: inherit !important; background: transparent !important; max-width: 100%; } .be-entry__tooltip-bubble p { margin: 0 0 0.75rem; font-size: 0.85rem !important; } .be-entry__tooltip-bubble p:empty, .be-entry__tooltip-bubble p:has(> span:empty:only-child) { display: none; } .be-entry__tooltip-bubble p:last-child { margin-bottom: 0; } .be-entry__tooltip-bubble::after { content: ''; position: absolute; top: 100%; left: 0.4rem; border: 6px solid transparent; border-top-color: #0f172a; } .be-entry__tooltip:hover .be-entry__tooltip-bubble, .be-entry__tooltip:focus .be-entry__tooltip-bubble, .be-entry__tooltip:focus-within .be-entry__tooltip-bubble { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 480px) { .be-entry__tooltip-bubble { max-width: 90vw; } } .be-entry__checkbox input { width: auto; margin-top: 0.2rem; } .be-entry__checkbox--inline { margin: 0.25rem 0 0; } .be-entry__field-label { display: block; margin-bottom: 0.35rem; font-weight: 600; color: #334155; } .be-entry__radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; } .be-entry__radio { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: #334155; cursor: pointer; } .be-entry__radio input { margin: 0; } .be-entry__payment-section { background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.65rem; padding: 0.9rem 1rem 1.05rem; } .be-entry__payment-heading { font-size: 0.9rem; margin-bottom: 0.6rem; } .be-entry__radio-group--payment { gap: 0.6rem; } .be-entry__radio--payment { background: #fff; border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.85rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .be-entry__radio--payment:has(input:checked) { border-color: var(--be-primary); box-shadow: 0 0 0 1px var(--be-primary); background: #f0fdf9; font-weight: 600; } .be-entry__radio--payment { position: relative; } .be-entry__radio--payment input[type="radio"], .be-entry__radio--payment input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); } .be-entry__radio--payment:has(input:focus-visible) { outline: 2px solid var(--be-primary); outline-offset: 2px; } .be-entry__payment-option-label { display: inline-flex; align-items: center; gap: 0.5rem; } .be-entry__payment-icon { width: 28px; height: 28px; object-fit: contain; border-radius: 0.35rem; background: #fff; } .be-entry__summary-toggle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; } .be-entry__toggle-box { background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.65rem; overflow: hidden; } .be-entry__toggle-box > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; font-weight: 700; color: #0f172a; } .be-entry__toggle-box > summary::-webkit-details-marker { display: none; } .be-entry__toggle-box > summary::after { content: '\25BE'; color: #64748b; transition: transform 0.15s ease; flex-shrink: 0; } .be-entry__toggle-box[open] > summary::after { transform: rotate(180deg); } .be-entry__toggle-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; } .be-entry__toggle-amount { font-weight: 600; color: var(--be-primary); white-space: nowrap; } .be-entry__toggle-body { padding: 0 1rem 1rem; border-top: 1px solid rgba(15, 23, 42, 0.06); padding-top: 0.85rem; } .be-entry__radio-group--stacked { display: flex; flex-direction: column; gap: 0.5rem; } .be-entry__totals { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 0.4rem; } .be-entry__totals div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .be-entry__totals dt { color: #64748b; font-size: 0.85rem; } .be-entry__totals dd { margin: 0; font-weight: 600; color: #0f172a; } .be-entry__totals-grand { padding-top: 0.4rem; border-top: 1px dashed rgba(15, 23, 42, 0.12); } .be-entry__totals-grand dt, .be-entry__totals-grand dd { font-size: 1.05rem; font-weight: 700; color: #0f172a; } .be-entry__required { color: #b45309; } .be-entry__field-error { margin: 0.4rem 0 0; font-size: 0.85rem; color: #b91c1c; } .be-entry__hint-inline { margin: 0.35rem 0 0; font-size: 0.8rem; color: #64748b; } .be-entry__pickup-selected-msg { margin: 0 0 0.85rem; padding: 0.55rem 0.75rem; border-left: 3px solid #0f766e; background: #f0fdfa; font-size: 0.9rem; font-weight: 600; color: #134e4a; } .be-entry__pickup-selected-msg[hidden] { display: none !important; } .be-entry__meta--guest .be-entry__meta-wide { grid-column: 1 / -1; } .be-entry__meta-wide dd { white-space: pre-wrap; } .be-entry__link-back { font-size: 0.9rem; color: var(--be-primary); text-decoration: none; } .be-entry__main--wide { max-width: 880px; } .be-entry__results-title { margin: 0 0 0.75rem; font-size: 1.15rem; } .be-entry__results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .be-entry__results-subtitle { margin: -0.35rem 0 0; color: #64748b; font-size: 0.92rem; line-height: 1.55; max-width: 52rem; } .be-results-search { margin-bottom: 1.25rem; } .be-search-summary { padding: 1rem 1.15rem; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 10px; box-shadow: var(--be-shadow-sm); } .be-search-summary__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; } .be-search-summary__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--be-heading); } .be-search-summary__edit { border: 0; background: transparent; color: var(--be-link); font-size: 0.92rem; font-weight: 600; cursor: pointer; padding: 0.15rem 0; text-decoration: underline; text-underline-offset: 0.15em; } .be-search-summary__edit:hover, .be-search-summary__edit:focus-visible { color: var(--be-link-hover); } .be-search-summary__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; margin: 0; } .be-search-summary__meta > div { display: grid; gap: 0.1rem; } .be-search-summary__meta dt { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--be-muted); text-transform: uppercase; letter-spacing: 0.03em; } .be-search-summary__meta dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--be-heading); } .be-results-search__form { margin-top: 0.75rem; } .be-results-search__form[hidden] { display: none !important; } @media (min-width: 768px) { .be-search-summary__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .be-search-summary__meta { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .be-search--compact { padding: 1rem 1.15rem; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 10px; box-shadow: var(--be-shadow-sm); } .be-search--compact .be-search__head { margin-bottom: 0.75rem; } .be-search--compact .be-search__title { font-size: 1.15rem; margin: 0; } .be-search--compact .be-search__subtitle { margin: 0.2rem 0 0; font-size: 0.9rem; } .be-search--compact .be-search__form { gap: 0.75rem; } .be-results-layout { display: grid; gap: 1.25rem; } .be-results-layout__summary, .be-results-layout__content { min-width: 0; } .be-entry__card--summary { background: #fff; border-color: rgba(var(--be-primary-rgb), 0.14); } .be-entry__card--basket { display: flex; flex-direction: column; gap: 0.65rem; } .be-entry__meta--compact { gap: 0.35rem 0.75rem; } .be-entry__basket-divider { margin: 0.35rem 0; border: 0; border-top: 1px solid #e8eef4; } .be-entry__basket-empty { margin: 0; color: #dc2626; font-weight: 600; font-size: 0.95rem; } .be-entry__basket-lines { display: grid; gap: 0.65rem; } .be-entry__basket-line { padding: 0.65rem 0.7rem; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px; background: #f8fafc; } .be-entry__basket-line-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .be-entry__basket-line-title { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--be-primary); text-transform: uppercase; letter-spacing: 0.04em; } .be-entry__basket-line-name { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--be-heading); } .be-entry__basket-line-occupancy { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--be-muted, #6b7280); } .be-entry__basket-line-extrabed { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--be-muted, #6b7280); } .be-entry__basket-line-price { margin: 0.35rem 0 0; font-weight: 700; color: var(--be-price); } .be-entry__basket-remove { border: 0; background: transparent; color: #94a3b8; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; } .be-entry__basket-remove:hover { color: #dc2626; } .be-entry__basket-total { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-top: 0.35rem; font-size: 0.95rem; } .be-entry__basket-total strong { color: var(--be-price); font-size: 1.05rem; } .be-entry__summary-actions { display: grid; gap: 0.5rem; margin-top: 0.35rem; } .be-entry__summary-actions .be-entry__btn { width: 100%; text-align: center; justify-content: center; } /* Mobile/tablet basket: floating price bar pinned to the bottom of the screen, toggling the full basket summary up as a bottom sheet instead of the sheet competing for room-list scroll space (see .be-results-layout__summary order fix above). Desktop keeps the sticky sidebar column untouched. */ .be-entry__basket-fab, .be-entry__basket-backdrop, .be-entry__basket-sheet-close { display: none; } @media (max-width: 991px) { .be-entry__basket-fab { display: flex; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 150; } .be-entry__basket-fab-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; border: 0; border-radius: 999px; padding: 0.7rem 1.1rem; background: var(--be-primary); color: #fff; box-shadow: var(--be-shadow-md); cursor: pointer; } .be-entry__basket-fab-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; text-align: left; } .be-entry__basket-fab-count { font-size: 0.72rem; opacity: 0.85; } .be-entry__basket-fab-price { font-size: 1rem; font-weight: 700; } .be-entry__basket-fab-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .be-entry__basket-fab-caret { display: inline-block; transition: transform 0.2s ease; } .be-entry__basket-fab.is-open .be-entry__basket-fab-caret { transform: rotate(180deg); } .be-entry__basket-backdrop { display: block; position: fixed; inset: 0; z-index: 140; background: rgba(15, 23, 42, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .be-entry__basket-backdrop.is-open { opacity: 1; pointer-events: auto; } .be-results-layout__summary.be-entry__basket-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; box-shadow: var(--be-shadow-lg-up); z-index: 160; transform: translateY(110%); transition: transform 0.28s ease; } .be-results-layout__summary.be-entry__basket-sheet.is-open { transform: translateY(0); } /* Drag-handle affordance at the top of the sheet — purely cosmetic, signals "this slides" the way native bottom sheets do. */ .be-results-layout__summary.be-entry__basket-sheet::before { content: ""; display: block; width: 2.5rem; height: 0.28rem; margin: 0.55rem auto 0; border-radius: 999px; background: #e2e8f0; } /* The card inside the sheet used to keep its own border/shadow/radius, nesting a card inside the sheet's card and doubling the visual frame and padding. The sheet itself is now the single frame, so strip the inner card back to plain content with generous, consistent spacing. Selector deliberately includes both .be-entry__card--summary AND .be-entry__card--basket (three classes total incl. .be-entry__basket-sheet) to out-specificity the unrelated `.be-home__flow-content .be-entry__card` rule elsewhere in this file — that rule matches this same element too (it's a descendant of .be-home__flow-content on this page) and, at equal two-class specificity, was winning on source order and zeroing out the left/right padding entirely. */ .be-entry__basket-sheet .be-entry__card--summary.be-entry__card--basket { gap: 0.85rem; padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; box-shadow: none; } .be-entry__basket-sheet .be-entry__card-title { padding-right: 2.25rem; } .be-entry__basket-sheet .be-entry__meta--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } .be-entry__basket-sheet .be-entry__basket-lines { gap: 0.85rem; } .be-entry__basket-sheet .be-entry__basket-line { padding: 1rem 1.1rem; } .be-entry__basket-sheet .be-entry__basket-line-name, .be-entry__basket-sheet .be-entry__basket-line-occupancy, .be-entry__basket-sheet .be-entry__basket-line-extrabed { margin-top: 0.3rem; } .be-entry__basket-sheet .be-entry__basket-line-price { margin-top: 0.45rem; } .be-entry__basket-sheet .be-entry__basket-line-head { gap: 0.75rem; } .be-entry__basket-sheet .be-entry__basket-remove { padding: 0.2rem 0.3rem; margin: -0.2rem -0.3rem -0.2rem 0; } /* The total row used to be a bare line of text floating below the room card with barely any separation — give it its own tinted, inset box (same left/right inset as the room-line cards above it) so it reads as "the summary line," not a stray leftover paragraph. Deliberately NOT edge-to-edge: a bleed here needs negative margins + box-sizing to line up exactly, and that combination kept breaking (padding cancelling itself out) — an inset box sidesteps the whole box-model problem instead of trying to get the bleed math right a third time. */ .be-entry__basket-sheet .be-entry__basket-total { margin: 0.15rem 0 0; padding: 0.85rem 1rem; background: var(--be-surface-tint, #f0fdfa); border: 1px solid #e8eef4; border-radius: 10px; font-size: 1rem; } .be-entry__basket-sheet .be-entry__basket-total strong { font-size: 1.2rem; } .be-entry__basket-sheet .be-entry__summary-actions { gap: 0.65rem; margin-top: 0.15rem; } .be-entry__basket-sheet-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 0.6rem; right: 0.6rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 1.1rem; line-height: 1; cursor: pointer; } .be-entry__card--basket { position: relative; } } .be-entry__link-more { display: inline-block; margin-top: 0.45rem; font-size: 0.88rem; color: var(--be-link); text-decoration: none; } .be-entry__link-more:hover { color: var(--be-link-hover); text-decoration: underline; } .be-entry__alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } .be-entry__room-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px; margin-bottom: 0.75rem; box-shadow: none; transition: border-color 0.15s ease; } .be-entry__room-photo-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; overflow: hidden; } .be-entry__room-photo-btn:hover .be-entry__room-image, .be-entry__room-photo-btn:focus-visible .be-entry__room-image { transform: scale(1.02); } .be-entry__room-photo-btn .be-entry__room-image { display: block; width: 100%; transition: transform 0.2s ease; } .be-entry__room-photo-badge { position: absolute; left: 0.55rem; bottom: 0.55rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 0.75rem; font-weight: 600; } .be-room-modal__dialog { max-width: 960px; } .be-room-modal__stage { position: relative; overflow: hidden; border-radius: 12px; background: #0b1120; box-shadow: var(--be-shadow-md); } .be-room-modal__viewport { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .be-room-modal__track { position: absolute; inset: 0; } .be-room-modal__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease; } .be-room-modal__slide.is-active { opacity: 1; visibility: visible; } .be-room-modal__slide .be-home__modal-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .be-room-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.15s ease, transform 0.15s ease; } .be-room-modal__nav--prev { left: 0.75rem; } .be-room-modal__nav--next { right: 0.75rem; } .be-room-modal__nav:hover { background: rgba(15, 23, 42, 0.85); transform: translateY(-50%) scale(1.06); } .be-room-modal__counter { position: absolute; right: 0.9rem; bottom: 0.75rem; z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(15, 23, 42, 0.6); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(4px); } .be-room-modal__thumbs-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; margin-top: 0.75rem; } .be-room-modal__thumbs { display: flex; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth; padding: 0.2rem 0.1rem; scrollbar-width: none; -ms-overflow-style: none; } .be-room-modal__thumbs::-webkit-scrollbar { display: none; height: 0; } .be-room-modal__thumbs .be-home__modal-thumb-btn { flex: 0 0 auto; width: 4.25rem; } .be-room-modal__thumbs-nav { width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; background: #fff; color: #0f172a; font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .be-room-modal__thumbs-nav:hover { border-color: rgba(var(--be-primary-rgb), 0.45); color: var(--be-primary); } .be-room-modal__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; } .be-room-modal__dot { width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background 0.15s ease, width 0.15s ease; } .be-room-modal__dot.is-active { background: var(--be-primary); width: 1.2rem; } .be-entry__room-card-main { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0.9rem; align-items: start; } .be-entry__room-media { min-width: 0; } .be-entry__room-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #eef2f7; } .be-entry__room-image--placeholder { background: #eef2f7; } .be-entry__room-card:hover { border-color: rgba(var(--be-primary-rgb), 0.22); } .be-entry__room-card-body { min-width: 0; } .be-entry__room-title { margin: 0 0 0.25rem; font-size: 1.15rem; line-height: 1.35; } .be-entry__room-subtitle { margin: 0 0 0.5rem; color: #64748b; font-size: 0.95rem; line-height: 1.55; } .be-entry__room-capacity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.2rem; color: #0f172a; font-size: 0.84rem; font-weight: 600; } .be-entry__room-capacity-icon { font-size: 0.95rem; } .be-entry__room-capacity-separator { opacity: 0.5; } .be-entry__room-description { margin: 0.5rem 0 0; color: #64748b; font-size: 0.81rem; line-height: 1.4; } .be-entry__room-condition { margin-top: 0.5rem; } .be-entry__room-condition-toggle { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none; padding: 0; color: var(--be-link, #0f766e); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .be-entry__room-condition-caret { font-size: 0.7rem; transition: transform 0.15s ease; } .be-entry__room-condition-toggle.is-open .be-entry__room-condition-caret { transform: rotate(180deg); } .be-entry__room-condition-body { margin-top: 0.4rem; padding: 0.6rem 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; font-size: 0.78rem; line-height: 1.5; white-space: pre-line; } .be-entry__room-details { display: flex; /* row-gap kept tight — with flex-wrap a single "gap" value also becomes the vertical spacing when items wrap to a new line (e.g. "46 m²"), which is what made these meta lines look so far apart. */ gap: 0.25rem 1.1rem; margin-top: 0.2rem; flex-wrap: wrap; } .be-entry__room-detail-item { display: inline-flex; align-items: center; gap: 0.4rem; color: #0f172a; font-size: 0.81rem; font-weight: 500; } .be-entry__room-meta { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: #475569; } .be-entry__room-card-side { min-width: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; padding-top: 0.25rem; } .be-entry__price { display: flex; flex-direction: column; gap: 0.15rem; } .be-entry__price strong { font-size: 1.45rem; color: var(--be-primary); line-height: 1.15; } .be-entry__price-from, .be-entry__price-unit, .be-entry__price-total { font-size: 0.8rem; color: #64748b; } .be-entry__price--muted { font-size: 0.9rem; color: #64748b; } .be-entry__card--empty { text-align: center; } .be-entry__read-only-note { text-align: center; margin-top: 1.25rem; } .be-entry__list { margin: 0 0 0.75rem; padding-left: 1.1rem; font-size: 0.9rem; } .be-entry__note { margin: 0 0 0.5rem; font-size: 0.9rem; color: #334155; } .be-entry__muted { margin: 0; font-size: 0.85rem; color: #64748b; } .be-entry__alert { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9rem; } .be-entry__alert--warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; } .be-entry__footer { text-align: center; padding: 1rem; font-size: 0.75rem; color: #94a3b8; } .be-entry__room-meta--inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; } .be-entry__room-meta--inline li { position: relative; padding-left: 0.9rem; } .be-entry__room-meta--inline li::before { content: ""; position: absolute; left: 0; top: 0.46rem; width: 0.32rem; height: 0.32rem; border-radius: 999px; background: rgba(var(--be-primary-rgb), 0.45); } .be-entry__room-extrabed { margin: 0.4rem 0 0; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(var(--be-primary-rgb), 0.08); color: var(--be-primary); font-size: 0.78rem; font-weight: 600; } .be-entry__room-perks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .be-entry__room-perk { display: inline-flex; align-items: center; padding: 0.32rem 0.6rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 0.78rem; font-weight: 600; } .be-entry__rate-plans { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed #e2e8f0; } .be-entry__rate-plan { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .be-entry__rate-plan:hover { border-color: rgba(var(--be-primary-rgb), 0.4); } .be-entry__rate-plan.is-selected { border-color: var(--be-primary); background: var(--be-surface-tint, #f0fdfa); box-shadow: 0 0 0 1px var(--be-primary) inset; } .be-entry__rate-plan input[type="radio"] { flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--be-primary); cursor: pointer; } .be-entry__rate-plan-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-width: 0; } .be-entry__rate-plan-name { font-size: 0.85rem; font-weight: 600; color: #0f172a; } .be-entry__rate-plan-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .be-entry__rate-plan-tag { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 0.7rem; font-weight: 600; } .be-entry__rate-plan-tag--save { background: #dcfce7; color: #15803d; } .be-entry__rate-plan-tag--extra { background: #fef3c7; color: #b45309; } .be-entry__rate-plan-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-size: 0.9rem; font-weight: 700; color: var(--be-primary); white-space: nowrap; } .be-entry__rate-plan-price-was { font-size: 0.72rem; font-weight: 500; color: #94a3b8; } .be-entry__occupancy { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; } .be-entry__occupancy-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .be-entry__occupancy-label { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.82rem; font-weight: 600; color: #334155; } .be-entry__occupancy-hint { font-size: 0.7rem; font-weight: 500; color: #94a3b8; } .be-entry__occupancy-stepper { display: flex; align-items: center; gap: 0.55rem; } .be-entry__occupancy-btn { box-sizing: border-box; flex-shrink: 0; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; color: #334155; } .be-entry__occupancy-btn:hover { border-color: var(--be-primary-light, rgba(var(--be-primary-rgb), 0.5)); color: var(--be-primary); background: var(--be-surface-tint, #f0fdfa); } .be-entry__occupancy-val { min-width: 1.25rem; text-align: center; font-weight: 600; color: #0f172a; } .be-entry__room-calendar { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #eef2f7; } .be-entry__room-calendar-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.8rem; } .be-entry__room-calendar-title { margin: 0; font-size: 0.92rem; line-height: 1.3; } .be-entry__room-calendar-subtitle { margin: 0.2rem 0 0; color: #64748b; font-size: 0.8rem; line-height: 1.5; } .be-entry__room-calendar-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 0.76rem; font-weight: 700; white-space: nowrap; } .be-entry__room-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem; } .be-entry__room-calendar-day { display: grid; gap: 0.18rem; padding: 0.65rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; min-width: 0; } .be-entry__room-calendar-day.is-selected { outline: 2px solid rgba(var(--be-primary-rgb), 0.28); outline-offset: 0; } .be-entry__room-calendar-day--available { background: #f0fdf4; border-color: #bbf7d0; } .be-entry__room-calendar-day--low { background: #fff7ed; border-color: #fed7aa; } .be-entry__room-calendar-day--soldout { background: #f8fafc; border-color: #e2e8f0; } .be-entry__room-calendar-day--closed { background: #f8fafc; border-color: #dbe4ee; } .be-entry__room-calendar-dow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; } .be-entry__room-calendar-date { font-size: 0.88rem; line-height: 1.2; color: #0f172a; } .be-entry__room-calendar-price { font-size: 0.78rem; font-weight: 700; color: var(--be-primary); } .be-entry__room-calendar-price--muted { color: #94a3b8; } .be-entry__room-calendar-status { font-size: 0.72rem; color: #475569; } @media (min-width: 992px) { .be-home__nav-inner { padding: 0.75rem 1.25rem; } .be-home__nav-tools { gap: 0.65rem; } .be-results-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); align-items: start; } .be-results-layout__summary { position: sticky; top: 6.25rem; } .be-entry__btn--inline { margin-top: 0; } } /* Room card's own image | details | price split needs more width than 992px leaves once the page-level sidebar (260-300px) is also in play — at 992-1199px that squeeze broke the layout (rate plans + price/button column competing for too little space), so keep room cards single-column (stacked) until there's enough room for all of it. */ /* Between the <=767px stacked-mobile layout and the >=1200px two-column layout, .be-entry__room-card-side fell back to its base left-aligned, content-width flex box: the price/qty/Add-room block hugged the left edge of the (still full-width, single-column) room card, leaving a large empty gap on the right for phones-in-landscape and small tablets (~768-1199px). Right-align it here to match the desktop treatment instead of leaving that gap unstyled. */ @media (min-width: 768px) and (max-width: 1199px) { .be-entry__room-card-side { align-items: flex-end; text-align: right; } .be-entry__price { align-items: flex-end; } } @media (min-width: 1200px) { .be-entry__room-card { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); align-items: center; gap: 1.25rem; } .be-entry__room-card-side { text-align: right; align-items: flex-end; justify-content: center; border-left: 1px solid #eef2f7; padding-top: 0; padding-left: 1.25rem; } } @media (max-width: 767px) { .be-results-layout { gap: 1rem; } /* Basket used to come after every room card (order 2), so with a long room list guests had to scroll past everything to see it. Show it first on mobile instead — it's short (empty state or a couple of lines) and lets guests check/continue without hunting for it. */ .be-results-layout__content { order: 2; } .be-results-layout__summary { order: 1; } .be-entry__room-card { padding: 0.9rem; gap: 0.9rem; } .be-entry__room-card-main { grid-template-columns: 1fr; gap: 0.85rem; } .be-entry__room-image { aspect-ratio: 16 / 10; } .be-entry__room-card-side { width: 100%; border-left: 0; padding-left: 0; padding-top: 0; align-items: flex-end; text-align: right; } .be-entry__price { align-items: flex-end; } .be-entry__room-meta--inline { gap: 0.55rem 0.9rem; } .be-entry__room-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .be-entry__rate-plan { flex-wrap: wrap; row-gap: 0.35rem; } .be-entry__rate-plan-price { box-sizing: border-box; flex-basis: 100%; max-width: 100%; text-align: right; padding-left: 1.7rem; } } @media (min-width: 768px) and (max-width: 991px) { .be-entry__room-calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .be-entry__rates { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; } .be-entry__rates th, .be-entry__rates td { padding: 0.5rem 0.25rem; border-bottom: 1px solid #e2e8f0; text-align: left; } .be-entry__rates-amount { text-align: right; } .be-entry__estimate { display: flex; flex-direction: column; gap: 0.5rem; } .be-entry__estimate-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; } .be-entry__estimate-row--total { padding-top: 0.5rem; border-top: 1px solid #e2e8f0; font-size: 1rem; } .be-entry__estimate-row--total strong { color: var(--be-primary); font-size: 1.15rem; } .be-entry__estimate-note { margin-top: 0.75rem; } .be-entry__card--actions { text-align: center; } .be-entry__btn--secondary { background: #fff; color: var(--be-primary); border: 1px solid var(--be-primary); cursor: pointer; } .be-entry__btn--secondary:hover { background: var(--be-surface-tint); } .be-entry__cart-form { margin: 0; } .be-entry__cart-form-inline { display: inline; margin: 0; } .be-entry__cart-actions-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; } .be-entry__cart-avail { margin: 0.5rem 0 0; } .be-entry__cart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .be-entry__cart-lines { display: grid; gap: 0.9rem; } .be-entry__cart-lines--compact { margin-top: 1rem; } .be-entry__cart-line { display: grid; gap: 0.9rem; padding: 0.9rem; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px; background: #fff; } .be-entry__cart-line--compact { padding: 0.8rem 0.9rem; } /* Compact cart lines (checkout/confirm summaries) never render a room image, but .be-entry__cart-line-main still reserved a 110-160px image column, forcing the copy into that narrow column and leaving the rest of the row blank. Collapse to a single column when there's no image. */ .be-entry__cart-line--compact .be-entry__cart-line-main { grid-template-columns: 1fr; } .be-entry__cart-line-main { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 0.9rem; align-items: start; } .be-entry__cart-line-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #eef2f7; } .be-entry__cart-line-image--placeholder { background: #eef2f7; } .be-entry__cart-line-copy { min-width: 0; } .be-entry__cart-line-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; } /* --- BOOKING-ENGINE-HOME-CI3-UX-PARITY.1 (Welladee-style landing) --- */ .be-home { background: var(--be-body-bg); color: var(--be-heading); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } .be-home__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .be-home__navbar { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--be-primary-rgb), 0.1); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } .be-home__nav-inner { max-width: 1140px; margin: 0 auto; padding: 0.65rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; } .be-home__brand { display: inline-flex; align-items: center; text-decoration: none; color: #333; min-width: 0; } .be-home__logo-img { max-height: 72px; width: auto; max-width: 220px; object-fit: contain; } .be-home__logo-text { font-size: 1.1rem; font-weight: 600; line-height: 1.2; } @media (max-width: 767px) { .be-home__logo-img { max-height: 32px; max-width: 110px; } .be-home__nav-inner { padding: 0.5rem 0.75rem; gap: 0.4rem 0.5rem; flex-wrap: nowrap; } } .be-home__nav-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; } .be-home__dropdown { position: relative; } /* --- Nav tool dropdowns (currency / language) --- */ .be-home__tool-trigger { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid #e2e8f0; background: #fff; color: #334155; padding: 0.45rem 0.8rem 0.45rem 0.65rem; font-size: 0.82rem; font-weight: 600; border-radius: 999px; cursor: pointer; line-height: 1.2; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; font-family: inherit; } .be-home__tool-trigger:hover, .be-home__dropdown--open .be-home__tool-trigger { border-color: var(--be-primary-light); box-shadow: 0 0 0 3px rgba(var(--be-primary-rgb), 0.12); } .be-home__tool-trigger-icon { display: flex; color: var(--be-primary); flex-shrink: 0; } .be-home__tool-trigger-text { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .be-home__tool-trigger-caret::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.1rem; border-right: 1.5px solid #94a3b8; border-bottom: 1.5px solid #94a3b8; transform: rotate(45deg) translateY(-1px); transition: transform 0.18s ease; } .be-home__dropdown--open .be-home__tool-trigger-caret::after { transform: rotate(-135deg) translateY(1px); } .be-home__tool-popover { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: var(--be-shadow-lg); z-index: 1200; overflow: hidden; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .be-home__tool-popover--above { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; transform: translateY(6px) scale(0.98); } .be-home__dropdown--open .be-home__tool-popover { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; } .be-home__dropdown--open .be-home__tool-popover--above { transform: translateY(0) scale(1); } .be-home__tool-popover[hidden] { display: block !important; } .be-home__dropdown:not(.be-home__dropdown--open) .be-home__tool-popover[hidden] { display: block !important; } .be-home__tool-popover-head { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.85rem 1rem 0.65rem; border-bottom: 1px solid #f1f5f9; background: #fff; } .be-home__tool-popover-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--be-primary); } .be-home__tool-popover-hint { font-size: 0.75rem; color: #94a3b8; } .be-home__tool-list { list-style: none; margin: 0; padding: 0.35rem; max-height: min(320px, 60vh); overflow-y: auto; } .be-home__tool-item { margin: 0; padding: 0; } .be-home__tool-option { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 10px; color: #334155; text-decoration: none; font-size: 0.88rem; transition: background 0.12s, color 0.12s; } .be-home__tool-option:hover { background: var(--be-surface-tint); color: var(--be-primary); } .be-home__tool-option.is-active { background: rgba(var(--be-primary-rgb), 0.1); color: var(--be-primary); font-weight: 600; } .be-home__tool-option-badge { flex-shrink: 0; min-width: 2.5rem; padding: 0.2rem 0.45rem; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; } .be-home__tool-option-badge--lang { min-width: 2.2rem; } .be-home__tool-option.is-active .be-home__tool-option-badge { background: var(--be-primary); color: #fff; } .be-home__tool-option-label { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .be-home__tool-option-check { flex-shrink: 0; display: flex; color: var(--be-primary); } /* Legacy aliases (hover fallback) */ .be-home__dropdown-btn { border: 0; background: transparent; padding: 0; } .be-home__dropdown-menu { display: block; } .be-home__dropdown-link { display: block; padding: 0.45rem 0.85rem; color: inherit; text-decoration: none; } .be-home__dropdown-link.is-active, .be-home__dropdown-link:hover { background: rgba(0, 0, 0, 0.06); } .be-home__caret::after { content: none; } .be-home__nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; } .be-home__nav-toggle-bar { display: block; width: 1.1rem; height: 2px; background: #334155; border-radius: 1px; } .be-home__menu { display: none; list-style: none; margin: 0; padding: 0; gap: 1rem; } .be-home__menu-link { color: var(--be-nav-link); text-decoration: none; font-size: 0.9rem; } .be-home__menu-link:hover { color: var(--be-nav-link-hover); } @media (max-width: 991px) { .be-home__menu--open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: var(--be-shadow-md); padding: 0.75rem 1rem; gap: 0.75rem; } } @media (min-width: 992px) { .be-home__nav-toggle { display: none; } .be-home__menu { display: flex; margin-left: 1rem; } } .be-home__hero { position: relative; min-height: 320px; background: var(--be-primary); } .be-home__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.45) 100%); pointer-events: none; } .be-home__hero-static, .be-home__carousel-slide { min-height: 320px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .be-home__hero-static--placeholder { background-image: none; background-color: var(--be-primary); } .be-home__carousel { position: relative; min-height: 320px; } .be-home__carousel-slide { display: none; } .be-home__carousel-slide--active { display: block; } .be-home__carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.95rem; } .be-home__main { margin-top: -72px; padding-bottom: 2.5rem; position: relative; /* No z-index here on purpose: giving .be-home__main its own stacking context traps everything inside it (including the steps bar) above the navbar's own z-index:100 context, which then hides the navbar's currency/language and hamburger-menu popovers behind the steps bar. Without a z-index here, DOM order alone still puts main above the hero, and the calendar/guest search popovers (z-index 1090/1100) and hamburger menu compare directly against the navbar (100) at the root level and correctly win. */ } .be-home__container { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; } .be-home__alert { max-width: 1140px; margin: 0 auto 1rem; } .be-home__steps { margin: 2.5rem 0 1rem; } .be-home__timeline { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow: hidden; } .be-home__timeline-item { flex: 1 1 20%; min-width: 0; text-align: center; padding: 0.6rem 0.4rem; font-size: 0.72rem; line-height: 1.2; font-weight: 500; background: #fff; color: #64748b; border: 1px solid #e2e8f0; border-radius: 0; position: relative; clip-path: none; margin-right: -1px; } .be-home__timeline-item--left { border-radius: 10px 0 0 10px; clip-path: none; } .be-home__timeline-item--right { border-radius: 0 10px 10px 0; clip-path: none; } .be-home__timeline-item--active { background: var(--be-primary); color: #fff; border-color: transparent; z-index: 1; } .be-home__timeline-label { display: block; } @media (min-width: 768px) { .be-home__timeline-item { font-size: 0.85rem; padding: 0.65rem 0.5rem; } } .be-home__panel { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--be-shadow-lg); overflow: visible; } .be-home__panel-grid { display: grid; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 992px) { .be-home__panel-grid { grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); } } .be-home__panel-search { position: relative; z-index: 3; background: var(--be-panel-bg); border-bottom: 1px solid #e2e8f0; padding: 1.75rem 1.5rem; border-radius: 16px 16px 0 0; overflow: visible; } @media (min-width: 992px) { .be-home__panel-search { border-bottom: 0; border-right: 1px solid #e2e8f0; border-radius: 16px 0 0 16px; padding: 2rem 1.75rem; } } .be-home__panel-details { position: relative; z-index: 1; padding: 1.5rem 1.75rem; border-radius: 0 0 16px 16px; overflow: hidden; } @media (min-width: 992px) { .be-home__panel-details { border-radius: 0 16px 16px 0; padding: 2rem; } } .be-home__search-form { display: flex; flex-direction: column; gap: 0.85rem; } .be-home__search-row { display: grid; gap: 0.75rem; } .be-home__search-row--dates { grid-template-columns: 1fr 1fr; } .be-home__search-row--guests { grid-template-columns: repeat(3, 1fr); } .be-home__field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; color: #333; } .be-home__field input { width: 100%; box-sizing: border-box; padding: 0.55rem 0.5rem; border: 1px solid #ccc; border-radius: 2px; background: #fff; text-align: center; font: inherit; color: #333; } .be-home__search-actions { margin-top: 0.25rem; } .be-home__btn-search { width: 100%; border: 0; background: #474747; color: #fff; padding: 0.7rem 1rem; font-size: 1rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } .be-home__btn-search:hover { background: #333; } .be-home__property { display: grid; gap: 1rem; } @media (min-width: 768px) { .be-home__property { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: start; } } .be-home__property-photo { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 12px; display: block; } .be-home__property-media { align-self: start; } .be-home__property-body { min-width: 0; } .be-home__property-photo-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: inherit; } .be-home__property-photo-btn:hover .be-home__property-photo, .be-home__property-photo-btn:focus-visible .be-home__property-photo { box-shadow: var(--be-shadow-md); transform: translateY(-1px); } .be-home__property-photo--placeholder { background: var(--be-surface-tint); } .be-home__property-details-link { display: inline-block; margin-top: 0.5rem; padding: 0; border: 0; background: transparent; color: var(--be-link); cursor: pointer; font-family: inherit; font-size: 0.9rem; text-decoration: underline; } .be-home__property-name { margin: 0 0 0.5rem; font-size: 1.55rem; font-weight: 600; line-height: 1.25; color: var(--be-heading); } .be-home__property-contact { margin: 0 0 0.35rem; font-size: 0.92rem; line-height: 1.5; color: #444; display: flex; align-items: center; } .be-home__property-contact a { color: var(--be-link); } .be-home__icon { margin-right: 0.5rem; display: inline-flex; align-items: center; color: var(--be-accent); flex-shrink: 0; } .be-home__section-subtitle { margin: 1rem 0 0.5rem; font-size: 1rem; font-weight: 600; color: #333; } .be-home__property-description p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: #555; text-align: justify; } .be-home__facilities-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.35rem 1rem; } .be-home__facilities-list li::before { content: "✓ "; color: #2d6a4f; } .be-home__modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .be-home__modal[hidden] { display: none !important; } .be-home__modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(4px); } .be-home__modal-dialog { position: relative; width: min(1040px, calc(100% - 1rem)); max-height: min(86vh, 820px); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--be-shadow-lg); outline: none; } .be-home__modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; border-bottom: 1px solid #e2e8f0; background: #fff; } .be-home__modal-heading { min-width: 0; } .be-home__modal-kicker { display: inline-block; margin-bottom: 0.35rem; color: var(--be-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .be-home__modal-title { margin: 0; color: var(--be-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.25; } .be-home__modal-subtitle { margin: 0.35rem 0 0; color: #64748b; font-size: 0.9rem; line-height: 1.45; } .be-home__modal-close { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; cursor: pointer; font: inherit; font-size: 0.85rem; line-height: 1; padding: 0.45rem 0.7rem; } .be-home__modal-close:hover, .be-home__modal-close:focus-visible { border-color: var(--be-primary-light); box-shadow: 0 0 0 3px rgba(var(--be-primary-rgb), 0.12); outline: none; } .be-home__modal-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); align-items: start; gap: 1.5rem; max-height: calc(min(86vh, 820px) - 66px); overflow: auto; padding: 1.5rem; } .be-home__modal-figure { margin: 0; position: relative; } .be-home__modal-media-badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(15, 23, 42, 0.68); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; backdrop-filter: blur(6px); } .be-home__modal-photo { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 8px; background: var(--be-surface-tint); } .be-home__modal-photo--placeholder { aspect-ratio: 4 / 3; background: var(--be-surface-tint); } .be-home__modal-photo-caption { margin-top: 0.7rem; color: #475569; font-size: 0.9rem; line-height: 1.5; } .be-home__modal-intro { margin-bottom: 1rem; } .be-home__modal-intro-text { margin: 0.45rem 0 0; color: #334155; font-size: 0.96rem; line-height: 1.65; } .be-home__modal-thumbs-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; margin-top: 0.85rem; } .be-home__modal-thumbs-wrap--single { grid-template-columns: minmax(0, 1fr); } .be-home__modal-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth; padding: 0.2rem 0.1rem; scrollbar-width: none; -ms-overflow-style: none; } .be-home__modal-thumbs::-webkit-scrollbar { display: none; height: 0; } .be-home__modal-thumbs .be-home__modal-thumb-btn { flex: 0 0 auto; width: 5.5rem; } .be-home__modal-thumbs-nav { width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; background: #fff; color: #0f172a; font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .be-home__modal-thumbs-nav:hover, .be-home__modal-thumbs-nav:focus-visible { border-color: rgba(var(--be-primary-rgb), 0.45); color: var(--be-primary); outline: none; } .be-home__modal-thumb-btn { padding: 0; border: 2px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .be-home__modal-thumb-btn:hover, .be-home__modal-thumb-btn:focus-visible { border-color: rgba(var(--be-primary-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--be-primary-rgb), 0.12); outline: none; transform: translateY(-1px); } .be-home__modal-thumb-btn.is-active { border-color: var(--be-primary); box-shadow: 0 4px 10px rgba(var(--be-primary-rgb), 0.05); } .be-home__modal-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } .be-home__modal-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .be-home__modal-highlight { padding: 0.8rem 0.9rem; border: 1px solid #dbe6ef; border-radius: 8px; background: #fff; } .be-home__modal-highlight strong { display: block; color: #0f172a; font-size: 0.98rem; line-height: 1.35; } .be-home__modal-highlight-label { display: block; margin-bottom: 0.22rem; color: #64748b; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .be-home__modal-address { margin: 0 0 0.85rem; color: #475569; font-size: 0.95rem; line-height: 1.55; } .be-home__modal-card { padding: 1rem 1.05rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; } .be-home__modal-contact-list { display: grid; gap: 0.35rem; margin-bottom: 0; } .be-home__modal-contact-list p { margin: 0; color: #334155; font-size: 0.92rem; line-height: 1.45; } .be-home__modal-contact-list a { color: var(--be-link); } .be-home__modal-icon { display: inline-block; min-width: 3.6rem; margin-right: 0.45rem; color: var(--be-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .be-home__modal-section { margin-top: 1rem; } /* First panel in the right column should top-align with the left image */ .be-home__modal-content > .be-home__modal-section:first-child, .be-home__modal-content > .be-home__modal-intro:first-child { margin-top: 0; } .be-room-modal__dialog .be-home__modal-content { align-self: start; } .be-home__modal-section-label { display: inline-block; margin-bottom: 0.45rem; color: var(--be-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .be-home__modal-section h3 { margin: 0 0 0.5rem; color: #0f172a; font-size: 1rem; } .be-home__modal-section p { margin: 0; color: #475569; font-size: 0.92rem; line-height: 1.65; text-align: justify; } .be-home__modal-facilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem 0.75rem; margin: 0; padding: 0; list-style: none; } .be-home__modal-facilities li { color: #334155; font-size: 0.9rem; } .be-home__modal-facilities li::before { content: "\2713"; color: var(--be-primary); font-weight: 700; display: inline-block; margin-right: 0.35em; } body.be-modal-open { overflow: hidden; } @media (max-width: 767px) { .be-home__modal { align-items: stretch; padding: 0.75rem; } .be-home__modal-dialog { width: 100%; max-height: calc(100vh - 1.5rem); border-radius: 18px; } .be-home__modal-close-label { display: none; } .be-home__modal-body { grid-template-columns: 1fr; max-height: calc(100vh - 5.75rem); padding: 1rem; } .be-home__modal-header { align-items: flex-start; } .be-home__modal-highlights { grid-template-columns: 1fr; } .be-home__modal-thumbs .be-home__modal-thumb-btn { width: 4.25rem; } .be-home__modal-thumbs-nav { width: 1.6rem; height: 1.6rem; font-size: 1rem; } } .be-home__footer { background: #ececec; border-top: 1px solid #ddd; margin-top: 1rem; } .be-home__footer-inner { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1rem; text-align: center; } .be-home__copyright { margin: 0; font-size: 0.85rem; color: #666; line-height: 1.6; } .be-home__copyright a { color: #333; text-decoration: none; } /* Flow pages (search / room / cart / guest) */ .be-home__hero--compact { min-height: 120px; } .be-home__hero--compact .be-home__hero-static, .be-home__hero--compact .be-home__carousel-slide { min-height: 120px; } .be-home__main--flow { margin-top: -36px; } .be-entry--hero-hidden .be-home__main--flow { margin-top: 0; padding-top: 0.9rem; } .be-entry--hero-hidden .be-home__main--flow .be-home__steps { margin-top: 0; } .be-home__main--flow .be-home__steps { margin-top: 0.5rem; margin-bottom: 0.5rem; } .be-home__main--wide .be-home__container { max-width: 1240px; } .be-home__panel--flow { padding: 0; } .be-home__flow-content { padding: 1.5rem; } .be-home__flow-content--wide { max-width: 100%; } .be-home__flow-content .be-entry__card { border: 0; box-shadow: none; padding: 0 0 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid #e8e8e8; border-radius: 0; } .be-home__flow-content .be-entry__card:last-child { border-bottom: 0; } /* Review step: restore distinct, separated cards instead of the flat flow layout used by the earlier steps, so guests can visually parse "Reservation Summary" vs "Guest details" vs the confirm action. */ .be-home__flow-content .be-entry__card.be-entry__card--review { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.75rem; box-shadow: var(--be-shadow-sm); padding: 1.25rem; margin-bottom: 1.25rem; } .be-home__flow-content .be-entry__card.be-entry__card--review:last-child { margin-bottom: 0; } .be-entry__card--review-actions { background: var(--be-surface-tint, #f0fdfa); border-color: rgba(15, 23, 42, 0.06); } .be-entry__card--review .be-entry__totals-grand { margin: 0.4rem -1.25rem -1.25rem; padding: 0.85rem 1.25rem; background: #f8fafc; border-top: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0 0 0.75rem 0.75rem; } .be-entry__card--review .be-entry__totals-grand dt, .be-entry__card--review .be-entry__totals-grand dd { font-size: 1.2rem; color: var(--be-primary); } .be-home__flow-back { margin: 0 0 0.75rem; } .be-home__alert--success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } @media (max-width: 767px) { .be-home__hero, .be-home__hero-static, .be-home__carousel-slide { min-height: 180px; } .be-home__hero--compact, .be-home__hero--compact .be-home__hero-static { min-height: 100px; } .be-home__main { margin-top: 0; } .be-home__main--flow { margin-top: -24px; } .be-home__main--flow .be-home__steps { margin-top: 0.3rem; margin-bottom: 0.4rem; } .be-home__container { padding: 0 0.9rem; } .be-home__panel-search, .be-home__panel-details, .be-home__flow-content { padding-left: 1rem; padding-right: 1rem; } .be-entry__card, .be-entry__room-card { padding-left: 1rem; padding-right: 1rem; } .be-home__search-row--guests { grid-template-columns: 1fr 1fr; } .be-home__search-row--guests .be-home__field:last-child { grid-column: 1 / -1; } .be-home__timeline-item { padding: 0.5rem 0.25rem; } .be-home__timeline-label { font-size: 0.6rem; } .be-entry__results-head { margin-bottom: 0.85rem; } .be-entry__results-subtitle { font-size: 0.88rem; } .be-entry__room-card-main { grid-template-columns: 1fr; } .be-entry__room-card-side { width: 100%; border-left: 0; padding-left: 0; align-items: flex-end; text-align: right; } .be-entry__price { align-items: flex-end; } .be-entry__cart-line-main { grid-template-columns: 1fr; } .be-entry__cart-line-side { width: 100%; } } /* --- Modern home search (OTA-style date + guest picker) --- */ .be-search__head { margin-bottom: 1.25rem; } .be-search__eyebrow { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--be-primary); } .be-search__title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--be-heading); } .be-search__subtitle { margin: 0; font-size: 0.9rem; color: #64748b; } .be-search__form { display: flex; flex-direction: column; gap: 1rem; } .be-search__fields { display: flex; flex-direction: column; gap: 0.65rem; } .be-search__field { position: relative; } .be-search__field--open { z-index: 1100; } .be-search__trigger { width: 100%; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; font: inherit; color: inherit; } .be-search__trigger:hover, .be-search__trigger:focus-visible { border-color: var(--be-primary-light); box-shadow: 0 0 0 3px rgba(var(--be-primary-rgb), 0.15); outline: none; } .be-search__trigger-icon { flex-shrink: 0; color: var(--be-primary); display: flex; } .be-search__trigger-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 0.15rem; } .be-search__trigger-value { display: block; font-size: 0.95rem; font-weight: 600; color: #0f172a; line-height: 1.3; } .be-search__popover { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1090; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: var(--be-shadow-lg); padding: 1rem; } .be-search__popover--above { top: auto; bottom: calc(100% + 8px); box-shadow: var(--be-shadow-lg-up); } .be-search__popover--guests { left: auto; right: 0; width: 200px; } .be-search__popover[hidden] { display: none !important; } .be-search__popover-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.9rem; } .be-search__nights { font-size: 0.8rem; color: var(--be-primary); font-weight: 600; } .be-search__calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; } .be-search__cal-btn { width: 2rem; height: 2rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: #334155; } .be-search__cal-btn:hover { background: var(--be-surface-tint); border-color: var(--be-primary-light); } .be-search__calendar { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .be-search__calendar { grid-template-columns: 1fr 1fr; } .be-search__cal-month-title { display: none; } .be-search__cal-month:nth-child(n+2) { display: block; } } @media (max-width: 639px) { .be-search__cal-month:nth-child(n+2) { display: none !important; } .be-search__cal-month-title { display: none; } } .be-search__cal-month-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; color: #334155; } .be-search__cal-weekdays, .be-search__cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .be-search__cal-weekdays span { font-size: 0.7rem; font-weight: 600; color: #94a3b8; text-align: center; padding: 0.25rem 0; } .be-search__cal-day { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; font-size: 0.85rem; font-weight: 500; color: #334155; cursor: pointer; } .be-search__cal-day:hover:not(:disabled) { background: var(--be-surface-tint); } .be-search__cal-day--disabled { color: #cbd5e1; cursor: not-allowed; } .be-search__cal-day--start, .be-search__cal-day--end { background: var(--be-primary) !important; color: #fff !important; } .be-search__cal-day--in-range { background: #ccfbf1; border-radius: 0; } .be-search__cal-day--blank { pointer-events: none; } .be-search__stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid #f1f5f9; } .be-search__stepper-row:last-of-type { border-bottom: 0; margin-bottom: 0.5rem; } .be-search__stepper-hint { display: block; font-size: 0.75rem; color: #94a3b8; font-weight: 400; } .be-search__stepper { display: flex; align-items: center; gap: 0.65rem; } .be-search__stepper-btn { box-sizing: border-box; flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #334155; } .be-search__stepper-btn:hover { border-color: var(--be-primary-light); color: var(--be-primary); background: var(--be-surface-tint); } .be-search__stepper-val { min-width: 1.5rem; text-align: center; font-weight: 600; } .be-search__popover-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f1f5f9; } .be-search__link-btn { border: 0; background: transparent; color: #64748b; font-size: 0.85rem; cursor: pointer; padding: 0.5rem 0.75rem; } .be-search__apply-btn { border: 0; background: var(--be-primary); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; } .be-search__apply-btn:hover { background: #0d655f; } .be-search__apply-btn--full { width: 100%; padding: 0.65rem; } .be-search__submit { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border: 0; border-radius: 12px; padding: 0.95rem 1.25rem; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; background: var(--be-primary); transition: transform 0.15s; } .be-search__submit:hover { transform: translateY(-1px); } /* Hero photo readability only (not brand-theme color). Keep darkening overlay; never use primary/primary-light brand gradients on buttons, steps, panels, or placeholders. */ @media (min-width: 768px) { .be-search__fields { flex-direction: row; } .be-search__field { flex: 1; } .be-search__popover--calendar { min-width: 520px; } } /* Rate-plan short_detail — compact fine-print note under the plan name so it never competes with the plan title/price for space. */ .be-entry__rate-plan-note { display: block; margin: 0.15rem 0 0; font-size: 0.72rem; line-height: 1.35; color: #94a3b8; } /* Per-plan Cancellation Policy — lives inside the .be-entry__rate-plan block (span-based because the parent info wrapper is a ). */ .be-entry__rate-plan-policy { display: block; } .be-entry__rate-plan-policy .be-entry__room-condition-body { display: block; } /* display:block above beats the UA's [hidden]{display:none} — restate it so the collapsed state actually collapses. */ .be-entry__rate-plan-policy .be-entry__room-condition-body[hidden] { display: none; } /* Calendar day annotations — lowest available rate under the day number, or a red cross when every room is closed/sold out that night. */ .be-search__cal-day { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; padding: 2px 0; } .be-search__cal-day-sub { font-size: 0.58rem; font-weight: 500; color: #64748b; } .be-search__cal-day--start .be-search__cal-day-sub, .be-search__cal-day--end .be-search__cal-day-sub { color: rgba(255, 255, 255, 0.85); } .be-search__cal-day--full .be-search__cal-day-num { color: #94a3b8; } .be-search__cal-day--full .be-search__cal-day-sub { color: #dc2626; font-size: 0.62rem; font-weight: 700; } .be-search__cal-day--full { cursor: not-allowed; } .be-checkout-layout { display: grid; gap: 1rem; } .be-checkout-layout .be-home__flow-back { margin: 0; } .be-checkout-layout .be-entry__card.be-entry__card--review { padding: 1.15rem 1.2rem; margin-bottom: 0; } .be-checkout-layout .be-entry__card-title { margin-bottom: 0.9rem; } .be-checkout-layout .be-entry__meta, .be-checkout-layout .be-entry__guest-grid { gap: 0.9rem 1rem; } .be-checkout-layout .be-entry__summary-toggle-grid { gap: 0.85rem; margin-top: 0.15rem; } .be-checkout-layout .be-entry__toggle-box > summary { padding: 0.8rem 0.9rem; } .be-checkout-layout .be-entry__toggle-body { padding: 0.8rem 0.9rem 0.9rem; } .be-checkout-layout .be-entry__cart-lines--compact { margin-top: 0.75rem; } .be-checkout-layout .be-entry__payment-section { padding: 0.85rem 0.95rem 0.95rem; } .be-checkout-layout .be-entry__pickup-selected-msg, .be-checkout-layout .be-entry__hint-inline { margin-bottom: 0.75rem; } .be-checkout-layout .be-entry__terms-row { justify-content: flex-start; gap: 0.75rem; margin-top: 0.15rem; } .be-checkout-layout .be-entry__terms-row label.be-entry__checkbox { margin: 0; } .be-checkout-layout .be-entry__terms-row .be-entry__tooltip { margin-top: 0; } .be-checkout-layout .be-entry__guest-actions { display: flex; justify-content: flex-end; margin-top: 1rem; } .be-checkout-layout .be-entry__card--review-actions { padding: 1rem 1.2rem; } .be-checkout-layout .be-entry__read-only-note { margin-top: 0; } @media (max-width: 767px) { .be-checkout-layout { gap: 0.85rem; } .be-checkout-layout .be-entry__card.be-entry__card--review { padding: 1rem; } .be-checkout-layout .be-entry__terms-row, .be-checkout-layout .be-entry__guest-actions { display: block; } .be-checkout-layout .be-entry__guest-actions .be-entry__btn { width: 100%; } }