*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --airtix-gradient: linear-gradient(90deg, #029dff, #2527ff, #a000ba, #eb057c, #ff4000); --airtix-glow: inset 0px 0px 1px 1px rgb(255 255 255 / 60%), inset 0px 0px 10px rgb(255 255 255 / 100%), 0px 0px 4px 1px rgb(173 240 254 / 100%); --airtix-aurora: linear-gradient(120deg, #029dff, #a000ba, #ff4000, #eb057c, #2527ff, #029dff); --airtix-search-gradient: linear-gradient(rgb(163 185 206 / 35%), rgb(0 10 20 / 35%)), var(--airtix-gradient); --airtix-dark: rgb(0 10 20 / 85%); --airtix-dark-light: rgb(0 10 20 / 85%); --airtix-control-background: linear-gradient(#a1a6b736, rgb(0 10 20 / 100%)); --airtix-control-shadow: inset 0px 0px 4px 0px rgb(192 219 255 / 75%), inset 0px 0px 39px 0px rgb(128 192 255 / 25%), 0px 1px 3px 0px rgb(0 10 20 / 100%); --airtix-text-color-accent: rgb(85 170 255); --airtix-light-button-background: linear-gradient(rgb(162 195 228), rgb(65 124 184)); --airtix-content-width: 1250px; --tri-state-width: 316px; --tri-state-duration: 0.60s; --tri-state-ease: cubic-bezier(0.25, 1, 0.5, 1); --airtix-ui-responsive: 0.85s cubic-bezier(0.25, 1, 0.5, 1); --airtix-highlight-bg: rgb(237 249 255); } body { overflow: hidden; font-family: "Plus Jakarta Sans", sans-serif; color: #1e293b; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; } button { font-family: inherit; border: none; outline: none; cursor: pointer; background: none; } .logo-container { position: fixed; inset: 0; position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 1;}.logo-container svg { width: 25vw; height: auto; }.slideshow-container { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bg-slide { position: absolute; inset: 0; transition: opacity 2s ease-in-out; opacity: 0; } .bg-slide.active { opacity: 1; } .bg-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(1.35); } .slideshow-gradient { position: absolute; inset: 0; background: rgb(0 10 20 / 50%); }.app-wrapper { position: relative; z-index: 10; display: flex; flex-direction: column; height: 100%; width: 100%; transition: opacity 0.28s ease; }.app-main { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; flex: 1;padding-left: 0; transition: padding-left var(--tri-state-duration) var(--tri-state-ease); } body:has(.tri-state-wrapper[data-tri-state="hidden"]) .app-main { padding-left: 0; } @media (max-width: 900px) { .app-main { padding-left: 0; } body:has(.tri-state-wrapper[data-tri-state="hidden"]) .app-main { padding-left: 0; } }.macos-pill { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); border: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .macos-pill:hover { background: rgba(255, 255, 255, 0.98); transform: translateY(-1.5px); box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16); } .avatar-circle-outside { width: 50px; height: 50px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; outline: solid 1px #b1e9ff; overflow: hidden; } .avatar-logo-scaled { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .icon-sky { color: #0284c7; margin-right: 8px; } .hidden { display: none !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 999px; } .shake { animation: shake 0.2s ease-in-out 0s 2; } @keyframes shake { 0% { margin-left: 0rem; margin-right: 0rem; } 25% { margin-left: 0.5rem; margin-right: -0.5rem; } 75% { margin-left: -0.5rem; margin-right: 0.5rem; } 100% { margin-left: 0rem; margin-right: 0rem; } }@keyframes airtix-aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }body.loading .app-wrapper { opacity: 0; } body.loading *, body.loading *::before, body.loading *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }:root { --app-header-h: 60px; } .app-header { position: relative; display: flex; justify-content: space-between; height: 60px; width: 100%; align-items: center; background: rgb(0 10 20 / 50%); backdrop-filter: blur(25px); flex-shrink: 0; z-index: 50;padding: 0 16px 0 0; height: var(--app-header-h); transition: margin-top 0.28s cubic-bezier(0.25, 1, 0.5, 1); } .app-header.header-hidden { margin-top: calc(var(--app-header-h) * -1); }.header-brand-wrap { position: relative; left: calc(50% - min(800px, calc(100% / 2))); width: 300px; height: 60px; overflow: hidden; flex-shrink: 0;}.header-brand-wrap .tri-state-toggle { position: absolute; left: 12px; top: 12px;z-index: 30; }.mode-track { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; padding: 4px; border-radius: 999px; background: linear-gradient(transparent 0%, rgb(192 224 255 / 8%) 49.99%, transparent 50%, rgb(0 10 20 / 100%)), linear-gradient(#a1a6b736, rgb(0 10 20 / 100%)); box-shadow: inset 0px 0px 2px 0px rgb(192 219 255 / 100%), inset 0px 0px 10px 0px rgb(128 192 255 / 100%), 0px 2px 2px 0px rgb(0 0 0 / 50%); z-index: 100;} @media (max-width: 850px) { .mode-track { display: none; } } .nav-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 2px 20px 5px; border-radius: 999px; font-size: 13px; font-weight: 400; color: rgb(255 255 255 / 85%); background: transparent; cursor: pointer; border: none; outline: none; transition: all 0.25s ease; text-decoration: none; } .nav-toggle-btn:hover { color: #fff; } .nav-toggle-btn.active { background: var(--airtix-gradient); box-shadow: var(--airtix-glow); color: #fff; }.header-loading { position: absolute; left: 0; right: 0; top: 100%; height: 2px; overflow: hidden; pointer-events: none; z-index: 1; display: none; opacity: 1; transition: opacity 150ms ease; } .header-loading.is-loading { display: block; } .header-loading.is-finishing { opacity: 0; } .header-loading-bar { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--airtix-gradient); will-change: clip-path;clip-path: inset(0 100% 0 0);transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1); }.header-loading.is-loading .header-loading-bar { animation: header-loading-pulse 1.8s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes header-loading-pulse { 0% { clip-path: inset(0 100% 0 0); }30% { clip-path: inset(0 40% 0 10%); }70% { clip-path: inset(0 0 0 65%); }100% { clip-path: inset(0 0 0 100%); }}.header-loading.is-completing .header-loading-bar { animation: none !important; clip-path: inset(0 0 0 0); }.tri-state-wrapper { position: fixed; top: 60px; left: max(15px, calc(50vw - 807px)); bottom: 0; width: 300px; z-index: 40; pointer-events: none; --nav-viewport-width: 300px; --nav-cube-radius: calc(var(--nav-viewport-width) / 2); --nav-cube-radius-negative: calc(var(--nav-cube-radius) * -1);transform: translate3d(0, 0, 0);transition: transform var(--airtix-ui-responsive); } .tri-state-wrapper .airtix-action-button { animation: airtix-aurora 7s ease infinite; } .tri-state-wrapper[data-tri-state="hidden"] { left: 0px; transform: translate3d(-100%, 0, 0); } .tri-state-wrapper.is-docked-left { left: 0 !important; } .tri-state-wrapper.is-docked-left .side-panel, .tri-state-wrapper.is-docked-left .nav-panel-container { margin: 0px 0; height: calc(100% - 0px); border-radius: 0; box-shadow: 10px 0 30px rgb(0 0 0 / 15%); } body.sidebar-docked .viewport-center { padding-left: 300px; } .tri-state-wrapper.is-rotating { transform-style: preserve-3d; perspective: calc(var(--nav-viewport-width) * 5) !important; }.tri-state-wrapper.no-transition .tri-state-face { transition: none !important; }.tri-state-face { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: 50% 50% var(--nav-cube-radius-negative); transition: transform var(--airtix-ui-responsive), opacity 0.45s ease, visibility 0s linear 0.85s; backface-visibility: hidden; -webkit-backface-visibility: hidden;transform: translate3d(0, 0, 0); opacity: 1; visibility: hidden; pointer-events: none; z-index: 1; } .tri-state-face.stage-center { transform: rotateY(0deg); visibility: visible; pointer-events: auto; opacity:1; z-index: 2; transition: transform var(--airtix-ui-responsive), visibility 0s linear 0s; } .tri-state-face.stage-left { transform: rotateY(-90deg); opacity: 0; } .tri-state-face.stage-right { transform: rotateY(90deg); opacity: 0; }.tri-state-wrapper.is-rotating .side-panel, .tri-state-wrapper.is-rotating .nav-panel-container, .tri-state-wrapper.is-rotating .tri-state-face { box-shadow: none !important; }.tri-state-toggle { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; padding: 0 0 0 5.5px; border-radius: 6px; color: rgb(255 255 255 / 85%); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .tri-state-toggle:hover { background: rgb(255 255 255 / 8%); } .tri-state-toggle-bar { position: relative; display: block; width: 25px; height: 1px; background: currentColor; transition: transform 0.25s ease, width 0.25s ease, opacity 0.25s ease; } .tri-state-toggle-bar:last-child { width: 15px; left: 0; }.panel-tabs { transition: opacity 0.60s ease, max-height 0.60s ease, padding 0.60s ease, margin 0.60s ease; max-height: 100px; opacity: 1; overflow: hidden; } [data-has-filters="false"] .panel-tabs { display:none; }@media (max-width: 900px) { .tri-state-wrapper { top: 0 !important; left: 0 !important; bottom: 0; height: 100%; transform: translate3d(-100%, 0, 0); }.tri-state-wrapper .side-panel, .tri-state-wrapper .nav-panel-container { margin: 0; height: 100%; border-radius: 0; }.app-main { width: 100vw; padding-left: 0; margin-left: 0; transform: translate3d(0, 0, 0); transition: transform 0.60s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } body.sidebar-open .app-main { transform: translate3d(300px, 0, 0); } body.sidebar-docked .viewport-center { padding-left: 0 !important; } }.airtix-action-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.2rem 3.5rem; border: none; border-radius: 60px; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; background: var(--airtix-aurora); background-size: 400% 400%; background-position: 0% 50%;box-shadow: 0 10px 25px -8px rgba(160, 0, 186, 0.55); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.6), box-shadow 0.3s ease; max-width: 85%; margin: auto; }.airtix-action-button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--airtix-aurora); background-size: 400% 400%; background-position: 0% 50%;z-index: -1; transform: scale(1); opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; pointer-events: none; }.viewport-center.is-settled .airtix-action-button { animation: airtix-aurora 7s ease infinite; } .viewport-center.is-settled .airtix-action-button::before { animation: airtix-aurora 7s ease infinite; }.airtix-action-button:hover, .airtix-action-button:focus-visible { transform: scale(1.06); box-shadow: 0 20px 40px -12px rgba(235, 5, 124, 0.75); outline: none; } .viewport-center.is-settled .airtix-action-button:hover, .viewport-center.is-settled .airtix-action-button:focus-visible { animation-duration: 2s; } .airtix-action-button:hover::before, .airtix-action-button:focus-visible::before { transform: scale(1.2); opacity: 0.4; } .viewport-center.is-settled .airtix-action-button:hover::before, .viewport-center.is-settled .airtix-action-button:focus-visible::before { animation-duration: 2s; }.airtix-action-button:active { transform: scale(1.02); }.airtix-action-button.is-reserving::before, .airtix-action-button.is-reserving::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--airtix-aurora); background-size: 400% 400%; background-position: 0% 50%; z-index: -1; pointer-events: none;opacity: 0; transform: scale(1); cursor:progress;}.airtix-action-button.is-reserving::before, .airtix-action-button.is-reserving::before { animation: airtix-aurora 2s ease infinite, airtix-ripple 2.4s ease-out infinite; animation-delay: 0s, 0s; } .airtix-action-button.is-reserving::after, .airtix-action-button.is-reserving::after { animation: airtix-aurora 2s ease infinite, airtix-ripple 2.4s ease-out infinite; animation-delay: 0s, 1.2s;}.airtix-action-button.is-reserving, .airtix-action-button.is-reserving { transform: scale(1.06); box-shadow: 0 20px 40px -12px rgba(235, 5, 124, 0.75); outline: none; }.airtix-action-button.is-reserving:active { transform: scale(1.02); } @keyframes airtix-ripple { 0% { transform: scale(1); opacity: 0.55; } 70% { opacity: 0.15; } 100% { transform: scale(1.25); opacity: 0; } }.map-control { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 88px -40px rgba(0, 0, 0, 0.5); background: #162e3a; margin: 25px 0 0; transform: translateZ(0); will-change: transform, height, opacity; backface-visibility: hidden; transition: height 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease; } .map-control-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }.map-control .leaflet-container { width: 100%; height: 100%; font-family: inherit; font-size: 12px; }.map-control .maplibregl-canvas, .map-control .mapboxgl-canvas { position: absolute; left: 0; top: 0; outline: none; }.map-control .leaflet-control-attribution { background: rgb(255 255 255 / 82%); color: rgb(0 10 20 / 70%); font-size: 10px; line-height: 1.4; padding: 2px 7px; border-top-left-radius: 8px; backdrop-filter: blur(6px); } .map-control .leaflet-control-attribution a { color: inherit; text-decoration: underline; } .map-control .leaflet-control-attribution a:hover { color: rgb(2 132 199); } .map-control .leaflet-bar { border: none; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45); border-radius: 10px; overflow: hidden; } .map-control .leaflet-bar a { background: rgb(255 255 255 / 94%); color: rgb(0 10 20 / 80%); border-bottom: 1px solid rgb(0 10 20 / 8%); font-weight: 600; width: 30px; height: 30px; line-height: 30px; transition: background-color 0.15s ease, color 0.15s ease; } .map-control .leaflet-bar a:last-child { border-bottom: none; } .map-control .leaflet-bar a:hover { background: rgb(255 255 255 / 100%); color: rgb(2 132 199); }.map-control .leaflet-popup-content-wrapper { background: rgb(255 255 255 / 97%); color: rgb(0 10 20); border-radius: 10px; box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.45); padding: 0; } .map-control .leaflet-popup-content { margin: 8px 10px; font-family: inherit; font-size: 12px; line-height: 1.3; } .map-control .leaflet-popup-tip { background: rgb(255 255 255 / 97%); box-shadow: none; } .map-control .leaflet-popup-close-button { display: none; } .map-control-popup { display: flex; flex-direction: column; gap: 2px; min-width: 120px; max-width: 220px; } .map-control-popup-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; } .map-control-popup-link:hover .map-control-popup-name { color: rgb(2 132 199); } .map-control-popup-name { font-size: 13px; font-weight: 700; line-height: 1.25; color: rgb(0 10 20); transition: color 0.15s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .map-control-popup-loc { font-size: 11px; color: rgb(0 10 20 / 65%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.map-control .map-pin-wrap { background: transparent; border: none; } .map-control .map-pin { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--airtix-gradient, linear-gradient(135deg, #6d5cff 0%, #d94bff 100%)); color: #fff; line-height: 1; border: 2px solid rgb(255 255 255 / 92%); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .map-control .map-pin--wide { width: auto; min-width: 56px; padding: 6px 0; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .map-control .map-pin span { transform: translateY(-1px); text-shadow: 0 1px 2px rgb(0 0 0 / 25%); } .map-control .map-pin:hover { transform: scale(1.08); box-shadow: var(--airtix-glow, 0 6px 22px -4px rgb(109 92 255 / 90%)); }.map-control .map-airport-wrap { background: transparent !important; border: none !important; pointer-events: none; width: 0 !important; height: 0 !important; margin: 0 !important; } .map-control .map-airport { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 6px; background: rgb(0 10 20 / 92%); color: #fff; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; border: 1px solid rgb(255 255 255 / 25%); box-shadow: 0 4px 14px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 8%); text-shadow: 0 1px 2px rgb(0 0 0 / 55%); user-select: none; pointer-events: none; }.map-control .leaflet-marker-icon.map-marker-pulse { z-index: 9999 !important; } .map-control .leaflet-marker-icon.map-marker-pulse .map-pin { animation: map-pin-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes map-pin-pulse { 0% { transform: scale(1); box-shadow: var(--airtix-glow, 0 0 0 0 rgb(109 92 255 / 0%)); } 25% { transform: scale(1.35); box-shadow: 0 0 0 12px rgb(109 92 255 / 0%); } 60% { transform: scale(1.10); box-shadow: 0 0 0 6px rgb(109 92 255 / 0%); } 100% { transform: scale(1); box-shadow: var(--airtix-glow, 0 0 0 0 rgb(109 92 255 / 0%)); } }.hs-map { position: relative;flex: 1 1 auto;width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: #dfe7ea; border-left: solid 1px rgb(0 10 20 / 10%);isolation: isolate; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease; } .hs-map .leaflet-container { width: 100%; height: 100%; background: #dfe7ea; font-family: inherit; }.hs-map-toggle { position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%); width: 26px; height: 44px; padding: 0; border-radius: 8px; border: 1px solid rgb(0 10 20 / 12%); background: #fff; color: rgb(0 10 20 / 65%); cursor: pointer; z-index: 401; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px -3px rgb(0 0 0 / 30%); transition: background-color 0.15s ease, color 0.15s ease, left 0.4s cubic-bezier(0.16, 1, 0.3, 1), right 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hs-map-toggle:hover { background: rgb(2 132 199); color: #fff; border-color: rgb(2 132 199); } .hs-map-toggle i { font-size: 11px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }.hs-body.no-map .hs-map { transform: translateX(100%); visibility: hidden; pointer-events: none; } .hs-body.no-map .hs-map-toggle { left: auto; right: 12px; transform: translate(0, -50%); } .hs-body.no-map .hs-map-toggle i { transform: rotate(180deg); }@media (max-width: 1100px) { .hs-map-toggle { left: 50%; } } @media (max-width: 720px) {.hs-map { position: absolute; inset: 0; z-index: 5; flex-basis: 100%; transform: translateX(100%); visibility: hidden; } .hs-body:not(.no-map) .hs-map { transform: translateX(0); visibility: visible; } .hs-map-toggle { top: 12px; left: 50%; } .hs-body.no-map .hs-map-toggle { top: 12px; left: 50%; right: auto; transform: translate(-50%, 0); } }.hotel-map-price-marker { translate: -50% -50%; } .hotel-map-price-marker > div { display: inline-block; padding: 4px 7px 3px; border-radius: 999px; background: var(--airtix-gradient, linear-gradient(135deg, #6d5cff 0%, #d94bff 100%)); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgb(0 0 0 / 35%); cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; text-shadow: 0px 0px 7px rgb(0 0 0 / 35%); } .hotel-map-price-marker:hover > div, .hotel-map-price-marker.is-active > div { transform: scale(1.08); } .hotel-map-price-marker.is-unavailable > div { background: rgb(148 163 184 / 85%); color: rgb(255 255 255 / 85%); }.hotel-map-group-marker { translate: -50% -50%; } .hotel-map-group-marker > div { display: inline-block; padding: 4px 8px; border-radius: 999px; background: var(--airtix-gradient, linear-gradient(135deg, #6d5cff 0%, #d94bff 100%)); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; border: 1.5px solid rgb(2 132 199 / 65%); box-shadow: 0 2px 6px rgb(0 0 0 / 30%); white-space: nowrap; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease; } .hotel-map-group-marker:hover > div, .hotel-map-group-marker.is-active > div { background: #0284c7; color: #fff; transform: scale(1.06); } .hotel-map-group-marker.is-unavailable > div { background: rgb(148 163 184 / 85%); border-color: rgb(148 163 184 / 55%); color: rgb(255 255 255 / 90%); } .hotel-map-group-marker.is-unavailable:hover > div, .hotel-map-group-marker.is-unavailable.is-active > div { background: rgb(100 116 139 / 90%); color: #fff; }.hotel-map-popup { position: absolute; width: 340px; max-width: calc(100% - 24px); display: flex; flex-direction: column; background: rgb(255 255 255 / 25%); backdrop-filter: blur(20px); border-radius: 14px; box-shadow: 0 12px 40px -10px rgb(0 0 0 / 60%); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 500; --arrow-size: 6px; padding: 8px; } .hotel-map-popup.is-measuring { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } .hotel-map-popup.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.hotel-map-popup.is-single { background: transparent; backdrop-filter: none; box-shadow: none; border-radius: 0; overflow: visible; } .hotel-map-popup.is-single .hotel-map-popup-body { padding: 0; gap: 0; max-height: none; background: transparent; overflow: visible; } .hotel-map-popup.is-single .hotel-card-compact { box-shadow: 0 12px 40px -10px rgb(0 0 0 / 55%); }.hotel-map-popup.is-single[data-placement="top"]::after { border-top-color: rgb(255 255 255 / 96%); } .hotel-map-popup.is-single[data-placement="bottom"]::after { border-bottom-color: rgb(255 255 255 / 96%); } .hotel-map-popup.is-single[data-placement="right"]::after { border-right-color: rgb(255 255 255 / 96%); } .hotel-map-popup.is-single[data-placement="left"]::after { border-left-color: rgb(255 255 255 / 96%); }.hotel-map-popup::after { content: ''; position: absolute; width: 0; height: 0; border: var(--arrow-size) solid transparent; pointer-events: none; } .hotel-map-popup[data-placement="top"]::after { top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-top-color: rgb(0 10 20 / 92%); } .hotel-map-popup[data-placement="bottom"]::after { bottom: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-bottom-color: rgb(0 10 20 / 92%); } .hotel-map-popup[data-placement="right"]::after { right: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-right-color: rgb(0 10 20 / 92%); } .hotel-map-popup[data-placement="left"]::after { left: 100%; top: var(--arrow-y, 50%); transform: translateY(-50%); border-left-color: rgb(0 10 20 / 92%); }.hotel-map-popup-body { flex: 1 1 auto; max-height: 340px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; border-radius: 3px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 15%) transparent; } .hotel-map-popup-body::-webkit-scrollbar { width: 6px; } .hotel-map-popup-body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 15%); border-radius: 999px; } .hotel-map-popup-body::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 25%); }.hotel-map-popup.is-group .hotel-map-popup-body { scrollbar-width: none; -ms-overflow-style: none; } .hotel-map-popup.is-group .hotel-map-popup-body::-webkit-scrollbar { width: 0; height: 0; display: none; } .hotel-map-popup-body .hotel-card-compact { flex-shrink: 0; } @media (max-width: 720px) { .hotel-map-popup { width: auto; max-width: calc(100% - 16px); } .hotel-map-popup-body { max-height: 260px; } } div.leaflet-top.leaflet-left:has(.leaflet-control-zoom) { top: auto !important; bottom: 5px !important; }.hs-map::before { content: ''; position: absolute; inset: 0; background-image: var(--map-baked-bg, none); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; z-index: 3; opacity: 0; visibility: hidden;transition: opacity 0s 250ms, visibility 0s 250ms; pointer-events: none; }.viewport-wrapper.is-sliding .hs-map.is-map-baked::before { opacity: 1; visibility: visible;transition: opacity 0s, visibility 0s; } .viewport-wrapper.is-sliding .hs-map.is-map-baked > * { visibility: hidden !important; opacity: 0 !important; transition: none; }.slider { --slider-accent: #0284c7; --slider-accent-strong: #0369a1; --slider-accent-glow: rgb(2 132 199 / 30%); --slider-thumb-size: 15px; --slider-track-height: 4px; position: relative; display: block; width: 100%; box-sizing: border-box; font-family: inherit; user-select: none; -webkit-user-select: none;touch-action: pan-y pinch-zoom; }.slider-track-wrap { position: relative; display: flex; align-items: center; width: 100%; height: 24px; box-sizing: border-box; padding: 0 calc(var(--slider-thumb-size) / 2); }.slider-track { position: relative; flex: 1; height: var(--slider-track-height); background: rgba(0, 10, 20, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); border-radius: 999px; cursor: pointer; } .slider-fill { position: absolute; top: 50%; height: var(--slider-track-height); translate: 0 -50%; left: 0; width: 0; border-radius: 999px; pointer-events: none; background: var(--airtix-gradient, linear-gradient(90deg, #38bdf8, #0284c7)); }.slider-fill.hidden { display: none; }.slider-thumb { position: absolute; top: 50%; width: var(--slider-thumb-size); height: var(--slider-thumb-size); margin-left: calc(var(--slider-thumb-size) / -2); margin-top: calc(var(--slider-thumb-size) / -2); border-radius: 50%; background: #ffffff; border: 2px solid var(--slider-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: grab; outline: none; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; z-index: 2; touch-action: none; }.slider-thumb::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; pointer-events: auto; } .slider-thumb[data-handle="min"] { z-index: 3; } .slider-thumb[data-handle="max"] { z-index: 2; } .slider-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35); border-color: var(--slider-accent-strong); } .slider-thumb:focus-visible { box-shadow: 0 0 0 3px var(--slider-accent-glow), 0 1px 4px rgba(0, 0, 0, 0.2); border-color: var(--slider-accent-strong); } .slider.dragging .slider-thumb.active { cursor: grabbing; transform: scale(1.18); box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4); }.slider.disabled { opacity: 0.45; pointer-events: none; }.dd-root { position: relative; display: inline-block; font-family: inherit; }.dd-trigger { display: inline-grid; grid-template-columns: auto 1fr auto; gap: 7px; padding: 6px 12px 7px 12px; border-radius: 999px; background-color: rgb(0 10 20 / 80%); color: rgb(138 217 255); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgb(0 0 0 / 75%); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .dd-trigger:hover, .dd-root.is-open .dd-trigger { background-color: rgb(0 10 20 / 65%); border-color: rgba(138, 217, 255, 0.4); color: #fff; } .dd-trigger-lead { display: inline-flex; align-items: center; flex: 0 0 auto; } .dd-trigger-icon { font-size: 11px; color: rgb(138 217 255 / 85%); } .dd-trigger-icon.hidden { display: none; } .dd-trigger-icon-img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; display: block; } .dd-trigger-label { flex: 1 1 auto; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; text-align: left; } .dd-root.is-placeholder .dd-trigger-label { color: rgba(255, 255, 255, 0.55); margin-right: 2px; } .dd-chevron { flex: 0 0 auto; font-size: 10px; color: rgb(138 217 255); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .dd-root.is-open .dd-chevron { transform: rotate(180deg); }.dd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999; max-height: 320px; overflow-y: auto; padding: 3px; background: rgba(0, 12, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -18px rgb(0 0 0 / 80%); opacity: 0; transform: translateY(-4px) scale(0.985); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1); background: rgb(0 10 20 / 75%); } .dd-root--align-left .dd-menu { right: auto; left: 0; }.dd-root.is-open .dd-menu, .dd-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .dd-menu[style*="position: fixed"] { display: flex; flex-direction: column; overflow-y: auto; }.dd-search { position: sticky; top: 0; z-index: 1; flex: 0 0 auto; margin: 0 0 5px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; background: rgba(0, 12, 22, 0.94); color: #fff; font-family: inherit; font-size: 12px; font-weight: 500; outline: none; transition: border-color 0.15s ease; } .dd-search::placeholder { color: rgba(255, 255, 255, 0.40); } .dd-search:focus { border-color: rgba(138, 217, 255, 0.5); } .dd-empty { padding: 14px 12px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.45); font-style: italic; }.dd-item { display: grid; grid-template-columns: 20px 1fr auto 16px; align-items: center; gap: 3px; width: 100%; padding: 3px 6px; border: none; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 12px; font-weight: 200; text-align: left; cursor: pointer; flex: 0 0 auto; transition: background-color 0.12s ease, color 0.12s ease; } .dd-item:has(.dd-item-icon--empty) { grid-template-columns: 1fr auto 16px; } .dd-item:hover, .dd-item:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fff; outline: none; } .dd-item.is-selected { background: rgba(34, 211, 238, 0.12); color: #fff; }.dd-menu .dd-item.is-active, .dd-menu .dd-item.is-active:hover, .dd-menu .dd-item.is-active:focus-visible { background: rgba(34, 211, 238, 0.22); color: #fff; outline: none; } .dd-item-icon { font-size: 13px; color: rgb(138 217 255 / 85%); justify-self: center; } .dd-item-icon--empty { display: none; width: 1px; height: 1px; } .dd-item-icon--img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; } .dd-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-item-right { min-width: 0; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.55); white-space: nowrap; justify-self: end; padding-left: 10px; } .dd-item-right--empty { display: inline-block; width: 1px; height: 1px; } .dd-item-check { font-size: 11px; color: #22d3ee; opacity: 0; justify-self: end; transition: opacity 0.12s ease; } .dd-item.is-selected .dd-item-check { opacity: 1; }.dd-root--input-look { display: block; width: fit-content; } .dd-root--input-look .dd-trigger { width: fit-content; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); box-shadow: none; text-shadow: none; font-family: inherit; font-size: 14px; font-weight: 500; justify-content: flex-start; } .dd-root--input-look .dd-trigger:hover, .dd-root--input-look.is-open .dd-trigger { background: #fff; color: rgb(0 10 20); } .dd-root--input-look.is-open .dd-trigger { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .dd-root--input-look .dd-trigger-icon { color: #0284c7; font-size: 12px; } .dd-root--input-look .dd-chevron { color: #0284c7; font-size: 10px; } .dd-root--input-look.is-placeholder .dd-trigger-label { color: rgb(0 10 20 / 40%); }.dd-menu--input-look { background: #fff; border: 1px solid rgb(0 10 20 / 12%); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 30%); backdrop-filter: none; -webkit-backdrop-filter: none; } .dd-menu--input-look .dd-item { color: rgb(0 10 20 / 85%); font-weight: 500; } .dd-menu--input-look .dd-item:hover, .dd-menu--input-look .dd-item:focus-visible { background: rgb(2 132 199 / 8%); color: rgb(0 10 20); } .dd-menu--input-look .dd-item.is-selected { background: rgb(2 132 199 / 12%); color: rgb(0 10 20); }.dd-menu--input-look .dd-item.is-active, .dd-menu--input-look .dd-item.is-active:hover, .dd-menu--input-look .dd-item.is-active:focus-visible { background: rgb(2 132 199 / 16%); color: rgb(0 10 20); outline: none; } .dd-menu--input-look .dd-item-icon { color: #0284c7; } .dd-menu--input-look .dd-item-right { color: rgb(0 10 20 / 55%); } .dd-menu--input-look .dd-item-check { color: #0284c7; } .dd-menu--input-look .dd-search { background: #fff; color: rgb(0 10 20); border: 1px solid rgb(0 10 20 / 15%); } .dd-menu--input-look .dd-search::placeholder { color: rgb(0 10 20 / 40%); } .dd-menu--input-look .dd-search:focus { border-color: #0284c7; } .dd-menu--input-look .dd-empty { color: rgb(0 10 20 / 45%); }.calendar-popup { position: fixed; z-index: 9000; width: 680px; padding: 18px; border-radius: 24px; backdrop-filter: blur(35px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); color: #fff; user-select: none; -webkit-user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; background-color: rgb(0 10 20 / 75%); } .calendar-popup.open { opacity: 1; transform: translateY(0); pointer-events: auto; }.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .calendar-month-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1; padding: 0 12px; } .calendar-month-label { background: transparent; border: none; font-family: inherit; cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #fff; text-align: center; padding: 6px 10px; border-radius: 8px; transition: background-color 0.15s ease; } .calendar-month-label:hover { background-color: rgba(255, 255, 255, 0.08); } .calendar-nav-btn { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #c2cfe3; background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; transition: all 0.15s ease; } .calendar-nav-btn:hover { background-color: rgba(255, 255, 255, 0.12); color: #fff; } .calendar-nav-btn:active { transform: scale(0.94); }.calendar-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .calendar-month-block { display: flex; flex-direction: column; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; } .calendar-weekdays span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendar-day { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #e2e8f0; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .calendar-day:hover:not(.disabled):not(.empty) { background-color: rgba(255, 255, 255, 0.10); color: #fff; } .calendar-day.empty { visibility: hidden; pointer-events: none; } .calendar-day.disabled { color: #475569; cursor: not-allowed; } .calendar-day.today { color: #7dd3fc; font-weight: 700; } .calendar-day.in_range { background-color: rgba(2, 132, 199, 0.28); color: #fff; border-radius: 0; } .calendar-day.range_start, .calendar-day.range_end { background-color: #0284c7; color: #fff; font-weight: 700; } .calendar-day.range_start { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .calendar-day.range_end { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .calendar-day.range_start.range_end { border-radius: 10px; }.calendar-years { display: none; padding: 4px 0; } .calendar-years-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .calendar-year { padding: 16px 8px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #e2e8f0; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .calendar-year:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.10); color: #fff; } .calendar-year.is-current { border-color: #0284c7; color: #7dd3fc; } .calendar-year.is-today { color: #7dd3fc; } .calendar-year:disabled { color: #475569; cursor: not-allowed; opacity: 0.5; }.calendar-popup.year-mode .calendar-months { display: none; } .calendar-popup.year-mode .calendar-years { display: block; } .calendar-popup.year-mode .calendar-month-labels { grid-template-columns: 1fr; padding: 0; } .calendar-popup.year-mode .calendar-month-label[data-slot="1"] { display: none; }.calendar-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; } .calendar-selection { font-size: 12px; color: #c2cfe3; min-height: 16px; text-align: center; } .calendar-selection-label { font-weight: 500; } .calendar-actions { display: flex; justify-content: space-between; gap: 10px; } .calendar-btn { flex: 1; height: 34px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: all 0.15s ease; } .calendar-btn-clear { background-color: rgba(255, 255, 255, 0.06); color: #c2cfe3; border: 1px solid rgba(255, 255, 255, 0.10); } .calendar-btn-clear:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.12); color: #fff; } .calendar-btn-clear:disabled { opacity: 0.45; cursor: not-allowed; } .calendar-btn-oneway { background-color: #0284c7; color: #fff; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); } .calendar-btn-oneway:hover:not(:disabled) { background-color: #0ea5e9; } .calendar-btn-oneway:disabled { background-color: rgba(2, 132, 199, 0.35); color: rgba(255, 255, 255, 0.55); cursor: not-allowed; box-shadow: none; } .calendar-btn:active:not(:disabled) { transform: scale(0.97); }.calendar-popup.flip_up { transform-origin: bottom center; }@media (max-width: 720px) { .calendar-popup { width: calc(100vw - 24px); max-width: 380px; } .calendar-months { grid-template-columns: 1fr; } .calendar-month-block:nth-child(2) { display: none; } .calendar-month-labels { grid-template-columns: 1fr; padding: 0; } .calendar-month-labels .calendar-month-label:nth-child(2) { display: none; } .calendar-years-grid { grid-template-columns: repeat(3, 1fr); } }.calendar-popup.single-mode .calendar-actions { display: none; }.calendar-popup #calendar-oneway-btn.hidden { display: none; }.hotel-room-cancellation-wrapper { position: relative; width: 100%;} .hotel-room-cancellation-list { position: absolute; bottom: calc(100% - 2px);left: 0; width: 100%; background: #f8fafc; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 16px -2px rgba(0, 10, 20, 15%); z-index: 10;max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.65s ease, opacity 0.15s ease; } .hotel-room-cancellation-wrapper.is-open .hotel-room-cancellation-list { max-height: 300px; opacity: 1; } .hotel-room-cancellation-list-inner { display: flex; flex-direction: column; }.hotel-room-cancellation-option { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; cursor: pointer; transition: background-color 0.35s ease; border-radius: 8px; } .hotel-room-cancellation-list .hotel-room-cancellation-option { border-bottom: solid 1px rgb(0 10 20 / 10%); border-radius: 12px 12px 0 0; } .hotel-room-cancellation-list .hotel-room-cancellation-option:hover { background-color: #e2e8f0; }.hotel-room-cancellation-trigger { display:block !important; position: relative; z-index: 11;display: flex; justify-content: space-between; align-items: center; border-radius: 12px; cursor: pointer; background: #fff; box-shadow: 0 1px 6px -2px rgba(0, 10, 20, 65%); transition: border-radius 0.2s ease; }.hotel-room-cancellation-wrapper.is-open .hotel-room-cancellation-trigger { border-radius: 0 0 12px 12px; }.hotel-room-cancellation-left { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .hotel-room-cancellation-value { font-size: 14px; font-weight: 600; color: #1c1919; line-height: 1.2; white-space: nowrap; } .hotel-room-cancellation-board { font-size: 12px; color: rgb(0 10 20 / 65%); line-height: 1.2; white-space: nowrap; } .hotel-room-cancellation-more { margin-top: 4px; font-size: 12px; font-weight: 600; color: #0284c7; white-space: nowrap; } .hotel-room-cancellation-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .hotel-room-price-final { font-size: 16px; font-weight: 700; color: #1c1919; white-space: nowrap; } .hotel-room-price-strike-row { display: flex; align-items: center; gap: 6px; } .hotel-room-price-strike { font-size: 12px; font-weight: 500; color: #d00020; text-decoration: line-through; white-space: nowrap; } .hotel-room-discount-badge { background: #0284c7; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.02em; line-height: 1.1; white-space: nowrap; }.hotel-room-price-strike.hidden, .hotel-room-discount-badge.hidden { display: none; } .is-single .hotel-room-cancellation-list { display: none; } .is-single { pointer-events: none; }.travelers-popup { position: fixed; z-index: 9000; width: 340px; padding: 18px; border-radius: 24px; backdrop-filter: blur(35px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); color: #fff; user-select: none; -webkit-user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; background-color: rgb(0 10 20 / 75%); } .travelers-popup.open { opacity: 1; transform: translateY(0); pointer-events: auto; }.travelers-rows { display: flex; flex-direction: column; gap: 4px; } .travelers-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .travelers-row:last-child { border-bottom: none; } .travelers-row-label { display: flex; flex-direction: column; gap: 2px; } .travelers-row-title { font-size: 14px; font-weight: 600; color: #fff; } .travelers-row-hint { font-size: 11px; color: #94a3b8; }.travelers-stepper { display: flex; align-items: center; gap: 10px; } .travelers-stepper-btn { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #c2cfe3; background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; transition: all 0.15s ease; } .travelers-stepper-btn:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.12); color: #fff; } .travelers-stepper-btn:active:not(:disabled) { transform: scale(0.94); } .travelers-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .travelers-stepper-value { min-width: 22px; text-align: center; font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }.travelers-child-ages { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 12px 0; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .travelers-child-ages-label { font-size: 11px; color: #94a3b8; margin-bottom: 2px; } .travelers-child-age-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .travelers-child-age-title { font-size: 13px; color: #c2cfe3; } .travelers-child-age-select { flex: 1; max-width: 160px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10); background-color: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; outline: none; cursor: pointer;color-scheme: dark; } .travelers-child-age-select:hover { background-color: rgba(255, 255, 255, 0.10); } .travelers-child-age-select:focus { border-color: #0284c7; background-color: rgba(255, 255, 255, 0.10); } .travelers-child-age-select option { background-color: #1e293b; color: #fff; }.travelers-footer { margin-top: 5px; padding-top: 12px; } .travelers-done-btn { width: 100%; height: 36px; border-radius: 999px; background-color: #0284c7; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); transition: all 0.15s ease; } .travelers-done-btn:hover { background-color: #0ea5e9; } .travelers-done-btn:active { transform: scale(0.97); }.travelers-popup.flip_up { transform-origin: bottom center; }.airport-dropdown { position: fixed; z-index: 9500; padding: 8px; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); color: #fff; max-height: 360px; box-sizing: border-box; overflow: hidden; user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; backdrop-filter: blur(35px); background-color: rgb(0 10 20 / 75%);min-width: 320px; max-width: min(560px, calc(100vw - 24px)); } .airport-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }.airport-dropdown-list { display: flex; flex-direction: column; max-height: 344px; overflow-y: auto; padding-right: 2px; } .airport-dropdown-list::-webkit-scrollbar { width: 6px; } .airport-dropdown-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .airport-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }.airport-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .airport-dropdown-item:hover, .airport-dropdown-item.active { background-color: rgba(255, 255, 255, 0.10); } .airport-dropdown-item:active { background-color: rgba(255, 255, 255, 0.16); } .airport-dropdown-item-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .airport-dropdown-item-name { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em;display: flex; align-items: center; gap: 8px; min-width: 0; } .airport-dropdown-item-meta { font-size: 12px; font-weight: 500; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }@media (max-width: 720px) { .airport-dropdown { width: calc(100vw - 24px) !important; left: 12px !important; } }.airport-dropdown-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .airport-dropdown-item-badge { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #bae6fd; background: rgba(2, 132, 199, 0.28); border: 1px solid rgba(2, 132, 199, 0.4); } .airport-dropdown-item.is-metro .airport-dropdown-item-name { color: #e0f2fe; } .airport-dropdown-item.is-selected { background-color: rgba(2, 132, 199, 0.18); } .airport-dropdown-item.is-selected .airport-dropdown-item-name { font-weight: 800; }.destination-dropdown { position: fixed; z-index: 9500; padding: 8px; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); color: #fff; max-height: 360px; box-sizing: border-box; overflow: hidden; user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; backdrop-filter: blur(35px); background-color: rgb(0 10 20 / 75%);min-width: 320px; max-width: min(560px, calc(100vw - 24px)); } .destination-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }.destination-dropdown-list { display: flex; flex-direction: column; max-height: 344px; overflow-y: auto; padding-right: 2px; } .destination-dropdown-list::-webkit-scrollbar { width: 6px; } .destination-dropdown-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .destination-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }.destination-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .destination-dropdown-item:hover, .destination-dropdown-item.active { background-color: rgba(255, 255, 255, 0.10); } .destination-dropdown-item:active { background-color: rgba(255, 255, 255, 0.16); } .destination-dropdown-item-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .destination-dropdown-item-name { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em;display: flex; align-items: center; gap: 8px; min-width: 0; } .destination-dropdown-item-meta { font-size: 12px; font-weight: 500; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }@media (max-width: 720px) { .destination-dropdown { width: calc(100vw - 24px) !important; left: 12px !important; } }.destination-dropdown-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .destination-dropdown-item-badge { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #bae6fd; background: rgba(2, 132, 199, 0.28); border: 1px solid rgba(2, 132, 199, 0.4); } .destination-dropdown-item.is-city .destination-dropdown-item-name { color: #e0f2fe; } .destination-dropdown-item.is-selected { background-color: rgba(2, 132, 199, 0.18); } .destination-dropdown-item.is-selected .destination-dropdown-item-name { font-weight: 800; }.search-drop-zone { width: 100%; margin: 0 0 18px 0; padding: 28px 16px; border: 2px dashed rgba(0, 10, 20, 0.35); border-radius: 20px; color: rgba(0, 10, 20, 0.75); font-size: 14px; text-align: center; background: rgb(0 10 20 / 10%); transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .search-drop-zone:hover { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.7); } .search-drop-zone.is-over { border-color: #7dd3fc; background: rgba(125, 211, 252, 0.06); color: #7dd3fc; } .search-drop-zone-hint { display: inline-flex; align-items: center; gap: 10px; } .search-drop-zone-hint i { font-size: 20px; }#center-viewport-search.is-busy .search-drop-zone, #center-viewport-search.is-results .search-drop-zone, #center-viewport-search.is-error .search-drop-zone { display: none; }.search-drop-zone.has-image { justify-content: flex-start; min-height: 84px; padding: 10px 14px; border-style: solid; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.15); cursor: default; } .search-drop-zone-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }.search-drop-zone-thumb-wrap { position: relative; width: 64px; height: 64px; border-radius: 12px; flex: 0 0 auto; overflow: hidden; background: rgba(255, 255, 255, 0.05); } .search-drop-zone-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .search-drop-zone-thumb-wrap.is-encoding .search-drop-zone-thumb { filter: grayscale(0.4) brightness(0.6); } .search-drop-zone-thumb-wrap.is-error { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55); } .search-drop-zone-thumb-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fecaca; font-size: 20px; background: rgba(127, 29, 29, 0.4); pointer-events: none; }.search-drop-zone-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .search-drop-zone-progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0284c7, #7dd3fc); transform-origin: left; animation: drop-zone-progress 1.2s ease-in-out infinite; } @keyframes drop-zone-progress { 0% { transform: scaleX(0.1); } 50% { transform: scaleX(0.7); } 100% { transform: scaleX(1); } }.search-drop-zone-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; padding: 0; opacity: 0; transition: opacity 150ms ease, background 150ms ease; } .search-drop-zone-thumb-wrap:hover .search-drop-zone-remove, .search-drop-zone-thumb-wrap.is-error .search-drop-zone-remove { opacity: 1; } .search-drop-zone-remove:hover { background: rgba(239, 68, 68, 0.85); }.search-drop-zone-add { width: 64px; height: 64px; border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.5); cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; padding: 0; transition: border-color 150ms ease, color 150ms ease, background 150ms ease; } .search-drop-zone-add:hover { border-color: rgba(125, 211, 252, 0.55); color: #7dd3fc; background: rgba(125, 211, 252, 0.06); }.search-attach-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #7dd3fc; color: #0c1a24; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px rgba(0, 10, 20, 0.85); pointer-events: none; z-index: 2; }.search-drop-overlay { position: absolute; inset: 12px; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; border: 3px dashed rgba(125, 211, 252, 0.55); border-radius: 28px; background: rgba(0, 10, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity 150ms ease; } #center-viewport-search.is-dragging .search-drop-overlay { opacity: 1; } .search-drop-overlay-icon { font-size: 56px; color: #7dd3fc; filter: drop-shadow(0 0 16px rgba(125, 211, 252, 0.5)); } .search-drop-overlay-text { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } #center-viewport-search.is-dragging .search-drop-overlay-icon { animation: drop-overlay-bob 1.6s ease-in-out infinite; } @keyframes drop-overlay-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }.country-card { display: flex; position: relative; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 15px 25px 20px 25px; border-radius: 28px; background-color: rgb(255 255 255 / 87%); } .country-card-header { display: flex; align-items: baseline; gap: 0px; flex-wrap: wrap; margin: 0 auto -25px auto; z-index: 2 !important; }.country-card-link { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; padding: 0px 10px; margin: 0 -3px; border-radius: 99px; text-decoration: none; transition: all 0.15s ease; border: solid 1px transparent; } .country-card-link:hover { background-color: rgb(255 255 255); border: solid 1px rgb(0 10 20 / 25%); } .country-card-name { font-size: 2.25em; font-weight: 800; color: #110c0c; text-transform: uppercase; text-shadow: none; font-family: 'times'; } .country-card-count { position: absolute; left: calc(100% + 0px);; bottom: 6px; font-size: 13px; white-space: nowrap; font-size: 12px; color: rgb(0 10 20 / 75%); font-weight: 500; transition: all 0.15s ease; } .country-card-header:has(.country-card-link:hover) .country-card-count { left: calc(100% + 6px); }.country-card-cities { display: flex; flex-direction: column; }.country-card-more { padding: 9px 25px !important; text-transform: none; letter-spacing: 0; font-weight: 500; animation: none; font-size: 15px; background: var(--airtix-search-gradient); text-shadow: 0 1px 1px rgb(0 10 20 / 50%); box-shadow: 0px 2px 4px -1px rgb(0 10 20 / 75%); } .country-card-more:hover { background: var(--airtix-aurora); background-size: 400% 400%; animation: airtix-aurora 2s ease infinite; box-shadow: 0px 0px 2px 0px rgb(255 255 255 / 100%), 0px 2px 4px -1px rgb(0 10 20 / 75%) !important; } .country-card-more:hover::before { display:none; }@media (max-width: 1200px) { .country-card { padding: 10px; border-radius: 20px; } .country-card-name { font-size: 1.75em; } .country-card-cities { gap: 20px; } }.country-card-cities:not(:has(.city-card))::after { content: 'No cities in this country match your filters.'; display: block; text-align: center; padding: 60px 24px 40px 24px; font-size: 14px; color: rgb(255 255 255 / 55%); font-style: italic; letter-spacing: 0.01em; }.city-hotels-card { display: flex; flex-direction: column; gap: 24px;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 15px 25px 20px 25px; border-radius: 28px; }.city-hotels-header { display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: -15px; }.city-hotels-name { margin: 0; font-size: 2.25em; font-weight: 800; color: #fff; text-transform: uppercase; text-shadow: none; font-family: 'times'; line-height: 1; }.city-hotels-count { font-size: 13px; color: rgb(0 10 20 / 75%); font-weight: 500; }.city-hotels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }@media (max-width: 900px) { .city-hotels-card { padding: 20px; border-radius: 20px; } .city-hotels-name { font-size: 1.4em; } .city-hotels-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } }.city-hotels-grid:not(:has(.hotel-card))::after { content: 'No hotels in this city match your filters.'; display: block; text-align: center; padding: 100px 24px 60px 24px; font-size: 15px; color: rgb(255 255 255 / 55%); font-style: italic; letter-spacing: 0.01em; }.city-card { display: flex; flex-direction: column; border-radius: 16px;} .city-card-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: fit-content; z-index: 3; } @media (max-width: 720px) { margin-left: 10px; }.city-card-link { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; padding: 5px 8px 5px 12px; margin: -5px -10px; border-radius: 99px; text-decoration: none; transition: all 0.15s ease; border: solid 1px transparent; } .city-card-link:hover { background-color: rgb(255 255 255); border: solid 1px rgb(0 10 20 / 25%); } .city-card-name { font-size: 20px; font-weight: 500; color: rgb(0 10 20); margin: 0; } .city-card-count { position: relative; left: 0px; font-size: 12px; color: rgb(0 10 20 / 75%); font-weight: 500; transition: all 0.15s ease; } .city-card-header:has(.city-card-link:hover) .city-card-count { left: 6px; }.city-card-blocks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; align-items: start; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; } .city-card-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 20px; background-color: rgb(0 10 20 / 20%); } .city-card-block:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .city-card-block:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .city-card-block-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 85%); } .city-card-block-label.vibe { color: #44dff9; } .city-card-block-label.intent { color: #ff91f1; } .city-card-block-label.activities { color: #ffa633; } .city-card-block-body { position: relative; } .city-card-block-text { font-size: 14px; line-height: 1.35; color: rgb(255 255 255 / 82%); max-height: calc(1.35em * 3); overflow: hidden; transition: max-height 0.25s ease; }.city-card-block-toggle { align-self: flex-start; padding: 0; margin: 0; background: transparent; border: none; color: #7dd3fc; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.15s ease; } .city-card-block-toggle:hover { color: #fff; } .city-card-block-toggle.hidden { display: none; }.city-card-slot { margin-top: 4px; }@media (max-width: 900px) { .city-card { padding: 18px; } .city-card-blocks { grid-template-columns: 1fr; gap: 16px; } .city-card-name { font-size: 18px; } } @media (max-width: 720px) { .city-card { padding: 0 5px; } }.hotel-card { position: relative;border: 1px solid rgb(0 10 20 / 13%); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 5px 20px -10px rgba(0 0 0 / 50%); background-color: rgb(255 255 255 / 95%); }.hotel-card::before { content: ''; position: absolute; inset: 0; background-image: var(--baked-bg, none); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; z-index: 0; opacity: 0; visibility: hidden;transition: opacity 0s 250ms, visibility 0s 250ms; pointer-events: none; }.viewport-wrapper.is-sliding .hotel-card.is-baked::before { opacity: 1; visibility: visible;transition: opacity 0s, visibility 0s; }.viewport-wrapper.is-sliding .hotel-card.is-baked .hotel-card-link { visibility: hidden !important; opacity: 0 !important; transition: none;}.hotel-card.is-baked .hotel-card-link { visibility: visible; opacity: 1; transition: opacity 250ms ease-out, visibility 0s; }.hotel-card.is-baked { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .hotel-card.is-baked .hotel-card-photo img { transition: transform 0.4s ease; } .hotel-card.is-baked .hotel-card-favorite { transition: background-color 0.15s ease, transform 0.15s ease; } .hotel-card.is-baked .hotel-card-map-btn { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }.hotel-card.is-baked:hover { background-color: rgb(255 255 255 / 100%); transform: translateY(-2px); } .hotel-card.is-baked:hover .hotel-card-photo img { transform: scale(1.04); } .hotel-card.is-baked .hotel-card-favorite:hover { background: rgb(0 0 0 / 65%); transform: scale(1.08); } .hotel-card.is-baked .hotel-card-map-btn:hover { background: rgb(2 132 199 / 14%); border-color: rgb(2 132 199 / 45%); }.hotel-card-link { position: relative; z-index: 1;display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1 1 auto; min-height: 0; }.hotel-card-photo { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background: #fff; flex-shrink: 0; } .hotel-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hotel-card-favorite { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgb(0 0 0 / 45%); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .hotel-card-favorite.is-saved { color: #f43f5e; } .hotel-card-favorite.is-saved i { font-weight: 900; }.hotel-card-body { padding: 12px 14px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; background-color: #fff;}.hotel-card-flex { flex: 1 1 0; min-height: 0; }.hotel-card-type-stars { display: flex; align-items: center; gap: 6px; } .hotel-card-type { font-size: 12px; font-weight: 500; color: rgb(0 10 20 / 65%); letter-spacing: 0.01em; } .hotel-card-stars { display: inline-flex; gap: 2px; color: #facc15; text-shadow: 0px 1px 1px rgb(0 0 0 / 50%); font-size: 11px; line-height: 1; }.hotel-card-name { font-size: 14px; font-weight: 700; color: rgb(0 10 20); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hotel-card-location-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .hotel-card-location { font-size: 12px; color: rgb(0 10 20 / 75%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .hotel-card-map-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgb(2 132 199 / 25%); background: rgb(2 132 199 / 8%); color: rgb(2 132 199); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; cursor: pointer; } .hotel-card-map-btn:active { transform: scale(0.97); } .hotel-card-map-btn i { font-size: 10px; } .hotel-card-map-btn.is-disabled { opacity: 0.35; pointer-events: none; }.hotel-card-rating-row { display: flex; align-items: center; gap: 8px; } .hotel-card-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 5px 7px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; background-color: #0284c7; } .hotel-card-rating-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hotel-card-rating-label { font-size: 12px; color: rgb(0 10 20 / 75%); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotel-card-review-count { font-size: 11px; color: rgb(0 10 20 / 75%); }.hotel-card-scalars { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; width: fit-content; } .hotel-card-scalars:empty { display: none; } .hotel-card-scalar { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 1.3; color: rgb(0 10 20 / 70%); } .hotel-card-scalar-icon { flex-shrink: 0; width: 12px; font-size: 10px; color: #0284c7; text-align: center; } .hotel-card-scalar-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(0 10 20 / 85%); } .hotel-card-scalar-value { flex: 0 0 auto; font-weight: 600; color: rgb(2 132 199); font-variant-numeric: tabular-nums; }.hotel-card-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 10px; margin-top: auto; } .hotel-card-room-size { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hotel-card-room-range { font-size: 15px; font-weight: 700; color: rgb(2 132 199); line-height: 1.2; white-space: nowrap; } .hotel-card-room-range:empty { display: none; } .hotel-card-room-types { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: rgb(0 10 20 / 55%); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotel-card-room-types:empty { display: none; }.hotel-card-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; min-width: 0; }.hotel-card-price > div { display: none; } .hotel-card-price[data-state="priced"] .hotel-card-price-priced { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .hotel-card-price[data-state="pending"] .hotel-card-price-pending { display: block; } .hotel-card-price[data-state="sold_out"] .hotel-card-price-soldout { display: block; } .hotel-card-price[data-state="unavailable"] .hotel-card-price-unavailable { display: block; } .hotel-card-price-priced .price-value { font-size: 17px; font-weight: 600; color: rgb(0 10 20); line-height: 1.2; white-space: nowrap; } .hotel-card-price-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: rgb(0 10 20 / 55%); line-height: 1.2; white-space: nowrap; } .hotel-card-price-pending, .hotel-card-price-soldout, .hotel-card-price-unavailable { font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .hotel-card-price-pending { position: relative; color: rgb(0 10 20 / 45%); } .hotel-card-price-pending::after { content: ''; position: absolute; left: 100%; margin-left: 1px; animation: price-dots 1.2s steps(4, end) infinite; } @keyframes price-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } .hotel-card-price-soldout { color: #d00000; } .hotel-card-price-unavailable { color: rgb(0 10 20 / 45%); }.hotel-card:has(.hotel-card-price[data-state="unavailable"]) { display: none; }.hotel-card.is-map-focused { animation: hotel-card-focus 1.8s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes hotel-card-focus { 0% { box-shadow: 0 10px 88px -40px rgba(0 0 0 / 50%), 0 0 0 0 rgb(109 92 255 / 55%); } 25% { box-shadow: 0 10px 88px -40px rgba(0 0 0 / 50%), 0 0 0 10px rgb(109 92 255 / 0%); } 100% { box-shadow: 0 10px 88px -40px rgba(0 0 0 / 50%), 0 0 0 0 rgb(109 92 255 / 0%); } }.hotel-card-compact { display: flex; flex-direction: row; align-items: stretch; border-radius: 10px; overflow: hidden; background: rgb(255 255 255 / 50%); backdrop-filter: blur(20px); color: rgb(0 10 20); box-shadow: 0 4px 14px -6px rgb(0 0 0 / 40%); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; min-height: 90px; } .hotel-card-compact:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgb(0 0 0 / 50%); }.hotel-card-compact-photo { position: relative; flex: 0 0 120px; width: 120px; height: 100px; align-self: center; overflow: hidden; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .hotel-card-compact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hotel-card-compact-pinned { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgb(2 132 199 / 85%); backdrop-filter: blur(4px); } .hotel-card-compact-favorite { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgb(0 0 0 / 40%); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: background-color 0.15s ease, transform 0.15s ease; } .hotel-card-compact-favorite:hover { background: rgb(0 0 0 / 60%); transform: scale(1.08); } .hotel-card-compact-favorite.is-saved { color: #f43f5e; } .hotel-card-compact-favorite.is-saved i { font-weight: 900; }.hotel-card-compact-body { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 8px 12px 5px; min-width: 0; flex: 1 1 auto; }.hotel-card-compact-top { display: flex; flex-direction: column; gap: 4px; min-width: 0; }.hotel-card-compact-name { font-size: 13px; font-weight: 700; color: rgb(0 10 20); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.hotel-card-compact-rating { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1; min-width: 0; } .hotel-card-compact-stars { display: inline-flex; gap: 1px; color: #facc15; font-size: 10px; line-height: 1; text-shadow: 0 1px 1px rgb(0 0 0 / 20%); flex-shrink: 0; } .hotel-card-compact-score { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 5px; border-radius: 5px; background: #0284c7; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; } .hotel-card-compact-reviews { font-size: 11px; color: rgb(0 10 20 / 55%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }.hotel-card-compact-price { align-self: flex-end; display: inline-flex; align-items: baseline; gap: 5px; flex-shrink: 0; } .hotel-card-compact-price-value { font-size: 14px; font-weight: 700; color: rgb(0 10 20); font-variant-numeric: tabular-nums; white-space: nowrap; } .hotel-card-compact-price-unavailable { font-size: 12px; color: rgb(0 10 20 / 45%); font-style: italic; white-space: nowrap; }.hotel-room-card { display: flex; flex-direction: column; width: 300px;min-width: 0; background: #fff; border: 1px solid rgb(0 10 20 / 8%); border-radius: 14px; box-shadow: 0 4px 16px -10px rgb(0 0 0 / 35%); transition: transform 0.15s ease, box-shadow 0.15s ease; } .hotel-room-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgb(0 0 0 / 30%); }.hotel-room-photo-hero { position: relative; width: 100%; aspect-ratio: 4 / 3; background: rgb(0 10 20 / 5%); flex-shrink: 0; margin-bottom: 2px; } .hotel-room-photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; border-top-left-radius: 14px; border-top-right-radius: 14px; } .hotel-room-card:hover .hotel-room-photo-hero img { transform: scale(1.03); } .hotel-room-photo-count { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / 60%); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hotel-room-photo-count::before { content: '\f03e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; line-height: 1; margin-right: 1px; }.hotel-room-photo-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; flex-shrink: 0; background: #fff; } .hotel-room-photo-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: none; overflow: hidden; cursor: pointer; background: rgb(0 10 20 / 5%); transition: opacity 0.15s ease; } .hotel-room-photo-thumb:hover { opacity: 0.85; } .hotel-room-photo-thumb.is-active { outline: 2px solid #0284c7; outline-offset: -2px; } .hotel-room-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }.hotel-room-photo-thumb--more::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 55%); pointer-events: none; z-index: 0; } .hotel-room-photo-more-overlay { position: absolute; inset: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; pointer-events: none; }.hotel-room-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 6px; flex: 1 1 auto; min-width: 0; } .hotel-room-name { margin: 0; font-size: 15px; font-weight: 600; color: rgb(0 10 20); line-height: 1.3; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hotel-room-attrs { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: rgb(0 10 20 / 70%); line-height: 1.4; } .hotel-room-attrs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .hotel-room-attrs li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .hotel-room-attrs i { flex-shrink: 0; width: 14px; font-size: 11.5px; color: #0284c7; text-align: center; }.hotel-room-rate { display: flex; flex-direction: column; gap: 12px; padding: 8px 15px 16px; min-width: 0; margin-top: auto; position: relative; }.hotel-room-rate-top { display: flex; flex-direction: column; width: 100%; min-width: 0; } .hotel-room-rate-loading, .hotel-room-rate-hint { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 0; font-size: 12.5px; color: rgb(0 10 20 / 55%); text-align: right; } .hotel-room-rate-loading i { color: #0284c7; }.hotel-room-book-btn { width: 100%; padding: 11px 18px; letter-spacing: 1px; }.is-loading-rate .hotel-room-rate-top { opacity: 0.6; transition: opacity 0.2s ease; }.is-loading-rate .hotel-room-rate::after { content: '\f110';font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 8px; right: 16px; font-size: 14px; color: #0284c7; animation: fa-spin 1s infinite linear; }.is-loading-rate .hotel-room-book-btn { display: none; } .is-loading-rate .hotel-room-rate-loading { display: none; }.hds-empty { padding: 24px 0; color: rgb(0 10 20 / 45%); font-size: 14px; font-style: italic; }.hotel-room-carousel { position: relative; width: 100%; min-width: 0; }.hotel-room-carousel-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 0 35px; min-width: 0; outline: none; scrollbar-width: none; -ms-overflow-style: none; } .hotel-room-carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; }.hotel-room-carousel-track > .hotel-room-card { flex: 0 0 auto; scroll-snap-align: start; width: 300px; }.hotel-room-carousel-track > .hds-empty { flex: 0 0 100%; width: 100%; scroll-snap-align: none; text-align: center; }.hotel-room-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(10 16 22 / 90%); border: 1px solid rgb(255 255 255 / 12%); color: #fff; font-size: 14px; cursor: pointer; z-index: 5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgb(0 0 0 / 40%); transition: background-color 0.15s ease, transform 0.15s ease; } .hotel-room-carousel-btn:hover { background: rgb(2 132 199 / 90%); transform: translateY(-50%) scale(1.05); } .hotel-room-carousel-btn.hidden { display: none; } .hotel-room-carousel-btn-prev { left: -12px; } .hotel-room-carousel-btn-next { right: -12px; }@media (max-width: 720px) { .hotel-room-carousel-track > .hotel-room-card { width: 260px; } .hotel-room-carousel-btn { width: 34px; height: 34px; font-size: 12px; } .hotel-room-carousel-btn-prev { left: -6px; } .hotel-room-carousel-btn-next { right: -6px; } }.hotel-review-card { display: grid; grid-template-columns: auto 1fr; gap: 32px; padding: 24px 26px; border-radius: 14px; background: #e9f3f9; border: 1px solid rgb(0 10 20 / 8%); box-shadow: 0 4px 18px -12px rgb(0 0 0 / 25%); }.hrc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hrc-avatar { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 0.02em; background: #f97316;} .hrc-user { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hrc-user-name { font-size: 14.5px; font-weight: 700; color: rgb(0 10 20); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hrc-user-country { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: rgb(0 10 20 / 60%); line-height: 1.3; } .hrc-user-country-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrc-flag { flex-shrink: 0; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 10 20 / 10%); } .hrc-score { display: flex; flex-direction: column; gap: 2px; } .hrc-score-number { font-size: 22px; font-weight: 800; color: rgb(0 10 20); line-height: 1.1; font-variant-numeric: tabular-nums; } .hrc-score-label { font-size: 12.5px; font-weight: 600; color: rgb(2 132 199); line-height: 1.2; } .hrc-stars { display: inline-flex; flex-wrap: wrap; gap: 2px; font-size: 12px; line-height: 1; } .hrc-stars .fa-solid { color: #f59e0b; } .hrc-stars .fa-regular { color: rgb(0 10 20 / 20%); }.hrc-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }.hrc-text { display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); } .hrc-headline { font-size: 15px; font-weight: 700; color: rgb(0 10 20); line-height: 1.4; } .hrc-pros, .hrc-cons { font-size: 14px; line-height: 1.65; color: rgb(0 10 20 / 78%); white-space: pre-line; } .hrc-pros:empty, .hrc-cons:empty, .hrc-headline:empty { display: none; }.hrc-expand { align-self: flex-start; padding: 4px 0; border: none; background: none; color: #0284c7; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.15s ease; } .hrc-expand:hover { color: #0369a1; text-decoration: underline; } .hrc-expand[hidden] { display: none; }.hrc-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .hrc-date { font-size: 12px; color: rgb(0 10 20 / 45%); font-style: italic; } .hrc-like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(0 10 20 / 10%); background: rgb(240 245 250); color: rgb(0 10 20 / 70%); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .hrc-like i { font-size: 13px; } .hrc-like:hover { background: rgb(2 132 199 / 8%); border-color: rgb(2 132 199 / 35%); color: #0284c7; transform: translateY(-1px); } .hrc-like:active { transform: translateY(0); } .hrc-like.is-liked { background: rgb(2 132 199 / 12%); border-color: #0284c7; color: #0284c7; } .hrc-like.is-liked i { font-weight: 900; } .hrc-like:disabled { cursor: wait; opacity: 0.6; transform: none; } .hrc-like-count { font-variant-numeric: tabular-nums; min-width: 8px; text-align: right; }@media (max-width: 720px) { .hotel-review-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; } .hrc-side { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "avatar user score" "avatar stars stars"; align-items: center; column-gap: 14px; row-gap: 6px; } .hrc-avatar { grid-area: avatar; } .hrc-user { grid-area: user; } .hrc-score { grid-area: score; align-items: flex-end; } .hrc-stars { grid-area: stars; } }.hotel-review-summary { display: flex; flex-direction: column; gap: 20px; padding: 20px 22px; margin-bottom: 22px; border: 1px solid rgb(0 10 20 / 8%); border-radius: 14px; background: rgb(248 250 252); }.hrs-head { display: flex; align-items: center; gap: 16px; padding-left: 56px; } .hrs-score { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; padding: 14px 28px; border-radius: 999px; border-bottom-left-radius: 0; color: #fff; font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;background: var(--airtix-aurora); background-size: 400% 400%; background-position: 0% 50%; animation: airtix-aurora 7s ease infinite; box-shadow: 0 6px 18px -8px rgb(160 0 186 / 55%); } .hrs-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hrs-meta-label { font-size: 17px; font-weight: 700; color: rgb(0 10 20); line-height: 1.2; } .hrs-meta-count { font-size: 13px; color: rgb(0 10 20 / 55%); line-height: 1.2; }.hrs-tiers { display: flex; flex-direction: column; gap: 6px; } .hrs-tier { display: grid; grid-template-columns: 44px 1fr 110px 44px; align-items: center; gap: 12px; padding: 6px 10px; margin: 0 -10px; border: none; border-radius: 8px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .hrs-tier:hover { background: rgb(2 132 199 / 6%); } .hrs-tier.is-active { background: rgb(2 132 199 / 12%); } .hrs-tier-range { font-size: 13px; font-weight: 700; color: rgb(0 10 20 / 65%); text-align: right; font-variant-numeric: tabular-nums; } .hrs-tier-track { display: block; height: 8px; border-radius: 999px; background: rgb(0 10 20 / 6%); overflow: hidden; } .hrs-tier-fill { display: block; height: 100%; border-radius: 999px; background: #0284c7; transition: width 0.25s ease; } .hrs-tier.is-active .hrs-tier-fill { background: #0369a1; } .hrs-tier-label { font-size: 13px; font-weight: 600; color: rgb(0 10 20 / 80%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hrs-tier-count { font-size: 13px; font-weight: 700; color: rgb(0 10 20); text-align: right; font-variant-numeric: tabular-nums; }@media (max-width: 720px) { .hotel-review-summary { padding: 16px; gap: 16px; } .hrs-score { min-width: 52px; font-size: 20px; padding: 12px 10px; } .hrs-tier { grid-template-columns: 40px 1fr 44px; gap: 8px; } .hrs-tier-label { display: none; } }.hotel-images-card { display: grid; grid-template-columns: 3fr 1fr; gap: 1px; width: 100%; }.hic-main-pane { position: relative; padding-top: 66.667%; border-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; overflow: hidden; background: rgb(0 10 20 / 5%); cursor: pointer; user-select: none; } .hic-main-pane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity 0.25s ease; pointer-events: none; } .hic-main-pane > img.hic-fade { opacity: 0; }.hic-thumbs-pane { position: relative; min-width: 0;overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } .hic-thumbs-scroll { position: absolute; inset: 0; padding: 0; margin: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px;scrollbar-width: none;-ms-overflow-style: none;} .hic-thumbs-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }.hic-thumb { position: relative; flex: 0 0 calc((100% - 2px) / 3); min-height: 0; overflow: hidden; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease; background: rgb(0 10 20 / 5%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .hic-thumb:hover { opacity: 0.95; } .hic-thumb.sel { opacity: 1; cursor: default; } .hic-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }@media (max-width: 720px) { .hotel-images-card { grid-template-columns: 1fr; } .hic-thumbs-pane { display: none; } }.hotel-quick-book { display: flex; flex-direction: column; gap: 16px; padding: 30px 35px 20px 50px; min-width: 0; background-color: #e9f3f9; margin: 25px -15px 0 0; border-top-left-radius: 65px; border-bottom-left-radius: 65px; min-width: 325px; box-shadow: 0 4px 16px -10px rgb(0 0 0 / 35%); } .hotel-quick-book .airtix-action-button { width: 90%; margin: auto; }.hqb-price { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; } .hqb-price-eyebrow { padding-top: 10px;flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; color: rgb(0 10 20 / 55%); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .hqb-price-figures { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } .hqb-price-value { font-size: 24px; font-weight: 600; color: rgb(0 10 20); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .hqb-price-label { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: rgb(0 10 20 / 55%); white-space: nowrap; text-align: right; }.hqb-rate { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.25s ease; } .hotel-quick-book[data-state="ready"] .hqb-rate { grid-template-rows: 1fr; opacity: 1; } .hqb-rate-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .hqb-room-name { font-size: 14px; font-weight: 600; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #245287; } .hqb-occupancy { font-size: 13px; color: rgb(0 10 20 / 65%); }.hqb-images { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.25s ease; } .hotel-quick-book[data-state="ready"] .hqb-images { grid-template-rows: 1fr; opacity: 1; } .hqb-images-inner { overflow: hidden; min-height: 0; min-width: 0; } .hqb-images-row { display: flex; gap: 2px; min-width: 0; }.hqb-image-thumb { position: relative; flex: 1 1 0; min-width: 0; width: 85px; aspect-ratio: 4 / 3; padding: 0; border: none; border-radius: 6px; overflow: hidden; cursor: pointer; background: rgb(0 10 20 / 8%); transition: transform 0.15s ease; } .hqb-image-thumb:hover { transform: scale(1.04); } .hqb-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }.hqb-image-thumb--more::after { content: ''; position: absolute; inset: 0; background: rgb(0 10 20 / 55%); pointer-events: none; z-index: 0; } .hqb-image-more-overlay { position: absolute; inset: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; }.hqb-progress { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.25s ease; } .hotel-quick-book[data-state="loading"] .hqb-progress { grid-template-rows: 1fr; opacity: 1; } .hqb-progress-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .hqb-progress-text { font-size: 12px; color: rgb(0 10 20 / 55%); text-align: right; } .hqb-progress-host { width: 100%; }.hqb-progress .progress-bar { position: relative; width: 100%; height: 3px; border-radius: 999px; background: rgb(0 10 20 / 8%); overflow: hidden; } .hqb-progress .progress-bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #0284c7, #7dd3fc); border-radius: 999px; transition: width 180ms ease-out; }.hqb-promo { display: grid; grid-template-columns: 1fr auto; column-gap: 4px; row-gap: 6px; align-items: center; } .hqb-promo-label { grid-column: 1 / -1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(0 10 20 / 50%); } .hqb-promo-input { grid-column: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; font-family: inherit; font-size: 13px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .hqb-promo-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 12%); } .hqb-promo-btn { grid-column: 2; padding: 8px 14px; border-radius: 8px; border: none; background: #0284c7; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease; } .hqb-promo-btn:hover { background: #0369a1; } .hqb-promo-link { grid-column: 1; justify-self: center; margin-top: 2px; font-size: 12px; font-weight: 600; color: #0284c7; text-decoration: none; } .hqb-promo-link:hover { text-decoration: underline; }.hqb-actions { display: flex; flex-direction: column; gap: 10px; } .hqb-link-action { align-self: center; padding: 6px 12px; border: none; background: none; color: #0284c7; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.15s ease; } .hqb-link-action:hover { text-decoration: underline; color: #0369a1; }@media (max-width: 900px) { .hotel-quick-book { padding: 18px 12px; } }html.hrip-locked, html.hrip-locked body { overflow: hidden !important; }.hrip-backdrop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(0 5 15 / 85%); backdrop-filter: blur(6px); animation: hrip-fade 0.15s ease; } @keyframes hrip-fade { from { opacity: 0; } to { opacity: 1; } }.hrip-dialog { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 960px; max-height: calc(100vh - 48px); min-width: 0; min-height: 0; }.hrip-close { position: absolute; top: -12px; right: -12px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgb(255 255 255 / 92%); color: rgb(0 10 20); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / 30%); transition: background-color 0.15s ease, transform 0.15s ease; } .hrip-close:hover { background: #fff; transform: scale(1.05); }.hrip-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; background: rgb(255 255 255 / 4%); } .hrip-stage-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }.hrip-thumbs { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px; border-radius: 10px; background: rgb(255 255 255 / 6%); scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 25%) transparent; } .hrip-thumbs::-webkit-scrollbar { height: 6px; } .hrip-thumbs::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 25%); border-radius: 999px; } .hrip-thumb { flex: 0 0 auto; width: 88px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: rgb(255 255 255 / 5%); cursor: pointer; transition: border-color 0.15s ease, opacity 0.15s ease; opacity: 0.7; } .hrip-thumb:hover { opacity: 1; } .hrip-thumb.sel { border-color: #7dd3fc; opacity: 1; cursor: default; } .hrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }@media (max-width: 720px) { .hrip-backdrop { padding: 12px; } .hrip-close { top: -8px; right: -8px; } .hrip-thumb { width: 68px; height: 52px; } }.hotel-search-panel--results { background: transparent; }.hs-body { position: absolute; inset: 0; display: flex; overflow: hidden; background: rgb(240 245 250); height: 100%; z-index: 1; padding-left: 300px; transition: padding 0.60s cubic-bezier(0.25, 1, 0.5, 1); } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hs-body { padding-left: 0; } .hs-body.no-map { background: transparent; }.hotel-search-panel--results .hs-body > .hs-map-toggle { position: absolute; left: calc(50% + 150px); top: 50%; transform: translate(-50%, -50%); z-index: 401; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 10, 20, 0.12); background: #fff; color: #1c1919; box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.35); cursor: pointer; transition: left 0.60s cubic-bezier(0.25, 1, 0.5, 1), background 0.15s ease, transform 0.15s ease; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-search-panel--results .hs-body > .hs-map-toggle { left: 50%; } .hotel-search-panel--results .hs-body > .hs-map-toggle:hover { background: #f5f8fa; } .hotel-search-panel--results .hs-body.no-map > .hs-map-toggle { left: auto !important; right: 32px !important; transform: translate(0, -50%); }.hs-results-wrapper { position: relative; flex: 0 0 50%; min-width: 0; min-height: 0; overflow: hidden; perspective: 2500px; perspective-origin: 50% 50%; transition: flex-basis 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hs-results { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; backface-visibility: hidden; will-change: transform, opacity; transition: transform var(--airtix-ui-responsive), opacity 0.60s ease, visibility 0.85s ease; } .hs-results.is-active { transform: rotateY(0deg) translateZ(0) translateX(0); opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; } .hs-results.is-left { transform: rotateY(-90deg) translateZ(var(--hs-r, 400px)) translateX(var(--hs-r-neg, -400px)); opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; } .hs-results.is-right { transform: rotateY(90deg) translateZ(var(--hs-r, 400px)) translateX(var(--hs-r, 400px)); opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; } .hs-results.no-transition { transition: none !important; }.hs-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 18px; background: #fff; border-bottom: 1px solid rgb(0 10 20 / 8%); } .hs-summary { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; font-size: 13px; color: rgb(0 10 20 / 65%); } .hs-summary-count { font-size: 13px; color: rgb(0 10 20 / 75%); font-variant-numeric: tabular-nums; } .hs-summary-city { font-size: 2.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-family: 'times', serif; } .hs-summary-count-label { } .hs-summary-sep { color: rgb(0 10 20 / 30%); flex-shrink: 0; } .hs-sort-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 5px; } .hs-sort-label { font-size: 15px; font-weight: 500; color: rgb(0 10 20 / 75%); white-space: nowrap; } .hs-sort-slot { flex-shrink: 0; display: flex; align-items: center; } .hs-sort-slot .dd-trigger { border: solid 1px rgb(2 132 199); background-color: #fff; color: rgb(2 132 199); box-shadow: none; text-shadow: none; padding: 2px 10px 3px; gap: 5px; } .hs-sort-slot .dd-trigger-icon { color: rgb(2 132 199); padding-top: 2px; } .hs-sort-slot .dd-chevron { color: rgb(2 132 199); }.hs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(max-content, auto); gap: 14px; padding: 10px 10px 40px; align-content: start; } .hs-list::-webkit-scrollbar { width: 8px; } .hs-list::-webkit-scrollbar-thumb { background: rgb(0 10 20 / 15%); border-radius: 999px; } .hs-list::-webkit-scrollbar-thumb:hover { background: rgb(0 10 20 / 25%); }.hs-loading, .hs-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: rgb(0 10 20 / 45%); font-size: 14px; } .hs-loading.hidden, .hs-empty.hidden { display: none; } .hs-loading i { margin-right: 8px; }.hs-body.no-map .hs-results-wrapper { flex: 0 0 100%; overflow-y: auto; overflow-x: hidden; padding: 32px 24px 48px; } .hs-body.no-map .hs-results { position: relative; inset: auto; max-width: 1250px; margin: 0 auto; min-height: calc(100vh - 80px); border-radius: 28px; background: rgb(255 255 255 / 87%); box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); } .hs-body.no-map .hs-results.is-left, .hs-body.no-map .hs-results.is-right { position: absolute; top: 32px; bottom: 48px; left: 24px; right: 24px; margin: 0 auto; } .hs-body.no-map .hs-header { padding: 10px 24px; background: transparent; border-bottom: none !important; border-radius: 28px 28px 0 0; } .hs-body.no-map .hs-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); padding: 5px 20px 32px; overflow-y: visible; }@media (max-width: 1250px) { .hs-results-wrapper { flex-basis: 50%; } } @media (max-width: 900px) {.hs-body { padding-left: 0; background:none; } .hs-body .hs-map, .hs-body > .hs-map-toggle { display: none; }.hs-body .hs-results-wrapper { flex: 0 0 100vw; width: 100vw; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 80px; transition: transform 0.60s cubic-bezier(0.25, 1, 0.5, 1); } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hs-body .hs-results-wrapper { transform: translateX(0); }.hs-body .hs-results { position: relative; inset: auto; max-width: 1250px; margin: 0 auto; min-height: calc(100vh - 80px); border-radius: 28px; box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); } .hs-body .hs-results.is-left, .hs-body .hs-results.is-right { position: absolute; top: 32px; bottom: 48px; left: 24px; right: 24px; margin: 0 auto; } .hs-body .hs-header { flex-direction: column; padding: 8px 24px; background: transparent; border-bottom: none !important; border-radius: 28px 28px 0 0; gap: 0px; } .hs-body .hs-list { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); padding: 0 5px 5px; gap: 5px; overflow-y: visible; } .hs-map-toggle { display:none; } .hotel-card-scalars { display:none; } .hotel-search-panel--results .hs-body > .hs-map-toggle { display:none; } } @media (max-width: 600px) {}.hotel-checkout-progress { display: block; width: 100%; max-width: min(calc(100% - 30px), var(--airtix-content-width)); padding: 20px 40px 22px; background: #fff; border-radius: 20px; box-shadow: 0 5px 20px -10px rgb(0 0 0 / 50%); font-family: inherit; box-sizing: border-box; } .hotel-checkout-progress-steps { display: flex; list-style: none; padding: 0; margin: 0; } .hotel-checkout-progress-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hotel-checkout-progress-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: rgb(0 10 20 / 45%); transition: color 0.25s ease; } .hotel-checkout-progress-step.is-done .hotel-checkout-progress-label { color: rgb(2 132 199); } .hotel-checkout-progress-step.is-active .hotel-checkout-progress-label { color: rgb(0 10 20); } .hotel-checkout-progress-rail { display: flex; align-items: center; width: 100%; } .hotel-checkout-progress-line { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgb(0 10 20 / 10%); transition: background-color 0.25s ease; } .hotel-checkout-progress-step:first-child .hotel-checkout-progress-line--before, .hotel-checkout-progress-step:last-child .hotel-checkout-progress-line--after { visibility: hidden; } .hotel-checkout-progress-step.is-done .hotel-checkout-progress-line--after { background: rgb(2 132 199); } .hotel-checkout-progress-step.is-done + .hotel-checkout-progress-step .hotel-checkout-progress-line--before { background: rgb(2 132 199); } .hotel-checkout-progress-dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid rgb(0 10 20 / 15%); font-size: 11px; font-weight: 700; color: rgb(0 10 20 / 45%); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .hotel-checkout-progress-dot i { font-size: 10px; } .hotel-checkout-progress-step.is-done .hotel-checkout-progress-dot { background: rgb(2 132 199); border-color: rgb(2 132 199); color: #fff; } .hotel-checkout-progress-step.is-active .hotel-checkout-progress-dot { background: #fff; border-color: rgb(2 132 199); color: rgb(2 132 199); box-shadow: 0 0 0 4px rgb(2 132 199 / 15%); } @media (max-width: 720px) { .hotel-checkout-progress { padding: 16px 20px 18px; max-width: calc(100% - 24px); } .hotel-checkout-progress-label { font-size: 9px; letter-spacing: 0.04em; } .hotel-checkout-progress-dot { width: 20px; height: 20px; font-size: 10px; } }.hotel-guest-card { gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid rgb(216 224 229); color: rgb(0 10 20); display: flex; flex-direction: column; background-color: rgb(233, 243, 249); min-width: 325px; box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 16px -10px; margin: 0; } .hotel-guest-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; } .hotel-guest-card-head-left { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .hotel-guest-card-title { margin: 0; font-size: 15px; font-weight: 500; color: rgb(0 10 20); } .hotel-guest-card-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: #0284c7; } .hotel-guest-card-picker-slot { flex: 0 1 220px; max-width: 220px; margin-left: auto; } .hotel-guest-card-picker-slot:empty { display: none; } .hotel-guest-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hotel-guest-card-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hotel-guest-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); padding-left: 10px; transition: color 0.15s ease; } .hotel-guest-card-input { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .hotel-guest-card-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); }.hotel-guest-card-picker-slot { display: block; width: 100%; min-width: 0; } .hotel-guest-card-picker-slot .dd-root { display: block; width: 100%; } .hotel-guest-card-picker-slot .dd-trigger { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); box-shadow: none; text-shadow: none; font-family: inherit; font-size: 14px; font-weight: 500; justify-content: space-between; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .hotel-guest-card-picker-slot .dd-trigger:hover { border-color: rgb(2 132 199 / 50%); } .hotel-guest-card-picker-slot .dd-root.is-open .dd-trigger { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .hotel-guest-card-picker-slot .dd-trigger-icon, .hotel-guest-card-picker-slot .dd-chevron { color: #0284c7; } .hotel-guest-card-picker-slot .dd-menu { background: #fff; border: 1px solid rgb(0 10 20 / 12%); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 30%); padding: 5px 1px; } .hotel-guest-card-picker-slot .dd-item { color: rgb(0 10 20 / 85%); } .hotel-guest-card-picker-slot .dd-item:hover { background: rgb(2 132 199 / 8%); }.hotel-guest-card-field.is-invalid .hotel-guest-card-label { color: rgb(190 24 93 / 75%); } .hotel-guest-card-field.is-invalid .hotel-guest-card-input { border-color: rgb(236 72 153 / 55%); background: rgb(255 230 243); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .hotel-guest-card-field-error { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: rgb(190 24 93 / 75%); padding-left: 10px; } @media (max-width: 720px) { .hotel-guest-card { padding: 14px 16px; } .hotel-guest-card-fields { grid-template-columns: 1fr; } .hotel-guest-card-picker-slot { width: 100%; max-width: 100%; margin-top: 8px; } }.hotel-guest-control { display: flex; flex-direction: column; gap: 25px; padding: 25px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); }.hotel-guest-control-banner-slot { position: sticky; top: -25px;z-index: 10; display: flex; flex-direction: column; background: #fff; padding-top: 25px;padding-bottom: 15px; margin-top: -25px;border-radius: 12px 12px 0 0; } .hotel-guest-control-banner-slot:empty { display: none; } .hotel-guest-control-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: rgb(190 24 93 / 75%); background: rgb(255 230 243); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .hotel-guest-control-banner i { color: rgb(190 24 93); font-size: 14px; flex-shrink: 0; }.hotel-guest-control-section { display: flex; flex-direction: column; gap: 15px; min-width: 0; } .hotel-guest-control-section-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgb(0 10 20 / 10%); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .hotel-guest-control-section-head i { font-size: 14px; color: #0284c7; }.hotel-guest-control-checkbox-wrap { position: relative; display: inline-flex; align-items: center; width: fit-content; border-radius: 6px; gap: 10px; font-size: 15px; color: rgb(0 10 20); cursor: pointer; user-select: none; padding: 3px 6px 3px 0; } .hotel-guest-control-checkbox-wrap i { font-size: 10px; opacity: 0; transform: scale(0.6); transition: all 0.15s ease; color: #fff; } .hotel-guest-control-checkbox-wrap:has(input:checked) i { opacity: 1; transform: scale(1); } .hotel-guest-control-checkbox-wrap span:has(i) { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; transition: all 0.15s ease; flex-shrink: 0; border: 1px solid rgb(0 10 20 / 35%); } .hotel-guest-control-checkbox-wrap:has(input:checked) span:has(i) { background: #0284c7; border-color: #0284c7; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25); } .hotel-guest-control-checkbox-wrap:hover { background: var(--airtix-highlight-bg); } .hotel-guest-control-checkbox-wrap input[type="checkbox"] { appearance: none; }.hotel-guest-control-list { display: flex; flex-direction: column; gap: 18px; } .hotel-guest-control .hotel-guest-card-picker-slot .dd-trigger { width: 100%; }.hotel-guest-control-contact { display: flex; flex-direction: column; gap: 12px; } .hotel-guest-control-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .hotel-guest-control-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hotel-guest-control-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); padding-left: 10px; } .hotel-guest-control-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .hotel-guest-control-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .hotel-guest-control-phone { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .hotel-guest-control-phone-country { flex: 0 0 auto; min-width: 108px; max-width: 140px; } .hotel-guest-control-phone-country .dd-root { width: 100%; } .hotel-guest-control-phone-country .dd-trigger { height: 100%; width: 100%; min-height: 41px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; justify-content: space-between; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .hotel-guest-control-phone-country .dd-root.is-open .dd-trigger { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .hotel-guest-control-phone-number { flex: 1 1 auto; min-width: 0; }.hotel-guest-control-field.is-invalid .hotel-guest-control-label { color: rgb(190 24 93 / 75%); } .hotel-guest-control-field.is-invalid .hotel-guest-control-input, .hotel-guest-control-field.is-invalid .dd-trigger { border-color: rgb(236 72 153 / 55%); background: rgb(255 230 243);; box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .hotel-guest-control-field.is-invalid .hotel-guest-control-input:hover, .hotel-guest-control-field.is-invalid .dd-trigger:hover { background: rgb(255 230 243); border-color: rgb(236 72 153 / 75%); } .hotel-guest-control-field-error { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: rgb(190 24 93 / 75%); }.hotel-guest-control-intro { margin: 0; font-size: 15px; color: rgb(0 10 20); }@media (max-width: 900px) { .hotel-guest-control { padding: 15px; } .hotel-guest-control-fields { grid-template-columns: 1fr; } .hotel-guest-control-phone-country { min-width: 96px; } .hotel-guest-control-banner-slot { top: -15px; padding-top: 15px; margin-top: -15px; } } @media (max-width: 600px) { .hotel-guest-control-list { gap: 14px; } .hotel-guest-control-checkbox-wrap { font-size: 14px; } }.hotel-itinerary { display: flex; flex-direction: column; gap: 25px; padding: 25px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hotel-itinerary-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hotel-itinerary-section-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgb(0 10 20 / 10%); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .hotel-itinerary-section-head i { font-size: 14px; color: #0284c7; } .hotel-itinerary-hotel { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 22%); } .hotel-itinerary-photo { width: 90px; height: 90px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .hotel-itinerary-hotel-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hotel-itinerary-hotel-name { margin: 0; font-size: 18px; font-weight: 500; color: rgb(0 10 20); overflow: hidden; text-overflow: ellipsis; } .hotel-itinerary-hotel-addr { font-size: 14px; color: rgb(0 10 20 / 85%); } .hotel-itinerary-rows { display: flex; flex-direction: column; gap: 10px; padding: 0 25px; transition: padding var(--airtix-ui-responsive); } .hotel-itinerary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; } .hotel-itinerary-label { color: rgb(0 10 20 / 85%); } .hotel-itinerary-value { color: rgb(0 10 20); font-weight: 500; text-align: right; } .hotel-itinerary-price-rows { display: flex; flex-direction: column; gap: 10px; padding: 0 25px; transition: padding var(--airtix-ui-responsive); } .hotel-itinerary-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .hotel-itinerary-price-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; color: rgb(0 10 20 / 75%); } .hotel-itinerary-price-hint { font-size: 13px; color: rgb(2 132 199); } .hotel-itinerary-price-value { font-size: 15px; font-weight: 500; color: rgb(0 10 20); font-variant-numeric: tabular-nums; } .hotel-itinerary-total { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-radius: 14px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 22%); margin-top: 15px;} .hotel-itinerary-total-label { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 60%); } .hotel-itinerary-total-amount { font-size: 24px; font-weight: 500; color: rgb(0 10 20); font-variant-numeric: tabular-nums; } .hotel-itinerary-note { padding: 12px 16px; border-radius: 10px; font-size: 13px; background: rgb(251 191 36 / 12%); border: 1px solid rgb(251 191 36 / 30%); color: #78350f; margin-top: 10px; }@media (max-width: 1250px) { .hotel-itinerary-total-amount { font-size: 20px; } } @media (max-width: 900px) { .hotel-itinerary { padding: 15px; } } @media (max-width: 600px) { .hotel-itinerary-hotel { gap: 8px; padding: 8px; } .hotel-itinerary-hotel-name { font-size:15px; } .hotel-itinerary-hotel-addr { font-size: 13px; } .hotel-itinerary-price-rows, .hotel-itinerary-rows { padding: 0 5px; } .hotel-itinerary-price-value { font-size: 14px; } .hotel-itinerary-label, .hotel-itinerary-value { font-size: 14px; } .hotel-itinerary-price-label { flex-direction: column; } .hotel-itinerary-total-amount { font-size: 16px; } }.hotel-payment-confirmation { display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hotel-payment-confirmation .hotel-itinerary { padding: 0; box-shadow: none; }.hotel-payment-confirmation-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 100px 25px; background: rgb(2 132 199 / 3%); border-radius: 12px 12px 0 0; border-bottom: 1px dashed rgb(0 10 20 / 12%); }.hotel-payment-confirmation-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; } .hotel-payment-confirmation-code-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .hotel-payment-confirmation-code-row { display: flex; align-items: center; gap: 10px; width: fit-content; } .hotel-payment-confirmation-code-value { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: rgb(0 10 20); user-select: all; line-height: 1; } .hotel-payment-confirmation-code-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid rgb(2 132 199 / 30%); background: #fff; color: rgb(2 132 199); cursor: pointer; transition: all 0.15s ease; font-size: 13px; } .hotel-payment-confirmation-code-copy:hover { background: rgb(2 132 199 / 8%); border-color: rgb(2 132 199 / 55%); } .hotel-payment-confirmation-code-copy.is-copied { background: rgb(34 197 94 / 12%); border-color: rgb(34 197 94 / 40%); color: #16a34a; }.hotel-payment-confirmation-header-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; flex: 0 0 auto; } .hotel-payment-confirmation-check { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(34 197 94 / 12%); color: #16a34a; font-size: 18px; animation: hotel-payment-confirmation-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes hotel-payment-confirmation-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .hotel-payment-confirmation-title { font-size: 22px; font-weight: 500; color: rgb(0 10 20); }.hotel-payment-confirmation-header-right { display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-end; width: 180px;} .hotel-payment-confirmation-btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 150px; padding: 10px 16px; border-radius: 10px; background: #fff; border: 1px solid rgb(2 132 199 / 20%); color: #0284c7; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px -1px rgb(0 10 20 / 35%); box-sizing: border-box; } .hotel-payment-confirmation-btn-action:hover:not(:disabled) { background: rgb(2 132 199 / 5%); border-color: rgb(2 132 199 / 40%); } .hotel-payment-confirmation-btn-action:disabled { opacity: 0.6; cursor: not-allowed; } .hotel-payment-confirmation-btn-action.is-sent { background: rgb(34 197 94 / 8%); border-color: rgb(34 197 94 / 30%); color: #16a34a; }.hotel-payment-confirmation-recap { padding: 25px; }@media (max-width: 900px) { .hotel-payment-confirmation-header { flex-direction: column; text-align: center; padding: 50px 10px; gap: 20px; } .hotel-payment-confirmation-btn-action { margin: 0 auto; } .hotel-payment-confirmation-header-left { align-items: center; width: 100%; } .hotel-payment-confirmation-header-center { order: -1;} .hotel-payment-confirmation-header-right { width: 100%; max-width: 300px; } .hotel-payment-confirmation-recap { padding: 15px; } } @media (max-width: 600px) { .hotel-payment-confirmation-header { padding: 25px 10px; } .hotel-payment-confirmation-code-value { font-size: 18px; } }.hotel-payment-control { display: flex; flex-direction: column; gap: 25px; padding: 25px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); }.hotel-payment-control-intro { margin: 0; font-size: 15px; color: rgb(0 10 20); }.hotel-payment-control-error { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: rgb(190 24 93 / 75%); background: rgb(255 214 236); border: 1px solid rgb(236 72 153 / 55%); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .hotel-payment-control-error.hidden { display: none; } .hotel-payment-control-error i { color: rgb(190 24 93); font-size: 14px; flex-shrink: 0; }.hotel-payment-control-summary { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 12px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 22%); } .hotel-payment-control-guest { font-size: 14px; font-weight: 800; color: rgb(0 10 20 / 85%); letter-spacing: 0.04em; margin-bottom: 4px; } .hotel-payment-control-row { font-size: 14px; color: rgb(0 10 20 / 85%); } .hotel-payment-control-total { font-size: 15px; font-weight: 600; color: rgb(0 10 20); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(2 132 199 / 20%); }.hotel-payment-control-sdk-wrap { min-height: 150px;} .hotel-payment-control-sdk-target { display: flex; flex-direction: column; }@media (max-width: 900px) { .hotel-payment-control { padding: 15px; } } @media (max-width: 600px) { .hotel-payment-control { gap: 15px; } .hotel-payment-control-summary { padding: 12px 15px; } .hotel-payment-control-intro { font-size: 14px; } }.hotel-checkout-footer .lp-submit-button-wrapper { margin: 0; padding: 0; width: auto; display: flex; justify-content: flex-end; }.hotel-pay-button { padding: 15px 75px !important; } .hotel-pay-button:hover:not(:disabled) { background: #0369a1; transform: translateY(-1px); } .hotel-pay-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } @media (max-width: 600px) { .hotel-pay-button { font-size: 16px; padding: 12px 35px; } }.hotel-checkout-shell { display: flex; flex-direction: column; width: 100%; height: 100%;max-height: 100%; min-height: 0;background: #fff; border-radius: 14px; border: 1px solid rgb(0 10 20 / 10%); box-shadow: 0 5px 20px -10px rgba(0 0 0 / 40%); color: rgb(0 10 20); box-sizing: border-box; }.hotel-checkout-shell-header { flex: 0 0 auto; padding: 15px 25px 9px 50px; display: flex; flex-direction: column; gap: 6px; transition: padding var(--airtix-ui-responsive); } .hotel-checkout-shell-title { margin: 0; font-size: 1.75em; font-family: 'times', serif; font-weight: 700; text-transform: uppercase; } .hotel-checkout-shell-subtitle { margin: 0; font-size: 14px; color: rgb(0 10 20 / 55%); }.hotel-checkout-shell-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; } .hotel-checkout-shell-header-left, .hotel-checkout-shell-header-right { display: flex; align-items: center; gap: 12px; }.hotel-checkout-shell-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; padding: 0 25px 25px; transition: padding var(--airtix-ui-responsive); }@media (max-width: 1250px) { .hotel-checkout-shell-scroll { padding: 0 10px 10px; } .hotel-checkout-shell-title { font-size: 1.6em; } .hotel-checkout-shell-header { padding: 11px 25px 9px 35px; } } @media (max-width: 900px) { .hotel-checkout-shell-header { padding-left: 25px; } } @media (max-width: 600px) { .hotel-checkout-shell-title { font-size: 1.45em; } }.hotel-checkout-stage { overflow: hidden; } .hotel-checkout-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; padding-left: var(--tri-state-width); transition: padding var(--airtix-ui-responsive); gap: 15px; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-checkout-panel { padding-left: 0; }.hotel-checkout-progress-slot { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; padding: 32px 0 0; z-index: 3; pointer-events: auto; transition: padding var(--airtix-ui-responsive); }.hotel-checkout-stage-rotator { flex: 1 1 auto; position: relative; overflow: visible; margin: 0 auto 32px; width: 100%; max-width: min(var(--airtix-content-width), calc(100% - 30px)); --stage-width: 1250px; --cube-radius: calc(var(--stage-width) / 2); --cube-radius-negative: calc(var(--cube-radius) * -1); perspective: calc(var(--stage-width) * 2); perspective-origin: 50% 50%; transform-style: preserve-3d; transition: margin var(--airtix-ui-responsive); } .hotel-checkout-stage-rotator.no-transition .hotel-checkout-inner { transition: none !important; }.hotel-checkout-inner { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); background: #fff; backface-visibility: hidden; will-change: transform, opacity; transition: transform var(--airtix-ui-responsive), opacity 0.60s ease, visibility 0.85s ease; }.hotel-checkout-inner > .hotel-checkout-shell { background: transparent; border: none; box-shadow: none; border-radius: 0; } .hotel-checkout-inner.is-active { transform: rotateY(0deg) translateZ(0) translateX(0); opacity: 1; visibility: visible; pointer-events: auto; overflow: visible; z-index: 2; transition: transform var(--airtix-ui-responsive), visibility 0.85s ease; } .hotel-checkout-inner.is-left { transform: rotateY(-90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius-negative)); visibility: hidden; pointer-events: none; z-index: 1; } .hotel-checkout-inner.is-right { transform: rotateY(90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius)); visibility: hidden; pointer-events: none; z-index: 1; }.hotel-checkout-inner.future-stage { opacity: 1 !important; } .hotel-checkout-inner.past-stage { opacity: 0 !important; }.hotel-checkout-footer-slot { flex: 0 0 auto; display: flex; align-items: center; padding: 16px 40px 20px; border-top: 1px solid rgb(0 10 20 / 8%); background: #fff; box-sizing: border-box; border-radius: 0 0 20px 20px; } .hotel-checkout-footer-slot:empty { display: none; } .hotel-checkout-footer { display: flex; align-items: center; gap: 12px; width: 100%; } .hotel-checkout-footer .airtix-action-button { letter-spacing: 0px; font-weight: 400; padding: 15px 40px; } .hotel-checkout-footer-spacer { flex: 1 1 auto; }.hotel-checkout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-height: 48px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; } .hotel-checkout-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .hotel-checkout-btn--back { background: rgb(0 10 20 / 6%); color: rgb(0 10 20 / 75%); } .hotel-checkout-btn--back:hover:not(:disabled) { background: rgb(0 10 20 / 10%); } .hotel-checkout-btn--next { color: #fff; background: #0284c7; } .hotel-checkout-btn--next:hover:not(:disabled) { transform: translateY(-1px); }.hotel-checkout-wrapper { display: flex; flex-direction: column; gap: 7px; } .hotel-checkout-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; font-size: 14px; color: rgb(0 10 20 / 55%); } .hotel-checkout-boot i { font-size: 24px; color: #0284c7; }.hotel-checkout-error { padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 10%); border: 1px solid rgb(248 113 113 / 30%); display: flex; align-items: center; gap: 8px; } .hotel-checkout-error.hidden { display: none; }@media (max-width: 1250px) { .hotel-checkout-footer-slot { padding: 12px 20px 16px; } .hotel-checkout-progress-slot { padding: 15px 0 0; } .hotel-checkout-stage-rotator { margin: 0 auto 15px; } } @media (max-width: 900px) { .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-checkout-panel { padding-left: 0; } } @media (max-width: 600px) { .hotel-checkout-footer .airtix-action-button{ font-size: 16px; padding: 12px 35px; } .hotel-checkout-footer { display: flex; align-items: center; gap: 12px; width: 100%; } .hotel-checkout-btn--back { font-size: 16px; padding: 12px 35px; } }.flight-results-pane { position: absolute; inset: 0; z-index: 1; } .flight-results-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 32px 0; transition: padding var(--airtix-ui-responsive); } .flight-results-body { position: absolute; left: calc(50% + 0px); min-height: 100%; height: 100%; transform: translate(-50%, 0); margin: 0 auto; width: min(calc(100% - 30px), 1250px); display: flex; flex-direction: column; gap: 16px; padding-bottom: 60px; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-results-body { left: calc(50% + 158px); width: min(calc(100% - 348px), 1250px); }.flight-legs-card .dd-trigger { display: inline-grid; grid-template-columns: auto 1fr auto; gap: 7px; padding: 6px 12px 5px; border-radius: 999px; color: rgb(0 10 20 / 90%); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-shadow: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; background: rgb(255 255 255 / 75%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); border: solid 1px rgb(0 10 20 / 50%); } .flight-legs-card :is(.dd-chevron, .dd-trigger-icon) { color: rgb(2 132 199); } .flight-legs-card .dd-root.is-open .dd-trigger{ background: rgb(0 10 20 / 75%); } .flight-legs-card .dd-root.is-open :is(.dd-chevron, .dd-trigger-icon) { color: rgb(0 222 255); } .flight-legs-card { border-radius: 20px; padding: 18px 20px; background: rgb(0 10 20 / 50%); box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); } .flight-legs-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; } h2.flight-legs-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: 'times', 'Times New Roman', serif; font-size: 1.5em; font-weight: 800; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }.flight-legs-sort-slot { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 0; }.flight-search-progress-wrap { padding-bottom: 12px; } .flight-search-progress-wrap.hidden { display: none; }.flight-legs-list { display: flex; flex-direction: column; gap: 8px; } .flight-legs-empty { padding: 16px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.55); }.flight-legs-skeletons { display: contents; } .flight-legs-skeletons.hidden { display: none; }.flight-legs-final { padding: 20px; text-align: center; border-radius: 14px; background: rgb(8 145 178 / 18%); border: 1px solid rgb(34 211 238 / 40%); } .flight-legs-final-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); } .flight-legs-final-price { margin-top: 4px; font-size: 26px; font-weight: 800; color: #fff; }@media (max-width: 1250px) { .flight-legs-card { padding: 10px; } h2.flight-legs-title { font-size: 1.25rem; } } @media (max-width: 900px) { .flight-results-body { flex-direction: column; left: calc(50% + 0px) !important; min-width: calc(100vw - 20px); } .flight-results-feed { padding: 10px 0; } .flight-rate-carousel-card.is-cheapest { gap: 10px; } } @media (max-width: 600px) { .flight-legs-header { gap: 5px; padding-bottom: 5px; } .flight-picks-summary-col--bags { flex-direction: column; gap: 3px; } }.flight-card { border: 1px solid rgb(255 255 255 / 10%); border-radius: 14px; overflow: hidden; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 5px 20px -10px rgba(0 0 0 / 50%); background-color: rgb(255 255 255 / 95%); cursor: pointer; color: rgb(0 10 20); } .flight-card:hover { background-color: rgb(255 255 255 / 100%); transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(0 0 0 / 55%); } .flight-card.is-expanded { background-color: rgb(255 255 255); box-shadow: 0 12px 40px -10px rgba(0 0 0 / 55%); transform: none; }.flight-card-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 10px; box-sizing: border-box; flex: 0 0 auto; overflow: hidden; } .flight-card--skeleton .flight-card-body { height: 260px; }.flight-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; flex: 0 0 auto; } .flight-card-carrier { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .flight-card-carrier-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 8px; background: rgb(0 10 20 / 4%); padding: 3px; } .flight-card-carrier-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .flight-card-carrier-code { font-size: 14px; font-weight: 700; color: rgb(0 10 20 / 90%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-carrier-name { font-size: 13px; color: rgb(0 10 20 / 60%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-price-block { position: relative; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; flex-shrink: 0; } .flight-card-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px; } .flight-card-badge--cheapest { position: absolute; right: calc(100% + 10px); background: #008040; color: #fff; } .flight-card-badge--fastest { background: rgb(59 130 246 / 15%); color: rgb(30 64 175); } .flight-card-price { font-size: 22px; font-weight: 500; line-height: 1.1; color: rgb(0 10 20); white-space: nowrap; font-variant-numeric: tabular-nums; } .flight-card-price-label { font-size: 13px; font-weight: 500; color: rgb(0 10 20 / 60%); white-space: nowrap; }.flight-card-route { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 auto; } .flight-card-point { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 0 0 auto; } .flight-card-point--arrive { text-align: right; align-items: flex-end; } .flight-card-time { font-size: 22px; font-weight: 500; line-height: 1.1; color: rgb(2 132 199); font-variant-numeric: tabular-nums; } .flight-card-code { font-size: 18px; font-weight: 600; color: rgb(0 10 20 / 90%); letter-spacing: 0.02em; line-height: 1.1; } .flight-card-city { font-size: 15px; font-weight: 500; color: rgb(0 10 20 / 60%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .flight-card-date { font-size: 14px; white-space: nowrap; margin-top: 1px; color: rgb(2 132 199); } .flight-card-route-middle { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; padding-bottom: 20px; } .flight-card-route-middle:has(.flight-card-line-stopover) { position: relative; top: -4px; } .flight-card-duration { font-size: 15px; font-weight: 500; text-align: center; color: rgb(2 132 199); margin-bottom: 10px; }.flight-card-line { display: flex; align-items: center; width: 100%; min-height: 24px; } .flight-card-line-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(2 132 199 / 35%); flex-shrink: 0; } .flight-card-line-bar { flex: 1 1 auto; height: 1px; background: rgb(2 132 199 / 35%); min-width: 6px; }.flight-card-line-carrier-wrap {position: relative; flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: help; } .flight-card-line-carrier-duration { font-size: 11px; font-weight: 500; color: rgb(0 10 20 / 70%); white-space: nowrap; line-height: 1; letter-spacing: 0.02em; color: rgb(2 132 199); }.flight-card-line-carrier-duration--hidden { visibility: hidden; pointer-events: none; }.flight-card-line-carrier-aircraft-spacer { font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; visibility: hidden; pointer-events: none; }.flight-card-line-carrier-aircraft { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 500; color: rgb(0 10 20 / 55%); white-space: nowrap; line-height: 1; letter-spacing: 0.02em; pointer-events: none; }.flight-card-line-carrier { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 10 20 / 4%); padding: 2px; cursor: help; } .flight-card-line-carrier img { max-width: 18px; max-height: 18px; object-fit: contain; display: block; } .flight-card-line-carrier-code { font-size: 10px; font-weight: 700; color: rgb(0 10 20 / 70%); letter-spacing: 0.02em; }.flight-card-line-stopover { position: relative; flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .flight-card-line-stopover-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 10 20 / 4%); color: rgb(0 10 20 / 55%); font-size: 10px; line-height: 1; } .flight-card-line-stopover-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; white-space: nowrap; pointer-events: none; z-index: 2; } .flight-card-line-stopover-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 45%); } .flight-card-line-stopover-place { font-size: 10px; font-weight: 600; color: rgb(0 10 20 / 75%); letter-spacing: 0.02em; } .flight-card-line-stopover-time { font-size: 11px; color: rgb(2 132 199); }.flight-card-amenities { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid rgb(0 10 20 / 8%); flex: 0 0 auto; } .flight-card-amenities:empty { display: none; } .flight-card-amenity { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgb(2 132 199 / 8%); color: rgb(2 132 199); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } .flight-card-amenity i { font-size: 11px; } .flight-card-amenity--muted { background: rgb(0 10 20 / 6%); color: rgb(0 10 20 / 55%); }.flight-card-expansion { max-height: 0; opacity: 0; overflow: hidden; background: rgb(0 10 20 / 10%); transition: max-height var(--airtix-ui-responsive), opacity 0.5s ease; will-change: max-height; }.flight-card.is-expanded .flight-card-expansion { max-height: var(--flight-card-expansion-height, 2000px); opacity: 1; } .flight-card-expansion-inner { display: flex; flex-direction: column; gap: 14px;padding: 16px 18px 18px; border-top: 1px solid rgb(0 10 20 / 8%); min-height: 0; cursor: default; }.flight-card.is-expanded .flight-card-segments, .flight-card.is-expanded .rate-carousel { animation: flight-card-reveal 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; } @keyframes flight-card-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }.flight-card-segments { display: flex; flex-direction: column; gap: 8px; } .flight-card-segment { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: rgb(255 255 255); border: 1px solid rgb(0 10 20 / 6%); } .flight-card-segment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(0 10 20 / 70%); } .flight-card-segment-head img { width: 20px; height: 20px; object-fit: contain; } .flight-card-segment-carrier { font-weight: 700; color: rgb(0 10 20 / 90%); } .flight-card-segment-flight-number { font-weight: 600; } .flight-card-segment-aircraft { margin-left: auto; font-size: 11px; font-weight: 600; color: rgb(0 10 20 / 55%); display: inline-flex; align-items: center; gap: 5px; } .flight-card-segment-aircraft i { font-size: 10px; color: #0284c7; }.flight-card-segment-route { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .flight-card-segment-endpoint { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 0 0 auto; } .flight-card-segment-endpoint--right { text-align: right; align-items: flex-end; } .flight-card-segment-time { font-size: 16px; font-weight: 500; color: rgb(2 132 199); font-variant-numeric: tabular-nums; line-height: 1.1; } .flight-card-segment-code { font-size: 13px; font-weight: 700; color: rgb(0 10 20 / 80%); } .flight-card-segment-date { font-size: 13px; color: rgb(2 132 199); } .flight-card-segment-mid { position: relative; top: -4px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; } .flight-card-segment-duration { font-size: 11px; font-weight: 500; color: rgb(2 132 199); white-space: nowrap; } .flight-card-segment-line { display: flex; align-items: center; width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; min-height: 24px; } .flight-card-segment-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(2 132 199 / 50%); flex-shrink: 0; } .flight-card-segment-bar { flex: 1 1 auto; height: 1px; background: rgb(2 132 199 / 50%); min-width: 6px; }.flight-card-segment-carrier-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 10 20 / 4%); padding: 2px; } .flight-card-segment-carrier-badge img { max-width: 18px; max-height: 18px; object-fit: contain; display: block; } .flight-card-segment-carrier-code { font-size: 10px; font-weight: 700; color: rgb(0 10 20 / 70%); }.flight-card-segment-carrier-wrap { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; cursor: help; } .flight-card-segment-aircraft-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: rgb(0 10 20 / 55%); white-space: nowrap; pointer-events: none; text-align: center; }.flight-card-segment-mid.has-aircraft { padding-bottom: 16px; }.flight-card-layover { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 16px; border-radius: 10px; background: rgb(227 245 255); border: 1px dashed rgb(2 132 199); text-align: center; width: 75%; margin: auto auto; } .flight-card-layover-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-card-layover-place { font-size: 14px; font-weight: 700; color: rgb(0 10 20 / 90%); line-height: 1.3; } .flight-card-layover-duration { font-size: 15px; font-weight: 500; color: #0284c7; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }.flight-card--skeleton { cursor: default; pointer-events: none; } .flight-card--skeleton:hover { transform: none; box-shadow: 0 5px 20px -10px rgba(0 0 0 / 50%); background-color: rgb(255 255 255 / 90%); } .flight-card-sk { background: linear-gradient( 90deg, rgba(0 10 20 / 6%) 0%, rgba(0 10 20 / 6%) 30%, rgba(0 10 20 / 18%) 50%, rgba(0 10 20 / 6%) 70%, rgba(0 10 20 / 6%) 100% ); background-size: 200% 100%; animation: flight-card-shimmer 1.5s ease-in-out infinite; border-radius: 4px; flex-shrink: 0; } .flight-card-sk-logo { width: 40px; height: 40px; border-radius: 8px; } .flight-card-sk-text { height: 12px; } .flight-card-sk-lg { height: 20px; } .flight-card-sk-pill { height: 24px; width: 100px; border-radius: 999px; } .flight-card-sk-line { height: 2px; width: 100%; border-radius: 2px; } @keyframes flight-card-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }@media (max-width: 1250px) { .flight-card-line-carrier-wrap { display:none; } } @media (max-width: 900px) { .flight-card-line-carrier-wrap { display:none; } } @media (max-width: 600px) { .flight-card-badge--cheapest { display:none; } .flight-card-price, .flight-card-time { font-size: 20px; } .flight-card-code { font-size: 17px; } .flight-card-city { font-size:14px; } .flight-card-date { font-size:13px; } .flight-card-line-stopover-place { display: none; } }.flight-rate-carousel { position: relative; width: 100%; min-width: 0; }.flight-rate-carousel-track { display: flex; flex-direction: row; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 4px 4px 8px 4px; min-width: 0; outline: none; scrollbar-width: none; -ms-overflow-style: none; } .flight-rate-carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .flight-rate-carousel-track > .flight-rate-carousel-card { flex: 0 0 auto; scroll-snap-align: start; width: 265px; }.flight-rate-carousel-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 20px 25px 21px; border-radius: 10px; background: #fff; border: 1px solid rgb(0 10 20 / 8%); box-shadow: 0 2px 10px -6px rgba(0 0 0 / 12%); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }.flight-rate-carousel-card::before { content: ''; position: absolute; inset: 10px auto 10px 0; width: 2px; border-radius: 0 10px 10px 0; background: linear-gradient(180deg, rgb(2, 157, 255), rgb(37, 39, 255), rgb(160, 0, 186), rgb(235, 5, 124), rgb(255, 64, 0)); } .flight-rate-carousel-card:hover { border-color: rgb(2 132 199 / 35%); box-shadow: 0 8px 22px -10px rgba(0 0 0 / 25%); transform: translateY(-1px); } .flight-rate-carousel-card.is-cheapest { border-color: rgb(34 197 94 / 40%); }.flight-rate-carousel-top { display: flex; flex-direction: column; gap: 3px; } .flight-rate-carousel-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .flight-rate-carousel-cabin { font-size: 12px; font-weight: 700;text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-rate-carousel-price { font-size: 15px; font-weight: 500; color: rgb(0 10 20); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .flight-rate-carousel-brand { font-size: 16px; font-weight: 500; color: rgb(0 10 20); line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.flight-rate-carousel-features { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; } .flight-rate-carousel-feature { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgb(0 10 20 / 80%); line-height: 1.35; } .flight-rate-carousel-feature i { flex-shrink: 0; width: 16px; font-size: 12px; color: #0284c7; text-align: center; } .flight-rate-carousel-feature--muted { color: rgb(0 10 20 / 45%); } .flight-rate-carousel-feature--muted i { color: rgb(220 38 38 / 55%); }.flight-rate-carousel-select { margin-top: auto; padding: 11px 18px; border-radius: 999px; border: none; font-size: 13px; font-weight: 700; width: 100%; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; }.flight-rate-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(10 16 22 / 90%); border: 1px solid rgb(255 255 255 / 12%); color: #fff; font-size: 12px; cursor: pointer; z-index: 5; backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgb(0 0 0 / 35%); transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .flight-rate-carousel-btn:hover { background: rgb(2 132 199 / 90%); transform: translateY(-50%) scale(1.05); } .flight-rate-carousel-btn.hidden { display: none !important; } .flight-rate-carousel-btn-prev { left: -10px; } .flight-rate-carousel-btn-next { right: -10px; } .flight-rate-carousel-empty { padding: 24px; text-align: center; color: rgb(0 10 20 / 55%); font-size: 13px; } @media (max-width:900px) { .flight-rate-carousel-card { padding: 15px 16px 20px 20px; gap: 10px; } }.flight-picks-summary { border: none; outline: none; background: transparent; border-radius: 0; display: block; border-radius: 20px; }.flight-picks-summary-card { background: #fff; border: none; border-radius: 14px; padding: 10px 20px; box-shadow: 0 5px 20px -5px rgba(0 0 0 / 50%); color: rgb(0 10 20); display: flex; flex-direction: column; gap: 8px; min-width: 0; }.flight-picks-summary-card + .flight-picks-summary-card { margin-top: 12px; }.flight-picks-summary-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid rgb(0 10 20 / 7%); } .flight-picks-summary-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #008040; color: #fff; font-size: 8px; flex-shrink: 0; } .flight-picks-summary-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(0 10 20 / 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .flight-picks-summary-change { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgb(2 132 199 / 10%); color: rgb(2 132 199); font-size: 11px; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.15s ease; flex-shrink: 0; } .flight-picks-summary-change:hover { background: rgb(2 132 199 / 20%); } .flight-picks-summary-change i { font-size: 9px; }.flight-picks-summary-cols { display: grid; grid-template-columns: minmax(80px, 1fr)minmax(160px, 1.3fr)minmax(80px, 1fr)minmax(115px, 1fr)max-content;align-items: center; gap: 25px; min-width: 0; } .flight-picks-summary-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .flight-picks-summary-col--to { text-align: right; align-items: flex-end; } .flight-picks-summary-col--mid { align-items: center; text-align: center; gap: 4px; } .flight-picks-summary-col--bags { flex-direction: column; align-items: flex-start; gap: 3px; } .flight-picks-summary-col--price { align-items: flex-end; text-align: right; padding-left: 12px; }.flight-picks-summary-time { font-size: 20px; font-weight: 500; line-height: 1.1; color: rgb(2 132 199); font-variant-numeric: tabular-nums; } .flight-picks-summary-code { font-size: 15px; font-weight: 600; color: rgb(0 10 20 / 90%); letter-spacing: 0.02em; line-height: 1.1; margin-top: 1px; } .flight-picks-summary-city { font-size: 12px; font-weight: 500; color: rgb(0 10 20 / 55%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .flight-picks-summary-date { font-size: 13px; color: rgb(2 132 199); white-space: nowrap; margin-top: 1px; }.flight-picks-summary-mid-carrier { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: rgb(0 10 20 / 70%); max-width: 100%; line-height: 1.25; } .flight-picks-summary-mid-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; border-radius: 4px; background: rgb(0 10 20 / 4%); padding: 2px; order: 1; } .flight-picks-summary-mid-code { font-size: 13px; font-weight: 700; color: rgb(0 10 20 / 90%); white-space: nowrap; order: 3; } .flight-picks-summary-mid-name { font-size: 13px; color: rgb(0 10 20 / 85%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 2; } .flight-picks-summary-mid-line { font-size: 13px; font-weight: 500; color: rgb(2 132 199); white-space: nowrap; } .flight-picks-summary-mid-via { font-size: 11px; font-weight: 500; color: rgb(0 10 20 / 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }.flight-picks-summary-stack-tag { gap: 5px; color: rgb(0 10 20 / 80%); line-height: 1.35; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgb(2 132 199 / 8%); color: rgb(2 132 199); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } .flight-picks-summary-stack-tag i { flex-shrink: 0; width: 16px; font-size: 12px; color: #0284c7; text-align: center; } .flight-picks-summary-stack-tag--muted { color: rgb(0 10 20 / 45%); } .flight-picks-summary-stack-tag--muted i { color: rgb(220 38 38 / 55%); }.flight-picks-summary-price { font-size: 22px; font-weight: 500; color: rgb(0 10 20); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; } .flight-picks-summary-price-label { font-size: 13px; font-weight: 500; color: rgb(0 10 20 / 55%); white-space: nowrap; }@media (max-width: 1250px) { .flight-picks-summary-cols { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "from mid to" "bags bags price"; column-gap: 20px; row-gap: 14px; } .flight-picks-summary-col--bags { flex-direction: row; grid-column: 1 / 3; } .flight-picks-summary-col--price { grid-column: 3 / 4; } } @media (max-width: 900px) { .flight-picks-summary-card { padding: 12px 16px; } .flight-picks-summary-col--from { grid-area: from; } .flight-picks-summary-col--mid { grid-area: mid; } .flight-picks-summary-col--to { grid-area: to; } .flight-picks-summary-col--bags { grid-area: bags; align-items: flex-start; } .flight-picks-summary-col--price { grid-area: price; align-items: flex-end; padding-left: 0; margin: auto 0 0; } } @media (max-width: 600px) { .flight-picks-summary-col--bags { flex-direction: column; } .flight-picks-summary-price { font-size: 18px; } }.flight-checkout-progress { display: block; width: 100%; max-width: min(100%, 1250px); padding: 20px; background: #fff; border-radius: 20px; box-shadow: 0 5px 20px -10px rgb(0 0 0 / 50%); font-family: inherit; box-sizing: border-box; } .flight-checkout-progress-steps { display: flex; list-style: none; padding: 0; margin: 0; } .flight-checkout-progress-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }.flight-checkout-progress-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: rgb(0 10 20 / 45%); transition: color 0.25s ease; } .flight-checkout-progress-step.is-done .flight-checkout-progress-label { color: rgb(2 132 199); } .flight-checkout-progress-step.is-active .flight-checkout-progress-label { color: rgb(0 10 20); }.flight-checkout-progress-rail { display: flex; align-items: center; width: 100%; } .flight-checkout-progress-line { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgb(0 10 20 / 10%); transition: background-color 0.25s ease; }.flight-checkout-progress-step:first-child .flight-checkout-progress-line--before, .flight-checkout-progress-step:last-child .flight-checkout-progress-line--after { visibility: hidden; }.flight-checkout-progress-step.is-done .flight-checkout-progress-line--after { background: rgb(2 132 199); } .flight-checkout-progress-step.is-done + .flight-checkout-progress-step .flight-checkout-progress-line--before { background: rgb(2 132 199); }.flight-checkout-progress-dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid rgb(0 10 20 / 15%); font-size: 11px; font-weight: 700; color: rgb(0 10 20 / 45%); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .flight-checkout-progress-dot i { font-size: 10px; }.flight-checkout-progress-step.is-done .flight-checkout-progress-dot { background: rgb(2 132 199); border-color: rgb(2 132 199); color: #fff; }.flight-checkout-progress-step.is-active .flight-checkout-progress-dot { background: #fff; border-color: rgb(2 132 199); color: rgb(2 132 199); box-shadow: 0 0 0 4px rgb(2 132 199 / 15%); }@media (max-width: 600px) { .flight-checkout-progress { padding: 10px; max-width: calc(100% - 24px); } .flight-checkout-progress-label { font-size: 10px; letter-spacing: 0.04em; } .flight-checkout-progress-dot { width: 20px; height: 20px; font-size: 10px; } }.flight-search-panel--checkout { overflow: hidden; } .flight-checkout-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; padding-left: 316px; transition: padding var(--airtix-ui-responsive); }.flight-checkout-progress-slot { flex: 0 1 auto; display: flex; justify-content: center; align-items: center; padding: 32px 0 16px; z-index: 3; pointer-events: auto; }.flight-checkout-stage-rotator { flex: 1 1 auto; position: relative; overflow: visible; margin: 0 auto 32px; width: 100%; max-width: min(calc(100% - 32px), 1250px);--stage-width: 1250px; --cube-radius: calc(var(--stage-width) / 2);--cube-radius-negative: calc(var(--cube-radius) * -1);perspective: calc(var(--stage-width) * 2); perspective-origin: 50% 50%; transform-style: preserve-3d; } .flight-checkout-stage-rotator.no-transition .flight-checkout-stage { transition: none !important; }.flight-checkout-stage { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); backface-visibility: hidden; will-change: transform, opacity; transition: transform var(--airtix-ui-responsive), opacity 0.60s ease, visibility 0.85s ease; }.flight-checkout-stage.is-active { transform: rotateY(0deg) translateZ(0) translateX(0); opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }.flight-checkout-stage.is-left { transform: rotateY(-90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius-negative)); visibility: hidden; pointer-events: none; z-index: 1; }.flight-checkout-stage.is-right { transform: rotateY(90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius)); visibility: hidden; pointer-events: none; z-index: 1; }.flight-checkout-stage.future-stage { opacity: 1 !important; }.flight-checkout-stage.past-stage { opacity: 0 !important; }.flight-checkout-stage-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 10px 200px; box-sizing: border-box; }.flight-checkout-stage-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: rgb(255 255 255 / 50%); box-sizing: border-box; } .flight-checkout-stage-footer:empty { display: none; } .flight-checkout-footer-spacer { flex: 1 1 auto; } .flight-checkout-footer { display: flex; align-items: center; gap: 12px; width: 100%; }.flight-checkout-itinerary { display: flex; flex-direction: column; gap: 10px; } .flight-checkout-itinerary-picks { display: flex; flex-direction: column; gap: 12px; } .flight-checkout-itinerary-total { display: flex; align-items: center; justify-content: space-between; background: #fff; border: none; border-radius: 14px; box-shadow: 0 5px 20px -5px rgba(0 0 0 / 50%); color: rgb(0 10 20); gap: 8px; min-width: 0; padding: 10px 20px; } .flight-checkout-itinerary-total-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgb(0 10 20 / 55%); } .flight-checkout-itinerary-total-price { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgb(0 10 20); letter-spacing: 0.01em; }.flight-checkout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-height: 48px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; } .flight-checkout-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .flight-checkout-btn--back { background: rgb(0 10 20 / 6%); color: rgb(0 10 20 / 75%); } .flight-checkout-btn--back:hover:not(:disabled) { background: rgb(0 10 20 / 10%); }.flight-checkout-btn--skip { background: transparent; color: rgb(0 10 20 / 60%); border: 1px solid rgb(0 10 20 / 15%); } .flight-checkout-btn--skip:hover:not(:disabled) { background: rgb(0 10 20 / 4%); color: rgb(0 10 20 / 85%); border-color: rgb(0 10 20 / 25%); } .flight-checkout-btn--next { color: #fff; } .flight-checkout-btn--next:hover:not(:disabled) { transform: translateY(-1px); background: var(--airtix-gradient, #0369a1); }.flight-checkout-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; text-align: center; font-size: 14px; color: rgb(0 10 20 / 55%); } .flight-checkout-stage-error { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 10%); border: 1px solid rgb(248 113 113 / 30%); } .flight-checkout-stage-error.hidden { display: none; }.flight-checkout-payment { display: flex; flex-direction: column; gap: 20px; } .flight-checkout-payment-terms { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgb(2 132 199 / 5%); border: 1px solid rgb(2 132 199 / 18%); font-size: 13px; color: rgb(0 10 20 / 75%); line-height: 1.5; cursor: pointer; } .flight-checkout-payment-terms input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: #0284c7; flex-shrink: 0; cursor: pointer; } .flight-checkout-payment-terms a { color: #0284c7; text-decoration: none; font-weight: 600; } .flight-checkout-payment-terms a:hover { text-decoration: underline; }@media (max-width: 720px) { .flight-checkout-progress-slot { padding: 10px 0; } .flight-checkout-stage-rotator { margin: 0 12px 16px; max-width: calc(100% - 24px); } .flight-checkout-stage-scroll { padding: 10px; } .flight-checkout-stage-footer { padding: 12px 20px 16px; flex-direction: column-reverse; align-items: stretch; } .flight-checkout-footer-spacer { display: none; } .flight-checkout-itinerary-total { padding: 12px 16px; } .flight-checkout-itinerary-total-price { font-size: 20px; } .flight-checkout-btn { width: 100%; font-size: 13px; font-weight: 500; letter-spacing: 0; } }.flight-payment-summary { display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; color: rgb(0 10 20); }.flight-payment-summary-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .flight-payment-summary-section-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgb(0 10 20 / 10%); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-payment-summary-section-head i { font-size: 13px; color: #0284c7; }.flight-payment-summary-empty { font-size: 13px; color: rgb(0 10 20 / 50%); font-style: italic; }.flight-payment-summary-itinerary { display: flex; flex-direction: column; gap: 12px; }.flight-payment-summary-itinerary .flight-picks-summary-card { background: rgb(0 10 20 / 2%); box-shadow: none; border: 1px solid rgb(0 10 20 / 6%); }.flight-payment-summary-passengers { display: flex; flex-direction: column; gap: 8px; } .flight-payment-summary-passenger { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgb(0 10 20 / 3%); border: 1px solid rgb(0 10 20 / 6%); min-width: 0; } .flight-payment-summary-passenger-kind { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: rgb(0 10 20 / 55%); min-width: 48px; } .flight-payment-summary-passenger-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: rgb(0 10 20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-payment-summary-passenger-dob { flex: 0 0 auto; font-size: 12px; color: rgb(0 10 20 / 55%); font-variant-numeric: tabular-nums; } .flight-payment-summary-passenger-doc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgb(2 132 199 / 10%); color: rgb(2 132 199); } .flight-payment-summary-passenger-doc i { font-size: 9px; }.flight-payment-summary-seats { display: flex; flex-direction: column; gap: 12px; } .flight-payment-summary-seat-segment { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgb(0 10 20 / 3%); border: 1px solid rgb(0 10 20 / 6%); } .flight-payment-summary-seat-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgb(0 10 20 / 10%); } .flight-payment-summary-seat-dir { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(2 132 199); } .flight-payment-summary-seat-route { font-size: 13px; font-weight: 700; color: rgb(0 10 20); } .flight-payment-summary-seat-meta { margin-left: auto; font-size: 11px; color: rgb(0 10 20 / 55%); } .flight-payment-summary-seat-rows { display: flex; flex-direction: column; gap: 6px; } .flight-payment-summary-seat-row { display: flex; align-items: center; gap: 12px; min-width: 0; } .flight-payment-summary-seat-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: rgb(0 10 20 / 80%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-payment-summary-seat-designator { flex: 0 0 auto; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; color: rgb(0 10 20); background: rgb(0 10 20 / 6%); letter-spacing: 0.02em; } .flight-payment-summary-seat-price { flex: 0 0 auto; min-width: 80px; text-align: right; font-size: 13px; font-weight: 600; color: rgb(0 10 20); font-variant-numeric: tabular-nums; } .flight-payment-summary-seat-price.is-free { color: rgb(60 183 173); font-weight: 700; }.flight-payment-summary-price-rows { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; } .flight-payment-summary-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } .flight-payment-summary-price-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; color: rgb(0 10 20 / 75%); min-width: 0; } .flight-payment-summary-price-hint { font-size: 12px; color: rgb(2 132 199); } .flight-payment-summary-price-value { font-size: 14px; font-weight: 600; color: rgb(0 10 20); font-variant-numeric: tabular-nums; white-space: nowrap; }.flight-payment-summary-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 22%); } .flight-payment-summary-total-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 60%); } .flight-payment-summary-total-amount { font-size: 22px; font-weight: 700; color: rgb(0 10 20); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }@media (max-width: 720px) { .flight-payment-summary-seat-head { flex-wrap: wrap; } .flight-payment-summary-seat-meta { margin-left: 0; width: 100%; } .flight-payment-summary-total-amount { font-size: 20px; } }.flight-payment-confirmation { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; color: rgb(0 10 20); }.flight-payment-confirmation-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: -10px;} .flight-payment-confirmation-topbar-spacer { flex-grow: 1; } .flight-payment-confirmation-btn-action { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 20%); color: #0284c7; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .flight-payment-confirmation-btn-action:hover:not(:disabled) { background: rgb(2 132 199 / 15%); border-color: rgb(2 132 199 / 40%); } .flight-payment-confirmation-btn-action:disabled { opacity: 0.6; cursor: not-allowed; } .flight-payment-confirmation-btn-action.is-sent { background: rgb(34 197 94 / 10%); border-color: rgb(34 197 94 / 30%); color: #16a34a; } .flight-payment-confirmation-btn-action i { font-size: 14px; }.flight-payment-confirmation-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 8px 0 4px; } .flight-payment-confirmation-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(34 197 94 / 12%); color: #16a34a; font-size: 26px; animation: flight-payment-confirmation-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes flight-payment-confirmation-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .flight-payment-confirmation-title { margin: 0; font-size: 24px; font-weight: 700; color: rgb(0 10 20); letter-spacing: -0.01em; } .flight-payment-confirmation-sub { margin: 0; max-width: 480px; font-size: 14px; color: rgb(0 10 20 / 55%); line-height: 1.5; }.flight-payment-confirmation-ref { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; padding: 16px 28px; border-radius: 14px; background: rgb(2 132 199 / 6%); border: 1px solid rgb(2 132 199 / 25%); } .flight-payment-confirmation-ref-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-payment-confirmation-ref-row { display: flex; align-items: center; gap: 12px; } .flight-payment-confirmation-ref-value { font-size: 26px; font-weight: 700; letter-spacing: 0.14em; color: rgb(0 10 20); user-select: all; line-height: 1; } .flight-payment-confirmation-ref-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(2 132 199 / 30%); background: #fff; font-family: inherit; font-size: 12px; font-weight: 600; color: rgb(2 132 199); cursor: pointer; transition: all 0.15s ease; } .flight-payment-confirmation-ref-copy:hover { background: rgb(2 132 199 / 8%); border-color: rgb(2 132 199 / 55%); } .flight-payment-confirmation-ref-copy.is-copied { background: rgb(34 197 94 / 12%); border-color: rgb(34 197 94 / 40%); color: #16a34a; }.flight-payment-confirmation-alt-email { display: flex; flex-direction: column; gap: 10px; max-width: 500px; margin: 0 auto; padding: 16px; border-radius: 12px; background: rgb(0 10 20 / 2%); border: 1px dashed rgb(0 10 20 / 15%); } .flight-payment-confirmation-alt-label { font-size: 13px; font-weight: 600; color: rgb(0 10 20 / 70%); text-align: center; } .flight-payment-confirmation-input-group { display: flex; gap: 8px; } .flight-payment-confirmation-input { flex-grow: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid rgb(0 10 20 / 20%); background: #fff; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s ease; } .flight-payment-confirmation-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .flight-payment-confirmation-btn-send { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; background: #0284c7; border: none; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .flight-payment-confirmation-btn-send:hover:not(:disabled) { background: #0369a1; } .flight-payment-confirmation-btn-send:disabled { opacity: 0.7; cursor: not-allowed; } .flight-payment-confirmation-btn-send.is-sent { background: #16a34a; }.flight-payment-confirmation-recap { padding: 24px 0 0; border-top: 1px dashed rgb(0 10 20 / 12%); }.flight-payment-confirmation-error-slot:empty { display: none; } .flight-payment-confirmation-error { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 10%); border: 1px solid rgb(248 113 113 / 30%); } .flight-payment-confirmation-error i { color: #dc2626; font-size: 14px; flex-shrink: 0; }@media (max-width: 720px) { .flight-payment-confirmation-title { font-size: 20px; } .flight-payment-confirmation-ref { padding: 14px 20px; width: 100%; box-sizing: border-box; } .flight-payment-confirmation-ref-value { font-size: 22px; letter-spacing: 0.1em; } .flight-payment-confirmation-topbar { flex-direction: column; align-items: stretch; } .flight-payment-confirmation-topbar-spacer { display: none; } }.flight-passenger-card { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid rgb(0 10 20 / 10%); box-shadow: 0 5px 20px -10px rgba(0 0 0 / 40%); color: rgb(0 10 20); min-width: 0; }.flight-passenger-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .flight-passenger-card-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: #0284c7; } .flight-passenger-card-badge--child { background: #7c3aed; } .flight-passenger-card-badge--infant { background: #db2777; } .flight-passenger-card-title { margin: 0; font-size: 16px; font-weight: 700; color: rgb(0 10 20); }.flight-passenger-card-head .flight-passenger-card-picker-slot { display: block; margin-left: auto;flex-direction: unset; gap: 0; min-width: 0; width: 260px; max-width: 100%; } .flight-passenger-card-head .flight-passenger-card-picker-slot:empty { display: none; }.flight-passenger-card-picker-slot .dd-trigger { padding: 6px 10px; font-size: 13px; }.flight-passenger-card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }.flight-passenger-card-fields--identity { grid-template-columns: minmax(125px, 0.6fr)minmax(140px, 2fr)minmax(140px, 2fr)minmax(160px, 1.4fr)minmax(125px, 0.8fr);} .flight-passenger-card-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .flight-passenger-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-passenger-card-input { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .flight-passenger-card-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); }.flight-passenger-card-date-btn { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .flight-passenger-card-date-btn:hover { border-color: rgb(2 132 199 / 50%); } .flight-passenger-card-date-btn:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); } .flight-passenger-card-date-btn.is-empty { color: rgb(0 10 20 / 40%); } .flight-passenger-card-date-btn i { color: #0284c7; font-size: 14px; flex-shrink: 0; }.flight-passenger-card-dd-slot { display: block; width: 100%; min-width: 0; } .flight-passenger-card-field .dd-root, .flight-passenger-card-picker-slot .dd-root { display: block; width: 100%; } .flight-passenger-card-field .dd-trigger, .flight-passenger-card-picker-slot .dd-trigger { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); box-shadow: none; text-shadow: none; font-family: inherit; font-size: 14px; font-weight: 500; justify-content: space-between; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .flight-passenger-card-field .dd-trigger:hover, .flight-passenger-card-picker-slot .dd-trigger:hover { background: #fff; border-color: rgb(2 132 199 / 50%); color: rgb(0 10 20); } .flight-passenger-card-field .dd-root.is-open .dd-trigger, .flight-passenger-card-picker-slot .dd-root.is-open .dd-trigger { background: #fff; border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); color: rgb(0 10 20); } .flight-passenger-card-field .dd-trigger-icon, .flight-passenger-card-picker-slot .dd-trigger-icon { color: #0284c7; } .flight-passenger-card-field .dd-chevron, .flight-passenger-card-picker-slot .dd-chevron { color: #0284c7; font-size: 10px; } .flight-passenger-card-field .dd-root.is-placeholder .dd-trigger-label, .flight-passenger-card-picker-slot .dd-root.is-placeholder .dd-trigger-label { color: rgb(0 10 20 / 40%); }.flight-passenger-card-field .dd-menu, .flight-passenger-card-picker-slot .dd-menu { display: grid; left: 0; right: 0; width: 100%; min-width: 0; box-sizing: border-box; background: #fff; border: 1px solid rgb(0 10 20 / 12%); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 30%); padding: 5px 1px; gap: 1px; } .flight-passenger-card-field .dd-item, .flight-passenger-card-picker-slot .dd-item { color: rgb(0 10 20 / 85%); font-weight: 500; } .flight-passenger-card-field .dd-item:hover, .flight-passenger-card-field .dd-item:focus-visible, .flight-passenger-card-picker-slot .dd-item:hover, .flight-passenger-card-picker-slot .dd-item:focus-visible { background: rgb(2 132 199 / 8%); color: rgb(0 10 20); } .flight-passenger-card-field .dd-item.is-selected, .flight-passenger-card-picker-slot .dd-item.is-selected { background: rgb(2 132 199 / 12%); color: rgb(0 10 20); } .flight-passenger-card-field .dd-item-icon, .flight-passenger-card-picker-slot .dd-item-icon { color: #0284c7; } .flight-passenger-card-field .dd-item-check, .flight-passenger-card-picker-slot .dd-item-check { color: #0284c7; }.flight-passenger-card-block { border-top: 1px dashed rgb(0 10 20 / 12%); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; } .flight-passenger-card-block-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(0 10 20 / 60%); } .flight-passenger-card-block-title i { font-size: 13px; color: #0284c7; }.flight-passenger-card-field.is-invalid .flight-passenger-card-label { color: #dc2626; } .flight-passenger-card-field.is-invalid .flight-passenger-card-input, .flight-passenger-card-field.is-invalid .flight-passenger-card-date-btn, .flight-passenger-card-field.is-invalid .dd-trigger { border-color: #dc2626; background: rgb(220 38 38 / 4%); box-shadow: 0 0 0 3px rgb(220 38 38 / 12%); } .flight-passenger-card-field.is-invalid .flight-passenger-card-date-btn i, .flight-passenger-card-field.is-invalid .dd-trigger-icon, .flight-passenger-card-field.is-invalid .dd-chevron { color: #dc2626; } .flight-passenger-card-field.is-invalid .dd-root.is-open .dd-trigger { border-color: #dc2626; box-shadow: 0 0 0 3px rgb(220 38 38 / 18%); } .flight-passenger-card-field-error { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #dc2626; letter-spacing: 0.01em; }.flight-passenger-card--skeleton { pointer-events: none; } .flight-passenger-card-sk-head, .flight-passenger-card-sk-field { background: linear-gradient( 90deg, rgba(0 10 20 / 6%) 0%, rgba(0 10 20 / 18%) 50%, rgba(0 10 20 / 6%) 100% ); background-size: 200% 100%; animation: flight-passenger-card-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .flight-passenger-card-sk-head { height: 20px; width: 100px; } .flight-passenger-card-sk-field { height: 40px; border-radius: 10px; } @keyframes flight-passenger-card-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }@media (max-width: 900px) {.flight-passenger-card-fields--identity { grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) minmax(0, 2fr); grid-template-areas: "title first last" "dob dob gender"; } .flight-passenger-card-fields--identity > :nth-child(1) { grid-area: title; } .flight-passenger-card-fields--identity > :nth-child(2) { grid-area: first; } .flight-passenger-card-fields--identity > :nth-child(3) { grid-area: last; } .flight-passenger-card-fields--identity > :nth-child(4) { grid-area: dob; } .flight-passenger-card-fields--identity > :nth-child(5) { grid-area: gender; } } @media (max-width: 720px) { .flight-passenger-card { padding: 14px 16px; } .flight-passenger-card-fields, .flight-passenger-card-fields--identity { grid-template-columns: 1fr; grid-template-areas: none; } .flight-passenger-card-fields--identity > :nth-child(1), .flight-passenger-card-fields--identity > :nth-child(2), .flight-passenger-card-fields--identity > :nth-child(3), .flight-passenger-card-fields--identity > :nth-child(4), .flight-passenger-card-fields--identity > :nth-child(5) { grid-area: auto; }.flight-passenger-card-head .flight-passenger-card-picker-slot { width: 100%; margin-left: 0; } }.flight-passenger-control { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; color: rgb(0 10 20); }.flight-passenger-control-banner-slot { position: sticky; top: 16px; z-index: 1000; margin-bottom: 16px; } .flight-passenger-control-banner-slot:empty { display: none; margin-bottom: 0; } .flight-passenger-control-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #be123c; background-color: #ffe4e6; border: 1px solid rgb(248 113 113 / 30%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .flight-passenger-control-banner i { color: #dc2626; font-size: 14px; flex-shrink: 0; }.flight-passenger-control-title { margin: 0; font-size: 20px; font-weight: 700; color: rgb(0 10 20); } .flight-passenger-control-sub { margin: 0; font-size: 14px; color: rgb(0 10 20 / 55%); }.flight-passenger-control-list { display: flex; flex-direction: column; gap: 14px; }.flight-passenger-control-contact { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px; background: rgb(2 132 199 / 5%); border: 1px solid rgb(2 132 199 / 22%); } .flight-passenger-control-contact-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: rgb(0 10 20); } .flight-passenger-control-contact-title i { font-size: 14px; color: #0284c7; } .flight-passenger-control-contact-hint { margin: 0; font-size: 13px; color: rgb(0 10 20 / 55%); }.flight-passenger-control-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .flight-passenger-control-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .flight-passenger-control-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-passenger-control-hint { font-size: 11px; color: rgb(0 10 20 / 45%); } .flight-passenger-control-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .flight-passenger-control-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); }.flight-passenger-control-field--phone {min-width: 0; } .flight-passenger-control-phone { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .flight-passenger-control-phone-country { flex: 0 0 auto; min-width: 108px; max-width: 140px; } .flight-passenger-control-phone-country .dd-root { width: 100%; }.flight-passenger-control-phone-country .dd-menu { display: grid; gap: 1px; min-width: 280px; } .flight-passenger-control-phone-number { flex: 1 1 auto; min-width: 0; }.flight-passenger-control-same { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(0 10 20 / 70%); cursor: pointer; user-select: none; } .flight-passenger-control-same input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0284c7; cursor: pointer; }.flight-passenger-control-field.is-invalid .flight-passenger-control-label { color: #dc2626; } .flight-passenger-control-field.is-invalid .flight-passenger-control-input, .flight-passenger-control-field.is-invalid .dd-trigger { border-color: #dc2626; background: rgb(220 38 38 / 4%); box-shadow: 0 0 0 3px rgb(220 38 38 / 12%); } .flight-passenger-control-field.is-invalid .dd-trigger-icon, .flight-passenger-control-field.is-invalid .dd-chevron { color: #dc2626; } .flight-passenger-control-field.is-invalid .dd-root.is-open .dd-trigger { border-color: #dc2626; box-shadow: 0 0 0 3px rgb(220 38 38 / 18%); } .flight-passenger-control-field-error { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #dc2626; letter-spacing: 0.01em; }@media (max-width: 720px) { .flight-passenger-control-contact { padding: 14px 16px; } .flight-passenger-control-fields { grid-template-columns: 1fr; } .flight-passenger-control-phone-country { min-width: 96px; } .flight-passenger-control-phone-country .dd-menu { min-width: 240px; } }.flight-seat-map-card { --seat-size: 40px; --seat-gap: 4px; --aisle-width: 24px;--row-num-width: 34px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; color: rgb(0 10 20); overflow-x: auto; min-width: 0; }.flight-seat-map-card-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 10px; border-bottom: 1px dashed rgb(0 10 20 / 12%); } .flight-seat-map-card-cabin { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0 10 20 / 70%); } .flight-seat-map-card-meta { font-size: 11px; color: rgb(0 10 20 / 45%); }.flight-seat-map-card-grid { display: flex; flex-direction: column; gap: 20px;padding: 6px 0 4px; width: fit-content; margin: auto; } .flight-seat-map-card-row { display: grid; grid-template-columns: var(--row-num-width) 1fr; align-items: center; column-gap: 8px; } .flight-seat-map-card-row-num { text-align: right; padding-right: 4px; font-size: 12px; font-weight: 700; color: rgb(0 10 20 / 40%); font-variant-numeric: tabular-nums; line-height: 1; user-select: none; }.flight-seat-map-card-cluster { display: flex; justify-content: center; gap: var(--aisle-width); } .flight-seat-map-card-cluster:has(.flight-seat-map-card-furniture) { justify-content: space-around; }.flight-seat-map-card-block { display: flex; gap: var(--seat-gap); }.flight-seat-map-card-seat, .flight-seat-map-card-furniture { width: var(--seat-size); height: var(--seat-size); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; position: relative; box-sizing: border-box; flex-shrink: 0; } .flight-seat-map-card-seat { border: 1px solid rgb(0 10 20 / 18%); background: #fff; color: rgb(0 10 20 / 70%); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .flight-seat-map-card-seat:hover:not(:disabled) { transform: scale(1.06); border-color: rgb(2 132 199 / 60%); } .flight-seat-map-card-seat:disabled { cursor: not-allowed; } .flight-seat-map-card-seat-letter { font-size: 13px; line-height: 1; }.flight-seat-map-card-seat.is-free { background: rgb(34 197 94 / 10%); border-color: rgb(34 197 94 / 40%); color: #14532d; }.flight-seat-map-card-seat.is-tier-cheap { background: rgb(6 182 212 / 10%); border-color: #5c6cc3; color: #5c6cc3; } .flight-seat-map-card-seat.is-tier-cheap .flight-seat-map-card-seat-price { background: #5c6cc3; }.flight-seat-map-card-seat.is-tier-mid { background: rgb(251 191 36 / 10%); border-color: rgb(251 191 36 / 55%); color: #bd9705; } .flight-seat-map-card-seat.is-tier-mid .flight-seat-map-card-seat-price { background: #bd9705; }.flight-seat-map-card-seat.is-tier-expensive { background: rgb(244 114 182 / 12%); border-color: rgb(244 114 182 / 55%); color: #cb4e80; } .flight-seat-map-card-seat.is-tier-expensive .flight-seat-map-card-seat-price { background: #cb4e80; }.flight-seat-map-card-seat.is-paid { background: rgb(251 191 36 / 10%); border-color: rgb(251 191 36 / 55%); color: #bd9705; }.flight-seat-map-card-seat.is-unavailable { background: rgb(0 10 20 / 5%); border-color: rgb(0 10 20 / 10%); color: rgb(0 10 20 / 30%); } .flight-seat-map-card-seat.is-restricted { background: rgb(0 10 20 / 5%); border-color: rgb(0 10 20 / 10%); color: rgb(0 10 20 / 30%); } .flight-seat-map-card-seat.is-restricted::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( to top right, transparent calc(50% - 0.5px), rgb(220 38 38 / 55%) calc(50% - 0.5px), rgb(220 38 38 / 55%) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); pointer-events: none; } .flight-seat-map-card-seat.is-taken { background: rgb(0 10 20 / 12%); border-color: rgb(0 10 20 / 15%); color: rgb(0 10 20 / 30%); text-decoration: line-through; } .flight-seat-map-card-seat.is-selected { background: #0284c7; border-color: #0369a1; color: #fff; box-shadow: 0 0 0 3px rgb(2 132 199 / 25%); } .flight-seat-map-card-seat.is-selected:hover:not(:disabled) { transform: scale(1.04); }.flight-seat-map-card-seat.is-selected .flight-seat-map-card-seat-price { background: #0369a1; }.flight-seat-map-card-seat.is-selected::after { content: '✓'; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #16a34a; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 900; line-height: 1; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0 0 0 / 25%); pointer-events: none; z-index: 3; }.flight-seat-map-card-seat.is-just-picked { z-index: 2; animation: flight-seat-map-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes flight-seat-map-card-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(2 132 199 / 45%); } 45% { transform: scale(1.2); box-shadow: 0 0 0 10px rgb(2 132 199 / 0%); } 70% { transform: scale(0.96); } 100% { transform: scale(1); box-shadow: 0 0 0 3px rgb(2 132 199 / 25%); } } @media (prefers-reduced-motion: reduce) { .flight-seat-map-card-seat.is-just-picked { animation: none; } }.flight-seat-map-card-seat-price { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; white-space: nowrap;background: #bd9705; color: #fff; pointer-events: none; box-shadow: 0 1px 3px rgba(0 0 0 / 25%); }.flight-seat-map-card-furniture { background: rgb(0 10 20 / 4%); border: 1px dashed rgb(0 10 20 / 8%); color: rgb(0 10 20 / 30%); } .flight-seat-map-card-furniture i { font-size: 14px; } .flight-seat-map-card-furniture--empty { visibility: hidden; border: none; background: transparent; }.flight-seat-map-card-empty { display: flex; align-items: center; gap: 10px; padding: 24px 20px; font-size: 13px; font-style: italic; color: rgb(0 10 20 / 55%); } .flight-seat-map-card-empty i { font-size: 16px; color: rgb(0 10 20 / 35%); flex-shrink: 0; } .flight-seat-map-card--skeleton { pointer-events: none; } .flight-seat-map-card-sk-head { height: 16px; width: 120px; border-radius: 4px; background: linear-gradient( 90deg, rgba(0 10 20 / 6%) 0%, rgba(0 10 20 / 18%) 50%, rgba(0 10 20 / 6%) 100% ); background-size: 200% 100%; animation: flight-seat-map-card-shimmer 1.5s ease-in-out infinite; } .flight-seat-map-card-sk-num { color: transparent; background: rgba(0 10 20 / 6%); border-radius: 4px; } .flight-seat-map-card-sk-seat { border-color: transparent; background: linear-gradient( 90deg, rgba(0 10 20 / 6%) 0%, rgba(0 10 20 / 18%) 50%, rgba(0 10 20 / 6%) 100% ); background-size: 200% 100%; animation: flight-seat-map-card-shimmer 1.5s ease-in-out infinite; } @keyframes flight-seat-map-card-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }@media (max-width: 720px) { .flight-seat-map-card { --seat-size: 32px; --seat-gap: 3px; --aisle-width: 16px; --row-num-width: 26px; } .flight-seat-map-card-row-num { font-size: 10px; } .flight-seat-map-card-seat-letter{ font-size: 11px; } .flight-seat-map-card-seat-price { font-size: 9px; bottom: -10px; padding: 1px 4px; }.flight-seat-map-card-seat.is-selected::after { width: 14px; height: 14px; font-size: 9px; top: -5px; right: -5px; } }.flight-seat-map-control { display: flex; flex-direction: row; gap: 24px; width: 100%; min-width: 0; color: rgb(0 10 20); } .flight-seat-map-control-left { display: flex; flex-direction: column; gap: 12px; width: 280px; flex-shrink: 0; } .flight-seat-map-control-right { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; min-width: 0; }.flight-seat-map-control-leg-list { display: flex; flex-direction: column; gap: 8px; } .flight-seat-map-control-leg-group { display: flex; flex-direction: column; gap: 8px; } .flight-seat-map-control-leg-header { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgb(0 10 20 / 4%); border: 1px solid transparent; text-align: left; font-family: inherit; cursor: pointer; transition: all 0.15s ease; } .flight-seat-map-control-leg-header:hover { background: rgb(0 10 20 / 8%); } .flight-seat-map-control-leg-header.is-active { background: rgb(2 132 199 / 8%); border-color: rgb(2 132 199 / 30%); } .flight-seat-map-control-leg-top { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px; } .flight-seat-map-control-leg-check { color: #16a34a; font-size: 12px; background: rgb(22 163 74 / 12%); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .flight-seat-map-control-leg-dir { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(2 132 199); } .flight-seat-map-control-leg-route { font-size: 13px; font-weight: 700; color: rgb(0 10 20); line-height: 1.25; word-break: break-word; } .flight-seat-map-control-leg-time { display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 11px; font-weight: 600; color: rgb(0 10 20 / 70%); font-variant-numeric: tabular-nums; } .flight-seat-map-control-leg-time i { font-size: 10px; color: rgb(0 10 20 / 45%); } .flight-seat-map-control-leg-meta { font-size: 11px; color: rgb(0 10 20 / 55%); line-height: 1.25; } .flight-seat-map-control-leg-paxs { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; margin-left: 8px; border-left: 2px solid rgb(2 132 199 / 20%); } .flight-seat-map-control-pax { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid rgb(0 10 20 / 10%); text-align: left; font-family: inherit; cursor: pointer; transition: all 0.15s ease; } .flight-seat-map-control-pax:hover { border-color: rgb(2 132 199 / 40%); } .flight-seat-map-control-pax.is-active { border-color: #0284c7; box-shadow: 0 0 0 2px rgb(2 132 199 / 15%); } .flight-seat-map-control-pax-name { font-size: 13px; font-weight: 700; color: rgb(0 10 20); } .flight-seat-map-control-pax-pick { font-size: 12px; font-weight: 700; color: #008040; display: flex; align-items: center; gap: 4px; }.flight-seat-map-control-map-header { font-size: 15px; font-weight: 600; color: rgb(0 10 20 / 80%); padding: 8px 0; } .flight-seat-map-control-map-container { max-height: 65vh; overflow-y: auto; border-radius: 12px; border: 1px solid rgb(0 10 20 / 8%); background: #fafafa; }.flight-seat-map-control-map-container::-webkit-scrollbar { width: 8px; } .flight-seat-map-control-map-container::-webkit-scrollbar-track { background: transparent; } .flight-seat-map-control-map-container::-webkit-scrollbar-thumb { background: rgb(0 10 20 / 15%); border-radius: 4px; } .flight-seat-map-control-map-container::-webkit-scrollbar-thumb:hover { background: rgb(0 10 20 / 25%); }.flight-seat-map-control-banner-slot:empty { display: none; } .flight-seat-map-control-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 8%); border: 1px solid rgb(248 113 113 / 30%); } .flight-seat-map-control-banner i { color: #dc2626; font-size: 14px; flex-shrink: 0; }.flight-seat-map-control-loading, .flight-seat-map-control-error, .flight-seat-map-control-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;width: 100%; min-height: 350px; padding: 40px 20px; border-radius: 14px; background: rgb(0 10 20 / 2%); border: 1px dashed rgb(0 10 20 / 12%); font-size: 14px; color: rgb(0 10 20 / 60%); text-align: center; } .flight-seat-map-control-loading i { color: #0284c7; font-size: 24px; margin-bottom: 8px; } .flight-seat-map-control-error { background: rgb(220 38 38 / 4%); border-color: rgb(248 113 113 / 30%); color: #7f1d1d; } .flight-seat-map-control-error i { color: #dc2626; font-size: 24px; margin-bottom: 8px; } .flight-seat-map-control-unavailable i { color: rgb(0 10 20 / 25%); font-size: 24px; margin-bottom: 8px; }.flight-seat-map-control-totals { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-radius: 14px; background: rgb(2 132 199 / 8%); border: 1px solid rgb(2 132 199 / 22%); } .flight-seat-map-control-totals-count { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-seat-map-control-totals-amount { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(0 10 20); }.flight-seat-map-control-right { transition: opacity 0.2s ease-in-out; } .flight-seat-map-control-right.is-fading { opacity: 0; pointer-events: none; }.flight-card-form { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid rgb(0 10 20 / 10%); } .flight-card-form.is-busy { opacity: 0.7; pointer-events: none; }.flight-card-form-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: rgb(0 10 20); } .flight-card-form-title i { font-size: 14px; color: #0284c7; } .flight-card-form-sub { margin: 0; font-size: 13px; color: rgb(0 10 20 / 60%); } .flight-card-form-subtitle { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); }.flight-card-form-sandbox-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 10px; background: rgb(251 191 36 / 12%); border: 1px solid rgb(251 191 36 / 35%); font-size: 12px; color: #78350f; line-height: 1.4; } .flight-card-form-sandbox-hint i { margin-top: 2px; color: #d97706; flex-shrink: 0; }.flight-card-form-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .flight-card-form-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .flight-card-form-field--full { grid-column: 1 / -1; } .flight-card-form-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .flight-card-form-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 15%); background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .flight-card-form-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 15%); }.flight-card-form-error { padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 10%); border: 1px solid rgb(248 113 113 / 30%); } .flight-card-form-error.hidden { display: none; }.flight-card-form-3ds-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgb(0 10 20 / 60%); backdrop-filter: blur(4px); } .flight-card-form-3ds-box { width: 100%; max-width: 420px; padding: 28px 32px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0 0 0 / 50%); text-align: center; } .flight-card-form-3ds-box h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: rgb(0 10 20); } .flight-card-form-3ds-box p { margin: 0 0 20px; font-size: 13px; color: rgb(0 10 20 / 60%); line-height: 1.5; } .flight-card-form-3ds-btn { padding: 12px 32px; border-radius: 12px; border: none; background: #0284c7; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease; } .flight-card-form-3ds-btn:hover { background: #0369a1; }@media (max-width: 720px) { .flight-card-form { padding: 16px; } .flight-card-form-fields { grid-template-columns: 1fr 1fr; } .flight-card-form-field { grid-column: span 1; } .flight-card-form-field--full { grid-column: 1 / -1; } }.flight-card-form-error { padding: 10px 14px; border-radius: 10px; font-size: 13px; color: #7f1d1d; background: rgb(220 38 38 / 10%); border: 1px solid rgb(248 113 113 / 30%); } .flight-card-form-error.hidden { display: none; }.flight-card-form-field.is-invalid .flight-card-form-label { color: #dc2626; } .flight-card-form-field.is-invalid .flight-card-form-input { border-color: #dc2626; background: rgb(220 38 38 / 4%); box-shadow: 0 0 0 3px rgb(220 38 38 / 12%); }.flight-card-form-field.is-invalid .flight-card-form-input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgb(220 38 38 / 18%); }.hotel-carousel { position: relative; width: 100%; }.hotel-carousel-track { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 0 12px 0; min-width: 0; outline: none; scrollbar-width: none; -ms-overflow-style: none; }.hotel-carousel-track > .hotel-card { flex: 0 0 auto; scroll-snap-align: start; width: 225px; }.hotel-carousel-track::-webkit-scrollbar { display: none;width: 0; height: 0; }.hotel-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(10 16 22 / 90%); border: 1px solid rgb(255 255 255 / 12%); color: #fff; font-size: 14px; cursor: pointer; z-index: 5; backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgb(0 0 0 / 40%); transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .hotel-carousel-btn:hover { background: rgb(2 132 199 / 90%); transform: translateY(-50%) scale(1.05); } .hotel-carousel-btn.hidden { display: none; } .hotel-carousel-btn.disabled { opacity: 0.4; pointer-events: none; } .hotel-carousel-btn-prev { left: -8px; } .hotel-carousel-btn-next { right: -8px; }.hotel-carousel.loading .hotel-carousel-track::after { content: ''; flex: 0 0 40px; height: 100%; }.rotating-stack { position: relative; width: 250px; height: 420px; margin: 0 auto; pointer-events: none; perspective: 500px; transform-style: preserve-3d;--rotating-stack-cube-width: 250px; --rotating-stack-cube-radius: 125px; --rotating-stack-cube-radius-negative: -125px; } .rotating-stack-card { position: absolute; transition: transform 240ms cubic-bezier(0.33, 1, 0.68, 1), opacity 240ms ease; } .rotating-stack-card > .hotel-card { width: 100%; height: 100%; }.rotating-stack-card[data-slot="right-card"] { transform: rotateY(90deg) translateZ(var(--rotating-stack-cube-radius)) translateX(var(--rotating-stack-cube-radius)); opacity: 0; z-index: -1; } .rotating-stack-card[data-slot="center-card"] { transform: translateX(0) scale(1); pointer-events: none; opacity: 1; } .rotating-stack-card[data-slot="left-card"] { transform: rotateY(-90deg) translateZ(var(--rotating-stack-cube-radius)) translateX(var(--rotating-stack-cube-radius-negative)); opacity: 0; z-index: -1; } .rotating-stack-card[data-slot="left-past"], .rotating-stack-card[data-slot="right-future"] { display: none; }.ctt-inner { position: relative; display: inline-block; white-space: inherit; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } .ctt-flow { visibility: hidden; display: inline-block; text-shadow: none !important; } .ctt-layer { position: absolute; inset: 0; display: inline-block;-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none !important; filter: none !important;background-image: linear-gradient(rgb(0 10 20 / 50%), rgb(0 10 20 / 50%)), var(--ctt-image, none);background-repeat: no-repeat !important; background-attachment: scroll !important; transition: opacity 800ms ease-in-out; will-change: opacity; pointer-events: none; }.ff-init { background-color: rgb(255 255 255 / 55%); box-shadow: 0 5px 15px -5px rgb(0 10 20) !important; } .ff-applied { isolation: isolate; }.ff-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }.ff-applied > :where(:not(.ff-backdrop)) { position: relative; z-index: 1; }.ff-backdrop-image { position: absolute; inset: calc(-1 * var(--ff-oversize, 20px)); filter: blur(var(--ff-blur, 100px));background-image:linear-gradient(rgb(255 255 255 / 55%), rgb(255 255 255 / 55%)), var(--ff-image, none); background-repeat: no-repeat; background-size: var(--ff-bg-size, cover); background-position: var(--ff-bg-pos, 0 0); opacity: 0; transition: opacity 800ms ease-in-out; will-change: opacity; }.ff-backdrop-bake { position: absolute; inset: 0; background-image: linear-gradient(rgb(0 10 20 / 50%), rgb(0 10 20 / 50%)), linear-gradient(rgb(255 255 255 / 25%), rgb(255 255 255 / 25%)), var(--ff-bake-image, none); background-repeat: no-repeat; background-size: var(--ff-bg-size, cover); background-position: var(--ff-bg-pos, 0 0); filter: none; opacity: 0; transition: opacity 300ms ease-in-out; will-change: opacity; pointer-events: none; } .ff-backdrop-bake.ff-bake-visible { opacity: 1; }.tooltip { position: fixed; z-index: 9999; max-width: 260px; padding: 8px 12px; font-size: 12px; line-height: 1.45; color: #fff; background: rgb(10 16 22 / 96%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / 40%), 0 0 0 1px rgb(0 0 0 / 30%); backdrop-filter: blur(10px); pointer-events: none; user-select: none; opacity: 0; transition: opacity 0.15s ease; } .tooltip.hidden { display: none; } .tooltip.visible { opacity: 1; } .tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 5px solid transparent; } .tooltip:not(.flip)::after { top: 100%; border-top-color: rgb(10 16 22 / 96%); border-bottom-width: 0; } .tooltip.flip::after { bottom: 100%; border-bottom-color: rgb(10 16 22 / 96%); border-top-width: 0; }.flight-search-progress-wrap { width: 100%; padding: 0 16px 8px 16px; box-sizing: border-box; } .flight-search-progress-wrap.hidden { display: none; } .progress-bar { width: 100%; position: relative; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .progress-bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #0284c7, #7dd3fc); border-radius: 999px; transition: width 180ms ease-out; }.thinker { width: 100%; display: none; flex-direction: column; align-items: center; gap: 28px; padding: 36px 8px 32px; } .thinker.is-active { display: flex; }.thinker-hotels { position: relative; width: 100%; display: none; opacity: 0;min-height: 450px; }.thinker-body { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; } .thinker-label { position: relative; flex: 0 0 auto; display: inline-flex; align-items: baseline; padding-left: calc(1.15em + 6px); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: #1c1919; white-space: nowrap; user-select: none; } .thinker-label::before { content: ''; position: absolute; left: 0; top: 50%; width: 1.15em; height: 1.15em; transform: translateY(-50%); background: url('https://static.airtix.ai/images/thinking.png') center / contain no-repeat;filter: brightness(0) opacity(0.55); pointer-events: none; animation: thinker-label-icon-pulse 1.6s ease-in-out infinite; } @keyframes thinker-label-icon-pulse { 0%, 100% { opacity: 0.65; transform: translateY(-50%) scale(0.94); } 50% { opacity: 1; transform: translateY(-50%) scale(1.06); } } .thinker-dots { display: inline-flex; margin-left: 1px; } .thinker-dots > span { opacity: 0.25; animation: thinker-dot-pulse 1.4s ease-in-out infinite; } .thinker-dots > span:nth-child(2) { animation-delay: 0.15s; } .thinker-dots > span:nth-child(3) { animation-delay: 0.30s; } @keyframes thinker-dot-pulse { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .thinker-track-viewport { --thinker-row-h: 20px; flex: 0 0 auto; width: 320px; height: calc(var(--thinker-row-h) * 3); overflow: hidden; transition: height 500ms cubic-bezier(0.16, 1, 0.3, 1); } .thinker-track { display: flex; flex-direction: column; will-change: transform;transition: transform 240ms cubic-bezier(0.33, 1, 0.68, 1); } .thinker-item { position: relative; height: var(--thinker-row-h); display: flex; align-items: center; padding-left: 16px; font-size: 14px; color: rgba(0, 10, 20, 0.55); opacity: 0.50; transition: opacity 240ms ease, color 240ms ease; white-space: nowrap; } .thinker-item.active { opacity: 1; color: #1c1919; } .thinker-item-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #0284c7; } .thinker-item.active .thinker-item-icon i { animation: thinker-spin 1.4s linear infinite; } .thinker-item.done .thinker-item-icon i { color: #16a34a; } @keyframes thinker-spin { to { transform: rotate(360deg); } }.thinker .progress-bar { background: rgba(0, 10, 20, 0.08); }@media (max-width: 900px) { .thinker-track-viewport { width: 240px; } .thinker-hotels { min-height: 220px; } }h1.search-turn-title { margin: 0; font-size: 2em; font-weight: 800; color: #fff; text-transform: uppercase; text-shadow: none; font-family: 'times'; line-height: 1; border-bottom: solid 1px rgb(0 10 20 / 10%); padding-bottom: 15px; margin-bottom: 20px; }.search-intro, .search-closing { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); } .search-closing { margin-top: 8px; color: rgba(255, 255, 255, 0.75); } .search-result-text p, .search-result-text p * { margin: 0 0 12px 0; } .search-results-body p { color: rgb(0 10 20 / 90%); text-shadow: 0 1px 3px rgb(255 255 255 / 50%); font-size: 17px; font-weight: 500; user-select: text; } .search-result-text p:last-child { margin-bottom: 0; }.search-result-item { animation: none !important; overflow: visible; will-change: height, opacity; } .search-result-item.is-measuring { visibility: hidden; }.search-pick-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 25px; margin-top: 25px; border-top: solid 1px rgb(0 10 20 / 10%); } .search-pick-container > article:nth-child(2n) { padding-left: 10px; } .search-pick-container > article:nth-child(2n + 1) { padding-right: 10px; } @media (max-width: 1500px) { .search-pick-container { grid-template-columns: 1fr; } .search-pick-container > article:nth-child(2n) { padding-left: 0; } .search-pick-container > article:nth-child(2n + 1) { padding-right: 0; } } .search-pick { display: grid; grid-template-columns: 250px 1fr; gap: 15px; align-items: start; width: 100%; padding-bottom: 25px; margin-bottom: 25px; border-bottom: solid 1px rgb(0 10 20 / 10%); } .search-pick-card { position: relative; } .search-pick-card .hotel-card { width: 100%; } .search-pick-prose { f ont-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); padding-top: 4px; display: grid; gap: 25px; } .search-pick-prose p { margin: 0; } .search-pick-prose p:last-child { margin-bottom: 0; } .search-results-body article p { font-size: 15px; } @media (max-width: 900px) { .search-pick { grid-template-columns: 1fr; gap: 12px; } }.search-pick-book-btn { padding: 15px 40px; border-radius: 999px; color: #fff; font-size: 15px; letter-spacing: 0.01em; }.search-pick-book-btn:active { transform: scale(0.98); } .search-pick-book-btn i { font-size: 10px; opacity: 0.9; }.search-chips { display: flex; flex-wrap: wrap; gap: 6px; } .search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 2px #0284c7; background: rgb(255 255 255 / 73%); color: #0284c7; font-size: 12px; font-weight: 600; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .search-chip:hover { background: rgb(255 255 255 / 100%); box-shadow: 0 1px 2px rgb(0 10 20 / 50%); } .search-chip:active { transform: scale(0.97); } .search-chip i { font-size: 10px; flex-shrink: 0; opacity: 0.9; }.search-chip--like i { color: #facc15; }.search-chip--cheaper i { color: #ef4444; }.search-chip--upscale i { color: #60a5fa; }.search-chip--exclude i { color: #fb923c; }.search-chip--recall i { color: #b3d9ff; }.search-chip:hover i { opacity: 1; filter: brightness(1.15); } .search-chip.is-active { background: rgb(128 192 255 / 25%); box-shadow: inset 0 0 6px #80c0ff; color: #fff; } .search-chip.is-active i { opacity: 1; filter: brightness(1.25) saturate(1.2); }.search-recall-section { margin-top: 30px; padding-top: 25px; border-top: solid 1px rgb(255 255 255 / 10%); } .search-recall-header { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; } .search-recall-section .hotel-carousel { margin-bottom: -4px; }.search-batch-chips { margin-top: 30px; padding-top: 25px; border-top: solid 1px rgb(255 255 255 / 10%); } .search-batch-chips .search-chips { margin-top: 0; margin-bottom: 0; } .search-chips-batch .search-chip { padding: 8px 14px; font-size: 12px; }.airtix-logo-defs { position: absolute; pointer-events: none; }.fx-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 50px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 50px), transparent 100%); }.blob { position: absolute; left: 119px; top: 30px; width: 220px; height: 180px; margin: -90px 0 0 -110px; border-radius: 50% 40% 60% 50% / 50% 60% 40% 55%; background: linear-gradient(120deg, #00A7FF, #8900C8, #EB008B, #F17C22, #00A7FF); background-size: 400% 400%; filter: blur(28px); opacity: 0; animation: morph 38s ease-in-out infinite, aurora 7s ease infinite; } .b2 { width: 180px; height: 140px; margin: -70px 0 0 -90px; background: linear-gradient(120deg, #3100FF, #EB008B, #00A7FF); background-size: 400% 400%; animation: morphB 38s ease-in-out infinite, aurora 9s ease infinite; }.plasma { position: absolute; left: 119px; top: 30px; width: 460px; height: 340px; margin: -170px 0 0 -230px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 30% 40%, rgba(0, 167, 255, .70), transparent 30%), radial-gradient(circle at 70% 30%, rgba(137, 0, 200, .70), transparent 30%), radial-gradient(circle at 60% 70%, rgba(235, 0, 139, .65), transparent 30%), radial-gradient(circle at 30% 70%, rgba(241, 124, 34, .65), transparent 30%); filter: blur(28px); animation: plasmaCycle 38s ease-in-out infinite, churn 8s ease-in-out infinite alternate; }.rings { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); width: 118px; height: 45px; pointer-events: none; } .ring { position: absolute; inset: 0; border-radius: 60px; background: conic-gradient(from 0deg, #00A7FF, #3100FF, #8900C8, #EB008B, #EC1E24, #F17C22, #00A7FF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; opacity: 0; animation: ringCycle 38s cubic-bezier(.2, .7, .3, 1) infinite; } .r2 { animation-delay: .7s } .r3 { animation-delay: 1.4s }.logo-link { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); width: 118px; height: 45px; display: block; z-index: 5; perspective: 900px; perspective-origin: 50% 50%; } .stage { position: absolute; inset: 0; transform-style: preserve-3d; animation: tilt 38s cubic-bezier(.45, 0, .55, 1) infinite; }.echoes { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } .echo { position: absolute; inset: 0; width: 100%; height: 100%; animation: echoCycle 38s ease-out infinite; opacity: 0; } .e2 { animation-delay: .5s } .e3 { animation-delay: 1s }.stack { position: absolute; inset: 0; transform-style: preserve-3d; } .layer { position: absolute; inset: 0; width: 100%; height: 100%; } .l1 { filter: blur(4px) saturate(1.5); opacity: 0; animation: layerA 38s cubic-bezier(.45, 0, .55, 1) infinite; } .l2 { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); animation: layerB 38s cubic-bezier(.45, 0, .55, 1) infinite; } .l3 { mix-blend-mode: screen; opacity: 0; filter: drop-shadow(0 0 9px rgba(235, 0, 139, .85)); animation: layerC 38s cubic-bezier(.45, 0, .55, 1) infinite; }.mark-fill { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 173 66'%3E%3Cpath fill='%23fff' d='M51.542,4.083v4.442c-5.228-4.167-11.805-6.658-18.958-6.658c-17.006,0-30.792,14.04-30.792,31.358c0,17.319,13.786,31.358,30.792,31.358c7.153,0,13.731-2.491,18.958-6.658v5.197h11.833V4.083H51.542z M32.682,52.219c-10.417,0-18.861-8.531-18.861-19.054s8.444-19.054,18.861-19.054c10.416,0,18.86,8.531,18.86,19.054S43.098,52.219,32.682,52.219z M83.875,63.123H72.042V4.083h11.833V63.123z M123.333,3.083v12.249c-10.371,0.054-20.304,8.844-20.304,19.333v28.458l-10.487,0V4.083l10.487,0v6.793C108.451,6.029,115.552,3.083,123.333,3.083z'/%3E%3C/svg%3E"); position: absolute; inset: 0; -webkit-mask: var(--mk) center / 100% 100% no-repeat; mask: var(--mk) center / 100% 100% no-repeat; background: linear-gradient(109deg,#00A7FF 0%, #0498FF 2.74%, #1072FF 7.98%, #2235FF 15.12%, #3100FF 20.69%, #8900C8 28.96%, #EB008B 37.69%, #EC1E24 41.63%, #F17C22 50%,#EC1E24 58.37%, #EB008B 62.31%, #8900C8 71.04%, #3100FF 79.31%, #2235FF 84.88%, #1072FF 92.02%, #0498FF 97.26%, #00A7FF 100%); background-size: 200% 100%; background-position: 0% 50%; animation: gradShift 38s ease infinite; } .word { position: absolute; inset: 0; width: 100%; height: 100%; }@keyframes tilt { 0%, 2.6% { transform: rotateX(0) rotateY(0) rotateZ(0) translateZ(0) scale(1) } 10.5% { transform: rotateX(2.5deg) rotateY(-4deg) translateZ(6px) scale(1.008) } 18.4% { transform: rotateX(0) rotateY(7deg) translateZ(7.5px) scale(1) } 26.3% { transform: rotateX(-3deg) rotateY(4.5deg) rotateZ(1.5deg) translateZ(6px) scale(1.015) } 34.2% { transform: rotateX(1.5deg) rotateY(-7deg) rotateZ(-1.5deg)translateZ(4.5px) scale(1) } 42.1% { transform: rotateX(4.5deg) rotateY(0) translateZ(10px) scale(1.022) } 50% { transform: rotateX(0) rotateY(-9deg) rotateZ(3.5deg) translateZ(7.5px) scale(1) } 57.9% { transform: rotateX(-4.5deg)rotateY(7deg) rotateZ(-3.5deg)translateZ(9px) scale(1.015) } 65.8% { transform: rotateX(3deg) rotateY(-3deg) rotateZ(2deg) translateZ(6px) scale(1) } 73.7% { transform: rotateX(-2deg) rotateY(5deg) rotateZ(-2deg) translateZ(7.5px) scale(1.008) } 81.6% { transform: rotateX(3.5deg) rotateY(-4.5deg) translateZ(9px) scale(1.015) } 89.5% { transform: rotateX(-1.5deg)rotateY(3deg) rotateZ(2deg) translateZ(6px) scale(1) } 97.4%,100% { transform: rotateX(0) rotateY(0) rotateZ(0) translateZ(0) scale(1) } } @keyframes layerA { 0%, 2.6% { opacity:0; transform:translate(-4.5px,-3px) scale(1.03); filter:blur(4px) saturate(1.5) } 10.5% { opacity:.45; transform:translate(-4.5px,-3px) scale(1.03); filter:blur(4px) saturate(1.5) } 18.4% { opacity:.6; transform:translate(-1.5px,-1px) scale(1.035); filter:blur(4px) saturate(1.5) } 26.3% { opacity:.5; transform:translate(-6px,-4px) scale(1.035); filter:blur(4px) hue-rotate(22deg) saturate(1.5) } 34.2% { opacity:.65; transform:translate(-2px,-1.5px) scale(1.035); filter:blur(4px) saturate(1.5) } 42.1% { opacity:.45; transform:translate(-5px,-3px) scale(1.045); filter:blur(6px) saturate(1.7) } 50%,57.9% { opacity:.55; transform:translate(-4px,-2px) scale(1.035); filter:blur(4px) saturate(1.5) } 65.8% { opacity:.65; transform:translate(-1.5px,-1px) scale(1.045); filter:blur(4px) saturate(1.5) } 73.7% { opacity:.45; transform:translate(-6px,-3px) scale(1.035); filter:blur(4px) saturate(1.5) } 81.6% { opacity:.6; transform:translate(-1px,-1px) scale(1.035); filter:blur(4px) saturate(1.5) } 89.5% { opacity:.5; transform:translate(-5px,-3px) scale(1.035); filter:blur(4px) saturate(1.5) } 97.4%,100% { opacity:0; transform:translate(-4.5px,-3px) scale(1.03); filter:blur(4px) saturate(1.5) } } @keyframes layerB { 0%, 2.6% { transform:translate(0,0) scale(1); filter:brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 10.5% { transform:translate(1.5px,-.8px) scale(1.015); filter:brightness(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 18.4% { transform:translate(2px,-.8px) scale(1.015) rotateZ(1.5deg); filter:brightness(1.12) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 26.3% { transform:translate(-.8px,.8px) scale(1) rotateZ(-1.5deg); filter:brightness(.96) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 34.2% { transform:translate(1.5px,-1.5px) scale(1.015) skewX(.9deg); filter:brightness(1.12) drop-shadow(0 0 10px rgba(0,167,255,.85)) } 42.1% { transform:translate(0,0) scale(1.0225); filter:brightness(1.15) drop-shadow(0 0 10px rgba(0,167,255,.85)) } 50% { transform:translate(1.5px,-.8px) scale(1.015) rotateY(7.5deg); filter:brightness(1.04) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 57.9% { transform:translate(.8px,-1.5px) scale(1.015) rotateY(-6deg); filter:brightness(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 65.8% { transform:translate(1.5px,-.8px) scale(1) skewX(.75deg) rotateZ(1.5deg); filter:brightness(1.12) drop-shadow(0 0 12px rgba(137,0,200,.85)) } 73.7% { transform:translate(-.8px,.8px) scale(1.0225) rotateZ(-1.5deg); filter:brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 81.6% { transform:translate(0,0) scale(1.03) rotateZ(1.5deg); filter:brightness(1.12) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } 89.5% { transform:translate(1.5px,-.8px) scale(1.015) skewX(.75deg); filter:brightness(1.1) drop-shadow(0 0 10px rgba(0,167,255,.7)) } 97.4%,100% { transform:translate(0,0) scale(1); filter:brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,.6)) } } @keyframes layerC { 0%, 2.6% { opacity:0; transform:translate(4px,2px); filter:drop-shadow(0 0 9px rgba(235,0,139,.85)) } 10.5% { opacity:.35; transform:translate(4px,2px); filter:drop-shadow(0 0 9px rgba(235,0,139,.85)) } 18.4% { opacity:.55; transform:translate(1.5px,1px); filter:drop-shadow(0 0 11px rgba(137,0,200,.9)) } 26.3% { opacity:.42; transform:translate(4.5px,3px); filter:drop-shadow(0 0 11px rgba(241,124,34,.9)) } 34.2% { opacity:.6; transform:translate(2px,1.5px); filter:drop-shadow(0 0 11px rgba(235,5,124,.9)) } 42.1% { opacity:.48; transform:translate(4px,2px); filter:drop-shadow(0 0 12px rgba(0,167,255,.9)) } 50% { opacity:.5; transform:translate(1.5px,1px); filter:drop-shadow(0 0 12px rgba(137,0,200,.9)) } 57.9% { opacity:.42; transform:translate(4px,2px); filter:drop-shadow(0 0 12px rgba(0,167,255,.9)) } 65.8% { opacity:.6; transform:translate(1.5px,1px); filter:drop-shadow(0 0 14px rgba(241,124,34,.9)) } 73.7% { opacity:.48; transform:translate(4px,2px); filter:drop-shadow(0 0 14px rgba(137,0,200,.9)) } 81.6% { opacity:.5; transform:translate(1.5px,1px); filter:drop-shadow(0 0 12px rgba(0,167,255,.9)) } 89.5% { opacity:.48; transform:translate(4px,2px); filter:drop-shadow(0 0 12px rgba(241,124,34,.9)) } 97.4%,100% { opacity:0; transform:translate(4px,2px); filter:drop-shadow(0 0 9px rgba(235,0,139,.85)) } } @keyframes echoCycle { 0%, 10.5% { opacity:0; transform:scale(1); filter:blur(1px) } 10.6% { opacity:.42; transform:scale(1); filter:blur(1px) } 18.3% { opacity:0; transform:scale(1.26); filter:blur(8px) } 18.4%,50% { opacity:0; transform:scale(1); filter:blur(1px) } 50.5% { opacity:.42; transform:scale(1); filter:blur(1px) } 57.8% { opacity:0; transform:scale(1.26); filter:blur(8px) } 57.9%,100% { opacity:0; transform:scale(1); filter:blur(1px) } } @keyframes morph { 0%, 42.1% { opacity:0; border-radius:50% 40% 60% 50%/50% 60% 40% 55% } 50% { opacity:.42 } 57.9% { opacity:0; border-radius:60% 45% 55% 40%/45% 55% 40% 60% } 100% { opacity:0 } } @keyframes morphB { 0%, 42.1% { opacity:0 } 50% { opacity:.26 } 57.9% { opacity:0 } 100% { opacity:0 } } @keyframes aurora { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } } @keyframes plasmaCycle { 0%, 65.7% { opacity:0 } 69% { opacity:.68 } 73.7% { opacity:0 } 100% { opacity:0 } } @keyframes churn { 0% { transform:rotate(0) scale(1) } 50% { transform:rotate(180deg) scale(1.11) } 100% { transform:rotate(360deg) scale(1) } } @keyframes ringCycle { 0%, 42.1% { opacity:0; transform:scale(.96) rotate(0) } 42.4% { opacity:1 } 50% { opacity:0; transform:scale(1.26) rotate(15deg) } 97.4%,100%{ opacity:0 } } @keyframes gradShift { 0%, 2.6% { background-position:0% 50% } 10.5% { background-position:100% 50% } 18.4% { background-position:0% 50% } 26.3% { background-position:100% 50% } 34.2% { background-position:0% 50% } 42.1% { background-position:100% 50% } 50% { background-position:0% 50% } 57.9% { background-position:100% 50% } 65.8% { background-position:0% 50% } 73.7% { background-position:100% 50% } 81.6% { background-position:0% 50% } 89.5% { background-position:100% 50% } 97.4%,100% { background-position:0% 50% } }.header-user-slot { position: absolute; right: calc(50% - min(780px, calc(calc(100% / 2) - 10px))); display: inline-flex; align-items: center; margin-left: auto; } .user-widget { position: relative; display: inline-flex; align-items: center; }.user-widget-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; background: rgb(0 10 20 / 40%); color: rgb(255 255 255 / 85%); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .user-widget-btn:hover { background: rgb(0 10 20 / 60%); border-color: rgb(255 255 255 / 30%); transform: translateY(-1px); } .user-widget-btn--avatar { padding: 0; overflow: hidden; border-color: rgb(34 211 238 / 40%); } .user-widget-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } .user-widget-initials { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: #0891b6; width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; } .user-widget-btn--plain { width: 32px; height: 32px; padding: 4px; background: transparent; border: none; border-radius: 0; color: rgb(255 255 255 / 85%); } .user-widget-btn--plain:hover { background: transparent; border: none; transform: none; color: #fff; } .user-widget-btn--plain i { font-size: 18px; }.user-widget-menu { position: fixed; z-index: 9000; min-width: 220px; padding: 10px 4px 4px 3px; border-radius: 14px; border-top-left-radius: 0; border-top-right-radius: 0; backdrop-filter: blur(35px); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 55%); background: rgba(0, 10, 20, 0.85); color: #fff; user-select: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; top: 100%; right: 0px; } .user-widget-menu:not([hidden]) { opacity: 1; pointer-events: auto; } .user-widget-menu[hidden] { display: block;visibility: hidden; pointer-events: none; } .user-widget-menu-head { padding: 0 0 12px 14px; } .user-widget-menu-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-widget-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; cursor: pointer; font-family: inherit; font-size: 13.5px; color: #c2cfe3; text-align: left; transition: background-color 0.12s ease, color 0.12s ease; } .user-widget-menu-item:hover { background: rgb(255 255 255 / 8%); color: #fff; } .user-widget-menu-item i { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }.user-widget-menu-item .fa-google { color: #4285f4; font-size: 14px; }.user-widget-menu.flip_up { transform-origin: bottom center; }.nav-panel-container { position: relative; width: 100%; height: calc(100% - 64px); margin: 32px 0; border-radius: 24px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 8px 32px rgb(0 0 0 / 25%); display: flex; flex-direction: column; z-index: 20; padding: 10px; gap: 10px;transition: margin 0.60s cubic-bezier(0.25, 1, 0.5, 1), height 0.60s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.60s cubic-bezier(0.25, 1, 0.5, 1); } @media (max-width: 720px) { .nav-panel-container { height:100%; margin: 0; border-radius: 0; } } .panel-tabs { display: flex; padding: 0; flex-shrink: 0; } .panel-tabs-track { display: flex; width: 100%; background: rgba(0, 10, 20, 0.4); border-radius: 99px; padding: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } .panel-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; border-radius: 99px; background: transparent; color: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; border: 0; cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease; } .panel-tab-btn i { font-size: 12px; } .panel-tab-btn:hover:not(.active) { color: #fff; } .panel-tab-btn.active { background: #fff; color: rgb(0 10 20); cursor: default; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); } .nav-panel { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); overflow: hidden; } .nav-panel-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #1c1919; font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 10, 20, 0.05); transition: background-color 0.15s ease, color 0.15s ease; } .nav-panel-link:last-child { border-bottom: none; } .nav-panel-link:hover { background-color: rgba(0, 10, 20, 0.04); } .nav-panel-link.active { background-color: rgba(2, 132, 199, 0.08); color: #0284c7; cursor: default; pointer-events: none; } .nav-panel-link i { flex: 0 0 auto; width: 16px; font-size: 14px; color: #64748b; text-align: center; } .nav-panel-link.active i { color: #0284c7; } .nav-panel-link span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.side-panel { position: relative; width: 100%; height: calc(100% - 64px); margin: 32px 0; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 32px rgb(0 0 0 / 25%); display: flex; flex-direction: column; color: #fff; z-index: 20; padding: 10px; gap: 10px; transition: margin 0.60s cubic-bezier(0.25, 1, 0.5, 1), height 0.60s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.60s cubic-bezier(0.25, 1, 0.5, 1); }.side-panel .panel-tabs { display: flex; flex-shrink: 0; } .panel-tabs-track { display: flex; width: 100%; border-radius: 99px; padding: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } .panel-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; border-radius: 99px; background: transparent; color: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; border: 0; cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease; } .panel-tab-btn i { font-size: 12px; } .panel-tab-btn:hover:not(.active) { color: #fff; } .panel-tab-btn.active { background: #fff; color: rgb(0 10 20); cursor: default; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); }.side-panel-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "stack"; flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; z-index: 1; border-radius: 18px; } .side-panel-pane { grid-area: stack; display: flex; flex-direction: column; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms ease; } .side-panel-pane.active { opacity: 1; visibility: visible; } .side-panel.no-transition .side-panel-pane { transition: none !important; }.side-panel-region { position: relative; min-height: 0; overflow: hidden; } .side-panel-region-top { flex: 1 1 60%; min-height: 0; } .side-panel-region-bottom { flex: 0 1 40%; min-height: 140px; border-top: 1px solid rgb(255 255 255 / 8%); display: flex; flex-direction: column; } .side-panel-region-bottom:has(.side-panel-region-scroll:empty) { display: none; } .side-panel-region.side-panel-region-full { flex: 1 1 auto; min-height: 0; } .side-panel-region-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px 16px; } .side-panel-region-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; min-height: 0; } .side-panel-region-top > .side-panel-region-scroll { padding: 0 0 200px 0; } .side-panel-region-bottom > .side-panel-region-scroll { position: relative; flex: 1 1 auto; inset: auto; padding: 0 16px 12px 16px; } .side-panel-region-scroll::-webkit-scrollbar, .side-panel-history-list::-webkit-scrollbar { width: 6px; } .side-panel-region-scroll::-webkit-scrollbar-thumb, .side-panel-history-list::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 15%); border-radius: 999px; } .side-panel-region-scroll::-webkit-scrollbar-thumb:hover, .side-panel-history-list::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 25%); }.side-panel-history-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 60%); } .side-panel-history-new-btn { font-size: 12px; font-weight: 600; color: #7dd3fc; padding: 5px 12px; border-radius: 999px; background: rgb(125 211 252 / 12%); border: none; cursor: pointer;transition: background-color 0.15s ease, color 0.15s ease; } .side-panel-history-new-btn:hover { background: rgb(125 211 252 / 22%); color: #fff; } .side-panel-history-list { display: flex; flex-direction: column; gap: 4px; } .side-panel-history-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background-color 0.15s ease; } .side-panel-history-item:hover { background: rgb(255 255 255 / 6%); } .side-panel-history-item.active { background: rgb(2 132 199 / 20%); } .side-panel-history-item-content { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .side-panel-history-item-content i { color: #7dd3fc; font-size: 13px; flex-shrink: 0; } .side-panel-history-item-name { font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-history-item-time { font-size: 11px; color: rgb(255 255 255 / 45%); flex-shrink: 0; }.side-panel-summary { display: flex; flex-direction: column; gap: 14px; padding: 15px 0 25px; } .side-panel-summary:empty { display: none; } .side-panel-summary-row { display: grid; grid-template-columns: 70px 1fr; gap: 5px; align-items: start; } .side-panel-summary-label { font-size: 12px; font-weight: 600; color: #c2cfe3; padding-top: 2px; letter-spacing: 0.01em; user-select: none; } .side-panel-summary-value { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .side-panel-summary-value > div { display: grid; gap: 5px; } .side-panel-airport { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: #e2e8f0; } .side-panel-airport-code { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 2px 1px; border-radius: 5px; background: rgb(8 145 178 / 22%); border: 1px solid rgb(34 211 238 / 28%); font-size: 11px; letter-spacing: 0.04em; color: #67e8f9; } .side-panel-airport-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / 88%); } .side-panel-destination { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; color: #e2e8f0; } .side-panel-destination-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 13px; color: #1c1919; margin-top: 5px; } .side-panel-destination-meta { font-size: 11px; color: rgb(255 255 255 / 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-summary-text { font-size: 13px; color: #1c1919; margin-top: 5px; } .side-panel-summary-text.muted { color: rgb(0 10 20 / 40%); font-style: italic; } .side-panel-summary-dates { display: flex; flex-direction: column; gap: 2px; } .side-panel-summary-nights { font-size: 12px; color: rgb(0 10 20 / 55%); text-shadow: none; } .side-panel-filter-section-header { padding-bottom: 10px; }.side-panel-filters { display: flex; flex-direction: column; } .side-panel-filter-group { display: flex; flex-direction: column; gap: 0px; min-width: 0; margin-bottom: 14px; } .side-panel-filter-group:last-child { margin-bottom: 0; } .side-panel-filter-title { font-size: 12px; font-weight: 600; color: #0f172a; user-select: none; } .side-panel-filter-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding-bottom: 10px; } .side-panel-filter-icon { flex-shrink: 0; width: 16px; font-size: 13px; color: #0284c7; text-align: center; line-height: 1; } .side-panel-filter-info { flex-shrink: 0; font-size: 11px; color: #0284c7; opacity: 0.65; cursor: help; transition: opacity 0.15s ease, color 0.15s ease; outline: none; } .side-panel-filter-info:hover, .side-panel-filter-info:focus-visible { opacity: 1; color: #0369a1; } .side-panel-filter-labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: rgb(0 10 20 / 75%); letter-spacing: 0.01em; line-height: 1; user-select: none; position: static; } .side-panel-filter-label-lo { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-filter-label-hi { text-align: right; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-filter-group .slider { margin: 0; } .side-panel-filter-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .side-panel-filter-radio { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 10px; background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 8%); color: rgb(255 255 255 / 85%); font-size: 12px; font-weight: 500; cursor: pointer; user-select: none;transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .side-panel-filter-radio:hover { background: rgb(255 255 255 / 9%); color: #fff; } .side-panel-filter-radio input { position: absolute; opacity: 0; pointer-events: none; } .side-panel-filter-radio.checked { background-color: #0284c7; color: #fff; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); }.side-panel-params-placeholder { padding: 14px; border-radius: 12px; background: rgb(255 255 255 / 4%); border: 1px dashed rgb(255 255 255 / 12%); font-size: 13px; color: rgb(255 255 255 / 55%); text-align: center; line-height: 1.5; } .side-panel-params-empty { font-size: 13px; color: rgb(255 255 255 / 45%); font-style: italic; padding: 4px 0; }@media (max-width: 1250px) { .side-panel { height: calc(100% - 30px); margin: 15px 0; } } @media (max-width: 900px) { } @media (max-width: 600px) { }.discover-new-search-row { display: flex; gap: 8px; padding: 4px 0 10px; } .discover-new-search-btn { flex: 1 1 100%; width: 100%; border: 0; border-radius: 999px; padding: 7px 16px; background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); } .discover-new-search-btn:hover { background-color: rgb(255 255 255 / 80%); color: #0e7490; } .discover-new-search-btn:active { background: rgba(8, 145, 178, 0.15); }.side-panel-filter-section { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%); } .side-panel-filter-section:last-child { margin-bottom: 0; } .side-panel-filter-section-header { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.06); margin-bottom: 2px; } .side-panel-filter-section-title { font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-filter-section-visible, .side-panel-filter-section-hidden { display: flex; flex-direction: column; gap: 7px; padding-left: 0; } .side-panel-filter-section-details { display: block; padding-left: 0; } .side-panel-filter-section-toggle { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin-top: 6px; font-size: 11px; font-weight: 600; color: #0284c7; background: rgb(2 132 199 / 8%); border-radius: 6px; width: fit-content; transition: background-color 0.15s ease, color 0.15s ease; } .side-panel-filter-section-toggle:hover { background: rgb(2 132 199 / 16%); color: #0369a1; } .side-panel-filter-section-toggle::-webkit-details-marker { display: none; } .side-panel-filter-section-toggle::marker { content: ''; } .side-panel-filter-section-toggle::before { content: ''; display: inline-block; width: 0; height: 0; flex-shrink: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid currentColor; transition: transform 0.2s ease; } .side-panel-filter-section-details[open] > .side-panel-filter-section-toggle::before { transform: rotate(180deg); } .side-panel-filter-section-toggle-label { white-space: nowrap; } .side-panel-filter-section-hidden { padding-top: 10px; } html { interpolate-size: allow-keywords; } details.side-panel-filter-section-details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.25s ease, content-visibility 0.25s; transition-behavior: allow-discrete; } details.side-panel-filter-section-details[open]::details-content { block-size: auto; }.side-panel-pane[data-mode="discover"] .side-panel-filter-group:not(.price) { display: flex; gap: 0; padding: 0; margin: 5px 0 0; border-radius: 0; background: none; box-shadow: none; } .side-panel-pane[data-mode="discover"] .side-panel-filter-group.price { display: flex !important; flex-direction: column !important; padding: 14px 14px 12px !important; margin-bottom: 12px !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%) !important; }.flights-new-search-row { display: flex; gap: 8px; padding: 4px 0 10px; } .flights-new-search-btn { flex: 1 1 100%; width: 100%; border: 0; border-radius: 999px; padding: 7px 16px; background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); } .flights-new-search-btn:hover { background-color: rgb(255 255 255 / 80%); color: #0e7490; } .flights-new-search-btn:active { background: rgba(8, 145, 178, 0.15); }.side-panel-pane[data-mode="flights"] .side-panel-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); }.side-panel-pane[data-mode="flights"] .side-panel-summary-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.05); } .side-panel-pane[data-mode="flights"] .side-panel-summary-row:last-child { border-bottom: none; padding-bottom: 0; }.side-panel-pane[data-mode="flights"] .side-panel-summary-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199);}.side-panel-pane[data-mode="flights"] .side-panel-summary-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: baseline; font-size: 13px; font-weight: 600; color: #1c1919; }.side-panel-pane[data-mode="flights"] .side-panel-summary-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: rgba(0, 10, 20, 0.4); font-size: 10px; cursor: pointer; transition: all 0.15s ease; position: relative; top: -2px; } .side-panel-pane[data-mode="flights"] .side-panel-summary-edit:hover { background: rgba(2, 132, 199, 0.1); color: #0284c7; }.side-panel-pane[data-mode="flights"] .side-panel-summary-edit-input { width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(2, 132, 199, 0.4); background: #fff; color: #1c1919; font-size: 13px; outline: none; }.flights-filters { display: flex; flex-direction: column; padding-top: 4px; } .flights-filter-group { display: flex; flex-direction: column; padding: 14px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%); } .flights-filter-group:last-child { margin-bottom: 0; }.flights-filter-title-row { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; } .flights-filter-title { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; user-select: none; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flights-filter-icon { flex-shrink: 0; width: 16px; font-size: 13px; color: #0284c7; text-align: center; } .flights-filter-info { flex-shrink: 0; font-size: 11px; color: rgba(0, 10, 20, 0.4); cursor: help; transition: color 0.15s ease; outline: none; } .flights-filter-info:hover, .flights-filter-info:focus-visible { color: #0284c7; }.flights-filter-labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: rgb(0 10 20 / 75%); letter-spacing: 0.01em; line-height: 1; user-select: none; } .flights-filter-label-lo { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flights-filter-label-hi { text-align: right; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.flights-filter-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .flights-filter-radio { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; background: rgba(0, 10, 20, 0.04); border: 1px solid rgba(0, 10, 20, 0.08); color: #1c1919; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.15s ease; } .flights-filter-radio:hover { background: rgba(2, 132, 199, 0.08); border-color: rgba(2, 132, 199, 0.2); color: #0369a1; } .flights-filter-radio input { position: absolute; opacity: 0; pointer-events: none; } .flights-filter-radio.checked { background-color: #0284c7; border-color: #0284c7; color: #fff; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); }.fc-panel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 25px; }.fc-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; margin-bottom: 0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .fc-section-header { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.06); margin-bottom: 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; } .fc-section-header i { flex-shrink: 0; width: 16px; font-size: 13px; text-align: center; opacity: 0.9; }.fc-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: #1c1919; padding: 2px 0; } .fc-info-value { font-weight: 600; }.fc-flight-card { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: 10px; background: rgba(0, 10, 20, 0.03); border: 1px solid rgba(0, 10, 20, 0.06); } .fc-flight-card + .fc-flight-card { margin-top: 6px; } .fc-flight-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fc-flight-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(27 144 204); } .fc-flight-price { font-size: 14px; font-weight: 700; color: #1c1919; font-variant-numeric: tabular-nums; white-space: nowrap; } .fc-flight-route { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1c1919; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .fc-flight-iata { font-size: 16px; font-weight: 700; color: #1c1919; letter-spacing: 0.02em; } .fc-flight-arrow { font-size: 10px; color: rgba(0, 10, 20, 0.4); } .fc-flight-cities { font-size: 11.5px; color: rgba(0, 10, 20, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-flight-time { font-size: 12px; color: rgba(0, 10, 20, 0.75); font-variant-numeric: tabular-nums; } .fc-flight-meta { font-size: 11px; color: rgba(0, 10, 20, 0.55); }.fc-passenger-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: rgba(0, 10, 20, 0.03); border: 1px solid rgba(0, 10, 20, 0.06); } .fc-passenger-row + .fc-passenger-row { margin-top: 6px; } .fc-passenger-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .fc-passenger-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #1c1919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-passenger-kind { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: #0284c7; background: rgba(2, 132, 199, 0.1); border: 1px solid rgba(2, 132, 199, 0.2); } .fc-passenger-meta { font-size: 11px; color: rgba(0, 10, 20, 0.55); }.fc-contact-row { font-size: 13px; color: rgba(0, 10, 20, 0.85); word-break: break-all; line-height: 1.4; }.fc-seat-segment-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0 2px; font-size: 11px; font-weight: 500; color: rgb(0 10 20); } .fc-seat-segment-header + .fc-seat-row { margin-top: 2px; } .fc-seat-dir { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0284c7; } .fc-seat-route { font-variant-numeric: tabular-nums; } .fc-seat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: rgba(0, 10, 20, 0.03); } .fc-seat-row + .fc-seat-row { margin-top: 4px; } .fc-seat-segment-header + .fc-seat-row + .fc-seat-segment-header { margin-top: 10px; } .fc-seat-name { min-width: 0; font-size: 12px; color: rgba(0, 10, 20, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-seat-designator { font-size: 13px; font-weight: 700; color: #008040; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .fc-seat-price { font-size: 11px; color: rgb(0 10 20); font-weight: 660; font-variant-numeric: tabular-nums; white-space: nowrap; } .fc-seat-price.is-free { color: #16a34a; }.fc-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: rgba(0, 10, 20, 0.75); } .fc-total-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-total-value { font-variant-numeric: tabular-nums; color: rgba(0, 10, 20, 0.9); white-space: nowrap; } .fc-total-grand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(0, 10, 20, 0.1); font-size: 14px; font-weight: 500; color: #1c1919; } .fc-total-grand span:last-child { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }.fc-booking-ref { padding: 12px 12px; border-radius: 10px; background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.2); font-size: 18px; font-weight: 800; letter-spacing: 0.06em; color: #0284c7; text-align: center; font-variant-numeric: tabular-nums; }@media (max-width: 900px) { .fc-panel { gap: 10px; } .fc-flight-route, .fc-flight-iata { font-size: 15px; } }.hotels-new-search-row { display: flex; gap: 8px; } .hotels-new-search-btn { flex: 1 1 100%; width: 100%; border: 0; border-radius: 999px; padding: 7px 16px; background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); margin-bottom: 10px; } .hotels-new-search-btn:hover { background-color: rgb(255 255 255 / 80%); color: #0e7490; } .hotels-new-search-btn:active { background: rgba(8, 145, 178, 0.15); }.side-panel-pane[data-mode="hotels"] .side-panel-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); }.side-panel-pane[data-mode="hotels"] .side-panel-filter-group { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .side-panel-pane[data-mode="hotels"] .side-panel-filter-group:last-child { margin-bottom: 0; }.side-panel-pane[data-mode="hotels"] .side-panel-filter-title-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.06); margin-bottom: 2px; } .side-panel-pane[data-mode="hotels"] .side-panel-filter-title { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.side-panel-pane[data-mode="hotels"] .side-panel-summary-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.05); } .side-panel-pane[data-mode="hotels"] .side-panel-summary-row:last-child { border-bottom: none; padding-bottom: 0; } .side-panel-pane[data-mode="hotels"] .side-panel-summary-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199); } .side-panel-pane[data-mode="hotels"] .side-panel-summary-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: baseline; font-size: 13px; font-weight: 600; color: #1c1919; } .side-panel-pane[data-mode="hotels"] .side-panel-summary-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: rgba(0, 10, 20, 0.4); font-size: 10px; cursor: pointer; transition: all 0.15s ease; position: relative; top: -2px; } .side-panel-pane[data-mode="hotels"] .side-panel-summary-edit:hover { background: rgba(2, 132, 199, 0.1); color: #0284c7; } .side-panel-pane[data-mode="hotels"] .side-panel-summary-edit-input { width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(2, 132, 199, 0.4); background: #fff; color: #1c1919; font-size: 13px; outline: none; }.hotels-side-dates { display: flex; flex-direction: column; gap: 4px; } .hotels-side-dates-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 13px; color: #1c1919; align-items: baseline; } .hotels-side-dates-label { color: rgba(0, 10, 20, 0.55); } .hotels-side-dates-value { font-weight: 600; } .hotels-side-dates-nights { font-size: 12px; color: rgba(0, 10, 20, 0.55); margin-top: 2px; }.side-panel-pane[data-mode="hotels"] .side-panel-filter-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #1c1919; margin-bottom: 2px; }.side-panel-filter-checkbox-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 -4px; } .side-panel-filter-checkbox-option { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #1c1919; transition: background-color 0.15s ease, color 0.15s ease; } .side-panel-filter-checkbox-option:hover { background-color: var(--airtix-highlight-bg); } .side-panel-filter-checkbox-option.checked { background-color: var(--airtix-highlight-bg); color: #0369a1; font-weight: 600; } .side-panel-filter-checkbox-option input { position: absolute; opacity: 0; pointer-events: none; } .side-panel-filter-checkbox-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; transition: all 0.15s ease; flex-shrink: 0; border: 1px solid rgb(0 10 20 / 35%); } .side-panel-filter-checkbox-box i { font-size: 10px; opacity: 0; transform: scale(0.6); transition: all 0.15s ease; color: #fff; } .side-panel-filter-checkbox-option:hover .side-panel-filter-checkbox-box { border-color: #0284c7; } .side-panel-filter-checkbox-option.checked .side-panel-filter-checkbox-box { background: #0284c7; border-color: #0284c7; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25); } .side-panel-filter-checkbox-option.checked .side-panel-filter-checkbox-box i { opacity: 1; transform: scale(1); } .side-panel-filter-checkbox-label { flex: 1 1 auto; font-size: 13px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel-filter-star-icons { display: inline-flex; gap: 2px; color: #f59e0b; font-size: 12px; } .side-panel-filter-count { margin-left: auto; padding-left: 8px; flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(0, 10, 20, 0.4); user-select: none; } .side-panel-filter-checkbox-option.checked .side-panel-filter-count { color: #0284c7; } .side-panel-filter-checkbox-option.is-disabled { opacity: 0.35; pointer-events: none; } .side-panel-filter-checkbox-option.is-disabled:hover { background: transparent; } .side-panel-filter-checkbox-option.is-hidden, .side-panel-facility-block.is-hidden { display: none; }.side-panel-facility-search { width: 100%; height: 32px; margin: 4px 0 8px; padding: 0 10px; box-sizing: border-box; border-radius: 99px; background-color: rgb(255 255 255 / 80%); border: 1px solid rgb(0 10 20 / 25%); color: #000000; font-family: inherit; font-size: 12px; outline: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .side-panel-facility-search:focus { background: #fff; border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12); } .side-panel-facility-search::placeholder { color: rgb(0 10 20 / 70%); } .side-panel-facility-list { display: flex; flex-direction: column; gap: 10px; } .side-panel-facility-block { display: flex; flex-direction: column; gap: 2px; } .side-panel-facility-category-title { padding: 4px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 10, 20, 0.45); } .side-panel-facility-category-list { display: flex; flex-direction: column; margin-left: -4px; gap: 2px; } .side-panel-facility-empty { padding: 6px 2px; font-size: 12px; font-style: italic; color: rgba(0, 10, 20, 0.4); } .side-panel-facility-list mark { background: rgba(2, 132, 199, 0.18); color: #0284c7; border-radius: 2px; }.side-panel-applied-chips { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; } .side-panel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 9px; border-radius: 999px; background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.25); color: #0369a1; font-size: 11px; font-weight: 600; } .side-panel-chip-label { white-space: nowrap; } .side-panel-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: none; background: rgba(0, 10, 20, 0.08); color: rgba(0, 10, 20, 0.6); cursor: pointer; font-size: 8px; line-height: 1; transition: all 0.12s ease; } .side-panel-chip-remove:hover { background: #dc2626; color: #fff; }.hcs-side { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 25px; }.hcs-side-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; margin-bottom: 0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hcs-side-summary-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.05); } .hcs-side-summary-row:last-child { border-bottom: none; padding-bottom: 0; } .hcs-side-summary-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199); } .hcs-side-summary-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: baseline; font-size: 13px; font-weight: 600; color: #1c1919; }.hcs-side-dates { display: flex; flex-direction: column; gap: 4px; } .hcs-side-dates-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 13px; color: #1c1919; align-items: baseline; } .hcs-side-dates-label { color: rgba(0, 10, 20, 0.55); } .hcs-side-dates-value { font-weight: 600; } .hcs-side-dates-nights { font-size: 12px; color: rgba(0, 10, 20, 0.55); margin-top: 2px; }.hcs-side-group { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; margin-bottom: 0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hcs-side-group-title-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.06); margin-bottom: 2px; } .hcs-side-group-title { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hcs-side-hotel { display: flex; flex-direction: column; gap: 8px; } .hcs-side-hotel-name { margin: 0; font-size: 13px; font-weight: 700; color: #1c1919; line-height: 1.35; } .hcs-side-hotel-meta { font-size: 12px; color: rgba(0, 10, 20, 0.6); } .hcs-side-hotel-meta i { color: #0284c7; width: 14px; text-align: center; } .hcs-side-hotel-rating { display: inline-flex; align-items: center; gap: 8px; } .hcs-side-hotel-score { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 800; color: #fff; background: #0284c7; font-variant-numeric: tabular-nums; } .hcs-side-hotel-reviews { font-size: 12px; color: rgba(0, 10, 20, 0.6); } .hcs-side-hotel-city { font-size: 12px; color: rgba(0, 10, 20, 0.55); } .hcs-side-hotel-divider { height: 1px; background: rgba(0, 10, 20, 0.08); margin: 6px 0; }.hcs-side-room-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; margin-top: 4px; } .hcs-side-hotel-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; } .hcs-side-hotel-total-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199); } .hcs-side-total-price { font-size: 16px; font-weight: 700; color: #1c1919; font-variant-numeric: tabular-nums; } .hcs-side-hotel-cancellation { font-size: 11px; font-weight: 600; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; } .hcs-side-hotel-cancellation.is-refundable { color: #16a34a; } .hcs-side-hotel-cancellation.is-non-refundable { color: #dc2626; }.hds-side { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 25px; }.hds-side-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; margin-bottom: 0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hds-side-summary-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 10, 20, 0.05); } .hds-side-summary-row:last-child { border-bottom: none; padding-bottom: 0; } .hds-side-summary-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199); } .hds-side-summary-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: baseline; font-size: 13px; font-weight: 600; color: #1c1919; } .hds-side-summary-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: rgba(0, 10, 20, 0.4); font-size: 10px; cursor: pointer; transition: all 0.15s ease; position: relative; top: -2px; } .hds-side-summary-edit:hover { background: rgba(2, 132, 199, 0.1); color: #0284c7; }.hds-side-dates { display: flex; flex-direction: column; gap: 4px; } .hds-side-dates-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 13px; color: #1c1919; align-items: baseline; } .hds-side-dates-label { color: rgba(0, 10, 20, 0.55); } .hds-side-dates-value { font-weight: 600; } .hds-side-dates-nights { font-size: 12px; color: rgba(0, 10, 20, 0.55); margin-top: 2px; }.hds-side-summary-group { display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 12px; margin-bottom: 0; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0, 10, 20, 0.5); } .hds-side-summary-title-row { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 2px; } .hds-side-summary-title { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hds-side-hotel { display: flex; flex-direction: column; gap: 8px; } .hds-side-hotel-name { margin: 0; font-size: 15px; font-weight: 600; color: #1c1919; line-height: 1.35; } .hds-side-hotel-meta { font-size: 13px; color: rgba(0, 10, 20, 0.6); } .hds-side-hotel-rating { display: inline-flex; align-items: center; gap: 8px; } .hds-side-hotel-score { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 6px; font-size: 14px; font-weight: 800; color: #fff; background: #0284c7; font-variant-numeric: tabular-nums; } .hds-side-hotel-reviews { font-size: 13px; color: rgba(0, 10, 20, 0.6); } .hds-side-hotel-addr { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: rgba(0, 10, 20, 0.75); line-height: 1.4; } .hds-side-hotel-addr i { color: #0284c7; font-size: 12px; margin-top: 3px; flex-shrink: 0; } .hds-side-hotel-city { font-size: 13px; color: rgba(0, 10, 20, 0.55); }.hds-side-room-wrap { display: flex; flex-direction: column; gap: 8px; overflow: visible; animation: hds-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes hds-fade-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .hds-side-room-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; margin-top: 4px; } .hds-side-hotel-divider { height: 1px; background: rgba(0, 10, 20, 0.08); margin: 6px 0; } .hds-side-hotel-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; } .hds-side-hotel-total-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(2 132 199); } .hds-side-total-price { font-size: 16px; font-weight: 700; color: #1c1919; font-variant-numeric: tabular-nums; } .hds-side-hotel-nights { font-size: 12px; color: rgba(0, 10, 20, 0.55); text-align: right; margin-top: 2px; }.hds-side-btn-wrap { position: relative; height: 55px; width: 100%; } .hds-side-book-btn { position: absolute; top: 8px;left: 50%; transform: translateX(-50%); width: 90%;padding: 12px 28px; font-size: 15px; letter-spacing: 1px; } .hds-side-book-btn:hover, .hds-side-book-btn.is-reserving { transform: scale(1.06) translate(-101px, 0) !important; }.hds-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 60px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(0, 10, 20, 0.15) transparent; } .hds-side-body::-webkit-scrollbar { width: 6px; } .hds-side-body::-webkit-scrollbar-thumb { background: rgba(0, 10, 20, 0.15); border-radius: 999px; } .hds-side-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 10, 20, 0.25); }.side-panel-pane[data-mode="search"] .side-panel-region-scroll { display: flex; flex-direction: column; } .search-pane { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; box-sizing: border-box; border-radius: 17px; overflow: hidden; }.search-pane-header { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; } .search-pane-actions { display: flex; flex-direction: column;gap: 8px; padding: 4px 0 0 0; }.search-pane-action-btn { flex: 1 1 100%; width: 100%; border: 0; border-radius: 999px; padding: 7px 16px; background: #fff; color: rgb(0 10 20); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); } .search-pane-action-btn:hover { background-color: rgb(255 255 255 / 80%); color: #0e7490; } .search-pane-action-btn:active { background: rgba(8, 145, 178, 0.15); } .search-pane-action-btn:disabled, .search-pane-action-btn.disabled { opacity: 50%; cursor: not-allowed; }.search-pane-filter { display: flex; align-items: center; padding: 0 14px; height: 38px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 10, 20, 0.12); box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%); transition: border-color 0.15s ease, box-shadow 0.15s ease; flex-shrink: 0; } .search-pane-filter:focus-within { border-color: rgba(2, 132, 199, 0.55); box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%), 0 0 0 3px rgba(2, 132, 199, 0.12); } .search-pane-filter-icon { flex-shrink: 0; font-size: 13px; color: #0284c7; margin-right: 10px; } .search-pane-filter-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #0f172a; font-family: inherit; font-size: 13px; } .search-pane-filter-input::placeholder { color: rgba(0, 10, 20, 0.4); }.search-pane-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 24px; } .search-pane-list-scroll::-webkit-scrollbar { width: 6px; } .search-pane-list-scroll::-webkit-scrollbar-thumb { background: rgba(0, 10, 20, 0.15); border-radius: 999px; } .search-pane-list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 10, 20, 0.25); } .search-pane-list { display: flex; flex-direction: column; gap: 12px; } .search-history-empty { padding: 20px 16px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%); font-size: 13px; color: rgba(0, 10, 20, 0.5); text-align: center; } .search-history-group { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px -10px rgba(0 10 20 / 50%); } .search-history-group-label { display: flex; align-items: center; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(0, 10, 20, 0.06); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #0284c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.search-history-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #0f172a; transition: background-color 0.12s ease; } .search-history-item:hover { background: rgba(2, 132, 199, 0.06); } .search-history-item.is-current { background: rgba(2, 132, 199, 0.1); color: #0284c7; font-weight: 600; } .search-history-item.is-foreign { color: rgba(120, 60, 160, 0.9); } .search-history-item.is-foreign .search-history-item-name::before { content: '\f0c1'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 6px; font-size: 10px; color: rgba(120, 60, 160, 0.65); } .search-history-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 15px; } .search-history-item-name.is-hidden { display: none; }.search-history-item-menu-btn { position: absolute; top: 6px; right: 8px; flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: rgba(0, 10, 20, 0.5); cursor: pointer; } .search-history-item:hover .search-history-item-menu-btn { display: flex; } .search-history-item-menu-btn:hover { background: rgba(0, 10, 20, 0.08); color: #0f172a; } .search-history-item-menu { position: absolute; top: 100%; right: 4px; z-index: 50; min-width: 130px; padding: 4px; background: #fff; border: 1px solid rgba(0, 10, 20, 0.08); border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .search-history-item-menu-item { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: #0f172a; font-family: inherit; font-size: 12px; text-align: left; cursor: pointer; } .search-history-item-menu-item:hover { background: rgba(0, 10, 20, 0.05); } .search-history-item-menu-item.is-danger { color: #dc2626; } .search-history-item-menu-item.is-danger:hover { background: rgba(220, 38, 38, 0.08); }.search-history-item-rename-input { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 1px solid rgba(2, 132, 199, 0.5); border-radius: 4px; background: #fff; color: #0f172a; font-family: inherit; font-size: 13px; } .search-history-item-rename-input:focus { outline: none; border-color: rgba(2, 132, 199, 0.9); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12); }#center-viewport-search { --search-content-width: 100%; width: 100%; height: 100%; overflow: hidden; min-height: 0; min-width: 0; }.search-results-pane { position: absolute; inset: 0; z-index: 1; } .search-results-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 32px 24px 100px 24px; } .search-results-body { margin: 0 auto; position: relative; display: flex; flex-direction: column; gap: 16px; max-width: min(calc(100% - 48px), 1250px); width: 100%; }.search-user-card { order: -1; align-self: flex-end; max-width: 75%; position: relative; padding: 14px 20px; border-radius: 20px; color: #fff; font-size: 15px; line-height: 1.5; word-wrap: break-word; box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.5); } .search-user-card p { margin: 0 0 6px 0; } .search-user-card p:last-child { margin-bottom: 0; } .search-user-card .search-user-image { display: flex; flex-wrap: wrap; gap: 8px; } .search-user-card .search-user-image img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; display: block; flex: 0 0 auto; max-width: 100px; max-height: 100px; }.search-thinker-card { align-self: center; width: 100%; max-width: 640px; position: relative; padding: 30px 40px; border-radius: 28px; background-color: rgb(255 255 255 / 87%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .search-thinker-card-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }.search-results-card { position: relative; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 25px; border-radius: 28px; } .search-results-card .ff-backdrop-image { background-image: linear-gradient(rgb(255 255 255 / 85%), rgb(255 255 255 / 85%)), var(--ff-image, none); }.search-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }.search-shell { display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(calc(100% - 48px), 1250px); height: 450px; padding: 30px; border-radius: 28px; background-color: rgb(255 255 255 / 87%); box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); box-sizing: border-box; pointer-events: auto; will-change: top, transform, opacity; transition: top 700ms cubic-bezier(0.16, 1, 0.3, 1), left 600ms cubic-bezier(0.25, 1, 0.5, 1), width 600ms cubic-bezier(0.25, 1, 0.5, 1), height 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), padding 700ms cubic-bezier(0.16, 1, 0.3, 1), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .search-shell { left: calc(50% + 158px); width: min(calc(100% - 348px), 1250px); } .search-shell::after { content: ''; position: absolute; left: 0; width: 3px; height: calc(100% - 56px); border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: linear-gradient(180deg, rgb(2, 157, 255), rgb(37, 39, 255), rgb(160, 0, 186), rgb(235, 5, 124), rgb(255, 64, 0)); box-shadow: 1px 0 1px 1px rgb(255 255 255 / 55%), 1px 1px 7px 0px rgb(0 10 20 / 99%); } .search-shell-inner { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; box-sizing: border-box; transition: padding 500ms cubic-bezier(0.16, 1, 0.3, 1); }#center-viewport-search.is-busy .search-shell, #center-viewport-search.is-results .search-shell, #center-viewport-search.is-error .search-shell { top: calc(100% - 10px); transform: translate(-50%, -100%); border-radius: 37px; padding: 5px; height: auto; min-height: 84px; } #center-viewport-search.is-busy .search-shell-inner, #center-viewport-search.is-results .search-shell-inner, #center-viewport-search.is-error .search-shell-inner { gap: 0; }#center-viewport-search.search-scrolled-up.is-busy .search-shell, #center-viewport-search.search-scrolled-up.is-results .search-shell, #center-viewport-search.search-scrolled-up.is-error .search-shell { opacity: 0; pointer-events: none; }.search-header { flex: 0 0 auto; display: grid; grid-template-rows: 1fr; width: 100%; margin-bottom: 70px; opacity: 1; overflow: hidden; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1), margin 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease; } .search-header > .search-title { min-height: 0; overflow: hidden; } #center-viewport-search.is-busy .search-header, #center-viewport-search.is-results .search-header, #center-viewport-search.is-error .search-header { grid-template-rows: 0fr; padding-bottom: 0; margin: 0; opacity: 0; } h1.search-title { margin: 0; font-size: 2.25em; font-weight: 800; color: #1c1919; text-transform: uppercase; text-shadow: none; font-family: 'times'; line-height: 1; text-align: center; }.search-drop-zone { width: 100%; margin: 0 0 12px 0; padding: 18px 16px; border: 2px dashed rgba(0, 10, 20, 0.35); border-radius: 20px; color: rgba(0, 10, 20, 0.75); font-size: 14px; text-align: center; background: rgba(0, 10, 20, 0.03); transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .search-drop-zone:hover, .search-drop-zone.is-dragover, .search-drop-zone.is-active { border-color: rgba(0, 10, 20, 0.65); background: rgba(8, 145, 178, 0.08); color: #1c1919; } .search-drop-zone:empty { display: none; }.search-error-message { max-width: 480px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.85); padding: 24px; border-radius: 14px; background: rgb(127 29 29 / 35%); border: 1px solid rgb(239 68 68 / 40%); margin: 0 auto; }.search-input-wrapper { flex: 0 0 auto; display: flex; justify-content: center; width: 100%; } .search-form { position: relative; width: var(--search-content-width); max-width: 100%; display: flex; align-items: flex-end; gap: 8px; border-radius: 99px; background: rgba(255 255 255 / 85%); border: 1px solid rgba(0 10 20 / 15%); box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); padding: 18px 105px 22px 25px; } .search-textarea { flex: 1 1 auto; resize: none; border: none; outline: none; background: transparent; color: #1c1919; font-family: inherit; font-size: 18px; line-height: 1.4; max-height: 120px; min-height: 24px; overflow-y: auto; } .search-textarea::placeholder { color: rgba(0, 10, 20, 0.55); transition: opacity 0.35s ease, color 0.35s ease; opacity: 1; } .search-textarea.placeholder-fade::placeholder { opacity: 0; color: transparent; } .search-textarea:disabled { opacity: 0.5; cursor: not-allowed; } .search-attach-btn { position: relative; top: -1px; left: -6px; color: rgba(0, 10, 20, 0.6); background: transparent; border: none; cursor: pointer; font-size: 16px; padding: 0px 6px; flex-shrink: 0; transition: color 0.15s ease; } .search-attach-btn:hover { color: #1c1919; } .search-submit-btn { position: absolute; top: calc(100% - 4px); left: calc(100% - 5px); translate: -100% -100%; padding: 20px 30px; text-shadow: 0px 1px 3px rgb(0 0 0 / 50%); display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: none; outline: none; cursor: pointer; color: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .search-submit-btn:hover:not(:disabled) { transform: scale(1.05); border-color: rgb(125 211 252 / 30%); color: #fff; background: var(--airtix-gradient); box-shadow: var(--airtix-glow); } .search-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; background: rgba(0, 10, 20, 0.15); }.search-turn { display: flex; flex-direction: column; } .search-user-bubble { align-self: flex-end; max-width: 80%; padding: 10px 16px; border-radius: 18px; background: rgba(120, 170, 255, 0.15); border: 1px solid rgba(120, 170, 255, 0.25); color: #fff; font-size: 14px; line-height: 1.5; word-wrap: break-word; } .search-user-bubble p { margin: 0 0 6px 0; } .search-user-bubble p:last-child { margin-bottom: 0; } .search-assistant-text { align-self: stretch; color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.6; word-wrap: break-word; } .search-assistant-text p { margin: 0 0 12px 0; } .search-assistant-text p:last-child { margin-bottom: 0; }@media (max-width: 1250px) { .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .search-shell { min-height: 500px; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .search-header { padding-bottom: 45px; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) h1.search-title { font-size: 1.75em; } }@media (max-width: 900px) { .search-shell { left: 50% !important; width: min(calc(100% - 48px), 1250px) !important; min-height: 500px; padding: 24px 20px; border-radius: 20px; } .search-header { margin-bottom: 90px; } h1.search-title { font-size: 1.75em; } #center-viewport-search.is-busy .search-shell, #center-viewport-search.is-results .search-shell, #center-viewport-search.is-error .search-shell { padding: 5px; min-height: 84px; } .search-results-feed { padding: 20px 16px 180px 16px; } .search-results-card { padding: 20px; border-radius: 20px; } .search-thinker-card { padding: 20px 24px; border-radius: 20px; } .search-user-card { max-width: 90%; } .search-user-card .search-user-image img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; } }@media (max-width: 600px) { .search-shell { position:relative; min-height: 550px; top: 49%; width: min(calc(100% - 20px), 1250px) !important; left: 50% !important; padding: 20px; border-radius: 20px; }#center-viewport-search.is-busy .search-shell::before, #center-viewport-search.is-results .search-shell::before, #center-viewport-search.is-error .search-shell::before { opacity: 0; } .search-header { position: relative; padding-left: 15px; } h1.search-title { font-size: 1.65em; line-height: 1.2; text-align: left; }#center-viewport-search.is-busy .search-shell, #center-viewport-search.is-results .search-shell, #center-viewport-search.is-error .search-shell { top: calc(100% - 8px); padding: 4px; border-radius: 30px; min-height: 76px; } .search-form { padding: 14px 20px 16px 20px; } .search-submit-btn { padding: 16px 24px; font-size: 15px; } .search-attach-btn { top: 7px; } .search-textarea { font-size: 16px; } }.flight-search-panel { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; isolation: isolate; } .flight-search-panel--form {} .flight-search-panel--results {}.flight-shell { display: flex; align-items: center; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: min(calc(100% - 48px), 1250px); height:450px; padding: 30px; border-radius: 28px; background-color: rgb(255 255 255 / 87%); box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); will-change: top, transform, opacity; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; } .flight-shell::after { content: ''; position: absolute; left: 0; width: 3px; height: calc(100% - 56px); border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: linear-gradient(180deg, rgb(2, 157, 255), rgb(37, 39, 255), rgb(160, 0, 186), rgb(235, 5, 124), rgb(255, 64, 0)); box-shadow: 1px 0 1px 1px rgb(255 255 255 / 55%), 1px 1px 7px 0px rgb(0 10 20 / 99%); }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-shell { left: calc(50% + 158px); width: min(calc(100% - 348px), 1250px); }.flight-shell-inner { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; box-sizing: border-box; }.flight-header { flex: 0 0 auto; display: grid; grid-template-rows: 1fr; width: 100%; opacity: 1; overflow: hidden; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1), margin 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease; } .flight-header > .flight-title { min-height: 0; overflow: hidden; } h1.flight-title { margin: 0; font-size: 2.25em; font-weight: 800; color: #1c1919; text-transform: uppercase; text-shadow: none; font-family: 'times'; line-height: 1; text-align: center; }.flight-search-controls { display: grid; grid-template-columns: minmax(0, 20fr) minmax(0, 20fr) minmax(0, 15fr) minmax(0, 15fr) 180px; gap: 5px; width: 100%; } .flight-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px 12px 25px; min-height: 55px; border-radius: 99px; background: rgba(255 255 255 / 85%); border: 1px solid rgba(0 10 20 / 15%); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); } .flight-field:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); } .flight-field.is-invalid { background: rgb(255 214 236); border-color: rgb(236 72 153 / 55%); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .flight-field.is-invalid:hover { background: rgb(255 196 226); border-color: rgb(236 72 153 / 75%); } .flight-field.is-invalid .flight-field-label { color: rgb(190 24 93 / 75%); } .flight-field.is-invalid .flight-field-watermark { color: rgb(236 72 153 / 60%); } .flight-field-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 10, 20, 0.55); } .flight-input-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .flight-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #1c1919; text-shadow: none; font-family: inherit; font-size: 15px; padding: 0; } .flight-input::placeholder { color: rgb(0 10 20 / 65%); } .flight-field-check { color: #0891b2; font-size: 14px; flex: 0 0 auto; } .flight-field-value { font-size: 15px; font-weight: 500; color: #1c1919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-field-value.muted { color: rgb(0 10 20 / 65%); } .flight-field-watermark { position: absolute; right: 26px; top: 8px; color: rgb(2 132 199 / 50%); font-size: 16px; pointer-events: none; transition: color 0.15s ease; }.flight-search-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 30px; height: 61px; max-width: 100%; width: 100%; border: none; outline: none; border-radius: 99px; cursor: pointer; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; } .flight-search-btn:hover { transform: translateY(-1px) scale(1.02); background: var(--airtix-gradient); box-shadow: var(--airtix-glow); } .flight-search-btn:active { transform: translateY(0) scale(0.99); }.flight-search-options { grid-column: 1 / 2; display: flex; align-items: flex-start; padding: 4px 4px 4px 18px; } .flight-direct-option { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .flight-direct-checkbox { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .flight-direct-custom-box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.3); background-color: #fff; transition: all 0.15s ease; border: 1px solid rgba(0 10 20 / 18%); box-shadow: 0 1px 3px -2px rgb(0 0 0 / 35%); } .flight-direct-custom-box i { font-size: 14px; padding-top: 2px; opacity: 0; transform: scale(0.6); transition: all 0.15s ease; color: #fff; } .flight-direct-option:hover .flight-direct-custom-box { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); } .flight-direct-checkbox:checked + .flight-direct-custom-box { background: #0891b2; border-color: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); } .flight-direct-checkbox:checked + .flight-direct-custom-box i { opacity: 1; transform: scale(1); } .flight-direct-label { font-size: 14px; color: rgba(0, 10, 20); letter-spacing: 0.01em; text-shadow: none; transition: color 0.15s ease; } .flight-direct-option:hover .flight-direct-label { color: #1c1919; }.flight-destinations-subtray { grid-column: 2 / 4; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 2px 0; width: 100%; min-width: 0; box-sizing: border-box; } .flight-destinations-pills { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; } .flight-destinations-pills:empty { display: none; } .flight-destinations-actions { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; transition: grid-template-rows 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.20s ease, margin-top 0.28s cubic-bezier(0.25, 1, 0.5, 1); } .flight-destinations-actions.is-visible { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; } .flight-destinations-actions-inner { display: flex; flex-direction:column; align-items: flex-start; gap: 3px; min-height: 0; overflow: hidden; padding:4px 4px 4px 18px; } .flight-dest-pill { display: flex; position: relative; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 10, 20, 0.12); color: #1c1919; font-size: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .flight-dest-pill-icon { flex: 0 0 auto; color: #0891b2; font-size: 11px; } .flight-dest-pill-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flight-dest-pill-remove { position: absolute; top: 8px; right: 9px; background: none; border: none; padding: 0; margin-left: 2px; color: rgba(0, 10, 20, 0.55); cursor: pointer; display: inline-flex; align-items: center; transition: color 0.15s ease; font-size: 10px; } .flight-dest-pill-remove:hover { color: #dc2626; }.flight-add-dest-btn, .flight-add-flight-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 5px 25px; border-radius: 999px; background: transparent; font-family: inherit; font-size: 12px; cursor: pointer; transition: all 0.15s ease; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); color: #1c1919; text-shadow: none; box-shadow: none; box-shadow: 0 4px 16px -10px rgb(0 0 0 / 35%); } .flight-add-dest-btn > i, .flight-add-flight-btn > i { position: absolute; top: 7px; left: 9px; } .flight-add-dest-btn:hover, .flight-add-flight-btn:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); }.flight-extra-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; width: 100%; } .flight-extra-rows:empty { display: none; } .flight-row-collapse { display: grid; grid-template-rows: 1fr; opacity: 1; width: 100%; transition: grid-template-rows 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.20s ease; } .flight-row-collapse.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; } .flight-row-collapse > .flight-row--extra { min-height: 0; overflow: hidden; } .flight-row--extra { display: grid; grid-template-columns: minmax(0, 20fr) minmax(0, 20fr) minmax(0, 15fr) minmax(0, 15fr) 180px; gap: 5px; width: 100%; }.flight-row--extra .flight-field-dates { grid-column: 3 / 4; }.flight-remove-row-btn { grid-column: 4 / 5; justify-self: start; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; min-width: 55px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 10, 20, 0.12); color: rgba(0, 10, 20, 0.7); font-family: inherit; font-size: 16px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .flight-remove-row-btn:hover { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.4); color: #dc2626; }.flight-controls-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .flight-controls-layer > .flight-shell { pointer-events: auto; }@media (max-width: 1250px) { .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-shell { min-height: 500px; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-shell-inner { gap: 45px; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) :is(.flight-search-controls, .flight-row--extra) { grid-template-columns: 55fr 45fr; max-width: 600px; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) h1.flight-title { font-size: 1.75em; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #flight-origin-field { order: 1; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #flight-destinations-field { order: 3; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #flight-dates-field { order: 2; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #flight-travelers-field { order: 4; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-search-btn { grid-column: 1 / -1; margin: 0 auto 0; max-width:min(235px, 80%); width:100%; order: 100; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-search-options { grid-column: 2 / 3; order: 20; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-destinations-subtray { grid-column: 1 / 2; order: 10; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-row--extra .flight-field-dates { grid-column: 1 / 3; } .app-wrapper.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .flight-remove-row-btn { grid-column: 1 / 3; justify-self: stretch; min-height: 44px; } } @media (max-width: 900px) { .flight-shell { left:50% !important; width: min(calc(100% - 48px), 1250px) !important; min-height: 500px; }.app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-shell-inner { gap: 45px; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) :is(.flight-search-controls, .flight-row--extra) { grid-template-columns: 55fr 45fr; max-width: 600px; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) h1.flight-title { font-size: 1.75em; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #flight-origin-field { order: 1; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #flight-destinations-field { order: 3; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #flight-dates-field { order: 2; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #flight-travelers-field { order: 4; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-search-btn { grid-column: 1 / -1; margin: 0 auto 0; max-width:min(235px, 80%); width:100%; order: 100; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-search-options { grid-column: 2 / 3; order: 20; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-destinations-subtray { grid-column: 1 / 2; order: 10; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-row--extra .flight-field-dates { grid-column: 1 / 3; } .app-wrapper.app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .flight-remove-row-btn { grid-column: 1 / 3; justify-self: stretch; min-height: 44px; } } @media (max-width: 600px) { .flight-shell { min-height: 550px !important; top: 49% !important; width: min(calc(100% - 20px), 1250px) !important; left: calc(50%) !important; } .flight-shell-inner { gap: 25px !important; } :is(.flight-search-controls, .flight-row--extra) { grid-template-columns: 1fr !important; max-width: 600px !important; } .flight-header { position: relative; padding-left: 15px; overflow:visible; } h1.flight-title { font-size: 1.65em !important; line-height: 1.2; text-align: left; } .flight-field { padding: 6px 18px 6px 25px; } #flight-origin-field { order: 1 !important; } #flight-destinations-field { order: 2 !important; } #flight-dates-field { order: 3 !important; } #flight-travelers-field { order: 4 !important; } #flight-destinations-actions { display: none !important; } .flight-search-btn { grid-column: 1 / 2 !important; margin: 0 auto 0 !important; max-width:min(235px, 65%) !important; width:100% !important; order: 100 !important; margin-top: 15px !important; height: 42px; } .flight-search-options { grid-column: 1 / 2 !important; order: 20 !important; padding-left: 18px !important; } .flight-destinations-subtray { grid-column: 1 / 2 !important; order: 10 !important; } .flight-row--extra .flight-field-dates { grid-column: 1 / 2 !important; } .flight-remove-row-btn { grid-column: 1 / 2 !important; justify-self: stretch !important; min-height: 44px !important; } }.hotel-search-panel { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; isolation: isolate; } .hotel-search-panel--form {}.hotel-shell { display: flex; flex-direction: column; justify-content: center; position: absolute; left: calc(50% + 158px); top: 45%; transform: translate(-50%, -50%); width: min(calc(100% - 348px), 1250px); height: 450px; padding: 30px; border-radius: 28px; background-color: rgb(255 255 255 / 87%); box-shadow: 0 0 28px -15px rgb(0 0 0 / 70%); will-change: top, transform, opacity; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; } .hotel-shell::after { content: ''; position: absolute; left: 0; width: 3px; height: calc(100% - 56px); border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: linear-gradient(180deg, rgb(2, 157, 255), rgb(37, 39, 255), rgb(160, 0, 186), rgb(235, 5, 124), rgb(255, 64, 0)); box-shadow: 1px 0 1px 1px rgb(255 255 255 / 55%), 1px 1px 7px 0px rgb(0 10 20 / 99%); } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-shell { left: 50%; width: min(calc(100% - 48px), 1250px); } .hotel-shell-inner { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; box-sizing: border-box; }.hotel-header { flex: 0 0 auto; display: grid; grid-template-rows: 1fr; width: 100%; opacity: 1; overflow: hidden; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1), margin 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease; } .hotel-header > .hotel-title { min-height: 0; overflow: hidden; } h1.hotel-title { margin: 0; font-size: 2.25em; font-weight: 800; color: #1c1919; text-transform: uppercase; text-shadow: none; font-family: 'times'; line-height: 1; text-align: center; }.hotel-search-controls { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 180px; gap: 5px; width: 100%; } .hotel-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px 12px 25px; min-height: 55px; border-radius: 99px; background: rgba(255 255 255 / 85%); border: 1px solid rgba(0 10 20 / 15%); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); } .hotel-field:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); }.hotel-field.is-invalid { background: rgb(255 214 236); border-color: rgb(236 72 153 / 55%); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .hotel-field.is-invalid:hover { background: rgb(255 196 226); border-color: rgb(236 72 153 / 75%); } .hotel-field.is-invalid .hotel-field-label { color: rgb(190 24 93 / 75%); } .hotel-field.is-invalid .hotel-field-watermark { color: rgb(236 72 153 / 60%); } .hotel-field-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 10, 20, 0.55); } .hotel-input-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .hotel-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #1c1919; text-shadow: none; font-family: inherit; font-size: 15px; padding: 0; } .hotel-input::placeholder { color: rgba(0, 10, 20, 0.4); } .hotel-field-check { color: #0891b2; font-size: 14px; flex: 0 0 auto; } .hotel-field-value { font-size: 15px; font-weight: 500; color: #1c1919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotel-field-value.muted { color: rgba(0, 10, 20, 0.4); } .hotel-field-watermark { position: absolute; right: 26px; top: 8px; color: rgb(2 132 199 / 50%); font-size: 16px; pointer-events: none; transition: color 0.15s ease; } .hotel-field:hover .hotel-field-watermark { color: rgba(0, 10, 20, 0.45); }.hotel-search-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 30px; height: 61px; max-width: none; width: 100%; border: none; outline: none; border-radius: 99px; cursor: pointer; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; } .hotel-search-btn:hover { transform: translateY(-1px) scale(1.02); background: var(--airtix-gradient); box-shadow: var(--airtix-glow); } .hotel-search-btn:active { transform: translateY(0) scale(0.99); }.hotel-destinations-subtray { grid-column: 1 / 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 2px 0; width: 100%; min-width: 0; box-sizing: border-box; } .hotel-destinations-pills { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; } .hotel-destinations-pills:empty { display: none; } .hotel-dest-pill { display: flex; position: relative; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 10, 20, 0.12); color: #1c1919; font-size: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .hotel-dest-pill-icon { flex: 0 0 auto; color: #0891b2; font-size: 11px; } .hotel-dest-pill-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hotel-dest-pill-remove { position: absolute; top: 8px; right: 9px; background: none; border: none; padding: 0; margin-left: 2px; color: rgba(0, 10, 20, 0.55); cursor: pointer; display: inline-flex; align-items: center; transition: color 0.15s ease; font-size: 10px; } .hotel-dest-pill-remove:hover { color: #dc2626; }.hotel-applied-filters { width: calc(100% - 180px - 5px); height: 0; overflow: hidden; transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1); will-change: height; } .hotel-applied-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 14px 12px; } .hotel-applied-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 4px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(0 10 20 / 15%); color: rgb(0 10 20); font-size: 12px; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); transition: background-color 0.15s ease, border-color 0.15s ease; } .hotel-applied-chip:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); } .hotel-applied-chip-label { white-space: nowrap; } .hotel-applied-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border-radius: 50%; border: none; background: rgba(0, 10, 20, 0.08); color: rgba(0, 10, 20, 0.55); cursor: pointer; font-size: 8px; line-height: 1; transition: all 0.12s ease; } .hotel-applied-chip-remove:hover { background: rgb(220 38 38 / 85%); color: #fff; }.hotel-controls-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .hotel-controls-layer > .hotel-shell { pointer-events: auto; }@media (max-width: 1250px) { .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-shell { min-height: 500px; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-shell-inner { gap: 45px; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-search-controls { grid-template-columns: 55fr 45fr; max-width: 600px; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) h1.hotel-title { font-size: 1.75em; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #hotel-destination-field { order: 1; grid-column: 1 / -1; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #hotel-dates-field { order: 2; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) #hotel-travelers-field { order: 3; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-destinations-subtray { order: 10; grid-column: 1 / -1; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-search-btn { order: 100; grid-column: 1 / -1; margin: 0 auto; max-width: min(235px, 80%); width: 100%; } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .hotel-applied-filters { width: 100%; } }@media (max-width: 900px) { .hotel-shell { left: 50% !important; width: min(calc(100% - 48px), 1250px) !important; min-height: 500px; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-shell-inner { gap: 45px; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-search-controls { grid-template-columns: 65fr 45fr; max-width: 600px; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) h1.hotel-title { font-size: 1.75em; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #hotel-destination-field { order: 1; grid-column: 1 / -1; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #hotel-dates-field { order: 2; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) #hotel-travelers-field { order: 3; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-destinations-subtray { order: 10; grid-column: 1 / -1; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-search-btn { order: 100; grid-column: 1 / -1; margin: 0 auto; max-width: min(235px, 80%); width: 100%; } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hotel-applied-filters { width: 100%; } }@media (max-width: 600px) { .hotel-shell { min-height: 550px !important; top: 49% !important; width: min(calc(100% - 20px), 1250px) !important; left: 50% !important; } .hotel-shell-inner { gap: 25px !important; } .hotel-search-controls { grid-template-columns: 1fr !important; max-width: 600px !important; } .hotel-header { position: relative; padding-left: 15px; overflow: visible; } h1.hotel-title { font-size: 1.65em !important; line-height: 1.2; text-align: left; } .hotel-field { padding: 6px 18px 6px 25px; } #hotel-destination-field { order: 1 !important; } #hotel-dates-field { order: 2 !important; } #hotel-travelers-field { order: 3 !important; } .hotel-destinations-subtray { order: 10 !important; } .hotel-search-btn { order: 100 !important; grid-column: 1 / 2 !important; margin: 0 auto !important; margin-top: 15px !important; max-width: min(235px, 65%) !important; width: 100% !important; height: 42px; } .hotel-applied-filters { width: 100%; } }.hds-stage { background: transparent; } .hds-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 32px 24px 64px 324px; box-sizing: border-box; background: transparent; scrollbar-color: rgb(0 10 20 / 20%) transparent; scrollbar-width: thin; transition: padding 0.60s cubic-bezier(0.25, 1, 0.5, 1); } .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .hds-scroll { padding-left: 0; } .hds-scroll::-webkit-scrollbar { width: 8px; } .hds-scroll::-webkit-scrollbar-thumb { background: rgb(0 10 20 / 20%); border-radius: 999px; }.hds-content { width: 100%; max-width: 1250px; margin: 0 auto; color: rgb(0 10 20); border-radius: 28px; }.hds-card { background: rgb(255 255 255 / 92%); border-radius: 14px; box-shadow: 0 4px 24px -8px rgb(0 0 0 / 15%); margin: 15px; } .hds-card:last-child { margin-bottom: 0; }.hds-tabs { top: 0; z-index: 10; display: flex; align-items: stretch; gap: 2px; margin: 0 28px; overflow-x: auto; } .hds-tabs::-webkit-scrollbar { display: none; } .hds-tab { flex: 0 0 auto; padding: 16px 14px 14px; border: none; border-bottom: 2px solid transparent; background: none; color: rgb(0 10 20 / 85%); font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .hds-tab:hover { color: #0284c7; } .hds-tab.is-active { color: #0284c7; border-bottom-color: #0284c7; font-weight: 600; background-color: #ffffff80; }.hds-body { background-color: rgb(255 255 255 / 30%); }.hds-hero { display: grid; grid-template-columns: 1fr auto; justify-content: space-between; gap: 12px 20px; padding: 12px 30px; } .hds-name { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.85em; font-weight: 700; color: rgb(0 10 20 / 85%); letter-spacing: -0.01em; line-height: 1.2; text-transform: uppercase; font-family: 'times', serif; } .hds-name .hds-stars { display: inline-flex; gap: 3px; margin-left: 8px; color: #f59e0b; font-size: 14px; vertical-align: 2px; } .hds-name .hds-stars i { color: #f59e0b; }.hds-rating-pill { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .hds-rating-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; } .hds-rating-label { font-size: 14px; font-weight: 700; color: rgb(0 10 20); line-height: 1.2; white-space: nowrap; } .hds-rating-label:empty { display: none; } .hds-rating-count { font-size: 12px; color: rgb(0 10 20 / 75%); line-height: 1.2; white-space: nowrap; } .hds-rating-score { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; min-width: 42px; border-radius: 8px 8px 8px 0; color: #fff; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; background: var(--airtix-aurora); background-size: 400% 400%; background-position: 0% 50%; animation: airtix-aurora 7s ease infinite; box-shadow: 0 6px 18px -8px rgb(160 0 186 / 55%); }.hds-section { padding: 26px 30px; } .hds-section--gallery { padding: 0 3px 10px; margin: 0; }.hds-section--about { display: grid; grid-template-columns: auto max-content; gap: 35px; padding: 16px; align-items: center; } .hds-about-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; min-width: 0; } .hds-about-title { margin: 0; font-size: 20px; font-weight: 700; color: rgb(0 10 20); letter-spacing: -0.005em; line-height: 1.35; } .hds-about-card .hds-address { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-style: normal; font-size: 14px; color: rgb(0 10 20 / 75%); } .hds-about-card .hds-address i { color: #0284c7; } .hds-about-card .hds-address-city { color: rgb(0 10 20 / 55%); } .hds-about-card .hds-description { font-size: 14.5px; line-height: 1.7; color: rgb(0 10 20 / 80%); }.hds-scalars { columns: 3; column-gap: 35px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(0 10 20 / 6%); } .hds-scalar { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; color: rgb(0 10 20 / 85%); line-height: 1.3; min-width: 0; break-inside: avoid; -webkit-column-break-inside: avoid; } .hds-scalar > i { flex-shrink: 0; width: 16px; font-size: 13px; color: #0284c7; text-align: center; } .hds-scalar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hds-scalar-value { flex-shrink: 0; font-weight: 700; color: #0284c7; font-variant-numeric: tabular-nums; }.hds-stay-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; padding: 12px; border-radius: 12px; background: rgb(0 10 20 / 3%); border: 1px solid rgb(0 10 20 / 8%); } .hds-modify-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgb(0 10 20 / 12%); background: #fff; font-family: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .hds-modify-btn:hover { border-color: #0284c7; box-shadow: 0 0 0 3px rgb(2 132 199 / 10%); } .hds-modify-btn > i { color: #0284c7; font-size: 18px; flex-shrink: 0; } .hds-modify-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .hds-modify-label { font-size: 11px; font-weight: 600; color: rgb(0 10 20 / 50%); text-transform: uppercase; letter-spacing: 0.04em; } .hds-modify-value { font-size: 14px; font-weight: 700; color: rgb(0 10 20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hds-section-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; color: rgb(0 10 20); letter-spacing: -0.005em; } .hds-description { font-size: 15px; line-height: 1.65; color: rgb(0 10 20 / 80%); } .hds-description > p:first-of-type { margin-top: 5px; } .hds-description > p { margin-top: 15px; } .hds-empty { padding: 24px 0; color: rgb(0 10 20 / 45%); font-size: 14px; font-style: italic; }.hds-sentiment { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } .hds-sentiment-bar { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; font-size: 13px; } .hds-sentiment-label { color: rgb(0 10 20 / 70%); font-weight: 600; } .hds-sentiment-score { color: rgb(0 10 20); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .hds-sentiment-track { height: 8px; border-radius: 999px; background: rgb(0 10 20 / 8%); overflow: hidden; } .hds-sentiment-fill { height: 100%; border-radius: 999px; }.hds-facilities { display: flex; flex-direction: column; gap: 24px; } .hds-facility-category { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); } .hds-facility-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 20px; list-style: none; padding: 0; margin: 0; } .hds-facility { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(0 10 20 / 85%); min-width: 0; } .hds-facility i { font-size: 10px; color: #16a34a; width: 12px; flex-shrink: 0; }.hds-rooms-list { display: flex; flex-direction: column; }.hds-policies { display: flex; flex-direction: column; gap: 12px; max-width: 820px; } .hds-policy-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; font-size: 14px; line-height: 1.55; } .hds-policy-label { font-weight: 700; color: rgb(0 10 20 / 75%); } .hds-policy-value { color: rgb(0 10 20 / 80%); }.hds-reviews-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .hds-reviews-score { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; font-size: 22px; font-weight: 800; color: #fff; background: var(--airtix-search-gradient, #0284c7); box-shadow: 0 6px 18px -8px rgb(2 132 199 / 70%); } .hds-reviews-label { font-size: 15px; font-weight: 700; color: rgb(0 10 20); } .hds-reviews-count { font-size: 13px; color: rgb(0 10 20 / 55%); } .hds-review-list { display: flex; flex-direction: column; gap: 16px; }.hds-map { width: 100%; height: 360px; border-radius: 14px; overflow: hidden; background: #dfe7ea; border: 1px solid rgb(0 10 20 / 8%); }.hds-fine-print-title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(0 10 20 / 55%); margin-bottom: 8px; } .hds-fine-print-body { font-size: 13px; line-height: 1.65; color: rgb(0 10 20 / 70%); max-width: 820px; }@media (max-width: 900px) { .hds-scroll { padding: 16px 12px 40px; } .hds-tabs { padding: 0 12px; } .hds-tab { padding: 14px 10px 12px; font-size: 12.5px; } .hds-hero { padding: 16px 20px; } .hds-name { font-size: 22px; } .hds-name .hds-stars { font-size: 12px; } .hds-section { padding: 20px 20px; } .hds-section--gallery { padding: 12px; } .hds-section--about { padding: 12px; grid-template-columns: 1fr; } .hds-about-card { padding: 18px 12px; } .hds-scalars { columns: 2; } .hds-stay-bar { grid-template-columns: 1fr; } .hds-policy-row { grid-template-columns: 1fr; gap: 2px; } .hds-map { height: 260px; } } @media (max-width: 720px) { .hds-facility-list { grid-template-columns: 1fr; } .hds-scalars { columns: 1; } .hds-modify-btn { padding: 10px 14px; } .hds-modify-btn > i { font-size: 16px; } .hds-modify-value { font-size: 13px; } }.hds-section--chips { padding: 4px 16px 0; } .hds-section--chips:empty, .hds-section--chips:has(.hds-facility-chips:empty) { display: none; } .hds-facility-chips-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .hds-facility-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; overflow: hidden; transition: max-height 0.35s ease; } .hds-facility-chips.is-collapsed { max-height: var(--chips-clip-h); } .hds-facility-chips.is-expanded { max-height: var(--chips-full-h); } .hds-facility-chip { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; background-color: rgb(255 255 255 / 75%); font-size: 13.5px; font-weight: 500; color: rgb(0 10 20 / 85%); line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 16px -10px rgb(0 0 0 / 35%); } .hds-facility-chip > i { flex-shrink: 0; width: 20px; font-size: 18px; color: #0284c7; text-align: center; } .hds-facility-chip-label { flex: 0 0 auto; } .hds-facility-chips-toggle { padding: 6px 16px; border: 1px solid rgb(0 10 20 / 12%); border-radius: 999px; background: #fff; color: #0284c7; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .hds-facility-chips-toggle:hover { background: rgb(2 132 199 / 5%); border-color: #0284c7; } .hds-facility-chips-toggle[hidden] { display: none; } @media (max-width: 900px) { .hds-section--chips { padding: 4px 12px 12px; } .hds-facility-chips { gap: 6px; } .hds-facility-chip { padding: 10px 12px; font-size: 12.5px; gap: 8px; } .hds-facility-chip > i { font-size: 16px; width: 18px; } }.hds-review-actions { display: flex; justify-content: center; margin-top: 20px; } .hds-review-more { padding: 10px 24px; border: 1px solid rgb(2 132 199 / 30%); border-radius: 999px; background: rgb(2 132 199 / 8%); color: #0284c7; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .hds-review-more:hover:not(:disabled) { background: rgb(2 132 199 / 15%); border-color: #0284c7; } .hds-review-more:disabled { opacity: 0.6; cursor: wait; } .hds-review-more[hidden] { display: none; }.discover-panel { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; }.discover-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 32px 16px 80px 332px; transition: padding var(--airtix-ui-responsive); } @media (min-width: 900px) { .app-wrapper:has(.tri-state-wrapper[data-tri-state="hidden"]) .discover-feed { padding-left: 0; } }.discover-city-header { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 auto 24px auto; max-width: 1250px; text-align: center; } .discover-city-link { font-family: 'times', serif; font-size: 2.25em; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: #1c1919; text-decoration: none; text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5); transition: color 0.2s ease; } .discover-city-link:hover { color: #0891b2; } .discover-hotel-count { font-family: inherit; font-size: 0.45em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(0, 10, 20, 0.55); white-space: nowrap; }.discover-body { max-width: 1250px; margin: 0 auto; }.discover-countries { display: flex; flex-direction: column; gap: 16px; max-width: 1250px; margin: 0 auto; } .discover-countries.hidden { display: none; }.discover-sentinel { height: 1px; width: 100%; pointer-events: none; } .discover-empty { padding: 60px 20px; text-align: center; font-size: 15px; color: rgb(255 255 255 / 55%); font-style: italic; } .discover-empty.hidden { display: none; } .discover-loading { padding: 32px; text-align: center; color: #7dd3fc; font-size: 22px; } .discover-loading.hidden { display: none; }@media (max-width: 900px) { .discover-feed { padding: 20px 16px 40px 16px; } .discover-countries { gap: 15px; } .discover-city-link { font-size: 1.75em; } } @media (max-width: 720px) { .discover-countries { gap: 10px; } .discover-feed { padding: 5px 5px 40px; } .country-card { padding: 5px; border-radius: 20px; } .country-card-header { margin: 0 10px -28px auto; } .city-card-count { display:none; } }.discover-countries:not(:has(.country-card))::after { content: 'No destinations match your filters.'; display: block; text-align: center; padding: 100px 24px 60px 24px; font-size: 15px; color: rgb(255 255 255 / 55%); font-style: italic; letter-spacing: 0.01em; }.promos-panel { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; }.promos-panel .ff-backdrop-image { background-image: linear-gradient(rgb(255 255 255 / 85%), rgb(255 255 255 / 85%)), var(--ff-image, none); }.promos-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 32px 0; transition: padding var(--airtix-ui-responsive); }.promos-body { position: relative; left: 0; min-height: 100%; margin: 0 auto; width: min(calc(100% - 30px), 1250px); display: flex; flex-direction: column; background-color: rgb(255 255 255 / 30%); padding: 32px; border-radius: 28px;container-type: inline-size; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .promos-body { left: 158px; width: min(calc(100% - 345px), 1250px); } .promos-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 720px; margin: 0 auto; text-align: center; position: relative; } .promos-state { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; transition: opacity 0.2s ease; } .promos-state[hidden] { display: none; }.promos-hero { position: relative; padding: 16px 0; } .promos-hero-ring { position: absolute; inset: 50% 50% auto auto; transform: translate(50%, -50%);width: clamp(140px, 22cqi, 280px); height: clamp(140px, 22cqi, 280px); border-radius: 50%; background: conic-gradient(from 0deg, #029dff, #2527ff, #a000ba, #eb057c, #ff4000, #029dff); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); animation: promos-spin 25s linear infinite; opacity: 25%; } .promos-hero-plasma { position: absolute; inset: 50% 50% auto auto; transform: translate(50%, -50%);width: clamp(270px, 43cqi, 540px); height: clamp(270px, 43cqi, 540px); border-radius: 50%; filter: blur(40px); opacity: 25%; background: radial-gradient(circle at 30% 40%, rgb(2 157 255 / 0.8), transparent 30%), radial-gradient(circle at 70% 30%, rgb(160 0 186 / 0.8), transparent 30%), radial-gradient(circle at 60% 70%, rgb(235 5 124 / 0.8), transparent 30%); animation: promos-churn 12s ease-in-out infinite alternate; } .promos-hero-title--line-1 { position: relative; font-family: 'times', serif; font-weight: 900;font-size: clamp(2rem, 9cqi, 6rem); letter-spacing: 0.04em; margin: 0 0 4px; color: rgb(0 10 20 / 50%); } .promos-hero-title--line-2 { position: relative; font-family: 'times', serif; font-weight: 900;font-size: clamp(3.5rem, 11cqi, 7rem); letter-spacing: 0.03em; background: var(--airtix-aurora); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; } .viewport-center.is-settled .promos-hero-title--line-2 { animation: airtix-aurora 5s ease infinite; } .promos-hero-sub { position: relative; color: rgb(0 10 20); margin: 0 0 16px; font-weight: 500;font-size: clamp(1rem, 1.5cqi, 20px); text-align: center; }.promos-field-wrap { width: 100%; max-width: 480px; margin: 0 auto 16px; } .promos-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px 12px 25px; min-height: 55px; border-radius: 99px; background: rgba(255 255 255 / 85%); border: 1px solid rgba(0 10 20 / 15%); cursor: text; transition: background-color 0.15s ease, border-color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); width: 100%; } .promos-field:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); } .promos-field:focus-within { background: rgb(255 255 255); border-color: rgb(2 157 255 / 60%); box-shadow: inset 0 2px 4px rgb(0 10 20 / 5%), 0 0 0 3px rgb(2 157 255 / 20%); } .promos-field-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: rgba(0, 10, 20, 0.55); } .promos-input-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .promos-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #1c1919; font-family: inherit; font-size: 15px; padding: 0; font-weight: 600; } .promos-input::placeholder { color: rgba(0, 10, 20, 0.4); font-weight: 500; } .promos-field-watermark { position: absolute; right: 26px; top: 8px; color: rgba(0 10 20 / 30%); font-size: 16px; pointer-events: none; transition: color 0.15s ease; } .promos-field:hover .promos-field-watermark { color: rgba(0, 10, 20, 0.45); }.country-dropdown { position: fixed; z-index: 9500; padding: 8px; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); color: #fff; max-height: 360px; box-sizing: border-box; overflow: hidden; user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; backdrop-filter: blur(35px); background-color: rgb(0 10 20 / 75%); min-width: 320px; max-width: min(560px, calc(100vw - 24px)); } .country-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .country-dropdown-list { display: flex; flex-direction: column; max-height: 344px; overflow-y: auto; padding-right: 2px; } .country-dropdown-list::-webkit-scrollbar { width: 6px; } .country-dropdown-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .country-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .country-dropdown-item:hover, .country-dropdown-item.active { background-color: rgba(255, 255, 255, 0.10); } .country-dropdown-item:active { background-color: rgba(255, 255, 255, 0.16); } .country-dropdown-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; } .country-dropdown-name { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; }.promos-error { color: #eb057c; font-size: 0.95rem; font-weight: 500; margin: -8px 0 0; text-align: center; width: 100%; } .promos-btn-wrap { display: flex; justify-content: center; margin-top: 8px; } .promos-panel .airtix-action-button { letter-spacing: 1px; } .promos-submit { position: relative; } .promos-submit.is-reserving { pointer-events: none; opacity: 0.75; padding-right: 44px !important; } .promos-submit.is-reserving::after { content: ''; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: promos-btn-spin 0.65s linear infinite; }.promos-success-hero { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .promos-success-hero .promos-hero-title--line-1 { margin-bottom: 0; } .promos-success-hero .promos-hero-title--line-2 { margin-bottom: 24px; } .promos-more { width: 100%; } .promos-more-desc { color: rgb(0 10 20); font-size: clamp(1.1rem, 1.8cqi, 1.25rem); font-weight: 500; margin: 0 0 20px; text-align: center; } .promos-more-grid { display: flex; justify-content: center; gap: 10px; width: 100%; } .promos-video-card { display: flex; flex-direction: column; border-radius: 14px; background: #fff; overflow: hidden; text-decoration: none; box-shadow: 0 4px 16px rgb(0 10 20 / 8%); transition: transform 0.15s ease, box-shadow 0.15s ease; width: 100%; max-width: min(500px, 90%); text-align: left; } .promos-video-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 10 20 / 12%); } .promos-video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; } .promos-video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .promos-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .promos-play-icon i { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 1.5rem; padding-left: 4px; box-shadow: 0 4px 12px rgb(0 0 0 / 30%); transition: transform 0.15s ease, background-color 0.15s ease; } .promos-video-card:hover .promos-play-icon i { transform: scale(1.1); background: #dc2626; } .promos-video-info { padding: 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; } .promos-video-hotel { font-weight: 700; font-size: 1rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promos-video-meta { font-size: 0.85rem; color: rgb(15 23 42 / 60%); }.promos-state--error p { color: #0f172a; font-size: clamp(1.1rem, 1.8cqi, 1.25rem); font-weight: 500; }@keyframes promos-spin { from { transform: translate(50%, -50%) rotate(0); } to { transform: translate(50%, -50%) rotate(360deg); } } @keyframes promos-btn-spin { to { transform: rotate(360deg); } } @keyframes promos-churn { 0% { transform: translate(50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(50%, -50%) rotate(180deg) scale(1.1); } 100% { transform: translate(50%, -50%) rotate(360deg) scale(1); } }@media (max-width: 900px) { .promos-body { flex-direction: column; width: calc(100vw - 20px); min-width: 0; min-height: calc(100% - 20px); } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .promos-body { left: 0; width: calc(100vw - 20px); } .promos-feed { padding: 10px 0; } } @media (max-width: 600px) { .promos-body { padding: 20px; } }.win-panel { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; } .win-panel .airtix-action-button { letter-spacing: 1px; } .win-panel .ff-backdrop-image { background-image: linear-gradient(rgb(255 255 255 / 85%), rgb(255 255 255 / 85%)), var(--ff-image, none); }.win-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 32px 0; transition: padding var(--airtix-ui-responsive); }.win-body { position: relative; left: 0; min-height: 100%; margin: 0 auto; width: min(calc(100% - 30px), 1250px); display: flex; flex-direction: column; background-color: rgb(255 255 255 / 30%); padding: 32px; border-radius: 28px;container-type: inline-size; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .win-body { left: 158px; width: min(calc(100% - 345px), 1250px); } .win-back { position: absolute; top: 24px; left: 24px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: rgb(0 10 20 / 75%); text-decoration: none; background: rgb(255 255 255 / 50%); transition: background-color 0.15s ease, color 0.15s ease; } .win-back:hover { background: rgb(255 255 255 / 80%); color: #0284c7; }.win-header { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 auto 32px auto; text-align: center; } .win-title { font-family: 'times', serif; font-size: clamp(1.75em, 2.5cqi, 2.25em); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: #1c1919; text-decoration: none; text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5); margin: 0; }.win-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 720px; margin: 0 auto; text-align: center; position: relative; } .win-state { display: flex; flex-direction: column; align-items: center; width: 100%; transition: opacity 0.2s ease; } .win-state[hidden] { display: none; }.win-invalid-view { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; } .win-invalid-view[hidden] { display: none; } .win-invalid-view .win-secret-title { color: #0f172a; font-size: 1.25rem; font-weight: 600; margin: 0; text-align: center; }.win-hero { position: relative; padding: 16px 0; } .win-hero-ring { position: absolute; inset: 50% 50% auto auto; transform: translate(50%, -50%);width: clamp(140px, 22cqi, 280px); height: clamp(140px, 22cqi, 280px); border-radius: 50%; background: conic-gradient(from 0deg, #029dff, #2527ff, #a000ba, #eb057c, #ff4000, #029dff); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); animation: win-spin 25s linear infinite; opacity: 25%; translate: 0 -25px; } .win-hero-plasma { position: absolute; inset: 50% 50% auto auto; transform: translate(50%, -50%);width: clamp(270px, 43cqi, 540px); height: clamp(270px, 43cqi, 540px); border-radius: 50%; filter: blur(40px); opacity: 25%; background: radial-gradient(circle at 30% 40%, rgb(2 157 255 / 0.8), transparent 30%), radial-gradient(circle at 70% 30%, rgb(160 0 186 / 0.8), transparent 30%), radial-gradient(circle at 60% 70%, rgb(235 5 124 / 0.8), transparent 30%); animation: win-churn 12s ease-in-out infinite alternate; translate: 0 -25px; } .win-hero-title { position: relative; font-weight: 900; margin: 0 0 4px; color: rgb(0 10 20 / 50%); font-family: 'times'; background: var(--airtix-aurora); background-size: 300% 300%; } .win-hero-title--line-1 { font-family: 'times'; font-weight: 900;font-size: clamp(2rem, 8cqi, 4.55rem); letter-spacing: 0.04em; } .win-hero-title--line-2 {font-size: clamp(3.5rem, 14cqi, 8rem); letter-spacing: 0.03em; background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; } .viewport-center.is-settled .win-hero-title--line-2 { animation: airtix-aurora 5s ease infinite; } .win-hero-sub { position: relative; color: rgb(0 10 20); margin: 0; font-weight: 500;font-size: clamp(1rem, 1.5cqi, 20px); }.win-form { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 480px; margin: 0 auto; padding-bottom: 24px; } .win-btn-wrap { display: flex; justify-content: center; margin-top: 8px; } .win-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 18px 12px 25px; min-height: 55px; border-radius: 99px; background: rgba(255 255 255 / 85%); border: 1px solid rgba(0 10 20 / 15%); cursor: text; transition: background-color 0.15s ease, border-color 0.15s ease; box-shadow: 0 1px 0px 0px rgb(0 10 20 / 35%); width: 100%; } .win-field:hover { background: rgb(220 243 255); border-color: rgb(0 10 20 / 10%); } .win-form .win-field:focus-within { background: rgb(255 255 255); border-color: rgb(2 157 255 / 60%); box-shadow: inset 0 2px 4px rgb(0 10 20 / 5%), 0 0 0 3px rgb(2 157 255 / 20%); } .win-field.is-invalid { background: rgb(255 214 236); border-color: rgb(236 72 153 / 55%); box-shadow: 0 1px 0 0 rgb(236 72 153 / 30%); } .win-field.is-invalid:hover { background: rgb(255 196 226); border-color: rgb(236 72 153 / 75%); } .win-field.is-invalid .win-field-label { color: rgb(190 24 93 / 75%); } .win-field.is-invalid .win-field-watermark { color: rgb(236 72 153 / 60%); } .win-field-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: rgba(0, 10, 20, 0.55); } .win-input-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .win-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #1c1919; text-shadow: none; font-family: inherit; font-size: 15px; padding: 0; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .win-input::placeholder { color: rgba(0, 10, 20, 0.3); font-weight: 500; } .win-field-watermark { position: absolute; right: 26px; top: 8px; color: rgba(0 10 20 / 30%); font-size: 16px; pointer-events: none; transition: color 0.15s ease; } .win-field:hover .win-field-watermark { color: rgba(0, 10, 20, 0.45); }.win-error { color: #eb057c; font-size: 0.95rem; font-weight: 500; margin: -4px 0 0; text-align: center; width: 100%; }.win-submit { position: relative; } .win-submit.is-reserving { pointer-events: none; opacity: 0.75; padding-right: 44px !important; } .win-submit.is-reserving::after { content: ''; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: win-btn-spin 0.65s linear infinite; }.win-state--loading i { font-size: 2rem; color: #029dff; } .win-state--loading p { color: rgb(15 23 42 / 70%); }.win-state--reveal { position: relative; width: 100%; } .win-reveal-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .win-reveal-content .win-hero-title--line-1 { margin-bottom: 0; } .win-reveal-prize {font-size: clamp(3rem, 10cqi, 7rem); letter-spacing: 0; margin-bottom: 12px; filter: drop-shadow(0 4px 12px rgb(160 0 186 / 20%)); } .viewport-center.is-settled .win-reveal-prize { animation: airtix-aurora 4s ease infinite; } .win-reveal-burst { position: absolute; inset: 50% 50% auto auto; transform: translate(50%, -50%);width: clamp(200px, 32cqi, 400px); height: clamp(200px, 32cqi, 400px); border-radius: 50%; background: radial-gradient(circle, rgb(235 5 124 / 0.3) 0%, rgb(160 0 186 / 0.15) 40%, transparent 70%); filter: blur(40px); animation: win-burst 1600ms ease-out forwards; pointer-events: none; } .win-reveal-hotel { color: rgb(15 23 42 / 70%); margin: 0 0 24px; font-weight: 500; font-size: clamp(1.05rem, 1.5cqi, 1.15rem); } .win-login { margin-top: 16px; }.win-code-card { background: #fff; border-radius: 16px; padding: 32px 24px; box-shadow: 0 8px 32px rgba(0, 10, 20, 0.08), 0 1px 3px rgba(0, 10, 20, 0.04); border: 1px solid rgba(0, 10, 20, 0.05); display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0; width: 100%; max-width: 550px; text-align: center; position: relative; overflow: hidden; } .win-code-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--airtix-aurora); background-size: 300% 300%; } .viewport-center.is-settled .win-code-card::before { animation: airtix-aurora 5s ease infinite; } .win-code-value { font-family: 'times', serif;font-size: clamp(1.25rem, 2.5cqi, 1.8rem); font-weight: 900; color: #0284c7; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 8px; line-height: 1.2; } .win-code-hotel { font-size: clamp(1rem, 1.8cqi, 1.25rem); font-weight: 600; color: #0f172a; margin-top: 4px; } .win-code-meta { font-size: clamp(0.9rem, 1.4cqi, 1rem); color: rgba(15, 23, 42, 0.65); }.win-success-hero { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .win-success-hero .win-hero-title--line-1 { margin-bottom: 0; } .win-success-hero .win-hero-title--line-2 { margin-bottom: 24px; } .win-success-desc { color: rgb(0 10 20); font-size: clamp(1.1rem, 1.8cqi, 1.25rem); font-weight: 500; margin: 0 0 8px; text-align: center; max-width: 600px; line-height: 1.4; } .win-success-counter { color: rgb(25 143 204); font-size: clamp(1.2rem, 2cqi, 1.35rem); font-weight: 700; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; } .win-more { width: 100%; } .win-more-desc { color: rgb(0 10 20); font-size: clamp(1.1rem, 1.8cqi, 1.25rem); font-weight: 500; margin: 0 0 20px; text-align: center; } .win-more-grid { display: flex; justify-content: center; gap: 10px; width: 100%; } .win-video-card { display: flex; flex-direction: column; border-radius: 14px; background: #fff; overflow: hidden; text-decoration: none; box-shadow: 0 4px 16px rgb(0 10 20 / 8%); transition: transform 0.15s ease, box-shadow 0.15s ease; width: 100%; max-width: min(500px, 90%); text-align: left; } .win-video-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 10 20 / 12%); } .win-video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; } .win-video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .win-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .win-play-icon i { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 1.5rem; padding-left: 4px; box-shadow: 0 4px 12px rgb(0 0 0 / 30%); transition: transform 0.15s ease, background-color 0.15s ease; } .win-video-card:hover .win-play-icon i { transform: scale(1.1); background: #dc2626; } .win-video-info { padding: 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; } .win-video-hotel { font-weight: 700; font-size: 1rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win-video-meta { font-size: 0.85rem; color: rgb(15 23 42 / 60%); } .win-video-icon { font-size: 0.7rem; color: rgb(15 23 42 / 40%); margin-left: 2px; transition: color 0.15s ease; } .win-video-card:hover .win-video-icon { color: #eb057c; } .win-enter-another, .win-retry { margin-top: 24px; } .win-more-already { color: rgb(0 10 20 / 60%); font-style: italic; text-align: center; margin: 0; }.win-state--invalid p { color: #0f172a; font-size: clamp(1.1rem, 1.8cqi, 1.25rem); font-weight: 500; }.win-secret-hint { margin: 16px 0 0; font-size: 0.95rem; color: rgb(15 23 42 / 80%); } .win-secret-link { background: none; border: none; padding: 0; margin: 0; color: #0284c7; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.15s ease, color 0.15s ease; } .win-secret-link:hover { color: #0369a1; text-decoration-color: currentColor; } .win-secret-link:disabled { opacity: 0.6; cursor: default; } .win-secret-empty { color: rgb(15 23 42 / 70%); font-style: italic; text-align: center; margin: 12px 0 0; grid-column: 1 / -1; }@keyframes win-spin { from { transform: translate(50%, -50%) rotate(0); } to { transform: translate(50%, -50%) rotate(360deg); } } @keyframes win-btn-spin { to { transform: rotate(360deg); } } @keyframes win-churn { 0% { transform: translate(50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(50%, -50%) rotate(180deg) scale(1.1); } 100% { transform: translate(50%, -50%) rotate(360deg) scale(1); } } @keyframes win-burst { 0% { opacity: 0; transform: translate(50%, -50%) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0.4; transform: translate(50%, -50%) scale(1.4); } }@media (max-width: 900px) { .win-body { flex-direction: column; width: calc(100vw - 20px); min-width: 0; min-height: calc(100% - 20px); } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .win-body { left: 0; width: calc(100vw - 20px); } .win-feed { padding: 10px 0; } } @media (max-width: 600px) { .win-body { padding: 20px; } }.viewport-wrapper { position: relative; flex: 1 1 auto; overflow: hidden;--viewport-width: 1250px; --transform-origin-x: 50%; --persopective: calc(var(--viewport-width) * 2);--cube-radius: calc(var(--viewport-width) / 2); --cube-radius-negative: calc(var(--cube-radius) * -1); }.viewport-wrapper.is-sliding { transform-style: preserve-3d; perspective: var(--persopective); perspective-origin: var(--transform-origin-x) 50%; } .viewport-center { position: absolute; inset: 0; display: flex; flex-direction: column;transform-origin: var(--transform-origin-x) 50% 0; transition: transform var(--airtix-ui-responsive), opacity 0.65s ease, visibility 0.85s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: strict; opacity: 1; }.viewport-center.active-stage { transform: none; visibility: visible; pointer-events: auto; z-index: 2; will-change: transform; transition: transform var(--airtix-ui-responsive), visibility 0.85s ease; }.viewport-wrapper.is-sliding .viewport-center.active-stage { transform: rotateY(0deg) translateZ(0) translateX(0); }.viewport-center.left-stage { transform: rotateY(-90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius-negative)); opacity: 1; visibility: hidden; pointer-events: none; z-index: 1; }.viewport-center.right-stage { transform: rotateY(90deg) translateZ(var(--cube-radius)) translateX(var(--cube-radius)); opacity: 1; visibility: hidden; pointer-events: none; z-index: 1; }.viewport-center.next-stage { opacity: 1 !important; } .viewport-center.previous-stage { opacity: 0 !important; }.viewport-wrapper.is-sliding .viewport-center.is-warm-target { visibility: visible; opacity: 0; }.viewport-wrapper.is-sliding .viewport-center { will-change: transform; pointer-events: none; box-shadow: none !important; backdrop-filter: none !important; filter: none !important; } .viewport-wrapper.is-sliding * { text-rendering: optimizeSpeed !important; -webkit-font-smoothing: antialiased !important; } .viewport-wrapper.is-sliding .viewport-center * { transition: none !important; animation-duration: 0s !important; } .viewport-wrapper.is-sliding .leaflet-container, .viewport-wrapper.is-sliding .maplibregl-map { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }.viewport-wrapper *, .side-panel * { scrollbar-color: transparent transparent; scrollbar-width: none; } .viewport-wrapper *::-webkit-scrollbar, .side-panel *::-webkit-scrollbar { background: transparent; } .viewport-wrapper *::-webkit-scrollbar-thumb, .side-panel *::-webkit-scrollbar-thumb { background: transparent; border: none; box-shadow: none; } .viewport-wrapper *::-webkit-scrollbar-track, .side-panel *::-webkit-scrollbar-track { background: transparent; border: none; box-shadow: none; } .viewport-wrapper *::-webkit-scrollbar-corner, .side-panel *::-webkit-scrollbar-corner { background: transparent; }.viewport-wrapper.is-fade-mode { --fade-half: 425ms; }.viewport-wrapper.is-fade-mode.is-sliding { perspective: none; perspective-origin: 50% 50%; transform-style: flat; }.viewport-wrapper.is-fade-mode .viewport-center, .viewport-wrapper.is-fade-mode .viewport-center.active-stage, .viewport-wrapper.is-fade-mode .viewport-center.left-stage, .viewport-wrapper.is-fade-mode .viewport-center.right-stage, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center.active-stage, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center.left-stage, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center.right-stage { transform: none !important; backface-visibility: visible; -webkit-backface-visibility: visible; }.viewport-wrapper.is-fade-mode .viewport-center, .viewport-wrapper.is-fade-mode .viewport-center.active-stage { transition: opacity var(--fade-half) ease; }.viewport-wrapper.is-fade-mode .viewport-center.active-stage, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center { will-change: opacity; }.viewport-wrapper.is-fade-mode .viewport-center.left-stage, .viewport-wrapper.is-fade-mode .viewport-center.right-stage { opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; }.viewport-wrapper.is-fade-mode.is-sliding .viewport-center.left-stage, .viewport-wrapper.is-fade-mode.is-sliding .viewport-center.right-stage { visibility: visible; }.viewport-wrapper.is-fade-mode .viewport-center.active-stage { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }.viewport-wrapper.is-fade-mode .viewport-center.next-stage { opacity: 1 !important; transition: opacity var(--fade-half) ease var(--fade-half); } .viewport-wrapper.is-fade-mode .viewport-center.previous-stage { opacity: 0 !important; transition: opacity var(--fade-half) ease 0s; }.static-page { position: absolute; inset: 0; overflow: hidden; min-height: 0; min-width: 0; z-index: 1; } .static-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 32px 0; transition: padding var(--airtix-ui-responsive); }.static-body { position: relative; left: 0; min-height: 100%; margin: 0 auto; width: min(calc(100% - 30px), 1250px); display: flex; flex-direction: column; padding: 12px 20px 20px; border-radius: 20px; transition: top var(--airtix-ui-responsive), left var(--airtix-ui-responsive), width var(--airtix-ui-responsive), height var(--airtix-ui-responsive), transform var(--airtix-ui-responsive), padding var(--airtix-ui-responsive), background-color 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, opacity 220ms ease; }.app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .static-body { left: 158px; width: min(calc(100% - 345px), 1250px); }.static-body h1.ctt-init { margin: 0px 0 10px 10px; font-size: 1.85em; font-weight: 700; color: rgb(0 10 20 / 85%); text-transform: uppercase; font-family: 'times', serif; text-align: left; }.page-content { display: flex; flex-direction: column; min-width: 0; background-color: rgb(255 255 255 / 95%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 14px; box-shadow: 0 5px 20px -10px rgba(0 0 0 / 50%); color: rgb(0 10 20); padding: 32px 32px 200px; font-size: 1rem; line-height: 1.7; } .page-content .toc-wrapper { margin-top: 25px !important; } .page-content .toc-wrapper > :first-child { margin: 0 0 15px 9px; font-size: 1rem; font-weight: 700; color: rgb(0 10 20 / 90%); }.page-content > *:first-child { margin-top: 0; } .page-content > *:last-child { margin-bottom: 0; } .page-content p { margin: 0 0 1.25em; } .page-content h2 { font-size: 1rem; font-weight: 700; color: rgb(0 10 20 / 90%); margin: 2em 0 0.75em; line-height: 1.3; } .page-content h3 { font-size: 1.15rem; font-weight: 600; color: rgb(0 10 20 / 90%); margin: 1.5em 0 0.5em; } .page-content ul, .page-content ol { margin: 0 0 1.25em; padding-left: 1.5em; } .page-content li { margin-bottom: 0.35em; } .page-content a { color: rgb(2 132 199); text-decoration: none; font-weight: 500; transition: color 0.15s ease; } .page-content a:hover { text-decoration: underline; } .page-content code { background: rgb(0 10 20 / 6%); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: rgb(0 10 20 / 85%); } .page-content pre { background: #0f172a; color: #e2e8f0; padding: 16px 20px; border-radius: 12px; overflow-x: auto; } .page-content pre code { background: transparent; padding: 0; color: inherit; } .page-content blockquote { border-left: 4px solid rgb(2 132 199 / 50%); padding-left: 1em; color: rgb(0 10 20 / 75%); font-style: italic; margin: 1.5em 0; } .page-content table { border-collapse: collapse; width: 100%; margin-bottom: 1.25em; } .page-content th, .page-content td { border: 1px solid rgb(0 10 20 / 15%); padding: 10px 14px; text-align: left; } .page-content th { background: rgb(0 10 20 / 4%); font-weight: 600; }@media (max-width: 1250px) { .page-content { padding: 24px 24px 200px; }} @media (max-width: 900px) { .static-body { flex-direction: column; width: calc(100vw - 20px); min-width: 0; min-height: calc(100% - 20px); } .app-wrapper:not(:has(.tri-state-wrapper[data-tri-state="hidden"])) .static-body { left: 0; width: calc(100vw - 20px); } .static-feed { padding: 10px 0; } .static-body h1.ctt-init { font-size: 1.4em; } } @media (max-width: 600px) { .static-body { padding:10px; } .page-content { padding: 10px 20px 200px; } }:root { --airtix-gradient: linear-gradient(90deg, #029dff, #2527ff, #a000ba, #eb057c, #ff4000); } .discover-widget { position: relative; width: 100%;min-height: 220px; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; font-weight: 800; color: #ffffff; text-align: left; margin: 20px 0; user-select: none; } .discover-phrase { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 2s ease-in-out, visibility 2s ease-in-out; pointer-events: none; font-size: clamp(3.5rem, 11cqi, 7rem); line-height: 1; } .discover-phrase.active { opacity: 1; visibility: visible; } .discover-phrase div { display: block; text-shadow: 0px 3px 13px rgb(0 10 20 / 50%); }.discover-phrase strong { font-style: italic; position: relative; font-weight: 900; font-size: clamp(3.5rem, 22cqi, 8.5rem); font-family: 'times', serif; letter-spacing: 0.03em; background: var(--airtix-aurora); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: airtix-aurora 5s ease infinite; text-shadow: none; }