.btn.btn--solid.show-flights-btn, .btn.btn--solid.book-btn, .show-flights-btn, .book-btn.btn--solid, .flight-card-compact .action-buttons .book-btn, .fp-multi-leg-card .action-buttons .book-btn, .flight-page .fp-book-btn, #flight-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { --cta-apple-fill: var(--primary); --cta-apple-border: var(--primary-dark); --cta-apple-hover-fill: var(--primary-hover); --cta-apple-hover-border: var(--primary); background: var(--cta-apple-fill); border: 0.5px solid var(--cta-apple-border); color: #fff; font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; box-shadow: 0 1px 2px rgba(0, 168, 148, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.15s ease, box-shadow 0.2s ease; } .btn.btn--solid.show-flights-btn:hover, .btn.btn--solid.book-btn:hover, .show-flights-btn:hover, .book-btn.btn--solid:hover, .flight-card-compact .action-buttons .book-btn:hover, .fp-multi-leg-card .action-buttons .book-btn:hover, .flight-page .fp-book-btn:hover, #flight-details-popup .popup-footer .book-btn:hover, #booking-details-modal .popup-footer .book-btn:hover { background: var(--cta-apple-hover-fill); border-color: var(--cta-apple-hover-border); color: #fff; transform: none; box-shadow: 0 2px 6px rgba(68, 93, 239, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn.btn--solid.show-flights-btn:active, .btn.btn--solid.book-btn:active, .show-flights-btn:active, .book-btn.btn--solid:active, .flight-card-compact .action-buttons .book-btn:active, .fp-multi-leg-card .action-buttons .book-btn:active, .flight-page .fp-book-btn:active, #flight-details-popup .popup-footer .book-btn:active, #booking-details-modal .popup-footer .book-btn:active { transform: scale(0.97); opacity: 0.94; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); } .show-flights-btn { border-radius: 980px; min-height: 48px; padding: 0.75rem 1.75rem; font-size: 17px; } .flight-card-compact .action-buttons .book-btn, .fp-multi-leg-card .action-buttons .book-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn { border-radius: 10px; min-height: 36px; padding: 0 16px; font-size: 13px; letter-spacing: -0.01em; border-right: none; flex: 1 1 auto; gap: 0; } .flight-page .fp-book-btn { border-radius: 980px; min-height: 44px; padding: 0.625rem 1.5rem; font-size: 0.9375rem; border-right: none; } .flight-card-compact .action-buttons .book-btn.booked, .fp-multi-leg-card .action-buttons .book-btn.booked, .btn.btn--solid.book-btn.booked, .btn.btn--solid.book-btn.is-success.booked, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, #flight-details-popup .popup-footer .book-btn.booked, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, #booking-details-modal .popup-footer .book-btn.booked, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked, .flight-page .fp-book-btn.booked { --booked-fill: rgba(68, 93, 239, 0.12); --booked-border: rgba(0, 168, 148, 0.42); --booked-text: #2f40c2; --booked-inset: rgba(255, 255, 255, 0.45); display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.01em; background: var(--booked-fill); border: 0.5px solid var(--booked-border); color: var(--booked-text); cursor: default; pointer-events: none; opacity: 1; box-shadow: inset 0 1px 0 var(--booked-inset); transform: none; } :root[data-theme="dark"] .flight-card-compact .action-buttons .book-btn.booked, :root[data-theme="dark"] .fp-multi-leg-card .action-buttons .book-btn.booked, :root[data-theme="dark"] .btn.btn--solid.book-btn.booked, :root[data-theme="dark"] .btn.btn--solid.book-btn.is-success.booked, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] #flight-details-popup .popup-footer .book-btn.booked, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] #booking-details-modal .popup-footer .book-btn.booked, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked, :root[data-theme="dark"] .flight-page .fp-book-btn.booked { --booked-fill: rgba(68, 93, 239, 0.14); --booked-border: rgba(94, 234, 212, 0.32); --booked-text: #9ff0e0; --booked-inset: rgba(255, 255, 255, 0.08); } .flight-card-compact .action-buttons .book-btn.booked:hover, .fp-multi-leg-card .action-buttons .book-btn.booked:hover, .btn.btn--solid.book-btn.booked:hover, .btn.btn--solid.book-btn.is-success.booked:hover, #flight-details-popup .popup-footer .book-btn.booked:hover, #booking-details-modal .popup-footer .book-btn.booked:hover, .flight-page .fp-book-btn.booked:hover, .btn.btn--solid.book-btn.is-success.booked:disabled, .btn.btn--solid.book-btn.is-success.booked:disabled:hover, .flight-card-compact .action-buttons .book-btn.booked:disabled, .flight-card-compact .action-buttons .book-btn.booked:disabled:hover { background: var(--booked-fill); border-color: var(--booked-border); color: var(--booked-text); transform: none; box-shadow: inset 0 1px 0 var(--booked-inset); opacity: 1; } .flight-card-compact .action-buttons .book-btn.booked, .fp-multi-leg-card .action-buttons .book-btn.booked, #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn.booked, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn.booked, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn.booked { border-radius: 10px; min-height: 36px; padding: 0 14px; } .flight-page .fp-book-btn.booked { border-radius: 980px; min-height: 44px; padding: 0 20px; font-size: 15px; } .show-flights-btn:disabled { background: var(--color-surface-strong); color: var(--color-text-faint); box-shadow: none; opacity: 1; } .show-flights-btn:disabled:hover { background: var(--color-surface-strong); transform: none; box-shadow: none; } .show-flights-btn.is-loading, .show-flights-btn.is-loading:disabled, .show-flights-btn.is-loading:disabled:hover { display: inline-flex; align-items: center; justify-content: center; cursor: progress; pointer-events: none; color: #fff; opacity: 1; background: var(--cta-apple-fill, var(--primary)); border-color: var(--cta-apple-border, var(--primary-dark)); box-shadow: 0 1px 2px rgba(0, 168, 148, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16); transform: none; } .show-flights-btn__loading-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; } .show-flights-btn__label { letter-spacing: -0.024em; line-height: 1.15; white-space: nowrap; } .show-flights-btn__spinner { flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid rgba(255, 255, 255, 0.28); border-top-color: #fff; border-radius: 50%; animation: show-flights-spin 0.72s linear infinite; } @keyframes show-flights-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .show-flights-btn__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.72); opacity: 0.9; } } .flight-card-compact, .fp-multi-leg-card { --fc-bg: #ffffff; --fc-fill: transparent; --fc-fill-elevated: rgba(60, 60, 67, 0.06); --fc-segment-bg: transparent; --fc-separator: rgba(60, 60, 67, 0.12); --fc-label: #8e8e93; --fc-text: #1d1d1f; --fc-text-secondary: #6e6e73; --fc-radius: 16px; --fc-radius-inner: 12px; --fc-radius-pill: 980px; --fc-shadow: none; --fc-perf-line: rgba(60, 60, 67, 0.2); --fc-divider: rgba(60, 60, 67, 0.12); --fc-aircraft-photo-radius: 4px; --fc-aircraft-photo-w: 136px; --fc-aircraft-photo-h: 102px; --fc-col-gap: 12px; --fc-col-date-w: 70px; --fc-col-dur-w: 92px; --fc-col-ac-photo-w: 148px; --fc-ticket-ratings-w: 100px; --fc-ticket-actions-w: 140px; --fc-ticket-stub-w: calc( var(--fc-ticket-ratings-w) + var(--fc-col-gap) + var(--fc-ticket-actions-w) ); --fc-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; font-family: var(--fc-font); background: var(--fc-bg); border: 0.5px solid rgba(60, 60, 67, 0.14); border-radius: var(--fc-radius); padding: 14px 16px; margin-bottom: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } :root[data-theme="dark"] .flight-card-compact, :root[data-theme="dark"] .fp-multi-leg-card { --fc-bg: rgba(28, 30, 36, 0.52); --fc-fill: transparent; --fc-fill-elevated: rgba(255, 255, 255, 0.05); --fc-segment-bg: transparent; --fc-separator: rgba(255, 255, 255, 0.08); --fc-label: var(--color-text-muted); --fc-text: var(--color-text); --fc-text-secondary: var(--color-text-secondary); --fc-shadow: none; --fc-perf-line: rgba(255, 255, 255, 0.1); --fc-divider: rgba(255, 255, 255, 0.08); background: var(--fc-bg); border: 0.5px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); } .flight-card-compact:hover, .fp-multi-leg-card:hover, .flight-card-compact.booking-card:hover { background: #ffffff; border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.35); cursor: pointer; } :root[data-theme="dark"] .flight-card-compact:hover, :root[data-theme="dark"] .fp-multi-leg-card:hover, :root[data-theme="dark"] .flight-card-compact.booking-card:hover { background: rgba(38, 40, 48, 0.72); border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(68, 93, 239, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .flight-card-compact:active, .fp-multi-leg-card:active { transform: scale(0.995); } .flight-card-compact .flight-id-badge, .flight-card-compact .flight-id-badge-xl { top: 0; left: 0; background: var(--fc-fill); color: var(--fc-text-secondary); border: none; border-radius: var(--fc-radius) 0 10px 0; box-shadow: none; font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; } .flight-card-compact .flight-id-badge:hover, .flight-card-compact .flight-id-badge-xl:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .flight-card-compact .flight-id-badge.copied, .flight-card-compact .flight-id-badge-xl.copied { background: rgba(52, 199, 89, 0.14); color: #248a3d; } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { gap: 12px 14px; padding: 0 2px; align-items: center; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { min-width: 52px; } .flight-card-compact .flight-date-month, .fp-multi-leg-card .fp-multi-leg-date-line { font-family: var(--fc-font); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--fc-text); line-height: 1.25; } .flight-card-compact .flight-date-year { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); line-height: 1.25; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination { min-width: 0; gap: 3px; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city { font-family: var(--fc-font); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--fc-text); line-height: 1.35; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .flight-card-compact .flight-departure .airport-district, .flight-card-compact .flight-destination .airport-district, .flight-card-compact .flight-departure .airport-name, .flight-card-compact .flight-destination .airport-name { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); line-height: 1.35; white-space: normal; overflow: visible; text-overflow: unset; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; } .flight-card-compact .flight-departure .airport-code, .flight-card-compact .flight-destination .airport-code { font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--fc-text-secondary); margin-top: 1px; } .flight-card-compact .flight-duration { gap: 5px; } .flight-card-compact .duration-time, .flight-card-compact .duration-distance { font-family: var(--fc-font); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--fc-text-secondary); gap: 5px; } .flight-card-compact .duration-time { color: var(--fc-text); } .flight-card-compact .flight-duration i { font-size: 10px; color: var(--fc-label); opacity: 0.85; } .flight-card-compact .duration-separator { color: var(--fc-label); opacity: 0.5; } .flight-card-compact .duration-separator i { font-size: 9px; } .flight-card-compact .flight-aircraft .aircraft-details { gap: 3px; min-width: 0; } .flight-card-compact .aircraft-model { font-family: var(--fc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--fc-text); line-height: 1.35; white-space: normal; overflow: visible; text-overflow: unset; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; } .flight-card-compact .aircraft-category { font-family: var(--fc-font); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-label); margin: 0; } .flight-card-compact .flight-aircraft .aircraft-seats { font-family: var(--fc-font); font-size: 12px; font-weight: 400; color: var(--fc-label); margin-top: 1px; } .flight-card-compact .flight-aircraft .aircraft-seats i { font-size: 10px; color: var(--fc-label); margin-right: 3px; } .flight-card-compact .flight-aircraft-image .aircraft-image-container { background: var(--fc-fill); border-radius: var(--fc-aircraft-photo-radius); border: none; min-height: 52px; overflow: hidden; } .flight-card-compact .flight-list-aircraft-image, .flight-card-compact .aircraft-image-container .aircraft-image { border-radius: var(--fc-aircraft-photo-radius); } .flight-card-compact .flight-ratings { flex: 0 0 auto; min-width: 0; max-width: 120px; gap: 4px; } .flight-card-compact .score-badge-container { gap: 3px; } .flight-card-compact .score-badge { min-width: 28px; height: 28px; padding: 2px 7px; border-radius: 8px; font-size: 13px; font-weight: 700; box-shadow: none; border: none; } .flight-card-compact .score-badge:hover { transform: none; box-shadow: none; filter: brightness(1.05); } .flight-card-compact .score-value { font-family: var(--fc-font); } .flight-card-compact .score-comment { font-family: var(--fc-font); font-size: 10px; font-weight: 400; line-height: 1.3; color: var(--fc-label); text-align: center; max-width: 110px; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; } .flight-card-compact .price-label { font-family: var(--fc-font); font-size: 11px; color: var(--fc-label); } .flight-card-compact .flight-actions { width: 132px; gap: 6px; } .flight-card-compact .actions-price-display, .fp-multi-leg-card .actions-price-display { gap: 1px; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } .flight-card-compact .price-line, .fp-multi-leg-card .price-line, .flight-card-compact .price-meta, .fp-multi-leg-card .price-meta { position: relative; width: 100%; max-width: 100%; min-width: 0; white-space: nowrap; flex-wrap: nowrap; } .flight-card-compact .price-line .current-price, .flight-card-compact .price-meta .original-price, .flight-card-compact .price-meta .savings-line, .flight-card-compact .price-meta .estimated-price-label, .fp-multi-leg-card .price-line .current-price, .fp-multi-leg-card .price-meta .original-price, .fp-multi-leg-card .price-meta .savings-line, .fp-multi-leg-card .price-meta .estimated-price-label { flex-shrink: 0; line-height: 1.1; } .flight-card-compact .actions-price-display--estimated, .fp-multi-leg-card .actions-price-display--estimated { align-items: flex-end; gap: 3px; } .flight-card-compact .estimated-price-label, .fp-multi-leg-card .estimated-price-label { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--fc-font); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--fc-label); } .flight-card-compact .estimated-price-label__sep, .fp-multi-leg-card .estimated-price-label__sep { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: 0 0 auto; } .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { overflow: visible; } .flight-card-compact .price-line.price-line--expand, .fp-multi-leg-card .price-line.price-line--expand { z-index: 5; width: max-content; max-width: none; } .flight-card-compact .price-line.price-line--expand::before, .fp-multi-leg-card .price-line.price-line--expand::before { content: ""; position: absolute; inset: -3px -6px -3px -12px; background: var(--fc-segment-bg, #fff); border-radius: 8px; z-index: -1; box-shadow: -12px 0 16px -8px var(--fc-segment-bg, #fff); } .flight-card-compact .current-price { font-family: var(--fc-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--fc-text); font-variant-numeric: tabular-nums; } .flight-card-compact .original-price { font-family: var(--fc-font); font-size: 13px; font-weight: 400; color: var(--fc-label); } .flight-card-compact .savings-line { font-family: var(--fc-font); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; } .flight-card-compact .savings-line.has-savings { color: #248a3d; } .flight-card-compact .savings-line.has-overprice { color: var(--fc-text-secondary); } .flight-card-compact .overprice-badge { font-family: var(--fc-font); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--fc-radius-pill); background: rgba(255, 59, 48, 0.1); color: #d70015; } .flight-card-compact .current-price.price-contact { font-size: 13px; font-weight: 600; color: var(--fc-text-secondary); } .flight-card-compact .action-buttons, #booking-flight-panel .fd-rail-actions > .action-buttons, #flight-details-popup .fd-rail-actions > .action-buttons, #booking-details-modal .fd-rail-actions > .action-buttons { flex-direction: row; gap: 8px; border: none; box-shadow: none; overflow: visible; background: transparent; border-radius: 0; width: 100%; align-items: stretch; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { display: none; } .flight-card-compact .action-buttons .favorite-btn, .flight-card-compact .flight-actions .action-btn { font-family: var(--fc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--fc-radius-pill); min-height: 36px; padding: 0 14px; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .flight-card-compact .action-buttons .book-btn { display: inline-flex; align-items: center; justify-content: center; } .flight-card-compact .action-buttons .fc-share-btn, .flight-card-compact .action-buttons .favorite-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn, #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn, #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn, #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; background: #f2f2f7; color: #1d1d1f; border: 0.5px solid rgba(60, 60, 67, 0.22); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; } :root[data-theme="dark"] .flight-card-compact .action-buttons .fc-share-btn, :root[data-theme="dark"] .flight-card-compact .action-buttons .favorite-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn { background: rgba(255, 255, 255, 0.06); color: var(--fc-text-secondary); border-color: rgba(255, 255, 255, 0.12); } .flight-card-compact .action-buttons .fc-share-btn:hover, #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn:hover, #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn:hover, #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn:hover { background: #eaeaed; color: var(--fc-text); border-color: rgba(60, 60, 67, 0.3); box-shadow: none; } :root[data-theme="dark"] .flight-card-compact .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions > .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions > .action-buttons .fc-share-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions > .action-buttons .fc-share-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); } .flight-card-compact .action-buttons .favorite-btn:hover { background: rgba(255, 59, 48, 0.12); color: var(--danger); border-color: rgba(255, 59, 48, 0.28); box-shadow: none; } #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn:hover, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn:hover, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn:hover { background: rgba(60, 60, 67, 0.1); color: #ff3b30; border-color: transparent; box-shadow: none; } .flight-card-compact .action-buttons .favorite-btn.active, .flight-card-compact .action-buttons .favorite-btn.favorited { color: var(--danger); background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.28); } #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn.active, #booking-flight-panel .fd-rail-actions > .action-buttons .favorite-btn.favorited, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn.active, #flight-details-popup .fd-rail-actions > .action-buttons .favorite-btn.favorited, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn.active, #booking-details-modal .fd-rail-actions > .action-buttons .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions .favorite-btn.favorited, #flight-details-popup .fd-rail-actions .favorite-btn.favorited, #booking-details-modal .fd-rail-actions .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions .favorite-btn.is-favorite, #flight-details-popup .fd-rail-actions .favorite-btn.is-favorite, #booking-details-modal .fd-rail-actions .favorite-btn.is-favorite { color: #ff3b30; background: transparent; border-color: transparent; } .flight-card-compact .action-buttons .favorite-btn.favorited i, .flight-card-compact .action-buttons .favorite-btn.is-favorite i, #booking-flight-panel .fd-rail-actions .favorite-btn.favorited i, #flight-details-popup .fd-rail-actions .favorite-btn.favorited i, #booking-details-modal .fd-rail-actions .favorite-btn.favorited i { color: #ff3b30; } .flight-card-compact.booking-card { border-left: none; } :root:not([data-theme="dark"]) .flight-card-compact.booking-card:hover { background: #ffffff; border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.35); } .flight-card-compact.booking-card .booking-status .status-badge { font-family: var(--fc-font); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: var(--fc-radius-pill); padding: 4px 10px; } .flight-card-compact.booking-card .booking-date-time, .flight-card-compact.booking-card .booking-value { font-family: var(--fc-font); font-size: 12px; color: var(--fc-label); } .flight-card-compact.booking-card .booking-price-value { font-family: var(--fc-font); font-weight: 700; color: var(--fc-text); } .flight-card-compact .flight-actions .cancel-btn, .flight-card-compact .flight-actions .chat-btn { background: var(--fc-fill); color: var(--fc-text); border: none; box-shadow: none; } .flight-card-compact .flight-actions .cancel-btn:hover { background: rgba(255, 59, 48, 0.1); color: #d70015; transform: none; box-shadow: none; } .flight-card-compact .flight-actions .chat-btn:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .fp-multi-leg-card { border-color: rgba(60, 60, 67, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } :root:not([data-theme="dark"]) .fp-multi-leg-card:hover { background: #ffffff; border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.35); } :root[data-theme="dark"] .fp-multi-leg-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .fp-multi-leg-card .fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border: none; border-radius: var(--fc-radius) 0 10px 0; font-family: var(--fc-font); font-size: 10px; font-weight: 600; } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge .flight-id-text, .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge i { color: inherit; } .fp-multi-leg-card .fp-multi-leg-legs-panel { border-top: 0.5px solid var(--fc-separator); background: var(--fc-fill); border-radius: 0 0 var(--fc-radius) var(--fc-radius); margin-top: 8px; padding: 14px 16px 12px; } .fp-multi-leg-card .fp-leg-row { border-bottom-color: var(--fc-separator); } .fp-multi-leg-card .fp-leg-index { font-family: var(--fc-font); background: var(--fc-fill); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-code { font-family: var(--fc-font); color: var(--fc-text); } .fp-multi-leg-card .fp-leg-city { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-point { flex-direction: row; align-items: baseline; } .fp-multi-leg-card .fp-leg-arrow { background: var(--fc-separator); margin: 0; align-self: center; } .fp-multi-leg-card .fp-leg-arrow::after { border-left-color: var(--fc-label); } .fp-multi-leg-card .fp-leg-meta { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-metrics { font-family: var(--fc-font); color: var(--fc-label); } .fp-multi-leg-card .fp-leg-aircraft { font-family: var(--fc-font); color: var(--fc-text); } .fp-multi-leg-card .fp-leg-price { font-family: var(--fc-font); color: var(--fc-text); } .flights-list, .bookmarks-list { gap: 12px; } :root[data-theme="dark"] .flights-list, :root[data-theme="dark"] .bookmarks-list { gap: 10px; } @media (max-width: 1024px) { .flight-card-compact, .fp-multi-leg-card { padding: 0; overflow: hidden; border-radius: 18px; } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; overflow: visible; align-items: stretch; grid-template-columns: none !important; } .flight-card-compact .flight-card-content > div, .fp-multi-leg-card .flight-card-content > div { width: 100%; min-width: 0; flex-shrink: 0; grid-column: auto !important; grid-row: auto !important; order: unset !important; margin: 0 !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { order: -1 !important; flex: 0 0 auto; } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { order: 0 !important; flex: 1 1 auto; } .flight-card-compact .fc-desktop-only, .fp-multi-leg-card .fc-desktop-only { display: none !important; } .flight-card-compact .flight-duration.mobile-position, .flight-card-compact .flight-duration.desktop-position { display: none !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { position: relative; display: block !important; width: 100%; height: 190px; min-height: 190px; max-height: 220px; margin: 0 !important; padding: 0 !important; background: var(--fc-fill); border-radius: 0 !important; overflow: hidden; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: var(--fc-fill) !important; display: block !important; overflow: hidden; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .flight-card-compact .fc-hero .aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .aircraft-image { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center; border-radius: 0 !important; transform: none !important; } .flight-card-compact .fc-hero .fc-hero-meta, .fp-multi-leg-card .fc-hero .fc-hero-meta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.55) 100% ); } .flight-card-compact .fc-hero .aircraft-details, .fp-multi-leg-card .fc-hero .aircraft-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: start; height: 100%; width: 100%; gap: 0; } .flight-card-compact .fc-hero .aircraft-category, .fp-multi-leg-card .fc-hero .aircraft-category { grid-column: 2; grid-row: 1; place-self: start end; margin: 0; padding: 5px 10px; border-radius: var(--fc-radius-pill); background: rgba(255, 255, 255, 0.92); color: var(--fc-text); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; backdrop-filter: blur(8px); } :root[data-theme="dark"] .flight-card-compact .fc-hero .aircraft-category, :root[data-theme="dark"] .fp-multi-leg-card .fc-hero .aircraft-category { background: rgba(255, 255, 255, 0.08); color: var(--color-text); box-shadow: inset 0 0 0 0.5px rgba(58, 69, 84, 0.55); } .flight-card-compact .fc-hero .fc-hero-bottom, .fp-multi-leg-card .fc-hero .fc-hero-bottom { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; width: 100%; } .flight-card-compact .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-model { grid-column: 1; place-self: end start; text-align: left; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-seats { grid-column: 2; place-self: end end; text-align: right; color: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { display: flex; flex-direction: column; gap: 0; padding: 12px 14px 14px; background: var(--fc-segment-bg); } .flight-card-compact .fc-stats, .fp-multi-leg-card .fc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 0 12px; border-bottom: 0.5px solid var(--fc-separator); } .flight-card-compact .fc-stat, .fp-multi-leg-card .fc-stat { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 0 8px; font-family: var(--fc-font); font-size: 12px; font-weight: 500; color: var(--fc-text); text-align: left; } .flight-card-compact .fc-stat:not(:last-child), .fp-multi-leg-card .fc-stat:not(:last-child) { border-right: 0.5px solid var(--fc-separator); } .flight-card-compact .fc-stat i, .fp-multi-leg-card .fc-stat i { flex-shrink: 0; font-size: 12px; color: var(--fc-label); } .flight-card-compact .fc-stat span, .fp-multi-leg-card .fc-stat span { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flight-card-compact .fc-route, .fp-multi-leg-card .fc-route { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 14px; margin: 0 -14px; border-bottom: none; width: calc(100% + 28px) !important; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { display: block; position: relative; flex-shrink: 0; box-sizing: border-box; height: 0; margin: 0 -14px; padding: 0; width: calc(100% + 28px); background: transparent; border: none; border-top: 1px dashed var(--fc-perf-line); pointer-events: none; } .flight-card-compact .fc-route .flight-departure, .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-departure, .fp-multi-leg-card .fc-route .flight-destination { order: unset !important; grid-row: 1 !important; grid-column: auto !important; width: auto !important; min-width: 0; display: flex !important; flex-direction: column !important; gap: 3px; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } .flight-card-compact .fc-route .flight-departure { grid-column: 1 !important; text-align: left; align-items: flex-start !important; } .flight-card-compact .fc-route .flight-destination { grid-column: 3 !important; text-align: right; align-items: flex-end !important; } .flight-card-compact .fc-route-connector, .fp-multi-leg-card .fc-route-connector { grid-column: 2 !important; grid-row: 1 !important; align-self: center; width: 28px; height: 1px; margin: 0; background: repeating-linear-gradient( 90deg, var(--fc-label) 0, var(--fc-label) 4px, transparent 4px, transparent 8px ); opacity: 0.45; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination { min-width: 0; gap: 4px; } .flight-card-compact .flight-departure { text-align: left; align-items: flex-start; } .flight-card-compact .flight-destination { text-align: right; align-items: flex-end; } .flight-card-compact .fc-endpoint-head { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .flight-card-compact .flight-destination .fc-endpoint-head { flex-direction: row-reverse; } .flight-card-compact .fc-desktop-flag { display: none; } .flight-card-compact .fc-endpoint-head .airport-code, .flight-card-compact .fc-compact-code { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: var(--fc-text); margin: 0; line-height: 1.1; } .flight-card-compact .fc-desktop-code { display: none; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city { display: block !important; font-size: 14px; font-weight: 600; color: var(--fc-text); line-height: 1.3; width: 100%; } .flight-card-compact .fc-route .fc-city-text { display: inline; } .flight-card-compact .flight-departure .airport-name, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-departure .airport-district, .flight-card-compact .flight-destination .airport-district { font-size: 11px; line-height: 1.35; color: var(--fc-label); } .flight-card-compact .flight-destination .airport-city, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-destination .airport-district { text-align: right; } .flight-card-compact .fc-bottom, .fp-multi-leg-card .fc-bottom { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 4px 10px; margin: 0 -14px; padding: 16px 14px 0; border-top: none; order: unset !important; width: calc(100% + 28px) !important; align-items: start; } .flight-card-compact .fc-bottom .flight-ratings:empty, .fp-multi-leg-card .fc-bottom .flight-ratings:empty { display: none; } .flight-card-compact .fc-bottom .flight-ratings:not(:empty) + .flight-actions .actions-price-display, .fp-multi-leg-card .fc-bottom .flight-ratings:not(:empty) + .flight-actions .actions-price-display { grid-column: 3; grid-row: 1; } .flight-card-compact .fc-bottom .flight-ratings:empty + .flight-actions .actions-price-display, .fp-multi-leg-card .fc-bottom .flight-ratings:empty + .flight-actions .actions-price-display { grid-column: 1 / -1; justify-self: end; } .flight-card-compact .fc-bottom .flight-actions, .flight-card-compact .fc-bottom .booking-info-section, .flight-card-compact .fc-bottom .price-info-section, .fp-multi-leg-card .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .booking-info-section, .fp-multi-leg-card .fc-bottom .price-info-section { order: unset !important; grid-row: auto !important; grid-column: auto !important; border-top: none !important; padding-top: 0 !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; } .flight-card-compact .fc-bottom .flight-ratings, .flight-card-compact .fc-bottom .score-badge-container, .flight-card-compact .fc-bottom .score-badges-row, .fp-multi-leg-card .fc-bottom .flight-ratings, .fp-multi-leg-card .fc-bottom .score-badge-container, .fp-multi-leg-card .fc-bottom .score-badges-row { display: contents; } .flight-card-compact .fc-bottom .score-badge, .fp-multi-leg-card .fc-bottom .score-badge { grid-column: 1; grid-row: 1 / span 2; place-self: start start; flex-shrink: 0; } .flight-card-compact .fc-bottom .score-comment, .fp-multi-leg-card .fc-bottom .score-comment { grid-column: 2; grid-row: 1 / span 2; place-self: start start; text-align: left; min-width: 0; max-width: none; font-size: 11px; color: var(--fc-label); line-height: 1.4; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; } .flight-card-compact .fc-bottom .score-comment:empty, .fp-multi-leg-card .fc-bottom .score-comment:empty { display: none; } .flight-card-compact .fc-bottom .price-label { grid-column: 1; grid-row: 1; place-self: center start; max-width: none; text-align: left; } .flight-card-compact .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .flight-actions { display: contents; width: 100%; border: none; padding: 0; } .flight-card-compact .fc-bottom .actions-price-display, .fp-multi-leg-card .fc-bottom .actions-price-display { grid-column: 3; grid-row: 1; place-self: start end; align-items: flex-end; width: auto; flex-shrink: 0; min-width: 0; } .flight-card-compact .fc-bottom .current-price { font-size: 22px; font-weight: 700; line-height: 1.1; } .flight-card-compact .fc-bottom .savings-line, .flight-card-compact .fc-bottom .estimated-price-label { text-align: right; font-size: 11px; } .flight-card-compact .fc-bottom .price-line, .flight-card-compact .fc-bottom .price-meta { justify-content: flex-end; } .flight-card-compact .fc-bottom .actions-price-display--estimated { width: 100%; align-items: flex-end; } .flight-card-compact .fc-bottom .action-buttons, .fp-multi-leg-card .fc-bottom .action-buttons { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 4px; gap: 8px; } .flight-card-compact .fc-bottom .action-buttons .book-btn { min-height: 46px; font-size: 15px; border-radius: 12px; } .flight-card-compact .fc-bottom .action-buttons .fc-share-btn, .flight-card-compact .fc-bottom .action-buttons .favorite-btn { min-height: 46px; border-radius: 12px; } .flight-card-compact.booking-card .fc-body { padding-top: 14px; } .flight-card-compact.booking-card .flight-ratings, .fp-multi-leg-card.booking-card .flight-ratings { display: none !important; } .flight-card-compact.booking-card .fc-bottom, .fp-multi-leg-card.booking-card .fc-bottom { display: flex; flex-direction: column; gap: 0; width: calc(100% + 28px) !important; } .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section { width: 100% !important; min-width: 0; padding: 0 0 12px; border: none; flex-direction: column !important; align-items: center !important; gap: 8px; } .flight-card-compact.booking-card .booking-info-section .actions-price-display, .fp-multi-leg-card.booking-card .booking-info-section .actions-price-display { align-items: center; width: 100%; } .flight-card-compact.booking-card .booking-info-section .price-line, .fp-multi-leg-card.booking-card .booking-info-section .price-line, .flight-card-compact.booking-card .booking-info-section .price-meta, .fp-multi-leg-card.booking-card .booking-info-section .price-meta { justify-content: center; } .flight-card-compact.booking-card .booking-info-section .current-price, .fp-multi-leg-card.booking-card .booking-info-section .current-price { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .flight-card-compact.booking-card .booking-info-section .savings-line, .fp-multi-leg-card.booking-card .booking-info-section .savings-line { text-align: center; font-size: 11px; } .flight-card-compact.booking-card .booking-info-section .booking-status, .fp-multi-leg-card.booking-card .booking-info-section .booking-status { justify-content: center; margin-top: 0; } .flight-card-compact.booking-card .booking-info-section .booking-date-time, .fp-multi-leg-card.booking-card .booking-info-section .booking-date-time { justify-content: center; width: 100%; } .flight-card-compact.booking-card .booking-info-section .booking-value, .fp-multi-leg-card.booking-card .booking-info-section .booking-value { font-size: 12px; color: var(--fc-label); } .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: none !important; min-width: 0; padding: 12px 0 0; margin: 0; border: none; gap: 8px; } .flight-card-compact.booking-card .price-info-section .action-btn, .fp-multi-leg-card.booking-card .price-info-section .action-btn { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; min-height: 46px; margin: 0 !important; padding: 0 12px; border-radius: 12px; font-family: var(--fc-font); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; } .flight-card-compact.booking-card .price-info-section .cancel-btn, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn { background: #fff; color: #d70015; border: 0.5px solid rgba(255, 59, 48, 0.35); box-shadow: none; } .flight-card-compact.booking-card .price-info-section .cancel-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn:hover { background: rgba(255, 59, 48, 0.08); transform: none; box-shadow: none; } .flight-card-compact.booking-card .price-info-section .chat-btn, .fp-multi-leg-card.booking-card .price-info-section .chat-btn { background: var(--fc-fill); color: var(--fc-text); border: 0.5px solid rgba(60, 60, 67, 0.14); box-shadow: none; } .flight-card-compact.booking-card .price-info-section .chat-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .chat-btn:hover { background: var(--fc-fill-elevated); transform: none; box-shadow: none; } .fp-multi-leg-card .fp-multi-leg-badge { z-index: 5; color: var(--fc-text); background: var(--fc-fill); } .flight-card-compact.fp-multi-leg-card .flight-id-badge.fp-multi-leg-badge { color: var(--fc-text); background: var(--fc-fill); } .fp-multi-leg-card .fp-multi-leg-legs-panel { margin: 0; padding: 12px 14px 14px; border-top: 0.5px solid var(--fc-separator); } } @media (max-width: 768px) { .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; } .flight-card-compact .flight-card-content > div, .fp-multi-leg-card .flight-card-content > div { grid-column: auto !important; grid-row: auto !important; order: unset !important; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { order: -1 !important; grid-row: auto !important; display: block !important; flex-direction: unset !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; background: var(--fc-fill) !important; border-radius: 0 !important; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { order: unset !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; flex: none !important; display: block !important; align-items: stretch !important; justify-content: stretch !important; } .flight-card-compact .fc-hero .flight-aircraft-image .aircraft-image-container, .flight-card-compact .fc-hero .flight-aircraft-image .aircraft-image, .flight-card-compact .fc-hero .flight-aircraft-image .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image .aircraft-image-container, .fp-multi-leg-card .fc-hero .flight-aircraft-image .aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image .flight-list-aircraft-image { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; transform: none !important; } .flight-card-compact .fc-hero .aircraft-model, .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-seats { color: #fff !important; } .flight-card-compact .fc-stat, .fp-multi-leg-card .fc-stat { flex-flow: row nowrap !important; align-items: center !important; justify-content: center !important; } .flight-card-compact .fc-stat i, .fp-multi-leg-card .fc-stat i { display: inline-block !important; width: auto !important; margin: 0 !important; } .flight-card-compact .fc-route .flight-departure, .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-departure, .fp-multi-leg-card .fc-route .flight-destination { order: unset !important; grid-row: 1 !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: auto !important; min-width: 0 !important; } .flight-card-compact .fc-route .flight-destination, .fp-multi-leg-card .fc-route .flight-destination { align-items: flex-end !important; text-align: right !important; } .flight-card-compact .fc-route .flight-departure .airport-code, .flight-card-compact .fc-route .flight-departure .airport-city, .flight-card-compact .fc-route .flight-departure .airport-name, .flight-card-compact .fc-route .flight-departure .airport-district, .fp-multi-leg-card .fc-route .flight-departure .airport-code, .fp-multi-leg-card .fc-route .flight-departure .airport-city, .fp-multi-leg-card .fc-route .flight-departure .airport-name, .fp-multi-leg-card .fc-route .flight-departure .airport-district { text-align: left !important; width: auto !important; justify-content: flex-start !important; } .flight-card-compact .fc-route .flight-destination .airport-code, .flight-card-compact .fc-route .flight-destination .airport-city, .flight-card-compact .fc-route .flight-destination .airport-name, .flight-card-compact .fc-route .flight-destination .airport-district, .fp-multi-leg-card .fc-route .flight-destination .airport-code, .fp-multi-leg-card .fc-route .flight-destination .airport-city, .fp-multi-leg-card .fc-route .flight-destination .airport-name, .fp-multi-leg-card .fc-route .flight-destination .airport-district { text-align: right !important; width: auto !important; justify-content: flex-end !important; } .flight-card-compact:not(.booking-card) .fc-bottom .flight-actions, .fp-multi-leg-card:not(.booking-card) .fc-bottom .flight-actions, .flight-card-compact:not(.booking-card) .fc-bottom .booking-info-section, .fp-multi-leg-card:not(.booking-card) .fc-bottom .booking-info-section, .flight-card-compact:not(.booking-card) .fc-bottom .price-info-section, .fp-multi-leg-card:not(.booking-card) .fc-bottom .price-info-section { order: unset !important; grid-row: auto !important; border-top: none !important; padding-top: 0 !important; } } @media (max-width: 1024px) { .flight-card-compact.booking-card .fc-bottom .booking-info-section, .fp-multi-leg-card.booking-card .fc-bottom .booking-info-section { display: flex !important; flex-flow: column nowrap !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; } .flight-card-compact.booking-card .fc-bottom .price-info-section, .fp-multi-leg-card.booking-card .fc-bottom .price-info-section { display: flex !important; flex-flow: row nowrap !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; padding-top: 12px !important; margin-top: 0 !important; border-top: none !important; gap: 8px !important; } .flight-card-compact.booking-card .fc-bottom .price-info-section .action-btn, .fp-multi-leg-card.booking-card .fc-bottom .price-info-section .action-btn { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; } } @media (min-width: 769px) and (max-width: 1024px) { .flights-list, .bookmarks-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } } @media (max-width: 480px) { .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { height: 172px; min-height: 172px; } .flight-card-compact .fc-stat { font-size: 11px; padding: 0 4px; gap: 4px; } .flight-card-compact .fc-endpoint-head .airport-code, .flight-card-compact .fc-compact-code { font-size: 20px; } .flight-card-compact .fc-bottom .current-price { font-size: 20px; } } @media (min-width: 1025px) { .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 12px 14px; padding: 0 2px; } .flight-card-compact .fc-stats, .flight-card-compact .fc-route-connector, .fp-multi-leg-card .fc-stats, .fp-multi-leg-card .fc-route-connector { display: none !important; } .flight-card-compact .fc-desktop-only, .fp-multi-leg-card .fc-desktop-only { display: block; } .flight-card-compact .fc-journey.fc-desktop-only { display: flex; } .flight-card-compact .flight-duration.mobile-position, .fp-multi-leg-card .flight-duration.mobile-position { display: none !important; } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position { display: flex !important; order: 4; flex: 0.8; min-width: 0; } .flight-card-compact .fc-body, .fp-multi-leg-card .fc-body { display: contents; } .flight-card-compact .fc-route:not(.fc-mobile-route), .fp-multi-leg-card .fc-route { display: contents; } .flight-card-compact .fc-route.fc-mobile-route { display: none !important; } .flight-card-compact .fc-bottom, .fp-multi-leg-card .fc-bottom { display: contents; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { order: 1; flex: 1.2; min-width: 0; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure { order: 2; flex: 1.5; min-width: 0; } .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination { order: 3; flex: 1.5; min-width: 0; } .flight-card-compact .fc-hero.flight-aircraft-container, .fp-multi-leg-card .fc-hero.flight-aircraft-container { display: contents; } .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { position: static; order: 5; flex: 1.5; min-width: 0; display: flex; align-items: center; padding: 0; background: none; pointer-events: auto; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { position: static; order: 6; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; height: auto; width: auto; padding: 4px 6px 4px 2px; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { width: var(--fc-aircraft-photo-w) !important; height: var(--fc-aircraft-photo-h) !important; min-width: var(--fc-aircraft-photo-w) !important; min-height: var(--fc-aircraft-photo-h) !important; max-width: var(--fc-aircraft-photo-w) !important; max-height: var(--fc-aircraft-photo-h) !important; flex-shrink: 0; border-radius: var(--fc-aircraft-photo-radius); background: var(--fc-fill) !important; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image, .flight-card-compact .fc-hero .aircraft-image-container .aircraft-image, .fp-multi-leg-card .fc-hero .aircraft-image-container .aircraft-image { width: var(--fc-aircraft-photo-w) !important; height: var(--fc-aircraft-photo-h) !important; min-width: var(--fc-aircraft-photo-w) !important; min-height: var(--fc-aircraft-photo-h) !important; max-width: var(--fc-aircraft-photo-w) !important; max-height: var(--fc-aircraft-photo-h) !important; object-fit: cover; border-radius: var(--fc-aircraft-photo-radius); transform: none !important; } .flight-card-compact .fc-hero .aircraft-details, .fp-multi-leg-card .fc-hero .aircraft-details { display: flex; flex-direction: column; gap: 2px; height: auto; width: 100%; min-width: 0; padding-right: 8px; grid-template-columns: none; grid-template-rows: none; } .flight-card-compact .fc-hero .fc-hero-bottom, .fp-multi-leg-card .fc-hero .fc-hero-bottom { display: contents; } .flight-card-compact .fc-hero .aircraft-model, .fp-multi-leg-card .fc-hero .aircraft-model { order: 1; color: var(--fc-text); font-size: 13px; font-weight: 600; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .flight-card-compact .fc-hero .aircraft-category, .fp-multi-leg-card .fc-hero .aircraft-category { order: 2; align-self: flex-start; padding: 0; background: none; backdrop-filter: none; color: var(--fc-label); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; } .flight-card-compact .fc-hero .aircraft-seats, .fp-multi-leg-card .fc-hero .aircraft-seats { order: 3; color: var(--fc-label); text-shadow: none; font-size: 12px; text-align: left; } .flight-card-compact .flight-ratings, .fp-multi-leg-card .flight-ratings { order: 7; flex: 0 0 var(--fc-ticket-ratings-w); width: var(--fc-ticket-ratings-w); min-width: var(--fc-ticket-ratings-w); max-width: var(--fc-ticket-ratings-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .flight-card-compact .flight-actions, .fp-multi-leg-card .flight-actions { order: 8; display: flex; flex-direction: column; flex: 0 0 var(--fc-ticket-actions-w); width: var(--fc-ticket-actions-w); min-width: var(--fc-ticket-actions-w); max-width: var(--fc-ticket-actions-w); flex-shrink: 0; gap: 8px; border-top: none; padding-top: 0; } .flight-card-compact .fc-endpoint-head, .fp-multi-leg-card .fc-endpoint-head { display: none; } .flight-card-compact .fc-desktop-flag, .fp-multi-leg-card .fc-desktop-flag { display: inline; } .flight-card-compact .fc-compact-code, .fp-multi-leg-card .fc-compact-code { display: none; } .flight-card-compact .fc-desktop-code, .fp-multi-leg-card .fc-desktop-code { display: block; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city, .fp-multi-leg-card .flight-departure .airport-city, .fp-multi-leg-card .flight-destination .airport-city { font-size: 15px; display: inline-flex !important; align-items: center; gap: 4px; } .flight-card-compact .flight-departure .fc-desktop-code, .flight-card-compact .flight-destination .fc-desktop-code, .fp-multi-leg-card .flight-departure .fc-desktop-code, .fp-multi-leg-card .flight-destination .fc-desktop-code { font-size: 11px; font-weight: 600; } .flight-card-compact .flight-departure, .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-departure, .fp-multi-leg-card .flight-destination { text-align: left; align-items: flex-start; display: flex; flex-direction: column; } .flight-card-compact .flight-destination .airport-city, .flight-card-compact .flight-destination .airport-name, .flight-card-compact .flight-destination .airport-district, .fp-multi-leg-card .flight-destination .airport-city, .fp-multi-leg-card .flight-destination .airport-name, .fp-multi-leg-card .flight-destination .airport-district { text-align: left; } .flight-card-compact .fc-bottom .score-badge, .flight-card-compact .fc-bottom .score-comment, .flight-card-compact .fc-bottom .actions-price-display, .flight-card-compact .fc-bottom .action-buttons, .fp-multi-leg-card .fc-bottom .score-badge, .fp-multi-leg-card .fc-bottom .score-comment, .fp-multi-leg-card .fc-bottom .actions-price-display, .fp-multi-leg-card .fc-bottom .action-buttons { grid-column: auto; grid-row: auto; } .flight-card-compact .score-comment, .fp-multi-leg-card .score-comment { max-width: 110px; text-align: center; font-size: 10px; line-height: 1.3; display: block; overflow: visible; -webkit-line-clamp: unset; } .flight-card-compact .fc-bottom .flight-ratings, .flight-card-compact .fc-bottom .score-badge-container, .flight-card-compact .fc-bottom .score-badges-row, .fp-multi-leg-card .fc-bottom .flight-ratings, .fp-multi-leg-card .fc-bottom .score-badge-container, .fp-multi-leg-card .fc-bottom .score-badges-row { display: flex; } .flight-card-compact .fc-bottom .flight-actions, .fp-multi-leg-card .fc-bottom .flight-actions { display: flex; } .flight-card-compact .actions-price-display, .fp-multi-leg-card .actions-price-display { align-items: flex-end; } .flight-card-compact .fc-share-btn, .fp-multi-leg-card .fc-share-btn { display: none !important; } .flight-card-compact .action-buttons .favorite-btn, .fp-multi-leg-card .action-buttons .favorite-btn { flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; } } @media (min-width: 1025px) { .flight-card-compact, .fp-multi-leg-card { --fc-segment-bg: transparent; --fc-shell-bg: #ffffff; --fc-perf-dash: 4px; --fc-perf-pitch: 10px; --fc-perf-line: rgba(60, 60, 67, 0.18); --fc-fill: transparent; --fc-fill-elevated: rgba(60, 60, 67, 0.06); --fc-divider: rgba(60, 60, 67, 0.12); background: var(--fc-shell-bg); padding: 13px 16px; border: 0.5px solid rgba(60, 60, 67, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; } .flight-card-compact:hover, .fp-multi-leg-card:hover, .flight-card-compact.booking-card:hover { background: #ffffff; border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.35); } :root[data-theme="dark"] .flight-card-compact, :root[data-theme="dark"] .fp-multi-leg-card { --fc-segment-bg: transparent; --fc-shell-bg: rgba(28, 30, 36, 0.52); --fc-perf-line: rgba(255, 255, 255, 0.12); --fc-fill: transparent; --fc-fill-elevated: rgba(255, 255, 255, 0.05); --fc-divider: rgba(255, 255, 255, 0.08); background: var(--fc-shell-bg); border: 0.5px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); } :root[data-theme="dark"] .flight-card-compact:hover, :root[data-theme="dark"] .fp-multi-leg-card:hover, :root[data-theme="dark"] .flight-card-compact.booking-card:hover { background: rgba(38, 40, 48, 0.72); border-color: rgba(68, 93, 239, 0.65); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(68, 93, 239, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime, .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure, .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination, .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position, .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta, .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image, .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*), .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions, .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section, .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { background: transparent; border-color: transparent; box-shadow: none; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure { border-left: 1px solid var(--fc-divider); border-radius: 0; margin-right: 0; padding-left: 14px; } .flight-card-compact .flight-departure::after, .fp-multi-leg-card .flight-departure::after { display: block; background: var(--fc-divider); opacity: 1; } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position { border-left: 1px solid var(--fc-divider); border-radius: 0; margin-right: 0; padding-left: 12px; } .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { border-left: 1px solid var(--fc-divider); margin-right: 0; padding-left: 12px; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { border-left: none; margin-right: 0; padding-left: 8px; } .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*), .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section { border-left: none; margin-right: 0; padding-left: 14px; } .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { border-left: none; border-radius: 0; padding-left: 10px; } .flight-card-compact .flight-id-badge, .flight-card-compact .flight-id-badge-xl, .fp-multi-leg-card .flight-id-badge, .fp-multi-leg-card .flight-id-badge-xl { background: transparent; color: var(--fc-label); } .flight-card-compact .flight-departure .fc-desktop-code, .flight-card-compact .flight-destination .fc-desktop-code, .fp-multi-leg-card .flight-departure .fc-desktop-code, .fp-multi-leg-card .flight-destination .fc-desktop-code { background: transparent; border-color: rgba(60, 60, 67, 0.22); color: var(--fc-text-secondary); } :root[data-theme="dark"] .flight-card-compact .flight-departure .fc-desktop-code, :root[data-theme="dark"] .flight-card-compact .flight-destination .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-departure .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-destination .fc-desktop-code { border-color: rgba(255, 255, 255, 0.18); } .flight-card-compact .price-line.price-line--expand::before, .fp-multi-leg-card .price-line.price-line--expand::before { background: rgba(255, 255, 255, 0.96); box-shadow: -12px 0 16px -8px rgba(255, 255, 255, 0.96); } :root[data-theme="dark"] .flight-card-compact .price-line.price-line--expand::before, :root[data-theme="dark"] .fp-multi-leg-card .price-line.price-line--expand::before { background: rgba(12, 18, 26, 0.92); box-shadow: -12px 0 16px -8px rgba(12, 18, 26, 0.92); } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { background: #f2f2f7 !important; border-radius: var(--fc-aircraft-photo-radius, 4px); overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); width: var(--fc-aircraft-photo-w, 136px) !important; height: var(--fc-aircraft-photo-h, 102px) !important; min-width: var(--fc-aircraft-photo-w, 136px) !important; min-height: var(--fc-aircraft-photo-h, 102px) !important; max-width: var(--fc-aircraft-photo-w, 136px) !important; max-height: var(--fc-aircraft-photo-h, 102px) !important; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .flight-card-compact .fc-hero .aircraft-image-container .aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .aircraft-image-container .aircraft-image { width: var(--fc-aircraft-photo-w, 136px) !important; height: var(--fc-aircraft-photo-h, 102px) !important; min-width: var(--fc-aircraft-photo-w, 136px) !important; min-height: var(--fc-aircraft-photo-h, 102px) !important; max-width: var(--fc-aircraft-photo-w, 136px) !important; max-height: var(--fc-aircraft-photo-h, 102px) !important; border-radius: var(--fc-aircraft-photo-radius, 4px); } :root[data-theme="dark"] .flight-card-compact .fc-hero .aircraft-image-container, :root[data-theme="dark"] .fp-multi-leg-card .fc-hero .aircraft-image-container { background: rgba(0, 0, 0, 0.25) !important; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } .fp-multi-leg-card:hover { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95); } :root[data-theme="dark"] .fp-multi-leg-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(68, 93, 239, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { gap: 10px 12px; align-items: stretch !important; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: transparent; border: none; border-radius: 0; } .flight-card-compact .flight-date, .fp-multi-leg-card .flight-date { text-align: center; } .flight-card-compact .flight-date-month, .fp-multi-leg-card .flight-date-month { font-size: 15px; font-weight: 650; letter-spacing: -0.03em; } .flight-card-compact .flight-date-year, .fp-multi-leg-card .flight-date-year { margin-top: 2px; font-size: 11px; font-weight: 500; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure { position: relative; align-self: stretch; justify-content: center; margin-right: -12px; padding: 10px 14px 10px 16px; background: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-right: none; border-radius: 12px 0 0 12px; } .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination { align-self: stretch; justify-content: center; padding: 10px 16px 10px 14px; background: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-left: none; border-radius: 0 12px 12px 0; } .flight-card-compact .flight-departure::after, .fp-multi-leg-card .flight-departure::after { content: ""; position: absolute; top: 18%; right: 0; bottom: 18%; width: 1px; background: var(--fc-separator); pointer-events: none; } .flight-card-compact .flight-departure .airport-city, .flight-card-compact .flight-destination .airport-city, .fp-multi-leg-card .flight-departure .airport-city, .fp-multi-leg-card .flight-destination .airport-city { font-size: 14px; font-weight: 650; } .flight-card-compact .flight-departure .fc-desktop-code, .flight-card-compact .flight-destination .fc-desktop-code, .fp-multi-leg-card .flight-departure .fc-desktop-code, .fp-multi-leg-card .flight-destination .fc-desktop-code { display: inline-flex; align-items: center; margin-top: 5px; padding: 2px 7px; border: 0.5px solid rgba(60, 60, 67, 0.14); border-radius: 6px; background: #f2f2f7; font-size: 10px; letter-spacing: 0.06em; } :root[data-theme="dark"] .flight-card-compact .flight-departure .fc-desktop-code, :root[data-theme="dark"] .flight-card-compact .flight-destination .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-departure .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-destination .fc-desktop-code { border-color: var(--fc-separator); background: var(--color-surface-glass-strong); } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position { align-self: stretch; justify-content: center; margin-right: -12px; padding: 10px 10px; background: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-right: none; border-radius: 12px 0 0 12px; } .flight-card-compact .duration-time, .fp-multi-leg-card .duration-time { font-size: 13px; font-weight: 600; } .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta, .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image, .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*) { align-self: stretch; margin-right: -12px; background: var(--fc-segment-bg); border-top: 0.5px solid var(--fc-separator); border-bottom: 0.5px solid var(--fc-separator); } .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { justify-content: center; padding: 10px 12px 10px 10px; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { position: relative; flex: 0 0 auto; align-self: center; padding: 4px 6px 4px 2px; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { border: none; box-shadow: none; background: transparent !important; } .flight-card-compact .fc-hero .aircraft-details, .fp-multi-leg-card .fc-hero .aircraft-details { justify-content: center; } .flight-card-compact .flight-ratings:empty, .fp-multi-leg-card .flight-ratings:empty, .flight-card-compact .flight-ratings:not(:has(*)), .fp-multi-leg-card .flight-ratings:not(:has(*)), .flight-card-compact.booking-card .flight-ratings, .fp-multi-leg-card.booking-card .flight-ratings { display: none !important; margin: 0; padding: 0; border: none; background: none; } .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*) { position: relative; justify-content: center; padding: 10px 10px 10px 14px; } .flight-card-compact .score-badge, .fp-multi-leg-card .score-badge { min-width: 34px; height: 34px; border-radius: 10px; font-size: 14px; } .flight-card-compact .score-comment, .fp-multi-leg-card .score-comment { max-width: 96px; font-size: 9px; line-height: 1.25; } .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { align-self: stretch; justify-content: center; padding: 10px 12px 10px 10px; background: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-left: none; border-radius: 0 12px 12px 0; } .flight-card-compact .current-price, .fp-multi-leg-card .current-price { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; } .flight-card-compact .estimated-price-label, .fp-multi-leg-card .estimated-price-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--fc-label); } .flight-card-compact .savings-line.has-savings, .fp-multi-leg-card .savings-line.has-savings { font-weight: 600; } .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*) { order: 8; } .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { order: 9; } .flight-card-compact.booking-card .flight-actions, .fp-multi-leg-card.booking-card .flight-actions { width: auto; } .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section, .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { width: auto; min-width: 0; } .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section { position: relative; order: 8; flex: 0 0 160px; align-self: stretch; justify-content: center; align-items: flex-end; flex-shrink: 0; margin-right: -12px; padding: 10px 12px 10px 14px; background: var(--fc-segment-bg); border-top: 0.5px solid var(--fc-separator); border-bottom: 0.5px solid var(--fc-separator); border-left: none; border-right: none; } .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { order: 9; flex: 0 0 120px; align-self: stretch; justify-content: center; align-items: stretch; flex-shrink: 0; gap: 8px; padding: 10px 12px; background: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-left: none; border-radius: 0 12px 12px 0; } .flight-card-compact.booking-card .price-info-section .action-btn, .fp-multi-leg-card.booking-card .price-info-section .action-btn { width: 100%; min-height: 36px; justify-content: center; border-radius: 10px; font-size: 12px; font-weight: 600; } .flight-card-compact.booking-card .price-info-section .cancel-btn, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn { background: #fff; color: #d70015; border: 0.5px solid rgba(255, 59, 48, 0.35); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .flight-card-compact.booking-card .price-info-section .cancel-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .cancel-btn:hover { background: rgba(255, 59, 48, 0.08); border-color: rgba(255, 59, 48, 0.45); transform: none; box-shadow: none; } .flight-card-compact.booking-card .price-info-section .chat-btn, .fp-multi-leg-card.booking-card .price-info-section .chat-btn { background: #fff; color: var(--fc-text); border: 0.5px solid rgba(60, 60, 67, 0.18); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .flight-card-compact.booking-card .price-info-section .chat-btn:hover, .fp-multi-leg-card.booking-card .price-info-section .chat-btn:hover { background: rgba(60, 60, 67, 0.06); border-color: rgba(60, 60, 67, 0.28); transform: none; box-shadow: none; } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime, .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure, .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination, .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position, .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta, .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image, .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*), .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions, .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section, .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { background: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; margin-right: 0 !important; border-radius: 0 !important; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure { border-left: 1px solid var(--fc-divider) !important; padding-left: 14px !important; } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position, .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { border-left: 1px solid var(--fc-divider) !important; padding-left: 12px !important; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image, .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*), .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section, .flight-card-compact:not(.booking-card) .flight-actions, .fp-multi-leg-card:not(.booking-card) .flight-actions { border-left: none !important; } .flight-card-compact .flight-departure::after, .fp-multi-leg-card .flight-departure::after { display: block !important; background: var(--fc-divider) !important; } .flight-card-compact .flight-departure .fc-desktop-code, .flight-card-compact .flight-destination .fc-desktop-code, .fp-multi-leg-card .flight-departure .fc-desktop-code, .fp-multi-leg-card .flight-destination .fc-desktop-code { background: transparent !important; border-color: rgba(60, 60, 67, 0.22) !important; } :root[data-theme="dark"] .flight-card-compact .flight-departure .fc-desktop-code, :root[data-theme="dark"] .flight-card-compact .flight-destination .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-departure .fc-desktop-code, :root[data-theme="dark"] .fp-multi-leg-card .flight-destination .fc-desktop-code { border-color: rgba(255, 255, 255, 0.18) !important; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { background: #f2f2f7 !important; border-radius: var(--fc-aircraft-photo-radius, 4px) !important; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1) !important; width: var(--fc-aircraft-photo-w, 136px) !important; height: var(--fc-aircraft-photo-h, 102px) !important; min-width: var(--fc-aircraft-photo-w, 136px) !important; min-height: var(--fc-aircraft-photo-h, 102px) !important; max-width: var(--fc-aircraft-photo-w, 136px) !important; max-height: var(--fc-aircraft-photo-h, 102px) !important; } :root[data-theme="dark"] .flight-card-compact .fc-hero .aircraft-image-container, :root[data-theme="dark"] .fp-multi-leg-card .fc-hero .aircraft-image-container { background: rgba(0, 0, 0, 0.25) !important; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08) !important; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { display: block; order: 7; flex: 0 0 1px; width: 1px; min-width: 1px; align-self: stretch; position: relative; margin: 0 8px; padding: 0; border: none; background-color: var(--fc-divider); background-image: none; pointer-events: none; z-index: 2; box-sizing: border-box; } .flight-card-compact:not(:has(.flight-ratings:not(:empty))):not(.booking-card) .fc-tear, .fp-multi-leg-card:not(:has(.flight-ratings:not(:empty))):not(.booking-card) .fc-tear { display: none; } .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*), .flight-card-compact.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .booking-info-section { align-self: stretch; justify-content: center; } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { gap: 10px var(--fc-col-gap, 12px); } .flight-card-compact .flight-datetime, .fp-multi-leg-card .flight-datetime { flex: 0 0 var(--fc-col-date-w, 70px) !important; width: var(--fc-col-date-w, 70px); min-width: var(--fc-col-date-w, 70px); max-width: var(--fc-col-date-w, 70px); padding-left: 6px; padding-right: 6px; box-sizing: border-box; } .flight-card-compact .flight-departure, .fp-multi-leg-card .flight-departure, .flight-card-compact .flight-destination, .fp-multi-leg-card .flight-destination, .flight-card-compact .fc-hero .flight-aircraft.fc-hero-meta, .fp-multi-leg-card .fc-hero .flight-aircraft.fc-hero-meta { flex: 1 1 0 !important; min-width: 0 !important; max-width: none; } .flight-card-compact .flight-duration.desktop-position, .fp-multi-leg-card .flight-duration.desktop-position { flex: 0 0 var(--fc-col-dur-w, 92px) !important; width: var(--fc-col-dur-w, 92px); min-width: var(--fc-col-dur-w, 92px); max-width: var(--fc-col-dur-w, 92px); box-sizing: border-box; } .flight-card-compact .fc-hero .flight-aircraft-image, .fp-multi-leg-card .fc-hero .flight-aircraft-image { flex: 0 0 var(--fc-col-ac-photo-w, 148px) !important; width: var(--fc-col-ac-photo-w, 148px); min-width: var(--fc-col-ac-photo-w, 148px); max-width: var(--fc-col-ac-photo-w, 148px); box-sizing: border-box; } .flight-card-compact .flight-ratings:not(:empty):has(*), .fp-multi-leg-card .flight-ratings:not(:empty):has(*) { flex: 0 0 var(--fc-ticket-ratings-w) !important; width: var(--fc-ticket-ratings-w); min-width: var(--fc-ticket-ratings-w); max-width: var(--fc-ticket-ratings-w); box-sizing: border-box; } .flight-card-compact:not(.booking-card):not(.fp-sample-card) .flight-actions, .fp-multi-leg-card:not(.booking-card):not(.fp-sample-card) .flight-actions { flex: 0 0 var(--fc-ticket-actions-w) !important; width: var(--fc-ticket-actions-w); min-width: var(--fc-ticket-actions-w); max-width: var(--fc-ticket-actions-w); box-sizing: border-box; } .flight-card-compact.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*), .fp-multi-leg-card.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*) { flex: 0 0 var(--fc-ticket-stub-w) !important; width: var(--fc-ticket-stub-w) !important; min-width: var(--fc-ticket-stub-w) !important; max-width: var(--fc-ticket-stub-w) !important; box-sizing: border-box; } } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; flex: 1; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fp-sample-badge { flex: 0 0 auto; min-width: 48px; height: 48px; padding: 0 12px; border-radius: 14px; font-size: 17px; letter-spacing: 0.04em; box-shadow: none; border: none; } .flight-card-compact.fp-sample-card .fp-sample-badge .score-value, .fp-multi-leg-card.fp-sample-card .fp-sample-badge .score-value { font-weight: 700; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { margin: 0; font-family: var(--fc-font); font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--fc-text-secondary, var(--fc-label)); text-align: right; max-width: none; } .flight-card-compact.fp-sample-card .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .actions-price-display { align-items: flex-end; width: auto; max-width: 100%; gap: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { justify-content: flex-end; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 22px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; } .flight-card-compact.fp-sample-card .fp-sample-stub .savings-line:empty, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .savings-line:empty { display: none; } @media (min-width: 1025px) { .flight-card-compact.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*), .fp-multi-leg-card.fp-sample-card:not(.booking-card) .flight-ratings:not(:empty):has(*) { flex: 0 0 var(--fc-ticket-stub-w); width: var(--fc-ticket-stub-w); min-width: var(--fc-ticket-stub-w); max-width: var(--fc-ticket-stub-w); padding: 12px 12px 12px 10px; align-items: center; justify-content: center; box-sizing: border-box; } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { gap: 10px; width: 100%; } .flight-card-compact.fp-sample-card .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fp-sample-badge { min-width: 44px; height: 44px; border-radius: 12px; font-size: 16px; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { align-items: flex-start; gap: 5px; min-width: 0; } .flight-card-compact.fp-sample-card .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .actions-price-display { align-items: flex-start; width: 100%; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { justify-content: flex-start; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { font-size: 12.5px; font-weight: 510; line-height: 1.3; letter-spacing: -0.015em; color: var(--fc-text-secondary); max-width: none; width: 100%; text-align: left; white-space: normal; } :root[data-theme="dark"] .flight-card-compact.fp-sample-card .fp-sample-status, :root[data-theme="dark"] .fp-multi-leg-card.fp-sample-card .fp-sample-status { color: rgba(235, 235, 245, 0.72); } } @media (max-width: 1024px) { .flight-card-compact.fp-sample-card .fc-bottom, .fp-multi-leg-card.fp-sample-card .fc-bottom { display: flex !important; flex-direction: column; grid-template-columns: none !important; gap: 0; align-items: stretch; padding-top: 18px; } .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings { display: block !important; width: 100%; max-width: none; } .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings .score-badge-container, .flight-card-compact.fp-sample-card .fc-bottom .flight-ratings .score-badges-row, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings .score-badge-container, .fp-multi-leg-card.fp-sample-card .fc-bottom .flight-ratings .score-badges-row { display: contents; } .flight-card-compact.fp-sample-card .fp-sample-stub, .fp-multi-leg-card.fp-sample-card .fp-sample-stub { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; min-width: 0; } .flight-card-compact.fp-sample-card .fc-bottom .fp-sample-badge, .fp-multi-leg-card.fp-sample-card .fc-bottom .fp-sample-badge { grid-column: auto; grid-row: auto; place-self: auto; flex: 0 0 auto; min-width: 58px; height: 58px; border-radius: 16px; font-size: 20px; } .flight-card-compact.fp-sample-card .fp-sample-stub__body, .fp-multi-leg-card.fp-sample-card .fp-sample-stub__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; width: auto; min-width: 0; } .flight-card-compact.fp-sample-card .fc-bottom .fp-sample-stub .actions-price-display, .fp-multi-leg-card.fp-sample-card .fc-bottom .fp-sample-stub .actions-price-display { grid-column: auto; grid-row: auto; place-self: auto; width: auto; max-width: 100%; align-items: flex-end; margin-left: auto; } .flight-card-compact.fp-sample-card .fp-sample-stub .price-line, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .price-line { width: auto; max-width: 100%; justify-content: flex-end; text-align: right; } .flight-card-compact.fp-sample-card .fp-sample-stub .current-price, .fp-multi-leg-card.fp-sample-card .fp-sample-stub .current-price { font-size: 22px; letter-spacing: -0.04em; text-align: right; margin-left: auto; } .flight-card-compact.fp-sample-card .fp-sample-status, .fp-multi-leg-card.fp-sample-card .fp-sample-status { width: auto; max-width: 100%; margin-left: auto; font-size: 12px; font-weight: 500; line-height: 1.25; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 1025px) { .flight-card-compact:has(.fc-journey) { --fc-shell-pad-y: 18px; --fc-shell-pad-x: 20px; --fc-grid-gap: 24px; --fc-body-h: 148px; --fc-offer-pad: 22px; --fc-aircraft-photo-radius: 14px; padding: var(--fc-shell-pad-y) var(--fc-shell-pad-x); min-height: calc(var(--fc-body-h) + 2 * var(--fc-shell-pad-y)); box-sizing: border-box; } .flight-card-compact:has(.fc-journey) .flight-card-content { display: grid !important; grid-template-areas: "route detail offer"; grid-template-columns: minmax(0, 1.15fr) minmax(210px, 1.2fr) minmax(168px, 188px); gap: 0 var(--fc-grid-gap); align-items: stretch; min-height: var(--fc-body-h); padding: 0; } .flight-card-compact:has(.fc-journey) .fc-journey { grid-area: route; } .flight-card-compact:has(.fc-journey) .fc-hero.flight-aircraft-container { grid-area: detail; padding-left: 22px; border-left: 1px solid var(--fc-divider); box-sizing: border-box; } .flight-card-compact:has(.fc-journey) .fc-bottom { grid-area: offer; border-left: 1px solid var(--fc-divider); box-sizing: border-box; } .flight-card-compact:has(.fc-journey) .fc-tear { display: none; } .flight-card-compact:has(.fc-journey) .fc-stats, .flight-card-compact:has(.fc-journey) .fc-route.fc-mobile-route, .flight-card-compact:has(.fc-journey) .flight-duration.mobile-position { display: none !important; } } @media (min-width: 1025px) { .flight-card-compact:has(.fc-journey) .fc-journey { --fc-journey-accent: #445def; --fc-journey-accent-line: rgba(68, 93, 239, 0.28); display: flex; flex-direction: column; justify-content: flex-start; gap: 0; min-width: 0; padding: 2px 0; box-sizing: border-box; } .flight-card-compact .fc-journey__head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .flight-card-compact .fc-journey__date { overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fc-text, var(--color-text)); white-space: nowrap; text-overflow: ellipsis; } .flight-card-compact .fc-journey__kind { flex: 0 0 auto; max-width: 46%; overflow: hidden; font-size: 10px; font-weight: 650; letter-spacing: 0.06em; color: var(--fc-journey-accent); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; } .flight-card-compact .fc-journey__grid { display: grid; flex: 1 1 auto; grid-template-columns: minmax(88px, 1fr) minmax(96px, 1.1fr) minmax(88px, 1fr); gap: 12px; align-items: center; align-content: center; width: 100%; min-width: 0; } .flight-card-compact .fc-journey .flight-departure, .flight-card-compact .fc-journey .flight-destination { position: static; order: initial !important; flex: initial !important; display: flex; flex-direction: column; justify-content: center; place-self: stretch; width: auto; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .flight-card-compact .fc-journey .flight-departure { align-items: flex-start; text-align: left; } .flight-card-compact .fc-journey .flight-destination { align-items: flex-end; text-align: right; } .flight-card-compact .fc-journey .flight-departure::after { display: none !important; content: none !important; } .flight-card-compact .fc-journey .mobile-label, .flight-card-compact .fc-journey .fc-endpoint-head { display: none !important; } .flight-card-compact .fc-journey .airport-city { display: inline-flex !important; align-items: flex-start; gap: 4px; max-width: 100%; font-size: 14px; font-weight: 650; line-height: 1.25; color: var(--fc-text, var(--color-text)); } .flight-card-compact .fc-journey .fc-city-text { min-width: 0; } .flight-card-compact .fc-journey .flight-destination .airport-city { flex-direction: row-reverse; justify-content: flex-start; } .flight-card-compact .fc-journey .flight-destination .fc-city-text { text-align: right; } .flight-card-compact .fc-journey .airport-district, .flight-card-compact .fc-journey .airport-name { margin-top: 2px; max-width: 100%; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--fc-text-secondary, var(--color-text-secondary)); text-overflow: ellipsis; white-space: nowrap; } .flight-card-compact .fc-journey .flight-destination .airport-district, .flight-card-compact .fc-journey .flight-destination .airport-name { text-align: right; } .flight-card-compact .fc-journey .fc-desktop-code { display: inline-flex !important; align-items: center; margin-top: 5px; padding: 2px 7px; border: 0.5px solid rgba(60, 60, 67, 0.22); border-radius: 6px; background: transparent; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--fc-text-secondary, var(--color-text-secondary)); } :root[data-theme="dark"] .flight-card-compact .fc-journey .fc-desktop-code { border-color: rgba(255, 255, 255, 0.18); } .flight-card-compact .fc-journey__path { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 0 2px; } .flight-card-compact .fc-journey__duration, .flight-card-compact .fc-journey__distance { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--fc-text-secondary, var(--color-text-secondary)); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .flight-card-compact .fc-journey__distance { font-weight: 500; color: var(--fc-label, var(--color-text-muted)); } .flight-card-compact .fc-journey__line { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 7px; } .flight-card-compact .fc-journey__line::before { position: absolute; right: 0; left: 0; height: 1px; content: ""; background: linear-gradient( to right, transparent, var(--fc-journey-accent-line) 12%, var(--fc-journey-accent-line) 88%, transparent ); } .flight-card-compact .fc-journey__node { position: relative; display: block; width: 7px; height: 7px; background: var(--fc-shell-bg, #fff); border: 1.5px solid var(--fc-journey-accent); border-radius: 50%; } :root[data-theme="dark"] .flight-card-compact .fc-journey__node { background: rgba(28, 30, 36, 0.92); } } @media (min-width: 1025px) { .flight-card-compact:has(.fc-journey) .fc-hero.flight-aircraft-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 38%); column-gap: 16px; align-items: center; min-width: 0; } .flight-card-compact:has(.fc-journey) .fc-hero .flight-aircraft.fc-hero-meta { position: static; display: flex; align-items: center; min-width: 0; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-details { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-width: 0; padding: 0; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-category { order: 1; max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; line-height: 1.2; color: var(--fc-label); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-model { order: 2; max-width: 100%; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; color: var(--fc-text); white-space: normal; overflow: hidden; overflow-wrap: anywhere; text-overflow: clip; text-align: left; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-seats { display: none !important; } .flight-card-compact:has(.fc-journey) .fc-hero .fc-aircraft-facts.fc-desktop-only { order: 3; display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0; } .flight-card-compact:has(.fc-journey) .fc-hero .fc-aircraft-facts__row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--fc-divider); } .flight-card-compact:has(.fc-journey) .fc-hero .fc-aircraft-facts__row:last-child { border-bottom: none; } .flight-card-compact:has(.fc-journey) .fc-hero .fc-aircraft-facts__label { display: flex; flex: 0 1 auto; gap: 7px; align-items: center; min-width: 0; margin: 0; font-size: 12px; font-weight: 400; letter-spacing: -0.005em; line-height: normal; color: var(--color-text-muted); white-space: nowrap; } .flight-card-compact:has(.fc-journey) .fc-hero .fc-facts-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: inherit; } .flight-card-compact:has(.fc-journey) .fc-hero .fc-aircraft-facts__value { margin: 0; font-size: 13px; font-weight: 550; letter-spacing: -0.01em; line-height: normal; color: var(--color-text); text-align: right; white-space: nowrap; } .flight-card-compact:has(.fc-journey) .fc-hero .flight-aircraft-image { position: static; display: flex; align-items: center; justify-content: flex-end; width: 100%; min-width: 0; max-width: none; height: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-image-container { width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: 100% !important; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fc-fill-elevated) !important; } .flight-card-compact:has(.fc-journey) .fc-hero .aircraft-image-container .aircraft-image, .flight-card-compact:has(.fc-journey) .fc-hero .flight-list-aircraft-image { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center; border-radius: inherit; } } @media (min-width: 1025px) { .flight-card-compact:has(.fc-journey) .fc-bottom { display: grid; grid-template-rows: auto 1fr; row-gap: 0; min-width: 0; padding-left: var(--fc-offer-pad, 22px); box-sizing: border-box; } .flight-card-compact:has(.fc-journey) .flight-ratings:not(:empty):has(*) { grid-row: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 10px; width: auto; min-width: 0; max-width: none; margin: 0 0 10px; padding: 0; background: transparent; border: none; } .flight-card-compact:has(.fc-journey) .score-badge-container { display: contents; } .flight-card-compact:has(.fc-journey) .score-badges-row { flex: 0 0 auto; gap: 6px; } .flight-card-compact:has(.fc-journey) .score-badge { --fc-score-fill: rgba(60, 60, 67, 0.08); --fc-score-line: rgba(60, 60, 67, 0.16); --fc-score-ink: var(--fc-text); min-width: 36px; height: 36px; padding: 0 9px; background: var(--fc-score-fill); border: 0.5px solid var(--fc-score-line); border-radius: 12px; box-shadow: none; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .flight-card-compact:has(.fc-journey) .score-badge:hover { transform: none; filter: none; box-shadow: none; } .flight-card-compact:has(.fc-journey) .score-value { color: var(--fc-score-ink); } .flight-card-compact:has(.fc-journey) .score-badge.score-badge-green { --fc-score-fill: rgba(0, 168, 148, 0.14); --fc-score-line: rgba(0, 168, 148, 0.28); --fc-score-ink: #0f7a63; } .flight-card-compact:has(.fc-journey) .score-badge.score-badge-yellow { --fc-score-fill: rgba(154, 91, 0, 0.12); --fc-score-line: rgba(154, 91, 0, 0.24); --fc-score-ink: #8a5200; } .flight-card-compact:has(.fc-journey) .score-badge.score-badge-red { --fc-score-fill: rgba(179, 38, 30, 0.1); --fc-score-line: rgba(179, 38, 30, 0.22); --fc-score-ink: #b3261e; } .flight-card-compact:has(.fc-journey) .score-badge.score-badge-black { --fc-score-fill: rgba(60, 60, 67, 0.1); --fc-score-line: rgba(60, 60, 67, 0.2); --fc-score-ink: #3c3c43; } .flight-card-compact:has(.fc-journey) .score-badge.score-badge-blue { --fc-score-fill: rgba(0, 122, 255, 0.12); --fc-score-line: rgba(0, 122, 255, 0.24); --fc-score-ink: #0a63c9; } .flight-card-compact:has(.fc-journey) .score-comment { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; font-size: 11px; font-weight: 450; line-height: 1.3; letter-spacing: -0.005em; color: var(--fc-text-secondary); text-align: left; } .flight-card-compact:has(.fc-journey) .flight-ratings .price-label { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--fc-text-secondary); } .flight-card-compact:has(.fc-journey):not(.booking-card) .flight-actions { grid-row: 2; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; width: auto; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .flight-card-compact:has(.fc-journey) .actions-price-display { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 100%; min-width: 0; max-width: 100%; } .flight-card-compact:has(.fc-journey) .price-line, .flight-card-compact:has(.fc-journey) .price-meta { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 0 8px; width: 100%; max-width: 100%; min-width: 0; white-space: nowrap; text-align: right; } .flight-card-compact:has(.fc-journey) .actions-price-display--estimated { gap: 4px; align-items: flex-end; } .flight-card-compact:has(.fc-journey) .price-line .current-price, .flight-card-compact:has(.fc-journey) .price-meta .original-price, .flight-card-compact:has(.fc-journey) .price-meta .savings-line, .flight-card-compact:has(.fc-journey) .price-meta .estimated-price-label { flex: 0 0 auto; white-space: nowrap; } .flight-card-compact:has(.fc-journey) .price-line.price-line--expand { width: 100%; max-width: 100%; } .flight-card-compact:has(.fc-journey) .price-line.price-line--expand::before { display: none; content: none; } .flight-card-compact:has(.fc-journey) .current-price { font-size: 24px; font-weight: 650; letter-spacing: -0.04em; line-height: 1.15; color: var(--fc-text); font-variant-numeric: tabular-nums; } .flight-card-compact:has(.fc-journey) .original-price { font-size: 12.5px; font-weight: 450; line-height: 1.3; color: var(--fc-label); text-decoration-thickness: from-font; } .flight-card-compact:has(.fc-journey) .savings-line { font-size: 11.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; text-align: right; } .flight-card-compact:has(.fc-journey) .estimated-price-label { font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; color: var(--fc-label); text-align: right; } .flight-card-compact:has(.fc-journey) .price-meta:empty, .flight-card-compact:has(.fc-journey) .savings-line:empty { display: none; } .flight-card-compact:has(.fc-journey) .current-price.price-contact { font-size: 18px; letter-spacing: -0.03em; } .flight-card-compact:has(.fc-journey) .action-buttons { display: flex; flex-direction: row; align-items: stretch; gap: 8px; width: 100%; } .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn, .flight-card-compact:has(.fc-journey) .action-buttons .book-btn { box-sizing: border-box; height: 36px; min-height: 36px; max-height: 36px; border-radius: 11px; line-height: 1; } .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; min-width: 36px; padding: 0; background: transparent; border: 0.5px solid var(--fc-separator); color: var(--fc-label); font-size: 13px; } .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn:hover { background: rgba(255, 59, 48, 0.08); border-color: rgba(255, 59, 48, 0.28); color: #d70015; } .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn.favorited, .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn.active { background: rgba(255, 59, 48, 0.1); border-color: rgba(255, 59, 48, 0.32); color: #d70015; } .flight-card-compact:has(.fc-journey) .action-buttons .book-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; width: auto; min-width: 0; padding: 0 14px; font-size: 13px; } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .score-badge.score-badge-green { --fc-score-fill: rgba(68, 93, 239, 0.18); --fc-score-line: rgba(68, 93, 239, 0.34); --fc-score-ink: #6ee7a8; } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .score-badge.score-badge-yellow { --fc-score-fill: rgba(246, 193, 119, 0.16); --fc-score-line: rgba(246, 193, 119, 0.3); --fc-score-ink: #f6c177; } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .score-badge.score-badge-red { --fc-score-fill: rgba(255, 147, 140, 0.16); --fc-score-line: rgba(255, 147, 140, 0.3); --fc-score-ink: #ff938c; } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .score-badge.score-badge-black { --fc-score-fill: rgba(255, 255, 255, 0.08); --fc-score-line: rgba(255, 255, 255, 0.16); --fc-score-ink: rgba(235, 235, 245, 0.78); } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .score-badge.score-badge-blue { --fc-score-fill: rgba(90, 169, 255, 0.18); --fc-score-line: rgba(90, 169, 255, 0.32); --fc-score-ink: #7ab8ff; } :root[data-theme="dark"] .flight-card-compact:has(.fc-journey) .action-buttons .favorite-btn { border-color: rgba(255, 255, 255, 0.14); color: rgba(235, 235, 245, 0.7); } } @media (min-width: 1025px) { .flight-card-compact.booking-card:has(.fc-journey) .fc-bottom { grid-template-rows: auto 1fr; } .flight-card-compact.booking-card:has(.fc-journey) .booking-info-section { grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .flight-card-compact.booking-card:has(.fc-journey) .booking-date-time { font-size: 11px; line-height: 1.3; color: var(--fc-label); text-align: right; } .flight-card-compact.booking-card:has(.fc-journey) .price-info-section { grid-row: 2; display: flex; flex-direction: row; align-items: stretch; align-self: end; gap: 8px; width: auto; min-width: 0; max-width: none; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .flight-card-compact.booking-card:has(.fc-journey) .price-info-section .action-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 38px; border-radius: 12px; font-size: 12.5px; } } @media (min-width: 1025px) { .flight-card-compact.fp-sample-card:has(.fc-journey) .fp-sample-stub { display: none !important; } .flight-card-compact.fp-sample-card:has(.fc-journey):not(.booking-card) .flight-ratings:not(:empty):has(*) { grid-row: 1 / -1; display: flex; flex-direction: column; align-items: stretch; width: auto !important; min-width: 0 !important; max-width: none !important; height: 100%; margin: 0; padding: 0; background: transparent; border: none; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer.fc-desktop-only { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; min-width: 0; box-sizing: border-box; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__verdict { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; margin: 0 0 10px; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 9px; border: 0.5px solid rgba(0, 122, 255, 0.28); border-radius: 12px; background: rgba(0, 122, 255, 0.12); font-family: var(--fc-font); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #0a63c9; line-height: 1; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__note { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 11px; font-weight: 450; line-height: 1.3; letter-spacing: -0.005em; color: var(--fc-text-secondary); text-align: left; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__commit { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; min-width: 0; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__quote { display: block; width: 100%; min-width: 0; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__quote .actions-price-display { align-items: flex-end; width: 100%; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__quote .price-line { justify-content: flex-end; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__quote .savings-line:empty { display: none; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__details { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; box-sizing: border-box; height: 36px; min-height: 36px; max-height: 36px; padding: 0 14px; line-height: 1; border: 0.5px solid var(--primary-dark); border-radius: 11px; background: var(--primary); box-shadow: 0 1px 2px rgba(0, 168, 148, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: #fff; cursor: pointer; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.15s ease; } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__details:hover { background: var(--primary-hover); border-color: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(68, 93, 239, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__details:active { transform: scale(0.97); opacity: 0.94; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); } .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__details:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } :root[data-theme="dark"] .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__badge { background: rgba(90, 169, 255, 0.18); border-color: rgba(90, 169, 255, 0.34); color: #7ab8ff; } :root[data-theme="dark"] .flight-card-compact.fp-sample-card:has(.fc-journey) .fc-fp-offer__note { color: rgba(235, 235, 245, 0.72); } } #booking-flight-panel, #flight-details-popup, #booking-details-modal { --fd-shell: #f5f5f7; --fd-surface: #fff; --fd-bg: var(--fd-surface); --fd-fill: #f5f5f7; --fd-fill-elevated: #ebebf0; --fd-control: rgba(120, 120, 128, 0.14); --fd-control-rim: rgba(60, 60, 67, 0.12); --fd-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); --fd-control-blur: saturate(180%) blur(16px); --fd-separator: rgba(60, 60, 67, 0.14); --fd-separator-light: rgba(60, 60, 67, 0.08); --fd-rail-secondary-divider: rgba(60, 60, 67, 0.24); --fd-rail-mobile-icon-surface: #f2f2f7; --fd-rail-mobile-icon-border: rgba(60, 60, 67, 0.26); --fd-label: #86868b; --fd-text: #1d1d1f; --fd-text-secondary: #6e6e73; --fd-accent: #445def; --fd-radius: 22px; --fd-radius-inner: 16px; --fd-radius-pill: 980px; --fd-rail-width: 248px; --fd-shell-inset-x: 14px; --fd-shell-inset-bottom: 14px; --fd-dock-height: 132px; --fd-shadow: 0 28px 88px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.05); --fd-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; } :root[data-theme="dark"] #booking-flight-panel, :root[data-theme="dark"] #flight-details-popup, :root[data-theme="dark"] #booking-details-modal { --fd-shell: var(--color-canvas-subtle); --fd-surface: var(--color-surface); --fd-fill: var(--color-control); --fd-fill-elevated: var(--color-control-hover); --fd-control: rgba(255, 255, 255, 0.1); --fd-control-rim: rgba(255, 255, 255, 0.16); --fd-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); --fd-separator: var(--color-border); --fd-separator-light: var(--color-border-subtle); --fd-rail-secondary-divider: rgba(255, 255, 255, 0.17); --fd-rail-mobile-icon-surface: var(--color-control); --fd-rail-mobile-icon-border: rgba(255, 255, 255, 0.18); --fd-label: var(--color-text-muted); --fd-text: var(--color-text); --fd-text-secondary: var(--color-text-secondary); --fd-shadow: var(--shadow-surface-lg); } #flight-details-popup.flight-popup-overlay, #booking-details-modal.flight-popup-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } :root[data-theme="dark"] #flight-details-popup.flight-popup-overlay, :root[data-theme="dark"] #booking-details-modal.flight-popup-overlay { background: var(--color-overlay); } #flight-details-popup.flight-popup-overlay.active, #booking-details-modal.flight-popup-overlay.active { display: flex; align-items: center; justify-content: center; padding: 24px; } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { position: relative; font-family: var(--fd-font); background: var(--fd-shell); border-radius: var(--fd-radius); box-shadow: var(--fd-shadow); border: 0.5px solid rgba(0, 0, 0, 0.05); overflow: hidden; max-width: 1240px; width: min(96vw, 1240px); max-height: min(calc(100vh - 48px), 880px); display: flex; flex-direction: column; } :root[data-theme="dark"] #flight-details-popup .flight-popup, :root[data-theme="dark"] #booking-details-modal .flight-popup { border-color: var(--fd-separator-light); } #flight-details-popup .popup-close-corner, #booking-details-modal .popup-close-corner { position: absolute; top: 14px; right: 14px; z-index: 10; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.88); color: var(--fd-text-secondary); border: 0.5px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } :root[data-theme="dark"] #flight-details-popup .popup-close-corner, :root[data-theme="dark"] #booking-details-modal .popup-close-corner { background: var(--color-surface-glass-strong); border-color: var(--fd-separator-light); box-shadow: var(--shadow-surface-sm); } #flight-details-popup .popup-close-corner:hover, #booking-details-modal .popup-close-corner:hover { background: var(--fd-surface); color: var(--fd-text); transform: scale(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } :root[data-theme="dark"] #flight-details-popup .popup-close-corner:hover, :root[data-theme="dark"] #booking-details-modal .popup-close-corner:hover { box-shadow: var(--shadow-surface); } #booking-flight-panel .popup-content, #flight-details-popup .popup-content, #booking-details-modal .popup-content { display: flex; flex-direction: column; padding: 12px 14px 14px; gap: 0; background: var(--fd-shell); flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--fd-rail-width); gap: 10px; align-items: stretch; min-height: 0; } @media (min-width: 901px) { #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { height: 100%; } } #booking-flight-panel .fd-main, #flight-details-popup .fd-main, #booking-details-modal .fd-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; } #booking-flight-panel .fd-head, #flight-details-popup .fd-head, #booking-details-modal .fd-head { display: grid; grid-template-columns: 48% minmax(0, 1fr); gap: 10px; align-items: stretch; min-height: 180px; } #booking-flight-panel .fd-head .route-section, #flight-details-popup .fd-head .route-section, #booking-details-modal .fd-head .route-section, #booking-flight-panel .fd-head .fd-route, #flight-details-popup .fd-head .fd-route, #booking-details-modal .fd-head .fd-route { grid-column: auto; grid-row: auto; min-width: 0; } #booking-flight-panel .fd-map.route-map-container, #flight-details-popup .fd-map.route-map-container, #booking-details-modal .fd-map.route-map-container, #booking-flight-panel .route-map-container, #flight-details-popup .route-map-container, #booking-details-modal .route-map-container { grid-column: auto; grid-row: auto; height: 100%; min-height: 180px; border-radius: var(--fd-radius-inner); overflow: hidden; box-shadow: none; border: 0.5px solid var(--fd-separator-light); background: var(--fd-surface); } #booking-flight-panel #flight-route-map, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { height: 100%; min-height: 180px; } #booking-flight-panel .fd-rail, #flight-details-popup .fd-rail, #booking-details-modal .fd-rail { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; align-self: stretch; } #booking-flight-panel .fd-rail-price, #flight-details-popup .fd-rail-price, #booking-details-modal .fd-rail-price { flex-shrink: 0; padding: 14px 16px 10px; border-bottom: 0.5px solid var(--fd-separator-light); background: transparent; border-radius: 0; box-shadow: none; } #booking-flight-panel .fd-rail-meta, #flight-details-popup .fd-rail-meta, #booking-details-modal .fd-rail-meta { flex: 1 1 auto; padding: 10px 16px 12px; min-height: 0; overflow: visible; background: transparent; border: none; border-radius: 0; box-shadow: none; } #booking-flight-panel .fd-rail-meta .popup-section-title, #flight-details-popup .fd-rail-meta .popup-section-title, #booking-details-modal .fd-rail-meta .popup-section-title { margin-bottom: 8px; } #booking-flight-panel .fd-rail-actions, #flight-details-popup .fd-rail-actions, #booking-details-modal .fd-rail-actions { margin-top: auto; flex-shrink: 0; display: flex !important; flex-direction: column; gap: 8px; justify-content: stretch; align-items: stretch; width: 100%; padding: 12px 14px 14px; background: transparent; border: none; border-top: 0.5px solid var(--fd-separator-light); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #booking-flight-panel .fd-rail-actions.popup-footer, #flight-details-popup .fd-rail-actions.popup-footer, #booking-details-modal .fd-rail-actions.popup-footer { justify-content: stretch; align-items: stretch; } #booking-flight-panel .fd-rail-actions > .action-buttons, #flight-details-popup .fd-rail-actions > .action-buttons, #booking-details-modal .fd-rail-actions > .action-buttons { display: flex; width: 100%; min-width: 0; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons { flex-direction: column; } #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn { flex: 1 1 auto; width: 100%; min-width: 0; } #booking-flight-panel .fd-rail-actions-secondary, #flight-details-popup .fd-rail-actions-secondary, #booking-details-modal .fd-rail-actions-secondary { display: grid; grid-template-columns: minmax(0, 1fr) 1px 44px; align-items: stretch; min-height: 42px; padding: 3px; border-radius: 12px; background: var(--fd-control); border: 0.5px solid var(--fd-control-rim); box-shadow: var(--fd-control-shadow); backdrop-filter: var(--fd-control-blur); -webkit-backdrop-filter: var(--fd-control-blur); overflow: hidden; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary { background: var(--fd-control); border-color: var(--fd-control-rim); box-shadow: var(--fd-control-shadow); } #booking-flight-panel .fd-rail-actions-secondary::before, #flight-details-popup .fd-rail-actions-secondary::before, #booking-details-modal .fd-rail-actions-secondary::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; margin: 9px 0; background: rgba(60, 60, 67, 0.28); justify-self: center; align-self: stretch; transform: scaleX(0.5); pointer-events: none; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary::before, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary::before, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary::before { background: rgba(255, 255, 255, 0.28); } #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn, #flight-details-popup .fd-rail-actions-secondary .copy-link-btn, #booking-details-modal .fd-rail-actions-secondary .copy-link-btn, #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn, #flight-details-popup .fd-rail-actions-secondary .fc-share-btn, #booking-details-modal .fd-rail-actions-secondary .fc-share-btn { grid-column: 1; flex: unset; min-width: 0; min-height: 36px; padding: 0 14px 0 12px; border: none; border-radius: 9px; background: transparent; color: #1d1d1f; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; box-shadow: none; transition: background 0.2s ease, color 0.2s ease; } #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn i, #flight-details-popup .fd-rail-actions-secondary .copy-link-btn i, #booking-details-modal .fd-rail-actions-secondary .copy-link-btn i, #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn i, #flight-details-popup .fd-rail-actions-secondary .fc-share-btn i, #booking-details-modal .fd-rail-actions-secondary .fc-share-btn i { font-size: 13px; color: inherit; opacity: 0.75; } #booking-flight-panel .fd-rail-actions-secondary .favorite-btn, #flight-details-popup .fd-rail-actions-secondary .favorite-btn, #booking-details-modal .fd-rail-actions-secondary .favorite-btn { grid-column: 3; flex: unset; width: 44px; min-width: 44px; min-height: 36px; padding: 0; margin: 0; border: none; border-radius: 9px; background: transparent; color: #1d1d1f; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: background 0.2s ease, color 0.2s ease; } #booking-flight-panel .fd-rail-actions-secondary .favorite-btn i, #flight-details-popup .fd-rail-actions-secondary .favorite-btn i, #booking-details-modal .fd-rail-actions-secondary .favorite-btn i { font-size: 15px; color: inherit; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .copy-link-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .copy-link-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .fc-share-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .fc-share-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .favorite-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .favorite-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .favorite-btn { color: #e8e9eb; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn i, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .copy-link-btn i, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .copy-link-btn i, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn i, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .fc-share-btn i, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .fc-share-btn i, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .favorite-btn i, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .favorite-btn i, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .favorite-btn i { color: inherit; } #booking-flight-panel .fd-rail-actions > .action-buttons .book-btn, #flight-details-popup .fd-rail-actions > .action-buttons .book-btn, #booking-details-modal .fd-rail-actions > .action-buttons .book-btn { min-width: 0; min-height: 50px; } #booking-flight-panel .fd-rail-actions .copy-link-btn, #flight-details-popup .fd-rail-actions .copy-link-btn, #booking-details-modal .fd-rail-actions .copy-link-btn { width: auto; } #booking-flight-panel .fd-rail-actions .favorite-btn, #flight-details-popup .fd-rail-actions .favorite-btn, #booking-details-modal .fd-rail-actions .favorite-btn { width: auto; } #booking-flight-panel .fd-rail-actions .popup-footer-close, #flight-details-popup .fd-rail-actions .popup-footer-close, #booking-details-modal .fd-rail-actions .popup-footer-close { display: none !important; } #booking-flight-panel .fd-rail-actions .chat-btn, #flight-details-popup .fd-rail-actions .chat-btn, #booking-details-modal .fd-rail-actions .chat-btn, #booking-flight-panel .fd-rail-actions .cancel-btn, #flight-details-popup .fd-rail-actions .cancel-btn, #booking-details-modal .fd-rail-actions .cancel-btn { width: 100%; min-width: 0; min-height: 44px; } #booking-flight-panel .fd-rail-actions > .cancel-btn, #flight-details-popup .fd-rail-actions > .cancel-btn, #booking-details-modal .fd-rail-actions > .cancel-btn { background: rgba(255, 59, 48, 0.1); color: #d70015; border: none; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking { gap: 8px; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking > .action-buttons:not(.fd-booking-action-buttons), #flight-details-popup .fd-rail-actions.fd-rail-actions--booking > .action-buttons:not(.fd-booking-action-buttons), #booking-details-modal .fd-rail-actions.fd-rail-actions--booking > .action-buttons:not(.fd-booking-action-buttons) { display: none !important; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons { display: flex !important; width: 100%; min-width: 0; flex-direction: column; align-items: stretch; gap: 8px; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn { flex: none; width: 100%; min-width: 0; min-height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn { background: var(--fd-fill); color: var(--fd-text); border: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn { background: rgba(255, 59, 48, 0.1); color: #d70015; border: 0.5px solid rgba(255, 59, 48, 0.22); } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-rail-actions-secondary, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-rail-actions-secondary, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-rail-actions-secondary { display: none !important; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .book-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .book-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .book-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .copy-link-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .copy-link-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .copy-link-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fc-share-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fc-share-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fc-share-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .favorite-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .favorite-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .favorite-btn { display: none !important; } #booking-flight-panel .fd-rail-actions > .chat-btn[hidden], #flight-details-popup .fd-rail-actions > .chat-btn[hidden], #booking-details-modal .fd-rail-actions > .chat-btn[hidden], #booking-flight-panel .fd-rail-actions > .cancel-btn[hidden], #flight-details-popup .fd-rail-actions > .cancel-btn[hidden], #booking-details-modal .fd-rail-actions > .cancel-btn[hidden], #booking-flight-panel .fd-rail-actions .chat-btn[hidden], #flight-details-popup .fd-rail-actions .chat-btn[hidden], #booking-details-modal .fd-rail-actions .chat-btn[hidden], #booking-flight-panel .fd-rail-actions .cancel-btn[hidden], #flight-details-popup .fd-rail-actions .cancel-btn[hidden], #booking-details-modal .fd-rail-actions .cancel-btn[hidden], #booking-flight-panel .fd-rail-actions .fd-booking-action-buttons[hidden], #flight-details-popup .fd-rail-actions .fd-booking-action-buttons[hidden], #booking-details-modal .fd-rail-actions .fd-booking-action-buttons[hidden] { display: none !important; } #booking-flight-panel .flight-info-grid, #flight-details-popup .flight-info-grid, #booking-details-modal .flight-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); grid-template-rows: auto auto; gap: 10px; align-items: stretch; background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; flex: 0 0 auto !important; min-height: auto !important; } #booking-flight-panel .flight-info-grid .route-section, #flight-details-popup .flight-info-grid .route-section, #booking-details-modal .flight-info-grid .route-section { grid-column: 1; grid-row: 1; } #booking-flight-panel .flight-info-grid .pricing-section, #flight-details-popup .flight-info-grid .pricing-section, #booking-details-modal .flight-info-grid .pricing-section { grid-column: 2; grid-row: 1; } #booking-flight-panel .flight-info-grid .aircraft-section, #flight-details-popup .flight-info-grid .aircraft-section, #booking-details-modal .flight-info-grid .aircraft-section { grid-column: 1; grid-row: 2; } #booking-flight-panel .flight-info-grid .details-section, #flight-details-popup .flight-info-grid .details-section, #booking-details-modal .flight-info-grid .details-section { grid-column: 2; grid-row: 2; } #booking-flight-panel .fd-main .aircraft-section, #flight-details-popup .fd-main .aircraft-section, #booking-details-modal .fd-main .aircraft-section { grid-column: unset; grid-row: unset; flex: 1 1 auto; min-height: 0; } #booking-flight-panel .fd-main .fd-aircraft-body, #flight-details-popup .fd-main .fd-aircraft-body, #booking-details-modal .fd-main .fd-aircraft-body { flex: 1 1 auto; min-height: 200px; } #booking-flight-panel .info-section, #flight-details-popup .info-section, #booking-details-modal .info-section { display: flex; flex-direction: column; background: var(--fd-surface); border: 0.5px solid var(--fd-separator-light); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); min-width: 0; overflow: visible; height: auto; } #booking-flight-panel .fd-rail.info-section, #flight-details-popup .fd-rail.info-section, #booking-details-modal .fd-rail.info-section { height: auto; align-self: stretch; } :root[data-theme="dark"] #booking-flight-panel .info-section, :root[data-theme="dark"] #flight-details-popup .info-section, :root[data-theme="dark"] #booking-details-modal .info-section { box-shadow: var(--shadow-surface-sm); } #booking-flight-panel .popup-section-title, #flight-details-popup .popup-section-title, #booking-details-modal .popup-section-title { margin: 0 0 10px; padding: 0; font-family: var(--fd-font); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-label); gap: 0; border: none; } #booking-flight-panel .popup-section-title > i, #flight-details-popup .popup-section-title > i, #booking-details-modal .popup-section-title > i { display: none; } #booking-flight-panel .popup-footer, #flight-details-popup .popup-footer, #booking-details-modal .popup-footer { padding: 12px 22px max(12px, env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.92); border-top: 0.5px solid var(--fd-separator); gap: 8px; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } #booking-flight-panel .fd-rail-actions.popup-footer, #flight-details-popup .fd-rail-actions.popup-footer, #booking-details-modal .fd-rail-actions.popup-footer { padding: 12px 14px 14px; background: transparent; border: none; border-top: 0.5px solid var(--fd-separator-light); backdrop-filter: none; -webkit-backdrop-filter: none; } #flight-details-popup .flight-popup > .fd-rail-actions, #booking-details-modal .flight-popup > .fd-rail-actions { flex-shrink: 0; } #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn:hover, #flight-details-popup .fd-rail-actions-secondary .copy-link-btn:hover, #booking-details-modal .fd-rail-actions-secondary .copy-link-btn:hover, #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn:hover, #flight-details-popup .fd-rail-actions-secondary .fc-share-btn:hover, #booking-details-modal .fd-rail-actions-secondary .fc-share-btn:hover, #booking-flight-panel .fd-rail-actions-secondary .favorite-btn:hover, #flight-details-popup .fd-rail-actions-secondary .favorite-btn:hover, #booking-details-modal .fd-rail-actions-secondary .favorite-btn:hover { background: rgba(60, 60, 67, 0.1); } #booking-flight-panel .fd-rail-actions-secondary .favorite-btn:hover, #flight-details-popup .fd-rail-actions-secondary .favorite-btn:hover, #booking-details-modal .fd-rail-actions-secondary .favorite-btn:hover { color: #ff3b30; } #booking-flight-panel .fd-rail-actions-secondary .favorite-btn.favorited, #flight-details-popup .fd-rail-actions-secondary .favorite-btn.favorited, #booking-details-modal .fd-rail-actions-secondary .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions-secondary .favorite-btn.is-favorite, #flight-details-popup .fd-rail-actions-secondary .favorite-btn.is-favorite, #booking-details-modal .fd-rail-actions-secondary .favorite-btn.is-favorite { color: #ff3b30; background: transparent; } #booking-flight-panel .fd-rail-actions-secondary .favorite-btn.favorited i, #flight-details-popup .fd-rail-actions-secondary .favorite-btn.favorited i, #booking-details-modal .fd-rail-actions-secondary .favorite-btn.favorited i, #booking-flight-panel .fd-rail-actions-secondary .favorite-btn.is-favorite i, #flight-details-popup .fd-rail-actions-secondary .favorite-btn.is-favorite i, #booking-details-modal .fd-rail-actions-secondary .favorite-btn.is-favorite i { color: #ff3b30; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .copy-link-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .copy-link-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .copy-link-btn:hover, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .fc-share-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .fc-share-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .fc-share-btn:hover, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .favorite-btn:hover { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions-secondary .favorite-btn:hover { color: #ff3b30; } :root[data-theme="dark"] #booking-flight-panel .popup-footer, :root[data-theme="dark"] #flight-details-popup .popup-footer, :root[data-theme="dark"] #booking-details-modal .popup-footer { background: var(--color-surface-glass-strong); } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions.popup-footer, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions.popup-footer, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions.popup-footer { background: var(--fd-dock, var(--fd-surface)); border: 0.5px solid var(--fd-dock-rim, rgba(255, 255, 255, 0.14)); backdrop-filter: var(--fd-dock-blur, none); -webkit-backdrop-filter: var(--fd-dock-blur, none); } #booking-flight-panel .popup-footer .action-btn, #flight-details-popup .popup-footer .action-btn, #booking-details-modal .popup-footer .action-btn, #booking-flight-panel .popup-footer .popup-btn, #flight-details-popup .popup-footer .popup-btn, #booking-details-modal .popup-footer .popup-btn { font-family: var(--fd-font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border-radius: 12px; min-height: 44px; box-shadow: none; flex: none !important; transition: background 0.2s ease, transform 0.12s ease, opacity 0.2s ease; } #booking-flight-panel .popup-footer .popup-footer-close, #flight-details-popup .popup-footer .popup-footer-close, #booking-flight-panel .popup-footer .copy-link-btn, #flight-details-popup .popup-footer .copy-link-btn, #booking-details-modal .popup-footer .popup-footer-close { background: var(--fd-fill); color: var(--fd-text); border: none; min-width: auto; padding: 0 16px; } #booking-flight-panel .fd-rail-actions.popup-footer .fd-rail-actions-secondary .copy-link-btn, #flight-details-popup .fd-rail-actions.popup-footer .fd-rail-actions-secondary .copy-link-btn, #booking-details-modal .fd-rail-actions.popup-footer .fd-rail-actions-secondary .copy-link-btn, #booking-flight-panel .fd-rail-actions.popup-footer .fd-rail-actions-secondary .fc-share-btn, #flight-details-popup .fd-rail-actions.popup-footer .fd-rail-actions-secondary .fc-share-btn, #booking-details-modal .fd-rail-actions.popup-footer .fd-rail-actions-secondary .fc-share-btn, #booking-flight-panel .fd-rail-actions.popup-footer .fd-rail-actions-secondary .favorite-btn, #flight-details-popup .fd-rail-actions.popup-footer .fd-rail-actions-secondary .favorite-btn, #booking-details-modal .fd-rail-actions.popup-footer .fd-rail-actions-secondary .favorite-btn { box-shadow: none; transform: none; } #booking-flight-panel .popup-footer .popup-footer-close:hover, #flight-details-popup .popup-footer .popup-footer-close:hover, #booking-flight-panel .popup-footer .copy-link-btn:hover, #flight-details-popup .popup-footer .copy-link-btn:hover, #booking-details-modal .popup-footer .popup-footer-close:hover { background: var(--fd-fill-elevated); transform: none; box-shadow: none; } #booking-flight-panel .popup-footer .book-btn, #flight-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { min-width: 0; width: 100%; } #booking-flight-panel .popup-footer .favorite-btn, #flight-details-popup .popup-footer .favorite-btn, #booking-details-modal .popup-footer .favorite-btn { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; padding: 0; background: var(--fd-fill); color: #1d1d1f; border: none; border-radius: 9px; } #booking-flight-panel .popup-footer .fd-rail-actions-secondary .favorite-btn, #flight-details-popup .popup-footer .fd-rail-actions-secondary .favorite-btn, #booking-details-modal .popup-footer .fd-rail-actions-secondary .favorite-btn { flex: unset; width: 44px; min-width: 44px; height: auto; min-height: 36px; background: transparent; border: none; box-shadow: none; } :root[data-theme="dark"] #booking-flight-panel .popup-footer .favorite-btn, :root[data-theme="dark"] #flight-details-popup .popup-footer .favorite-btn, :root[data-theme="dark"] #booking-details-modal .popup-footer .favorite-btn { color: #e8e9eb; } :root[data-theme="dark"] #booking-flight-panel .popup-footer .fd-rail-actions-secondary .favorite-btn, :root[data-theme="dark"] #flight-details-popup .popup-footer .fd-rail-actions-secondary .favorite-btn, :root[data-theme="dark"] #booking-details-modal .popup-footer .fd-rail-actions-secondary .favorite-btn { background: transparent; color: #e8e9eb; } #booking-flight-panel .popup-footer .favorite-btn:hover, #flight-details-popup .popup-footer .favorite-btn:hover, #booking-details-modal .popup-footer .favorite-btn:hover { background: var(--fd-fill-elevated); color: #ff3b30; box-shadow: none; transform: none; } #booking-flight-panel .popup-footer .fd-rail-actions-secondary .favorite-btn:hover, #flight-details-popup .popup-footer .fd-rail-actions-secondary .favorite-btn:hover, #booking-details-modal .popup-footer .fd-rail-actions-secondary .favorite-btn:hover { background: rgba(60, 60, 67, 0.1); color: #ff3b30; } :root[data-theme="dark"] #booking-flight-panel .popup-footer .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #flight-details-popup .popup-footer .fd-rail-actions-secondary .favorite-btn:hover, :root[data-theme="dark"] #booking-details-modal .popup-footer .fd-rail-actions-secondary .favorite-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ff3b30; } #booking-flight-panel .popup-footer .favorite-btn.favorited, #flight-details-popup .popup-footer .favorite-btn.favorited, #booking-flight-panel .popup-footer .favorite-btn.is-favorite, #flight-details-popup .popup-footer .favorite-btn.is-favorite, #booking-details-modal .popup-footer .favorite-btn.favorited, #booking-details-modal .popup-footer .favorite-btn.is-favorite { color: #ff3b30; background: transparent; border: none; } #booking-flight-panel .popup-footer .chat-btn, #flight-details-popup .popup-footer .chat-btn, #booking-details-modal .popup-footer .popup-btn { background: var(--fd-fill); color: var(--fd-text); border: none; } #booking-flight-panel .popup-footer .cancel-btn, #flight-details-popup .popup-footer .cancel-btn { background: rgba(255, 59, 48, 0.12); color: #d70015; border: none; padding: 0 18px; min-width: 120px; } #booking-flight-panel .popup-footer .cancel-btn:hover, #flight-details-popup .popup-footer .cancel-btn:hover { background: rgba(255, 59, 48, 0.18); color: #c10012; transform: none; box-shadow: none; } #booking-flight-panel .booking-modal-header, #flight-details-popup .booking-modal-header, #booking-details-modal .booking-modal-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; background: var(--fd-surface); border: 0.5px solid var(--fd-separator-light); border-radius: var(--fd-radius-inner); font-family: var(--fd-font); font-size: 14px; color: var(--fd-text-secondary); } #booking-flight-panel .booking-modal-header .booking-status-badge, #flight-details-popup .booking-modal-header .booking-status-badge, #booking-details-modal .booking-modal-header .booking-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--fd-radius-pill); font-size: 13px; font-weight: 600; } @media (max-width: 1024px) { #flight-details-popup.flight-popup-overlay.active, #booking-details-modal.flight-popup-overlay.active { padding: 16px; } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { width: min(100%, 900px); max-height: 94vh; } #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; } #booking-flight-panel .fd-head, #flight-details-popup .fd-head, #booking-details-modal .fd-head { grid-template-columns: 46% minmax(0, 1fr); gap: 10px; min-height: 170px; } } @media (max-width: 900px) and (min-width: 769px) { #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { grid-template-columns: 1fr; } } @media (max-width: 1024px) { #booking-flight-panel .flight-info-grid, #flight-details-popup .flight-info-grid, #booking-details-modal .flight-info-grid { grid-template-columns: minmax(0, 1fr) minmax(180px, 220px); gap: 8px; align-items: stretch; } } #booking-flight-panel .route-section .popup-section-title, #flight-details-popup .route-section .popup-section-title, #booking-details-modal .route-section .popup-section-title { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #booking-flight-panel .fd-route-legs-badge, #flight-details-popup .fd-route-legs-badge, #booking-details-modal .fd-route-legs-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--fd-radius-pill); background: rgba(68, 93, 239, 0.1); color: #2f40c2; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; } #booking-flight-panel .fd-route-legs-badge[hidden], #flight-details-popup .fd-route-legs-badge[hidden], #booking-details-modal .fd-route-legs-badge[hidden] { display: none; } #booking-flight-panel .route-details.fd-route-flow, #flight-details-popup .route-details.fd-route-flow, #booking-details-modal .route-details.fd-route-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(0, 1fr); gap: 0 16px; align-items: start; min-height: 0; position: relative; } #booking-flight-panel .fd-route-endpoint, #flight-details-popup .fd-route-endpoint, #booking-details-modal .fd-route-endpoint { position: relative; display: block; padding: 0; background: transparent; border: none; border-radius: 0; text-align: left !important; min-width: 0; } #booking-flight-panel .fd-route-endpoint-body, #flight-details-popup .fd-route-endpoint-body, #booking-details-modal .fd-route-endpoint-body { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; } #booking-flight-panel .departure-detail::before, #flight-details-popup .departure-detail::before, #booking-details-modal .departure-detail::before, #booking-flight-panel .arrival-detail::before, #flight-details-popup .arrival-detail::before, #booking-details-modal .arrival-detail::before, #booking-flight-panel .departure-detail::after, #flight-details-popup .departure-detail::after, #booking-details-modal .departure-detail::after { content: none; } #booking-flight-panel .airport-label, #flight-details-popup .airport-label, #booking-details-modal .airport-label { font-family: var(--fd-font); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-label); margin: 0; } #booking-flight-panel .airport-code-large, #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-family: var(--fd-font); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--fd-text); margin: 1px 0 0; line-height: 1.15; } #booking-flight-panel .airport-detail .airport-name, #flight-details-popup .airport-detail .airport-name, #booking-details-modal .airport-detail .airport-name { font-family: var(--fd-font); font-size: 13px; font-weight: 600; color: var(--fd-text); line-height: 1.35; margin: 2px 0 0; text-align: left !important; } #booking-flight-panel .airport-detail .airport-location, #flight-details-popup .airport-detail .airport-location, #booking-details-modal .airport-detail .airport-location { font-family: var(--fd-font); font-size: 12px; font-weight: 400; color: var(--fd-text-secondary); line-height: 1.4; gap: 5px; justify-content: flex-start !important; text-align: left !important; margin-top: 1px; } #booking-flight-panel .fd-route-connector, #flight-details-popup .fd-route-connector, #booking-details-modal .fd-route-connector { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; margin: 0; padding: 26px 0 0; min-height: 0; } #booking-flight-panel .fd-route-arrow, #flight-details-popup .fd-route-arrow, #booking-details-modal .fd-route-arrow { position: relative; display: block; width: 44px; height: 1.5px; border-radius: 1px; background: var(--fd-accent); opacity: 0.75; } #booking-flight-panel .fd-route-arrow::after, #flight-details-popup .fd-route-arrow::after, #booking-details-modal .fd-route-arrow::after { content: ""; position: absolute; right: -1px; top: -2.75px; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5.5px solid var(--fd-accent); } #booking-flight-panel .fd-route-legs-note, #flight-details-popup .fd-route-legs-note, #booking-details-modal .fd-route-legs-note { margin: 2px 0 0; padding: 0; font-family: var(--fd-font); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--fd-text-secondary); line-height: 1.35; text-align: center; white-space: nowrap; } #booking-flight-panel .fd-route-legs-note[hidden], #flight-details-popup .fd-route-legs-note[hidden], #booking-details-modal .fd-route-legs-note[hidden] { display: none; } #booking-flight-panel .fd-route-legs, #flight-details-popup .fd-route-legs, #booking-details-modal .fd-route-legs { margin-top: 14px; border-top: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-route-legs[hidden], #flight-details-popup .fd-route-legs[hidden], #booking-details-modal .fd-route-legs[hidden] { display: none; } #booking-flight-panel .fd-route-statsbar, #flight-details-popup .fd-route-statsbar, #booking-details-modal .fd-route-statsbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; padding: 10px 0; background: var(--fd-fill-elevated); border: 0.5px solid var(--fd-separator); border-radius: 10px; } #booking-flight-panel .fd-layout--multileg .fd-media > .fd-route-statsbar, #flight-details-popup .fd-layout--multileg .fd-media > .fd-route-statsbar, #booking-details-modal .fd-layout--multileg .fd-media > .fd-route-statsbar { margin-top: 0; } #booking-flight-panel .fd-route-statsbar-item, #flight-details-popup .fd-route-statsbar-item, #booking-details-modal .fd-route-statsbar-item { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; min-width: 0; } #booking-flight-panel .fd-route-statsbar-item + .fd-route-statsbar-item, #flight-details-popup .fd-route-statsbar-item + .fd-route-statsbar-item, #booking-details-modal .fd-route-statsbar-item + .fd-route-statsbar-item { border-left: 0.5px solid var(--fd-separator); } #booking-flight-panel .fd-route-statsbar-label, #flight-details-popup .fd-route-statsbar-label, #booking-details-modal .fd-route-statsbar-label { font-family: var(--fd-font); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-text-secondary); line-height: 1.3; } #booking-flight-panel .fd-route-statsbar-value, #flight-details-popup .fd-route-statsbar-value, #booking-details-modal .fd-route-statsbar-value { font-family: var(--fd-font); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fd-text); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; } :root[data-theme="dark"] #booking-flight-panel .fd-route-statsbar, :root[data-theme="dark"] #flight-details-popup .fd-route-statsbar, :root[data-theme="dark"] #booking-details-modal .fd-route-statsbar { background: var(--fd-fill); border-color: var(--fd-separator-light); } :root[data-theme="dark"] #booking-flight-panel .fd-route-statsbar-label, :root[data-theme="dark"] #flight-details-popup .fd-route-statsbar-label, :root[data-theme="dark"] #booking-details-modal .fd-route-statsbar-label { color: var(--fd-label); } #booking-flight-panel .fd-aircraft-body, #flight-details-popup .fd-aircraft-body, #booking-flight-panel .fd-aircraft-stack, #flight-details-popup .fd-aircraft-stack, #booking-flight-panel .aircraft-details, #flight-details-popup .aircraft-details, #booking-details-modal .fd-aircraft-body, #booking-details-modal .fd-aircraft-stack, #booking-details-modal .aircraft-details { display: grid !important; grid-template-columns: minmax(240px, 46%) minmax(0, 1fr); gap: 12px; align-items: stretch; } #booking-flight-panel .aircraft-info, #flight-details-popup .aircraft-info, #booking-details-modal .aircraft-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px; flex: 1 1 auto; min-width: 0; width: 100%; text-align: left !important; } #booking-flight-panel .aircraft-header-row, #flight-details-popup .aircraft-header-row, #booking-details-modal .aircraft-header-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 8px; } #booking-flight-panel .aircraft-title-stack, #flight-details-popup .aircraft-title-stack, #booking-details-modal .aircraft-title-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; width: 100%; } #booking-flight-panel .fd-aircraft-class, #flight-details-popup .fd-aircraft-class, #booking-details-modal .fd-aircraft-class, #booking-flight-panel .aircraft-category.fd-aircraft-class, #flight-details-popup .aircraft-category.fd-aircraft-class, #booking-details-modal .aircraft-category.fd-aircraft-class { display: block; padding: 0; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; font-family: var(--fd-font); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-text-secondary); line-height: 1.3; text-align: left !important; width: auto; } :root[data-theme="dark"] #booking-flight-panel .fd-aircraft-class, :root[data-theme="dark"] #flight-details-popup .fd-aircraft-class, :root[data-theme="dark"] #booking-details-modal .fd-aircraft-class { color: var(--fd-label); } #booking-flight-panel .fd-aircraft-image-wrap, #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { width: 100%; min-width: 0; max-width: none; height: 100%; min-height: 190px; max-height: none; aspect-ratio: auto; align-self: stretch; margin: 0; padding: 0; background: var(--fd-fill); border: none; border-radius: 12px; overflow: hidden; display: flex; align-items: stretch; justify-content: center; } #booking-flight-panel .fd-aircraft-image-wrap:hover, #flight-details-popup .fd-aircraft-image-wrap:hover, #booking-details-modal .fd-aircraft-image-wrap:hover { background: var(--fd-fill); border: none; box-shadow: none; transform: none; } #booking-flight-panel .fd-aircraft-photo, #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; border-radius: 12px; box-shadow: none; } #booking-flight-panel .aircraft-model-large, #flight-details-popup .aircraft-model-large, #booking-details-modal .aircraft-model-large { font-family: var(--fd-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--fd-text); margin: 0; text-align: left !important; width: auto; line-height: 1.25; } #booking-flight-panel .aircraft-category, #flight-details-popup .aircraft-category, #booking-details-modal .aircraft-category { font-family: var(--fd-font); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fd-label); margin: 0; text-align: left !important; width: auto; } #booking-flight-panel .aircraft-clarification, #flight-details-popup .aircraft-clarification, #booking-details-modal .aircraft-clarification { font-family: var(--fd-font); font-size: 12px; color: var(--fd-text-secondary); text-align: left !important; width: 100%; margin-bottom: 4px; } #booking-flight-panel .aircraft-specs, #flight-details-popup .aircraft-specs, #booking-details-modal .aircraft-specs { display: flex; flex-direction: column; gap: 0; margin-top: 0; align-items: stretch !important; width: 100%; border-top: none; } #booking-flight-panel .fd-rail .pricing-section, #flight-details-popup .fd-rail .pricing-section, #booking-details-modal .fd-rail .pricing-section, #booking-flight-panel .fd-rail-price.pricing-section, #flight-details-popup .fd-rail-price.pricing-section, #booking-details-modal .fd-rail-price.pricing-section { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } #booking-flight-panel .fd-rail .pricing-details, #flight-details-popup .fd-rail .pricing-details, #booking-details-modal .fd-rail .pricing-details, #booking-flight-panel .fd-rail .price-main, #flight-details-popup .fd-rail .price-main, #booking-details-modal .fd-rail .price-main, #booking-flight-panel .fd-rail .price-value, #flight-details-popup .fd-rail .price-value, #booking-details-modal .fd-rail .price-value { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; text-shadow: none !important; } #booking-flight-panel .fd-specs-grid, #flight-details-popup .fd-specs-grid, #booking-details-modal .fd-specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0.5px solid var(--fd-separator-light); margin-top: 8px; gap: 0; } #booking-flight-panel .fd-specs-grid .spec-item, #flight-details-popup .fd-specs-grid .spec-item, #booking-details-modal .fd-specs-grid .spec-item { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; gap: 1px 8px; align-items: start; align-content: start; padding: 8px 10px; min-width: 0; overflow: hidden; white-space: normal; border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-specs-grid .spec-item i, #flight-details-popup .fd-specs-grid .spec-item i, #booking-details-modal .fd-specs-grid .spec-item i { grid-column: 1; grid-row: 1; align-self: center; } #booking-flight-panel .fd-specs-grid .spec-item > span:first-of-type, #flight-details-popup .fd-specs-grid .spec-item > span:first-of-type, #booking-details-modal .fd-specs-grid .spec-item > span:first-of-type { grid-column: 2; grid-row: 1; flex: unset; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fd-label); line-height: 1.3; } #booking-flight-panel .fd-specs-grid .spec-item .spec-value, #flight-details-popup .fd-specs-grid .spec-item .spec-value, #booking-details-modal .fd-specs-grid .spec-item .spec-value, #booking-flight-panel .fd-specs-grid .spec-item > span:last-of-type, #flight-details-popup .fd-specs-grid .spec-item > span:last-of-type, #booking-details-modal .fd-specs-grid .spec-item > span:last-of-type { grid-column: 2; grid-row: 2; flex: unset; font-size: 12px; font-weight: 600; color: var(--fd-text); line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; } #booking-flight-panel .fd-specs-grid .spec-item:nth-child(odd), #flight-details-popup .fd-specs-grid .spec-item:nth-child(odd), #booking-details-modal .fd-specs-grid .spec-item:nth-child(odd) { border-right: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-specs-grid .spec-item:nth-last-child(-n + 2), #flight-details-popup .fd-specs-grid .spec-item:nth-last-child(-n + 2), #booking-details-modal .fd-specs-grid .spec-item:nth-last-child(-n + 2) { border-bottom: none; } #booking-flight-panel .spec-item:last-child, #flight-details-popup .spec-item:last-child, #booking-details-modal .spec-item:last-child { border-bottom: none; padding-bottom: 0; } #booking-flight-panel .spec-item i, #flight-details-popup .spec-item i, #booking-details-modal .spec-item i { width: 14px; font-size: 10px; color: var(--fd-label); text-align: center; } #booking-flight-panel .spec-item span:first-of-type, #flight-details-popup .spec-item span:first-of-type, #booking-details-modal .spec-item span:first-of-type { flex: 1; color: var(--fd-text-secondary); font-weight: 400; } #booking-flight-panel .spec-item span:last-of-type, #flight-details-popup .spec-item span:last-of-type, #booking-details-modal .spec-item span:last-of-type { flex: 0 0 auto; color: var(--fd-text); font-weight: 600; } #booking-flight-panel .detail-items, #flight-details-popup .detail-items, #booking-details-modal .detail-items { display: flex; flex-direction: column; gap: 0; align-items: stretch !important; text-align: left !important; } #booking-flight-panel .detail-item, #flight-details-popup .detail-item, #booking-details-modal .detail-item { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: flex-start !important; text-align: left !important; width: 100%; padding: 7px 0; border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .detail-item:last-child, #flight-details-popup .detail-item:last-child, #booking-details-modal .detail-item:last-child { border-bottom: none; padding-bottom: 0; } #booking-flight-panel .detail-label, #flight-details-popup .detail-label, #booking-details-modal .detail-label { font-family: var(--fd-font); font-size: 11px; font-weight: 500; color: var(--fd-label); text-transform: uppercase; letter-spacing: 0.04em; } #booking-flight-panel .detail-value, #flight-details-popup .detail-value, #booking-details-modal .detail-value { font-family: var(--fd-font); font-size: 13px; font-weight: 600; color: var(--fd-text); line-height: 1.35; text-align: left !important; letter-spacing: -0.01em; } #booking-flight-panel .pricing-section, #flight-details-popup .pricing-section, #booking-details-modal .pricing-section { display: flex; flex-direction: column; } #booking-flight-panel .fd-rail .pricing-section .popup-section-title, #flight-details-popup .fd-rail .pricing-section .popup-section-title, #booking-details-modal .fd-rail .pricing-section .popup-section-title, #booking-flight-panel .fd-sidebar .pricing-section .popup-section-title, #flight-details-popup .fd-sidebar .pricing-section .popup-section-title, #booking-details-modal .fd-sidebar .pricing-section .popup-section-title { margin-bottom: 6px; } #booking-flight-panel .details-section .detail-items, #flight-details-popup .details-section .detail-items, #booking-details-modal .details-section .detail-items { flex: 1; } #booking-flight-panel .pricing-section .pricing-details, #flight-details-popup .pricing-section .pricing-details, #booking-details-modal .pricing-section .pricing-details { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background: transparent; border: none; border-radius: 0; padding: 0; min-height: 0; } #booking-flight-panel .pricing-section .price-main, #flight-details-popup .pricing-section .price-main, #booking-details-modal .pricing-section .price-main { gap: 6px; width: 100%; align-items: flex-start !important; text-align: left; } #booking-flight-panel .pricing-section .price-value, #flight-details-popup .pricing-section .price-value, #booking-flight-panel .pricing-section .actions-price-display .current-price, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-family: var(--fd-font); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--fd-text); text-shadow: none; background: none; -webkit-text-fill-color: currentcolor; text-align: left !important; line-height: 1.1; } #booking-flight-panel .pricing-section .actions-price-display, #flight-details-popup .pricing-section .actions-price-display, #booking-details-modal .pricing-section .actions-price-display { width: 100%; text-align: left !important; } @media (min-width: 769px) { #booking-flight-panel .route-details.fd-route-flow, #flight-details-popup .route-details.fd-route-flow, #booking-details-modal .route-details.fd-route-flow { grid-template-columns: minmax(0, 1fr) minmax(56px, auto) minmax(0, 1fr); gap: 0 12px; } #booking-flight-panel .airport-code-large, #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-size: 18px; } #booking-flight-panel .fd-aircraft-image-wrap, #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { min-height: 200px; max-height: none; } } #booking-flight-panel .pricing-section .actions-price-display .original-price, #flight-details-popup .pricing-section .actions-price-display .original-price, #booking-details-modal .pricing-section .actions-price-display .original-price { font-size: 15px; font-weight: 500; color: var(--fd-label); opacity: 1; } #booking-flight-panel .pricing-section .actions-price-display--estimated, #flight-details-popup .pricing-section .actions-price-display--estimated, #booking-details-modal .pricing-section .actions-price-display--estimated { gap: 4px; align-items: flex-start; } #booking-flight-panel .pricing-section .actions-price-display--estimated-detail, #flight-details-popup .pricing-section .actions-price-display--estimated-detail, #booking-details-modal .pricing-section .actions-price-display--estimated-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } #booking-flight-panel .pricing-section .actions-price-display--estimated-detail .estimated-from, #flight-details-popup .pricing-section .actions-price-display--estimated-detail .estimated-from, #booking-details-modal .pricing-section .actions-price-display--estimated-detail .estimated-from, #booking-flight-panel .pricing-section .actions-price-display--estimated-detail .estimated-request, #flight-details-popup .pricing-section .actions-price-display--estimated-detail .estimated-request, #booking-details-modal .pricing-section .actions-price-display--estimated-detail .estimated-request { font-family: var(--fd-font); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; color: var(--fd-label); } #booking-flight-panel .pricing-section .actions-price-display--estimated-detail .price-line, #flight-details-popup .pricing-section .actions-price-display--estimated-detail .price-line, #booking-details-modal .pricing-section .actions-price-display--estimated-detail .price-line { width: 100%; } #booking-flight-panel .pricing-section .actions-price-display .estimated-price-label, #flight-details-popup .pricing-section .actions-price-display .estimated-price-label, #booking-details-modal .pricing-section .actions-price-display .estimated-price-label { display: inline-flex; align-items: center; gap: 0.35em; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--fd-label); } #booking-flight-panel .pricing-section .actions-price-display .estimated-price-label__sep, #flight-details-popup .pricing-section .actions-price-display .estimated-price-label__sep, #booking-details-modal .pricing-section .actions-price-display .estimated-price-label__sep { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: 0 0 auto; } #booking-flight-panel .pricing-section .actions-price-display .savings-line, #flight-details-popup .pricing-section .actions-price-display .savings-line, #booking-details-modal .pricing-section .actions-price-display .savings-line { font-size: 12px; font-weight: 600; color: #248a3d; background: rgba(52, 199, 89, 0.12); padding: 4px 10px; border-radius: var(--fd-radius-pill); border: none; } #booking-flight-panel .pricing-section.has-booking-info .pricing-details, #flight-details-popup .pricing-section.has-booking-info .pricing-details, #booking-details-modal .pricing-section.has-booking-info .pricing-details { flex-direction: column; align-items: stretch !important; justify-content: flex-start; gap: 0; min-height: 0; } #booking-flight-panel .fd-booking-details, #flight-details-popup .fd-booking-details, #booking-details-modal .fd-booking-details { display: flex; flex-direction: column; width: 100%; padding: 0; background: transparent; border: none; box-shadow: none; } #booking-flight-panel .fd-rail .fd-rail-booking:not([hidden]), #flight-details-popup .fd-rail .fd-rail-booking:not([hidden]), #booking-details-modal .fd-rail .fd-rail-booking:not([hidden]) { flex-shrink: 0; padding: 10px 16px 12px; border-top: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-booking-panel, #flight-details-popup .fd-booking-panel, #booking-details-modal .fd-booking-panel { display: flex; flex-direction: column; gap: 0; width: 100%; } #booking-flight-panel .fd-booking-panel__status, #flight-details-popup .fd-booking-panel__status, #booking-details-modal .fd-booking-panel__status { margin: 0 0 10px; font-family: var(--fd-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; } #booking-flight-panel .fd-booking-panel .popup-section-title, #flight-details-popup .fd-booking-panel .popup-section-title, #booking-details-modal .fd-booking-panel .popup-section-title { margin: 0 0 6px; } #booking-flight-panel .fd-booking-facts, #flight-details-popup .fd-booking-facts, #booking-details-modal .fd-booking-facts { margin: 0; } #booking-flight-panel .fd-booking-panel__ref, #flight-details-popup .fd-booking-panel__ref, #booking-details-modal .fd-booking-panel__ref { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } #booking-flight-panel .fd-status-text, #flight-details-popup .fd-status-text, #booking-details-modal .fd-status-text, #booking-flight-panel .fd-booking-status-text, #flight-details-popup .fd-booking-status-text, #booking-details-modal .fd-booking-status-text { display: inline; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; font-weight: 600; } #booking-flight-panel .fd-status-text--available, #flight-details-popup .fd-status-text--available, #booking-details-modal .fd-status-text--available, #booking-flight-panel .fd-booking-status-text--confirmed, #flight-details-popup .fd-booking-status-text--confirmed, #booking-details-modal .fd-booking-status-text--confirmed, #booking-flight-panel .fd-booking-status-text--completed, #flight-details-popup .fd-booking-status-text--completed, #booking-details-modal .fd-booking-status-text--completed { color: #248a3d; } #booking-flight-panel .fd-status-text--unavailable, #flight-details-popup .fd-status-text--unavailable, #booking-details-modal .fd-status-text--unavailable, #booking-flight-panel .fd-booking-status-text--cancelled, #flight-details-popup .fd-booking-status-text--cancelled, #booking-details-modal .fd-booking-status-text--cancelled, #booking-flight-panel .fd-booking-status-text--declined, #flight-details-popup .fd-booking-status-text--declined, #booking-details-modal .fd-booking-status-text--declined { color: #d70015; } #booking-flight-panel .fd-status-text--pending, #flight-details-popup .fd-status-text--pending, #booking-details-modal .fd-status-text--pending, #booking-flight-panel .fd-booking-status-text--awaiting, #flight-details-popup .fd-booking-status-text--awaiting, #booking-details-modal .fd-booking-status-text--awaiting { color: #c2410c; } #booking-flight-panel .fd-status-text--neutral, #flight-details-popup .fd-status-text--neutral, #booking-details-modal .fd-status-text--neutral { color: var(--fd-text); } :root[data-theme="dark"] #booking-flight-panel .fd-status-text--available, :root[data-theme="dark"] #flight-details-popup .fd-status-text--available, :root[data-theme="dark"] #booking-details-modal .fd-status-text--available, :root[data-theme="dark"] #booking-flight-panel .fd-booking-status-text--confirmed, :root[data-theme="dark"] #flight-details-popup .fd-booking-status-text--confirmed, :root[data-theme="dark"] #booking-details-modal .fd-booking-status-text--confirmed, :root[data-theme="dark"] #booking-flight-panel .fd-booking-status-text--completed, :root[data-theme="dark"] #flight-details-popup .fd-booking-status-text--completed, :root[data-theme="dark"] #booking-details-modal .fd-booking-status-text--completed { color: #34c759; } :root[data-theme="dark"] #booking-flight-panel .fd-status-text--unavailable, :root[data-theme="dark"] #flight-details-popup .fd-status-text--unavailable, :root[data-theme="dark"] #booking-details-modal .fd-status-text--unavailable, :root[data-theme="dark"] #booking-flight-panel .fd-booking-status-text--cancelled, :root[data-theme="dark"] #flight-details-popup .fd-booking-status-text--cancelled, :root[data-theme="dark"] #booking-details-modal .fd-booking-status-text--cancelled, :root[data-theme="dark"] #booking-flight-panel .fd-booking-status-text--declined, :root[data-theme="dark"] #flight-details-popup .fd-booking-status-text--declined, :root[data-theme="dark"] #booking-details-modal .fd-booking-status-text--declined { color: #ff6961; } :root[data-theme="dark"] #booking-flight-panel .fd-status-text--pending, :root[data-theme="dark"] #flight-details-popup .fd-status-text--pending, :root[data-theme="dark"] #booking-details-modal .fd-status-text--pending, :root[data-theme="dark"] #booking-flight-panel .fd-booking-status-text--awaiting, :root[data-theme="dark"] #flight-details-popup .fd-booking-status-text--awaiting, :root[data-theme="dark"] #booking-details-modal .fd-booking-status-text--awaiting { color: #ff9f0a; } #booking-flight-panel .fd-booking-details-card, #flight-details-popup .fd-booking-details-card, #booking-details-modal .fd-booking-details-card { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } #booking-flight-panel .fd-booking-details-card__status, #flight-details-popup .fd-booking-details-card__status, #booking-details-modal .fd-booking-details-card__status { display: flex; justify-content: flex-start; width: 100%; } #booking-flight-panel .fd-booking-details-card__status .status-badge, #flight-details-popup .fd-booking-details-card__status .status-badge, #booking-details-modal .fd-booking-details-card__status .status-badge { display: inline; padding: 0; border-radius: 0; background: transparent; font-family: var(--fd-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; white-space: normal; text-align: left; } #booking-flight-panel .fd-booking-details-card .popup-section-title, #flight-details-popup .fd-booking-details-card .popup-section-title, #booking-details-modal .fd-booking-details-card .popup-section-title { margin: 0; } #booking-flight-panel .fd-booking-details-card__list, #flight-details-popup .fd-booking-details-card__list, #booking-details-modal .fd-booking-details-card__list { display: flex; flex-direction: column; gap: 0; margin: 0; } #booking-flight-panel .fd-booking-details-card__row, #flight-details-popup .fd-booking-details-card__row, #booking-details-modal .fd-booking-details-card__row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-booking-details-card__row:last-child, #flight-details-popup .fd-booking-details-card__row:last-child, #booking-details-modal .fd-booking-details-card__row:last-child { border-bottom: none; padding-bottom: 0; } #booking-flight-panel .fd-booking-details-card__row .detail-label, #flight-details-popup .fd-booking-details-card__row .detail-label, #booking-details-modal .fd-booking-details-card__row .detail-label, #booking-flight-panel .fd-booking-details-card__row .detail-value, #flight-details-popup .fd-booking-details-card__row .detail-value, #booking-details-modal .fd-booking-details-card__row .detail-value { margin: 0; } #booking-flight-panel .fd-booking-details-card__row .detail-label, #flight-details-popup .fd-booking-details-card__row .detail-label, #booking-details-modal .fd-booking-details-card__row .detail-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-label); } #booking-flight-panel .fd-booking-details-card__row .detail-value, #flight-details-popup .fd-booking-details-card__row .detail-value, #booking-details-modal .fd-booking-details-card__row .detail-value { font-size: 14px; font-weight: 500; color: var(--fd-text); line-height: 1.35; } #booking-flight-panel .fd-booking-details-card__ref, #flight-details-popup .fd-booking-details-card__ref, #booking-details-modal .fd-booking-details-card__ref { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } #booking-flight-panel .fd-booking-details-card__status .status-badge.status-awaiting, #flight-details-popup .fd-booking-details-card__status .status-badge.status-awaiting, #booking-details-modal .fd-booking-details-card__status .status-badge.status-awaiting { color: #c2410c; } #booking-flight-panel .fd-booking-details-card__status .status-badge.status-confirmed, #flight-details-popup .fd-booking-details-card__status .status-badge.status-confirmed, #booking-details-modal .fd-booking-details-card__status .status-badge.status-confirmed { color: #248a3d; } #booking-flight-panel .fd-booking-details-card__status .status-badge.status-completed, #flight-details-popup .fd-booking-details-card__status .status-badge.status-completed, #booking-details-modal .fd-booking-details-card__status .status-badge.status-completed { color: #1d4ed8; } #booking-flight-panel .fd-booking-details-card__status .status-badge.status-cancelled, #flight-details-popup .fd-booking-details-card__status .status-badge.status-cancelled, #booking-details-modal .fd-booking-details-card__status .status-badge.status-cancelled, #booking-flight-panel .fd-booking-details-card__status .status-badge.status-declined, #flight-details-popup .fd-booking-details-card__status .status-badge.status-declined, #booking-details-modal .fd-booking-details-card__status .status-badge.status-declined { color: #d70015; } #booking-flight-panel .pricing-section .booking-info-details, #flight-details-popup .pricing-section .booking-info-details, #booking-details-modal .pricing-section .booking-info-details { width: 100%; margin-top: 12px; padding-top: 12px; margin-bottom: 2px; border-top: 0.5px solid var(--fd-separator); text-align: left; } #booking-flight-panel .fd-rail-price + .fd-rail-meta, #flight-details-popup .fd-rail-price + .fd-rail-meta, #booking-details-modal .fd-rail-price + .fd-rail-meta { padding-top: 14px; } #booking-flight-panel .pricing-section .booking-info-details .detail-item, #flight-details-popup .pricing-section .booking-info-details .detail-item, #booking-details-modal .pricing-section .booking-info-details .detail-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 0; padding: 10px 0; border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .pricing-section .booking-info-details .booking-status-item, #flight-details-popup .pricing-section .booking-info-details .booking-status-item, #booking-details-modal .pricing-section .booking-info-details .booking-status-item { gap: 8px; } #booking-flight-panel .pricing-section .booking-info-details .detail-item:last-child, #flight-details-popup .pricing-section .booking-info-details .detail-item:last-child, #booking-details-modal .pricing-section .booking-info-details .detail-item:last-child { border-bottom: none; padding-bottom: 0; } #booking-flight-panel .pricing-section .booking-info-details .booking-status, #flight-details-popup .pricing-section .booking-info-details .booking-status, #booking-details-modal .pricing-section .booking-info-details .booking-status { display: flex; align-items: center; margin: 0; width: 100%; } #booking-flight-panel .pricing-section .booking-info-details .detail-label, #flight-details-popup .pricing-section .booking-info-details .detail-label, #booking-details-modal .pricing-section .booking-info-details .detail-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-label); line-height: 1.2; } #booking-flight-panel .pricing-section .booking-info-details .detail-value, #flight-details-popup .pricing-section .booking-info-details .detail-value, #booking-details-modal .pricing-section .booking-info-details .detail-value { font-size: 14px; font-weight: 500; color: var(--fd-text); line-height: 1.35; word-break: break-word; } #booking-flight-panel .pricing-section .booking-info-details .status-badge, #flight-details-popup .pricing-section .booking-info-details .status-badge, #booking-details-modal .pricing-section .booking-info-details .status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: var(--fd-radius-pill); font-family: var(--fd-font); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #booking-flight-panel .pricing-section .booking-info-details .status-badge.status-awaiting, #flight-details-popup .pricing-section .booking-info-details .status-badge.status-awaiting, #booking-details-modal .pricing-section .booking-info-details .status-badge.status-awaiting { background: rgba(245, 158, 11, 0.12); color: #c2410c; } #booking-flight-panel .pricing-section .booking-info-details .status-badge.status-confirmed, #flight-details-popup .pricing-section .booking-info-details .status-badge.status-confirmed, #booking-details-modal .pricing-section .booking-info-details .status-badge.status-confirmed { background: rgba(34, 197, 94, 0.12); color: #15803d; } #booking-flight-panel .pricing-section .booking-info-details .status-badge.status-completed, #flight-details-popup .pricing-section .booking-info-details .status-badge.status-completed, #booking-details-modal .pricing-section .booking-info-details .status-badge.status-completed { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; } #booking-flight-panel .pricing-section .booking-info-details .status-badge.status-declined, #flight-details-popup .pricing-section .booking-info-details .status-badge.status-declined, #booking-details-modal .pricing-section .booking-info-details .status-badge.status-declined, #booking-flight-panel .pricing-section .booking-info-details .status-badge.status-cancelled, #flight-details-popup .pricing-section .booking-info-details .status-badge.status-cancelled, #booking-details-modal .pricing-section .booking-info-details .status-badge.status-cancelled { background: rgba(255, 59, 48, 0.1); color: #d70015; } @media (min-width: 901px) { #booking-flight-panel .fd-rail.info-section:has(.has-booking-info), #flight-details-popup .fd-rail.info-section:has(.has-booking-info), #booking-details-modal .fd-rail.info-section:has(.has-booking-info) { padding-bottom: calc(var(--fd-dock-height) + 56px); } } @media (max-width: 768px) { #booking-flight-panel .flight-info-grid, #booking-details-modal .flight-info-grid { align-items: stretch; } #booking-flight-panel .info-section, #flight-details-popup .info-section, #booking-details-modal .info-section { height: auto; } #booking-flight-panel .airport-code-large, #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-size: 18px; } #booking-flight-panel .route-details.fd-route-flow, #flight-details-popup .route-details.fd-route-flow, #booking-details-modal .route-details.fd-route-flow { grid-template-columns: minmax(0, 1fr) minmax(48px, auto) minmax(0, 1fr); gap: 0 10px; } #booking-flight-panel .fd-route-connector, #flight-details-popup .fd-route-connector, #booking-details-modal .fd-route-connector { padding-top: 22px; } #booking-flight-panel .fd-route-arrow, #flight-details-popup .fd-route-arrow, #booking-details-modal .fd-route-arrow { width: 28px; } #booking-flight-panel .fd-route-legs-note, #flight-details-popup .fd-route-legs-note, #booking-details-modal .fd-route-legs-note { white-space: normal; } #booking-flight-panel .fd-route-statsbar-item, #flight-details-popup .fd-route-statsbar-item, #booking-details-modal .fd-route-statsbar-item { padding: 0 12px; } #booking-flight-panel .fd-aircraft-body, #flight-details-popup .fd-aircraft-body, #booking-flight-panel .fd-aircraft-stack, #flight-details-popup .fd-aircraft-stack, #booking-flight-panel .aircraft-details, #flight-details-popup .aircraft-details, #booking-details-modal .fd-aircraft-body, #booking-details-modal .fd-aircraft-stack, #booking-details-modal .aircraft-details { grid-template-columns: 1fr; gap: 12px; } #booking-flight-panel .fd-aircraft-image-wrap, #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { aspect-ratio: 16 / 9; max-height: 200px; min-height: 0; } #booking-flight-panel .fd-aircraft-photo, #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { object-fit: cover; max-height: none; } #booking-flight-panel .fd-specs-grid, #flight-details-popup .fd-specs-grid, #booking-details-modal .fd-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #booking-flight-panel .pricing-section .price-value, #flight-details-popup .pricing-section .price-value, #booking-flight-panel .pricing-section .actions-price-display .current-price, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-size: 24px; } } #booking-flight-panel .fd-ml-leg-row, #flight-details-popup .fd-ml-leg-row, #booking-details-modal .fd-ml-leg-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 10px 0; border-bottom: 0.5px solid var(--fd-separator-light, rgba(60, 60, 67, 0.14)); font-family: var(--fd-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif); } #booking-flight-panel .fd-ml-leg-row:last-child, #flight-details-popup .fd-ml-leg-row:last-child, #booking-details-modal .fd-ml-leg-row:last-child { border-bottom: none; padding-bottom: 2px; } #booking-flight-panel .fd-ml-leg-index, #flight-details-popup .fd-ml-leg-index, #booking-details-modal .fd-ml-leg-index { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--fd-fill, rgba(120, 120, 128, 0.16)); font-size: 11px; font-weight: 700; line-height: 1; color: var(--fd-text-secondary, #636366); } #booking-flight-panel .fd-ml-leg-body, #flight-details-popup .fd-ml-leg-body, #booking-details-modal .fd-ml-leg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #booking-flight-panel .fd-ml-leg-topline, #flight-details-popup .fd-ml-leg-topline, #booking-details-modal .fd-ml-leg-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } #booking-flight-panel .fd-ml-leg-route, #flight-details-popup .fd-ml-leg-route, #booking-details-modal .fd-ml-leg-route { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; } #booking-flight-panel .fd-ml-leg-endpoint, #flight-details-popup .fd-ml-leg-endpoint, #booking-details-modal .fd-ml-leg-endpoint { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; } #booking-flight-panel .fd-ml-leg-code, #flight-details-popup .fd-ml-leg-code, #booking-details-modal .fd-ml-leg-code { flex-shrink: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--fd-text, #1d1d1f); } #booking-flight-panel .fd-ml-leg-city, #flight-details-popup .fd-ml-leg-city, #booking-details-modal .fd-ml-leg-city { min-width: 0; font-size: 12px; font-weight: 400; color: var(--fd-text-secondary, #636366); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #booking-flight-panel .fd-ml-leg-arrow, #flight-details-popup .fd-ml-leg-arrow, #booking-details-modal .fd-ml-leg-arrow { position: relative; display: inline-block; flex-shrink: 0; width: 14px; height: 1px; margin: 0; background: var(--fd-separator, rgba(60, 60, 67, 0.22)); align-self: center; } #booking-flight-panel .fd-ml-leg-arrow::after, #flight-details-popup .fd-ml-leg-arrow::after, #booking-details-modal .fd-ml-leg-arrow::after { content: ""; position: absolute; right: -1px; top: -2px; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; border-left: 4px solid var(--fd-label, #8e8e93); } #booking-flight-panel .fd-ml-leg-meta, #flight-details-popup .fd-ml-leg-meta, #booking-details-modal .fd-ml-leg-meta { font-size: 12px; font-weight: 500; color: var(--fd-text-secondary, #636366); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #booking-flight-panel .fd-ml-leg-metrics, #flight-details-popup .fd-ml-leg-metrics, #booking-details-modal .fd-ml-leg-metrics, #booking-flight-panel .fd-ml-leg-footer, #flight-details-popup .fd-ml-leg-footer, #booking-details-modal .fd-ml-leg-footer { display: none; } #booking-flight-panel .fd-ml-leg-price, #flight-details-popup .fd-ml-leg-price, #booking-details-modal .fd-ml-leg-price { flex-shrink: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--fd-text, #1d1d1f); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 76px; } @media (max-width: 900px) { #booking-flight-panel .fd-ml-leg-row, #flight-details-popup .fd-ml-leg-row, #booking-details-modal .fd-ml-leg-row { gap: 0 10px; } #booking-flight-panel .fd-ml-leg-body, #flight-details-popup .fd-ml-leg-body, #booking-details-modal .fd-ml-leg-body { gap: 4px; } #booking-flight-panel .fd-ml-leg-topline, #flight-details-popup .fd-ml-leg-topline, #booking-details-modal .fd-ml-leg-topline { display: block; } #booking-flight-panel .fd-ml-leg-topline > .fd-ml-leg-price, #flight-details-popup .fd-ml-leg-topline > .fd-ml-leg-price, #booking-details-modal .fd-ml-leg-topline > .fd-ml-leg-price { display: none; } #booking-flight-panel .fd-ml-leg-meta, #flight-details-popup .fd-ml-leg-meta, #booking-details-modal .fd-ml-leg-meta { display: none; } #booking-flight-panel .fd-ml-leg-metrics, #flight-details-popup .fd-ml-leg-metrics, #booking-details-modal .fd-ml-leg-metrics { display: block; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--fd-text-secondary, #636366); font-variant-numeric: tabular-nums; } #booking-flight-panel .fd-ml-leg-footer, #flight-details-popup .fd-ml-leg-footer, #booking-details-modal .fd-ml-leg-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } #booking-flight-panel .fd-ml-leg-aircraft, #flight-details-popup .fd-ml-leg-aircraft, #booking-details-modal .fd-ml-leg-aircraft { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--fd-text, #1d1d1f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #booking-flight-panel .fd-ml-leg-price--mobile, #flight-details-popup .fd-ml-leg-price--mobile, #booking-details-modal .fd-ml-leg-price--mobile { display: inline; min-width: 0; } } @media (min-width: 1025px) { #booking-flight-panel, #flight-details-popup, #booking-details-modal { --fd-rail-width: 240px; --fd-shell-inset-x: 16px; --fd-shell-inset-bottom: 16px; --fd-media-col: 50%; --fd-media-gap: 10px; --fd-shell: rgba(245, 245, 247, 0.62); --fd-shell-border: rgba(60, 60, 67, 0.14); --fd-shell-shadow: 0 28px 88px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72); --fd-card: rgba(255, 255, 255, 0.58); --fd-card-rim: rgba(60, 60, 67, 0.1); --fd-card-blur: saturate(170%) blur(20px); --fd-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85); --fd-dock: var(--fd-card); --fd-dock-rim: var(--fd-card-rim); --fd-dock-shadow: var(--fd-card-shadow); --fd-dock-blur: var(--fd-card-blur); --fd-control: rgba(120, 120, 128, 0.14); --fd-control-rim: rgba(60, 60, 67, 0.1); --fd-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); --fd-control-blur: saturate(170%) blur(18px); --fd-fill: rgba(120, 120, 128, 0.1); --fd-fill-elevated: rgba(120, 120, 128, 0.16); } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { width: min(96vw, 1240px); max-height: min(calc(100vh - 48px), 880px); } :root[data-theme="dark"] #booking-flight-panel, :root[data-theme="dark"] #flight-details-popup, :root[data-theme="dark"] #booking-details-modal { --fd-shell: rgba(28, 30, 36, 0.52); --fd-shell-border: rgba(255, 255, 255, 0.14); --fd-shell-shadow: 0 28px 88px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06); --fd-card: rgba(44, 44, 46, 0.55); --fd-card-rim: rgba(255, 255, 255, 0.12); --fd-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); --fd-dock: var(--fd-card); --fd-dock-rim: var(--fd-card-rim); --fd-dock-shadow: var(--fd-card-shadow); --fd-dock-blur: var(--fd-card-blur); --fd-control: rgba(255, 255, 255, 0.1); --fd-control-rim: rgba(255, 255, 255, 0.16); --fd-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); --fd-fill: rgba(255, 255, 255, 0.08); --fd-fill-elevated: rgba(255, 255, 255, 0.14); } #flight-details-popup.flight-popup-overlay, #booking-details-modal.flight-popup-overlay { background: rgba(0, 0, 0, 0.28); } :root[data-theme="dark"] #flight-details-popup.flight-popup-overlay, :root[data-theme="dark"] #booking-details-modal.flight-popup-overlay { background: rgba(10, 15, 20, 0.42); } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { background: var(--fd-shell); border: 0.5px solid var(--fd-shell-border); box-shadow: var(--fd-shell-shadow); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); } #booking-flight-panel .popup-content, #flight-details-popup .popup-content, #booking-details-modal .popup-content { padding: 14px 16px 16px; overflow: hidden; background: transparent; } #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { grid-template-columns: minmax(0, 1fr) var(--fd-rail-width); gap: 10px; } #booking-flight-panel .fd-head, #flight-details-popup .fd-head, #booking-details-modal .fd-head { grid-template-columns: var(--fd-media-col) minmax(0, 1fr); gap: var(--fd-media-gap); min-height: 176px; } #booking-flight-panel .fd-map.route-map-container, #flight-details-popup .fd-map.route-map-container, #booking-details-modal .fd-map.route-map-container { min-height: 176px; } #booking-flight-panel #flight-route-map, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { min-height: 176px; } #booking-flight-panel .fd-main > .info-section.fd-aircraft, #flight-details-popup .fd-main > .info-section.fd-aircraft, #booking-details-modal .fd-main > .info-section.fd-aircraft { display: grid; grid-template-columns: var(--fd-media-col) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--fd-media-gap); row-gap: 0; align-items: stretch; padding: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #booking-flight-panel .fd-main > .fd-aircraft > .popup-section-title, #flight-details-popup .fd-main > .fd-aircraft > .popup-section-title, #booking-details-modal .fd-main > .fd-aircraft > .popup-section-title { grid-column: 2; grid-row: 1; z-index: 2; align-self: start; margin: 0; padding: 12px 14px 0; background: transparent; border: none; border-radius: 0; box-shadow: none; line-height: 1.3; } #booking-flight-panel .fd-aircraft-body, #flight-details-popup .fd-aircraft-body, #booking-details-modal .fd-aircraft-body { display: contents !important; } #booking-flight-panel .fd-aircraft-image-wrap, #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { grid-column: 1; grid-row: 1; min-height: 200px; max-height: none; width: 100%; max-width: 100%; height: auto; align-self: stretch; background: transparent; border: 0.5px solid var(--fd-separator-light); border-radius: 12px; overflow: hidden; box-sizing: border-box; transition: none; } :root[data-theme="dark"] #booking-flight-panel .fd-aircraft-image-wrap, :root[data-theme="dark"] #flight-details-popup .fd-aircraft-image-wrap, :root[data-theme="dark"] #booking-details-modal .fd-aircraft-image-wrap { border-color: rgba(255, 255, 255, 0.14); } #booking-flight-panel .fd-aircraft-image-wrap:hover, #flight-details-popup .fd-aircraft-image-wrap:hover, #booking-details-modal .fd-aircraft-image-wrap:hover, #booking-flight-panel .aircraft-image-wrapper.fd-aircraft-image-wrap:hover, #flight-details-popup .aircraft-image-wrapper.fd-aircraft-image-wrap:hover, #booking-details-modal .aircraft-image-wrapper.fd-aircraft-image-wrap:hover { background: transparent; border: 0.5px solid var(--fd-separator-light); border-color: var(--fd-separator-light); box-shadow: none; transform: none; } :root[data-theme="dark"] #booking-flight-panel .fd-aircraft-image-wrap:hover, :root[data-theme="dark"] #flight-details-popup .fd-aircraft-image-wrap:hover, :root[data-theme="dark"] #booking-details-modal .fd-aircraft-image-wrap:hover, :root[data-theme="dark"] #booking-flight-panel .aircraft-image-wrapper.fd-aircraft-image-wrap:hover, :root[data-theme="dark"] #flight-details-popup .aircraft-image-wrapper.fd-aircraft-image-wrap:hover, :root[data-theme="dark"] #booking-details-modal .aircraft-image-wrapper.fd-aircraft-image-wrap:hover { border-color: rgba(255, 255, 255, 0.14); } #booking-flight-panel .fd-aircraft-photo, #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { border-radius: 12px; cursor: default; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; transition: none; } #booking-flight-panel .fd-aircraft-photo:hover, #flight-details-popup .fd-aircraft-photo:hover, #booking-details-modal .fd-aircraft-photo:hover, #booking-flight-panel .aircraft-image-large.fd-aircraft-photo:hover, #flight-details-popup .aircraft-image-large.fd-aircraft-photo:hover, #booking-details-modal .aircraft-image-large.fd-aircraft-photo:hover { transform: none; cursor: default; } #booking-flight-panel .fd-aircraft-photo:hover + .aircraft-image-popup, #flight-details-popup .fd-aircraft-photo:hover + .aircraft-image-popup, #booking-details-modal .fd-aircraft-photo:hover + .aircraft-image-popup, #booking-flight-panel .fd-aircraft .aircraft-image-popup:hover, #flight-details-popup .fd-aircraft .aircraft-image-popup:hover, #booking-details-modal .fd-aircraft .aircraft-image-popup:hover, #booking-flight-panel .fd-aircraft .aircraft-image-popup, #flight-details-popup .fd-aircraft .aircraft-image-popup, #booking-details-modal .fd-aircraft .aircraft-image-popup { display: none !important; transform: none; opacity: 0; pointer-events: none; } #booking-flight-panel .fd-aircraft .aircraft-info, #flight-details-popup .fd-aircraft .aircraft-info, #booking-details-modal .fd-aircraft .aircraft-info { grid-column: 2; grid-row: 1; z-index: 1; align-self: stretch; padding: 34px 14px 12px; box-sizing: border-box; background: var(--fd-card); border: 0.5px solid var(--fd-card-rim); border-radius: 14px; box-shadow: var(--fd-card-shadow); backdrop-filter: var(--fd-card-blur); -webkit-backdrop-filter: var(--fd-card-blur); } #booking-flight-panel .pricing-section .price-value, #flight-details-popup .pricing-section .price-value, #booking-flight-panel .pricing-section .actions-price-display .current-price, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-size: 30px; } } @media (min-width: 901px) { #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section, #booking-flight-panel .fd-rail.info-section > .fd-rail-meta.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-meta.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-meta.info-section { border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; } #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section { padding-bottom: 10px; border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated), #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated), #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated) { padding-bottom: 20px; } #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated) + .fd-rail-meta, #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated) + .fd-rail-meta, #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section:has(.actions-price-display--estimated) + .fd-rail-meta { padding-top: 6px; } } @media (min-width: 901px) { #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { position: relative; display: flex; flex-direction: column; overflow: hidden; } #flight-details-popup .popup-content, #booking-details-modal .popup-content { flex: 1 1 auto; min-height: 0; overflow: hidden; } #booking-flight-panel .fd-rail.info-section, #flight-details-popup .fd-rail.info-section, #booking-details-modal .fd-rail.info-section { padding-bottom: var(--fd-dock-height); border-radius: 14px; border-bottom: none; overflow: hidden; } #booking-flight-panel .fd-rail-actions, #flight-details-popup .fd-rail-actions, #booking-details-modal .fd-rail-actions, #booking-flight-panel .fd-rail-actions.popup-footer, #flight-details-popup .fd-rail-actions.popup-footer, #booking-details-modal .fd-rail-actions.popup-footer { position: absolute; right: var(--fd-shell-inset-x); bottom: var(--fd-shell-inset-bottom); width: var(--fd-rail-width); z-index: 3; margin: 0; box-sizing: border-box; background: var(--fd-dock, var(--fd-surface)); border: 0.5px solid var(--fd-dock-rim, var(--fd-separator-light)); border-radius: 0 0 14px 14px; box-shadow: var(--fd-dock-shadow, 0 1px 2px rgba(0, 0, 0, 0.03)); overflow: hidden; backdrop-filter: var(--fd-dock-blur, none); -webkit-backdrop-filter: var(--fd-dock-blur, none); } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions.popup-footer, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions.popup-footer, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions.popup-footer { background: var(--fd-dock, var(--fd-surface)); border-color: var(--fd-dock-rim, rgba(255, 255, 255, 0.14)); box-shadow: var(--fd-dock-shadow, var(--shadow-surface-sm)); backdrop-filter: var(--fd-dock-blur, none); -webkit-backdrop-filter: var(--fd-dock-blur, none); } :root[data-theme="dark"] #booking-flight-panel .fd-rail.info-section, :root[data-theme="dark"] #flight-details-popup .fd-rail.info-section, :root[data-theme="dark"] #booking-details-modal .fd-rail.info-section { border-color: rgba(255, 255, 255, 0.14); } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking), #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking), #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons { display: flex; flex-direction: column; width: 100%; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary { display: grid; width: 100%; } } @media (max-width: 900px) { #flight-details-popup.flight-popup-overlay.active, #booking-details-modal.flight-popup-overlay.active { padding: 16px; align-items: stretch; } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { display: flex; flex-direction: column; width: 100%; max-width: 100%; max-height: min(94vh, 920px); min-height: 0; overflow: hidden; } #booking-flight-panel .popup-content, #flight-details-popup .popup-content, #booking-details-modal .popup-content { display: block !important; flex: 1 1 auto; min-height: 0; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; scroll-padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding: 12px 14px max(20px, env(safe-area-inset-bottom, 0px)) !important; } #booking-flight-panel .fd-layout, #flight-details-popup .fd-layout, #booking-details-modal .fd-layout { display: flex; flex-direction: column; gap: 12px; height: auto !important; min-height: 0; } #booking-flight-panel .fd-main, #flight-details-popup .fd-main, #booking-details-modal .fd-main { display: contents; } #booking-flight-panel .fd-head, #flight-details-popup .fd-head, #booking-details-modal .fd-head { display: contents; } #booking-flight-panel .fd-rail.info-section, #flight-details-popup .fd-rail.info-section, #booking-details-modal .fd-rail.info-section { display: contents; border: none; padding: 0; padding-bottom: 0; background: transparent; box-shadow: none; border-radius: 0; } #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section { padding-bottom: 0; border-bottom: none; } #booking-flight-panel .fd-rail-booking:not([hidden]), #flight-details-popup .fd-rail-booking:not([hidden]), #booking-details-modal .fd-rail-booking:not([hidden]) { order: 0; display: flex; flex-direction: column; background: transparent; border: none; padding: 0; box-shadow: none; } #booking-flight-panel .fd-map.route-map-container, #flight-details-popup .fd-map.route-map-container, #booking-details-modal .fd-map.route-map-container, #booking-flight-panel .route-map-container, #flight-details-popup .route-map-container, #booking-details-modal .route-map-container { order: 1; height: 220px; min-height: 220px; max-height: 220px; border-radius: 14px; } #booking-flight-panel #flight-route-map, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { height: 220px; min-height: 220px; max-height: 220px; } #booking-flight-panel .fd-route, #flight-details-popup .fd-route, #booking-details-modal .fd-route { order: 2; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items, #flight-details-popup .fd-rail-meta .fd-flight-info-items, #booking-details-modal .fd-rail-meta .fd-flight-info-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item, #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item, #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item { border-bottom: none; padding: 0; min-width: 0; overflow: hidden; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(1), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(1), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(1) { grid-column: 1; grid-row: 1; padding-right: 2px; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(2), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(2), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(2) { grid-column: 2; grid-row: 1; padding-left: 2px; border-left: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(3), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(3), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(3) { grid-column: 1; grid-row: 2; margin-top: 0; padding-top: 0; padding-right: 2px; border-top: none; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(4), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(4), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(4) { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; padding-left: 2px; border-top: none; border-left: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-label, #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-label, #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-label { margin-bottom: 4px; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-value, #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-value, #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-value { font-size: 13px; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; } #booking-flight-panel .aircraft-section, #flight-details-popup .aircraft-section, #booking-details-modal .aircraft-section { position: relative; overflow: hidden; min-height: 0; } #booking-flight-panel .aircraft-section .aircraft-details, #flight-details-popup .aircraft-section .aircraft-details, #booking-details-modal .aircraft-section .aircraft-details { position: relative; z-index: auto; } #booking-flight-panel .fd-rail .fd-rail-meta, #flight-details-popup .fd-rail .fd-rail-meta, #booking-details-modal .fd-rail .fd-rail-meta, #booking-flight-panel .fd-aircraft, #flight-details-popup .fd-aircraft, #booking-details-modal .fd-aircraft, #booking-flight-panel .fd-route, #flight-details-popup .fd-route, #booking-details-modal .fd-route, #booking-flight-panel .fd-rail-price, #flight-details-popup .fd-rail-price, #booking-details-modal .fd-rail-price { overflow: hidden; isolation: isolate; min-width: 0; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .btn-text, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .btn-text, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .btn-text { display: inline !important; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; min-height: 46px; padding: 0 14px !important; font-size: 15px; border-radius: 12px; } #booking-flight-panel .fd-rail-meta, #flight-details-popup .fd-rail-meta, #booking-details-modal .fd-rail-meta { order: 3; } #booking-flight-panel .fd-aircraft, #flight-details-popup .fd-aircraft, #booking-details-modal .fd-aircraft { order: 4; } #booking-flight-panel .fd-rail-price, #flight-details-popup .fd-rail-price, #booking-details-modal .fd-rail-price { order: 5; } #booking-flight-panel .fd-rail .fd-rail-price, #flight-details-popup .fd-rail .fd-rail-price, #booking-details-modal .fd-rail .fd-rail-price, #booking-flight-panel .fd-rail .fd-rail-meta, #flight-details-popup .fd-rail .fd-rail-meta, #booking-details-modal .fd-rail .fd-rail-meta, #booking-flight-panel .fd-rail .fd-rail-booking:not([hidden]), #flight-details-popup .fd-rail .fd-rail-booking:not([hidden]), #booking-details-modal .fd-rail .fd-rail-booking:not([hidden]), #booking-flight-panel .fd-route, #flight-details-popup .fd-route, #booking-details-modal .fd-route, #booking-flight-panel .fd-aircraft, #flight-details-popup .fd-aircraft, #booking-details-modal .fd-aircraft { display: flex; flex-direction: column; background: var(--fd-surface); border: 0.5px solid var(--fd-separator-light); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } #booking-flight-panel .fd-rail .fd-rail-booking:not([hidden]), #flight-details-popup .fd-rail .fd-rail-booking:not([hidden]), #booking-details-modal .fd-rail .fd-rail-booking:not([hidden]) { border-top: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail-actions, #flight-details-popup .fd-rail-actions, #booking-details-modal .fd-rail-actions { position: static; flex-shrink: 0; width: 100%; margin-top: 0; align-items: stretch; justify-content: stretch; gap: 8px; padding: 8px 14px max(8px, env(safe-area-inset-bottom, 0px)) !important; background: rgba(255, 255, 255, 0.96); border: none; border-top: 0.5px solid var(--fd-separator); border-radius: 0 0 var(--fd-radius) var(--fd-radius); box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.08); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking { display: flex !important; flex-direction: column; } #booking-flight-panel .fd-rail-actions > .action-buttons, #flight-details-popup .fd-rail-actions > .action-buttons, #booking-details-modal .fd-rail-actions > .action-buttons { width: 100%; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking), #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking), #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) { display: grid !important; grid-template-columns: 44px 44px minmax(0, 1fr); gap: 8px; align-items: stretch; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) > .action-buttons, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) > .fd-rail-actions-secondary { display: contents !important; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn { box-sizing: border-box; flex: none !important; width: 44px !important; min-width: 44px !important; min-height: 46px; padding: 0 !important; border-radius: 12px; background: #f2f2f7; border: 0.5px solid rgba(60, 60, 67, 0.22); color: #1d1d1f; box-shadow: none; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn { color: #e8e9eb; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn i, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn i, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn i, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn i, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn i, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn i { font-size: 13px; opacity: 0.75; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .fc-share-btn, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .copy-link-btn { grid-column: 1; grid-row: 1; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn { grid-column: 2; grid-row: 1; } #booking-flight-panel .fd-rail-actions-secondary::before, #flight-details-popup .fd-rail-actions-secondary::before, #booking-details-modal .fd-rail-actions-secondary::before { display: none; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite { color: #ff3b30; background: transparent; border-color: transparent; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited i, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited i, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.favorited i, #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite i, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite i, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .favorite-btn.is-favorite i { color: #ff3b30; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking) .book-btn, #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking) .book-btn, #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) .book-btn { grid-column: 3; grid-row: 1; flex: 1 1 auto !important; width: auto !important; min-width: 0; min-height: 46px; font-size: 15px; border-radius: 12px; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking { flex-direction: column !important; align-items: stretch; justify-content: stretch; gap: 8px; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons { display: flex !important; width: 100%; min-width: 0; flex-direction: row !important; align-items: stretch; gap: 8px; } :root[data-theme="dark"] #booking-flight-panel .fd-rail-actions, :root[data-theme="dark"] #flight-details-popup .fd-rail-actions, :root[data-theme="dark"] #booking-details-modal .fd-rail-actions { background: var(--color-surface-glass-strong); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28); } #booking-flight-panel .fd-rail-price, #flight-details-popup .fd-rail-price, #booking-details-modal .fd-rail-price { align-items: center; text-align: center; padding: 18px 16px 20px; background: linear-gradient( 180deg, var(--fd-surface) 0%, rgba(68, 93, 239, 0.06) 100% ); } :root[data-theme="dark"] #booking-flight-panel .fd-rail-price, :root[data-theme="dark"] #flight-details-popup .fd-rail-price, :root[data-theme="dark"] #booking-details-modal .fd-rail-price { background: linear-gradient( 180deg, var(--fd-surface) 0%, rgba(68, 93, 239, 0.1) 100% ); } #booking-flight-panel .fd-rail-price .popup-section-title, #flight-details-popup .fd-rail-price .popup-section-title, #booking-details-modal .fd-rail-price .popup-section-title { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; } #booking-flight-panel .fd-rail-price .pricing-details, #flight-details-popup .fd-rail-price .pricing-details, #booking-details-modal .fd-rail-price .pricing-details, #booking-flight-panel .fd-rail-price .price-main, #flight-details-popup .fd-rail-price .price-main, #booking-details-modal .fd-rail-price .price-main { width: 100%; align-items: center !important; text-align: center; } #booking-flight-panel .fd-rail-price .price-value, #flight-details-popup .fd-rail-price .price-value, #booking-details-modal .fd-rail-price .price-value { font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; text-align: center !important; } #booking-flight-panel .fd-aircraft-body, #flight-details-popup .fd-aircraft-body, #booking-details-modal .fd-aircraft-body { grid-template-columns: 1fr; gap: 12px; } #booking-flight-panel .fd-aircraft-image-wrap, #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { aspect-ratio: 16 / 9; min-height: 0; max-height: 220px; height: auto; } #booking-flight-panel .fd-specs-grid, #flight-details-popup .fd-specs-grid, #booking-details-modal .fd-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #booking-flight-panel .fd-layout--mobile-flat > .fd-main, #flight-details-popup .fd-layout--mobile-flat > .fd-main, #booking-details-modal .fd-layout--mobile-flat > .fd-main, #booking-flight-panel .fd-layout--mobile-flat > .fd-rail, #flight-details-popup .fd-layout--mobile-flat > .fd-rail, #booking-details-modal .fd-layout--mobile-flat > .fd-rail { display: none !important; } #booking-flight-panel .fd-layout--mobile-flat, #flight-details-popup .fd-layout--mobile-flat, #booking-details-modal .fd-layout--mobile-flat { display: flex !important; flex-direction: column !important; gap: 12px !important; height: auto !important; } #booking-flight-panel .fd-layout--mobile-flat > .fd-map.route-map-container, #flight-details-popup .fd-layout--mobile-flat > .fd-map.route-map-container, #booking-details-modal .fd-layout--mobile-flat > .fd-map.route-map-container, #booking-flight-panel .fd-layout--mobile-flat > .route-map-container, #flight-details-popup .fd-layout--mobile-flat > .route-map-container, #booking-details-modal .fd-layout--mobile-flat > .route-map-container { order: 1; } #booking-flight-panel .fd-layout--mobile-flat > .fd-route, #flight-details-popup .fd-layout--mobile-flat > .fd-route, #booking-details-modal .fd-layout--mobile-flat > .fd-route { order: 2; } #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-meta, #flight-details-popup .fd-layout--mobile-flat > .fd-rail-meta, #booking-details-modal .fd-layout--mobile-flat > .fd-rail-meta { order: 3; } #booking-flight-panel .fd-layout--mobile-flat > .fd-aircraft, #flight-details-popup .fd-layout--mobile-flat > .fd-aircraft, #booking-details-modal .fd-layout--mobile-flat > .fd-aircraft { order: 4; } #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-price, #flight-details-popup .fd-layout--mobile-flat > .fd-rail-price, #booking-details-modal .fd-layout--mobile-flat > .fd-rail-price { order: 5; } #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #flight-details-popup .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #booking-details-modal .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]) { order: 0; } #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-meta, #flight-details-popup .fd-layout--mobile-flat > .fd-rail-meta, #booking-details-modal .fd-layout--mobile-flat > .fd-rail-meta, #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-price, #flight-details-popup .fd-layout--mobile-flat > .fd-rail-price, #booking-details-modal .fd-layout--mobile-flat > .fd-rail-price, #booking-flight-panel .fd-layout--mobile-flat > .fd-route, #flight-details-popup .fd-layout--mobile-flat > .fd-route, #booking-details-modal .fd-layout--mobile-flat > .fd-route, #booking-flight-panel .fd-layout--mobile-flat > .fd-aircraft, #flight-details-popup .fd-layout--mobile-flat > .fd-aircraft, #booking-details-modal .fd-layout--mobile-flat > .fd-aircraft, #booking-flight-panel .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #flight-details-popup .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #booking-details-modal .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]) { display: flex; flex-direction: column; background: var(--fd-surface); border: 0.5px solid var(--fd-separator-light); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); overflow: hidden; isolation: isolate; min-width: 0; } @supports (-webkit-touch-callout: none) { #booking-flight-panel .popup-content, #flight-details-popup .popup-content, #booking-details-modal .popup-content { flex: 1 1 0 !important; height: 0 !important; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; } } } @media (max-width: 768px) { #flight-details-popup.flight-popup-overlay.active, #booking-details-modal.flight-popup-overlay.active { padding: 0; overflow: hidden; } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { max-height: 100dvh; min-height: 100dvh; height: 100dvh; border-radius: 0; border: none; box-shadow: none !important; } #booking-flight-panel .popup-content, #flight-details-popup .popup-content, #booking-details-modal .popup-content { padding: 12px 16px max(24px, env(safe-area-inset-bottom, 0px)) !important; padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; scroll-padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); } #booking-flight-panel .fd-rail-meta .fd-flight-info-items, #flight-details-popup .fd-rail-meta .fd-flight-info-items, #booking-details-modal .fd-rail-meta .fd-flight-info-items { grid-template-columns: minmax(0, 1fr); row-gap: 0; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(n), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(n), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:nth-child(n) { grid-column: 1; grid-row: auto; margin-top: 0; padding: 8px 0; border-left: none; border-top: none; } #booking-flight-panel .fd-rail-meta .fd-flight-info-items .detail-item:not(:last-child), #flight-details-popup .fd-rail-meta .fd-flight-info-items .detail-item:not(:last-child), #booking-details-modal .fd-rail-meta .fd-flight-info-items .detail-item:not(:last-child) { border-bottom: 0.5px solid var(--fd-separator-light); } #booking-flight-panel .fd-rail-actions, #flight-details-popup .fd-rail-actions, #booking-details-modal .fd-rail-actions { border-radius: 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)) !important; } #booking-flight-panel .route-map-container, #flight-details-popup .route-map-container, #booking-details-modal .route-map-container, #booking-flight-panel .fd-map.route-map-container, #flight-details-popup .fd-map.route-map-container, #booking-details-modal .fd-map.route-map-container { height: 200px; min-height: 200px; max-height: 200px; } #booking-flight-panel #flight-route-map, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { height: 200px; min-height: 200px; max-height: 200px; } #flight-details-popup .popup-close-corner, #booking-details-modal .popup-close-corner { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); right: 12px; width: 36px; height: 36px; z-index: 10002; background: rgba(255, 255, 255, 0.92) !important; color: var(--fd-text-secondary) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important; } :root[data-theme="dark"] #flight-details-popup .popup-close-corner, :root[data-theme="dark"] #booking-details-modal .popup-close-corner { background: var(--color-surface-glass-strong) !important; box-shadow: var(--shadow-surface) !important; } #booking-flight-panel .fd-rail-actions .copy-link-btn .btn-text, #flight-details-popup .fd-rail-actions .copy-link-btn .btn-text, #booking-details-modal .fd-rail-actions .copy-link-btn .btn-text { display: none; } #booking-flight-panel .fd-rail-actions:not(.fd-rail-actions--booking), #flight-details-popup .fd-rail-actions:not(.fd-rail-actions--booking), #booking-details-modal .fd-rail-actions:not(.fd-rail-actions--booking) { padding: 8px 16px max(8px, env(safe-area-inset-bottom, 0px)) !important; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking { flex-direction: column !important; align-items: stretch; justify-content: stretch; gap: 8px; padding: 8px 16px max(8px, env(safe-area-inset-bottom, 0px)) !important; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking > .fd-booking-action-buttons { display: flex !important; width: 100%; min-width: 0; flex-direction: row !important; align-items: stretch; gap: 8px; } #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .chat-btn, #booking-flight-panel .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #flight-details-popup .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn, #booking-details-modal .fd-rail-actions.fd-rail-actions--booking .fd-booking-action-buttons .cancel-btn { flex: 1 1 0 !important; width: auto !important; min-width: 0; min-height: 46px; font-size: 15px; border-radius: 12px; } } @media (min-width: 1025px) { #booking-flight-panel .info-section, #flight-details-popup .info-section, #booking-details-modal .info-section { background: var(--fd-card); border: 0.5px solid var(--fd-card-rim); box-shadow: var(--fd-card-shadow); backdrop-filter: var(--fd-card-blur); -webkit-backdrop-filter: var(--fd-card-blur); } #booking-flight-panel .fd-main > .info-section.fd-aircraft, #flight-details-popup .fd-main > .info-section.fd-aircraft, #booking-details-modal .fd-main > .info-section.fd-aircraft { background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #booking-flight-panel .fd-rail.info-section > .fd-rail-price.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-price.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-price.info-section, #booking-flight-panel .fd-rail.info-section > .fd-rail-meta.info-section, #flight-details-popup .fd-rail.info-section > .fd-rail-meta.info-section, #booking-details-modal .fd-rail.info-section > .fd-rail-meta.info-section { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } } #booking-flight-panel .fd-layout--multileg, #flight-details-popup .fd-layout--multileg, #booking-details-modal .fd-layout--multileg { --fd-media-col: 50%; } #booking-flight-panel .fd-media, #flight-details-popup .fd-media, #booking-details-modal .fd-media { display: flex; flex-direction: column; gap: var(--fd-media-gap, 10px); min-width: 0; min-height: 0; align-self: stretch; } #booking-flight-panel .fd-media > .fd-map.route-map-container, #flight-details-popup .fd-media > .fd-map.route-map-container, #booking-details-modal .fd-media > .fd-map.route-map-container { flex: 1 1 auto; width: 100%; min-height: 176px; height: auto; align-self: stretch; } #booking-flight-panel .fd-layout--multileg .fd-media > .fd-route-statsbar, #flight-details-popup .fd-layout--multileg .fd-media > .fd-route-statsbar, #booking-details-modal .fd-layout--multileg .fd-media > .fd-route-statsbar { flex: 0 0 auto; margin-top: 0; width: 100%; } @media (min-width: 901px) { #booking-flight-panel .fd-head > .fd-media, #flight-details-popup .fd-head > .fd-media, #booking-details-modal .fd-head > .fd-media { grid-column: 1; grid-row: 1; } #booking-flight-panel .fd-head > .fd-route, #flight-details-popup .fd-head > .fd-route, #booking-details-modal .fd-head > .fd-route { grid-column: 2; grid-row: 1; align-self: stretch; } #booking-flight-panel .fd-head, #flight-details-popup .fd-head, #booking-details-modal .fd-head { align-items: stretch; } #booking-flight-panel .fd-media, #flight-details-popup .fd-media, #booking-details-modal .fd-media { width: 100%; min-width: 0; height: 100%; } #booking-flight-panel .fd-media > .fd-map.route-map-container, #flight-details-popup .fd-media > .fd-map.route-map-container, #booking-details-modal .fd-media > .fd-map.route-map-container { flex: 1 1 auto; width: 100%; min-height: 176px; height: 100%; } #booking-flight-panel #flight-route-map, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { width: 100%; height: 100%; min-height: 176px; } } @media (max-width: 900px) { #booking-flight-panel .fd-layout--mobile-flat > .fd-media, #flight-details-popup .fd-layout--mobile-flat > .fd-media, #booking-details-modal .fd-layout--mobile-flat > .fd-media { order: 1; } #booking-flight-panel .fd-layout--mobile-flat > .fd-media > .fd-map.route-map-container, #flight-details-popup .fd-layout--mobile-flat > .fd-media > .fd-map.route-map-container, #booking-details-modal .fd-layout--mobile-flat > .fd-media > .fd-map.route-map-container { min-height: 220px; height: 220px; max-height: 220px; } } #flight-details-popup.fp-sample-details .fd-rail-actions, #flight-details-popup.fp-sample-details .fd-rail-actions.popup-footer, #flight-details-popup.fp-sample-details .popup-footer, #booking-details-modal.fp-sample-details .fd-rail-actions, #booking-details-modal.fp-sample-details .fd-rail-actions.popup-footer, #booking-details-modal.fp-sample-details .popup-footer, #booking-flight-panel.fp-sample-details .fd-rail-actions, #booking-flight-panel.fp-sample-details .fd-rail-actions.popup-footer, #booking-flight-panel.fp-sample-details .popup-footer { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; } #flight-details-popup.fp-sample-details .fd-rail-meta, #booking-details-modal.fp-sample-details .fd-rail-meta, #booking-flight-panel.fp-sample-details .fd-rail-meta { display: none !important; } #flight-details-popup.fp-sample-details .fd-rail.info-section, #booking-details-modal.fp-sample-details .fd-rail.info-section, #booking-flight-panel.fp-sample-details .fd-rail.info-section { padding-bottom: 20px; } .fd-fp-sample-status { display: none; margin: 10px 0 0; padding: 0; max-width: 15em; font-family: var(--fd-font, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: var(--fd-text-secondary, rgba(60, 60, 67, 0.72)); } :root[data-theme="dark"] .fd-fp-sample-status { color: rgba(235, 235, 245, 0.72); } #flight-details-popup.fp-sample-details .fd-fp-sample-status, #booking-details-modal.fp-sample-details .fd-fp-sample-status, #booking-flight-panel.fp-sample-details .fd-fp-sample-status { display: block; } #flight-details-popup.fp-sample-details .fd-rail-price .price-main, #booking-details-modal.fp-sample-details .fd-rail-price .price-main, #booking-flight-panel.fp-sample-details .fd-rail-price .price-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } #flight-details-popup.fp-sample-details .fd-rail-price .price-value, #flight-details-popup.fp-sample-details .fd-rail-price .current-price, #booking-details-modal.fp-sample-details .fd-rail-price .price-value, #booking-details-modal.fp-sample-details .fd-rail-price .current-price, #booking-flight-panel.fp-sample-details .fd-rail-price .price-value, #booking-flight-panel.fp-sample-details .fd-rail-price .current-price { font-size: 36px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; } @media (max-width: 900px) { #flight-details-popup.fp-sample-details .popup-content, #booking-details-modal.fp-sample-details .popup-content { scroll-padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important; } #flight-details-popup.fp-sample-details .fd-fp-sample-status, #booking-details-modal.fp-sample-details .fd-fp-sample-status, #booking-flight-panel.fp-sample-details .fd-fp-sample-status { margin-top: 12px; font-size: 17px; font-weight: 510; max-width: 18em; color: var(--fd-text-secondary, rgba(60, 60, 67, 0.78)); } :root[data-theme="dark"] #flight-details-popup.fp-sample-details .fd-fp-sample-status, :root[data-theme="dark"] #booking-details-modal.fp-sample-details .fd-fp-sample-status, :root[data-theme="dark"] #booking-flight-panel.fp-sample-details .fd-fp-sample-status { color: rgba(245, 245, 247, 0.78); } #flight-details-popup.fp-sample-details .fd-rail-price .price-value, #flight-details-popup.fp-sample-details .fd-rail-price .current-price, #booking-details-modal.fp-sample-details .fd-rail-price .price-value, #booking-details-modal.fp-sample-details .fd-rail-price .current-price, #booking-flight-panel.fp-sample-details .fd-rail-price .price-value, #booking-flight-panel.fp-sample-details .fd-rail-price .current-price { font-size: 40px; } #flight-details-popup.fp-sample-details .fd-rail-price, #booking-details-modal.fp-sample-details .fd-rail-price, #booking-flight-panel.fp-sample-details .fd-rail-price { display: block; width: 100%; padding: 16px 14px 18px; } } @media (min-width: 901px) { #flight-details-popup.fp-sample-details .fd-fp-sample-status, #booking-details-modal.fp-sample-details .fd-fp-sample-status, #booking-flight-panel.fp-sample-details .fd-fp-sample-status { margin-top: 12px; font-size: 15px; max-width: 12.5em; } #flight-details-popup.fp-sample-details .fd-rail-price .price-value, #flight-details-popup.fp-sample-details .fd-rail-price .current-price, #booking-details-modal.fp-sample-details .fd-rail-price .price-value, #booking-details-modal.fp-sample-details .fd-rail-price .current-price, #booking-flight-panel.fp-sample-details .fd-rail-price .price-value, #booking-flight-panel.fp-sample-details .fd-rail-price .current-price { font-size: 34px; } } #flight-details-popup.fp-booked-details .fd-aircraft, #booking-details-modal.fp-booked-details .fd-aircraft, #booking-flight-panel.fp-booked-details .fd-aircraft { display: none !important; } #flight-details-popup.fp-booked-details .fd-rail-price, #booking-details-modal.fp-booked-details .fd-rail-price, #booking-flight-panel.fp-booked-details .fd-rail-price, #flight-details-popup.fp-booked-details .pricing-section.fd-rail-price, #booking-details-modal.fp-booked-details .pricing-section.fd-rail-price, #booking-flight-panel.fp-booked-details .pricing-section.fd-rail-price { display: none !important; } #flight-details-popup.fp-booked-details .fd-fp-sample-status, #booking-details-modal.fp-booked-details .fd-fp-sample-status, #booking-flight-panel.fp-booked-details .fd-fp-sample-status { display: none !important; } #flight-details-popup.fp-booked-details .fd-rail-meta .detail-item:has(#popup-time), #booking-details-modal.fp-booked-details .fd-rail-meta .detail-item:has(#popup-time), #booking-flight-panel.fp-booked-details .fd-rail-meta .detail-item:has(#popup-time), #flight-details-popup.fp-booked-details .fd-rail-meta .detail-item:has(#popup-status), #booking-details-modal.fp-booked-details .fd-rail-meta .detail-item:has(#popup-status), #booking-flight-panel.fp-booked-details .fd-rail-meta .detail-item:has(#popup-status), #flight-details-popup.fp-booked-details .fd-rail-meta .detail-item:has(#popup-verification), #booking-details-modal.fp-booked-details .fd-rail-meta .detail-item:has(#popup-verification), #booking-flight-panel.fp-booked-details .fd-rail-meta .detail-item:has(#popup-verification) { display: none !important; } #flight-details-popup.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), #booking-details-modal.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), #booking-flight-panel.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; padding: 18px 20px; box-sizing: border-box; background: var(--fd-card, var(--color-surface, #fff)); border: 0.5px solid var(--fd-card-rim, var(--color-border-subtle, rgba(60, 60, 67, 0.12))); border-radius: 14px; box-shadow: var(--fd-card-shadow, none); backdrop-filter: var(--fd-card-blur, none); -webkit-backdrop-filter: var(--fd-card-blur, none); justify-content: center; } #flight-details-popup.fp-booked-details .fd-booking-panel--fp, #booking-details-modal.fp-booked-details .fd-booking-panel--fp, #booking-flight-panel.fp-booked-details .fd-booking-panel--fp { display: flex; flex-direction: column; gap: 0; width: 100%; min-height: 0; } #flight-details-popup.fp-booked-details .fd-fp-booked-class, #booking-details-modal.fp-booked-details .fd-fp-booked-class, #booking-flight-panel.fp-booked-details .fd-fp-booked-class { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; } #flight-details-popup.fp-booked-details .fd-fp-booked-class__label, #booking-details-modal.fp-booked-details .fd-fp-booked-class__label, #booking-flight-panel.fp-booked-details .fd-fp-booked-class__label { margin: 0; font-family: var(--fd-font, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fd-label, var(--color-text-muted, #8e8e93)); line-height: 1.3; } #flight-details-popup.fp-booked-details .fd-fp-booked-class__value, #booking-details-modal.fp-booked-details .fd-fp-booked-class__value, #booking-flight-panel.fp-booked-details .fd-fp-booked-class__value { margin: 0; font-family: var(--fd-font, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; color: var(--fd-text, var(--color-text, #1d1d1f)); } #flight-details-popup.fp-booked-details .fd-rail .fd-rail-booking, #booking-details-modal.fp-booked-details .fd-rail .fd-rail-booking, #booking-flight-panel.fp-booked-details .fd-rail .fd-rail-booking { display: none !important; } #flight-details-popup.fp-booked-details.fp-sample-details .fd-rail-meta, #booking-details-modal.fp-booked-details.fp-sample-details .fd-rail-meta, #booking-flight-panel.fp-booked-details.fp-sample-details .fd-rail-meta { display: block !important; } #flight-details-popup.fp-booked-details .fd-rail-meta, #booking-details-modal.fp-booked-details .fd-rail-meta, #booking-flight-panel.fp-booked-details .fd-rail-meta { margin-top: 0; padding-top: 0 !important; border-top: none; } #flight-details-popup.fp-booked-details .fd-rail-meta .popup-section-title, #booking-details-modal.fp-booked-details .fd-rail-meta .popup-section-title, #booking-flight-panel.fp-booked-details .fd-rail-meta .popup-section-title { display: none !important; } #flight-details-popup.fp-booked-details .fd-fp-booking-fact .detail-value, #booking-details-modal.fp-booked-details .fd-fp-booking-fact .detail-value, #booking-flight-panel.fp-booked-details .fd-fp-booking-fact .detail-value { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } #flight-details-popup.fp-booked-details .fd-fp-booking-fact .fd-booking-status-text, #booking-details-modal.fp-booked-details .fd-fp-booking-fact .fd-booking-status-text, #booking-flight-panel.fp-booked-details .fd-fp-booking-fact .fd-booking-status-text { font-size: inherit; font-weight: 600; line-height: inherit; } #flight-details-popup.fp-booked-details .fd-fp-booking-fact .fd-booking-panel__ref, #booking-details-modal.fp-booked-details .fd-fp-booking-fact .fd-booking-panel__ref, #booking-flight-panel.fp-booked-details .fd-fp-booking-fact .fd-booking-panel__ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } #flight-details-popup.fp-booked-details.fp-sample-details .fd-rail-actions, #flight-details-popup.fp-booked-details.fp-sample-details .fd-rail-actions.popup-footer, #flight-details-popup.fp-booked-details.fp-sample-details .popup-footer, #booking-details-modal.fp-booked-details.fp-sample-details .fd-rail-actions, #booking-details-modal.fp-booked-details.fp-sample-details .popup-footer, #booking-flight-panel.fp-booked-details.fp-sample-details .fd-rail-actions, #booking-flight-panel.fp-booked-details.fp-sample-details .popup-footer { display: flex !important; visibility: visible !important; pointer-events: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } @media (min-width: 901px) { #flight-details-popup.fp-booked-details .fd-main, #booking-details-modal.fp-booked-details .fd-main, #booking-flight-panel.fp-booked-details .fd-main { height: 100%; } #flight-details-popup.fp-booked-details .fd-head, #booking-details-modal.fp-booked-details .fd-head, #booking-flight-panel.fp-booked-details .fd-head { flex: 1 1 auto; min-height: 220px; } #flight-details-popup.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), #booking-details-modal.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), #booking-flight-panel.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]) { flex: 0 0 auto; padding: 20px 22px; } #flight-details-popup.fp-booked-details .fd-fp-booked-class__value, #booking-details-modal.fp-booked-details .fd-fp-booked-class__value, #booking-flight-panel.fp-booked-details .fd-fp-booked-class__value { font-size: 28px; } } @media (max-width: 900px) { #flight-details-popup.fp-booked-details .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #booking-details-modal.fp-booked-details .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]), #booking-flight-panel.fp-booked-details .fd-layout--mobile-flat > .fd-rail-booking:not([hidden]) { order: 3; margin-top: 0; padding: 16px 14px 18px; border-radius: 14px; } #flight-details-popup.fp-booked-details .fd-fp-booked-class__value, #booking-details-modal.fp-booked-details .fd-fp-booked-class__value, #booking-flight-panel.fp-booked-details .fd-fp-booked-class__value { font-size: 24px; } } :root[data-theme="dark"] #flight-details-popup.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), :root[data-theme="dark"] #booking-details-modal.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]), :root[data-theme="dark"] #booking-flight-panel.fp-booked-details .fd-main > .fd-rail-booking:not([hidden]) { background: var(--fd-card, var(--color-surface-raised, #1a1c22)); border-color: var(--fd-card-rim, var(--color-border-subtle, rgba(255, 255, 255, 0.1))); } :root[data-theme="dark"] #flight-details-popup.fp-booked-details .fd-fp-booked-class__value, :root[data-theme="dark"] #booking-details-modal.fp-booked-details .fd-fp-booked-class__value, :root[data-theme="dark"] #booking-flight-panel.fp-booked-details .fd-fp-booked-class__value { color: var(--fd-text, var(--color-text, #e8e9eb)); }