.flight-card { background: var(--white); border-radius: var(--radius-lg); margin-bottom: var(--space-md); overflow: hidden; transition: all var(--transition-base) ease; } .flight-card-compact { background: #ffffff; border: 0.5px solid rgba(60, 60, 67, 0.14); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 0; transition: all var(--transition-base) ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); position: relative; } .flight-card-compact:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.35); border-color: rgba(68, 93, 239, 0.65); background: #ffffff; cursor: pointer; } :root[data-theme="dark"] .flight-card { background: rgba(28, 30, 36, 0.52); } :root[data-theme="dark"] .flight-card-compact { background: rgba(28, 30, 36, 0.52); 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 { 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-id-badge { position: absolute; top: -1px; left: -1px; background: #e0fdf9; color: #064e3b; padding: 4px 10px; border-radius: var(--radius-lg) 0 12px 0; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; z-index: 10; border: 1px solid #a7f3ea; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .flight-id-badge:hover { background: #a7f3ea; transform: scale(1.05); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .flight-id-badge:active { transform: scale(0.98); } .flight-id-badge i { font-size: 10px; opacity: 0.8; } .flight-id-text { font-family: "Roboto Mono", monospace; letter-spacing: 0.5px; } .flight-id-badge.copied { background: #86efac; color: #14532d; animation: copy-success 0.3s ease; } @keyframes copy-success { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1.05); } } .flight-id-badge-xl { position: absolute; top: 0; left: 0; background: #e0fdf9; color: #064e3b; padding: 4px 10px; border-radius: var(--radius-lg) 0 12px 0; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; z-index: 100; border: 1px solid #a7f3ea; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .flight-id-badge-xl:hover { background: #a7f3ea; transform: scale(1.05); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .flight-id-badge-xl:active { transform: scale(0.98); } .flight-id-badge-xl i { font-size: 10px; opacity: 0.8; } .flight-id-badge-xl .flight-id-text { font-family: "Roboto Mono", monospace; letter-spacing: 0.5px; } .flight-id-badge-xl.copied { background: #86efac; color: #14532d; animation: copy-success 0.3s ease; } .flight-card-content { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; } .flight-table-container { background: transparent; margin-bottom: var(--space-lg); } .flight-table-headers { display: flex; align-items: center; padding: 12px 20px; background: var(--gray-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 2px solid var(--gray-200); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--gray-600); margin-bottom: 0; } .flight-table-row { display: flex; align-items: center; padding: 0; background: transparent; margin-bottom: 12px; } .table-header, .table-cell { display: flex; align-items: center; padding: 0 var(--space-sm); } .table-header { font-weight: var(--font-semibold); color: var(--gray-700); user-select: none; } .cell-departure, .cell-arrival { flex: 1.5; min-width: 0; } .cell-datetime { flex: 1.2; min-width: 0; } .cell-duration { flex: 0.8; min-width: 0; } .cell-aircraft { flex: 1.5; min-width: 0; } .cell-seats { flex: 0.8; min-width: 0; text-align: center; } .cell-actions { width: 120px; flex-shrink: 0; display: flex; justify-content: flex-end; } .airport-info { display: flex; align-items: center; gap: var(--space-sm); } .airport-location { display: flex; flex-direction: column; gap: 2px; } .city-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .airport-code { font-size: var(--text-xs); color: var(--gray-500); font-family: var(--font-mono); } .airport-district { font-size: var(--text-xs); color: var(--gray-500); font-weight: normal; margin-top: 2px; } .country-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; } .datetime-info { display: flex; flex-direction: column; gap: 2px; } .date { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .time { font-size: var(--text-xs); color: var(--gray-500); } .duration-info { display: flex; flex-direction: column; gap: 2px; text-align: center; } .flight-time { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .distance { font-size: var(--text-xs); color: var(--gray-500); } .aircraft-info { display: flex; align-items: center; gap: var(--space-sm); } .aircraft-image-container, .flight-list-aircraft-image { width: 136px !important; height: 102px !important; min-width: 136px; min-height: 102px; max-width: 136px; max-height: 102px; object-fit: cover; object-position: center; border-radius: 4px; background: var(--gray-50); display: block; flex-shrink: 0; transform: scale(1); transform-origin: center; } @supports (object-fit: cover) { .flight-list-aircraft-image { object-fit: cover !important; } } .aircraft-placeholder { width: 120px; height: 90px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); border-radius: var(--radius-sm); color: var(--gray-400); font-size: 1.5rem; } .aircraft-details { display: flex; flex-direction: column; gap: 2px; } .model { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-800); } .registration { font-size: var(--text-xs); color: var(--gray-500); font-family: var(--font-mono); } .seats-count { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--gray-700); } .action-buttons { display: flex; gap: var(--space-xs); align-items: center; } .action-btn { padding: 6px 10px; border: none; background: transparent; color: var(--gray-600); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast) ease; font-size: var(--text-sm); } .action-btn:hover { background: var(--gray-100); color: var(--gray-800); } .favorite-btn { color: var(--gray-400); } .favorite-btn:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); } .favorite-btn.active { color: var(--danger); } .view-btn:hover { color: var(--info); background: rgba(59, 130, 246, 0.1); } .book-btn { background: var(--primary); color: var(--white); border: 0.5px solid var(--primary-dark); padding: 8px 16px; font-weight: var(--font-medium); border-radius: var(--radius-full); } .book-btn:hover { background: var(--primary-hover); border-color: var(--primary); transform: translateY(-1px); } .book-btn.booked { cursor: default; opacity: 1; } .book-btn:disabled:not(.booked) { opacity: 0.5; cursor: not-allowed; } .price { font-weight: var(--font-semibold); } @media (max-width: 768px) { .flight-card-content { gap: 0.75rem; flex-wrap: wrap; } .flight-table-headers { display: none; } .flight-table-row { flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); } .table-cell { width: 100%; padding: var(--space-xs) 0; } .cell-actions { width: 100%; justify-content: center; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--gray-200); } .aircraft-image-container, .flight-list-aircraft-image { width: 96px !important; height: 75px !important; min-width: 96px; min-height: 75px; max-width: 96px; max-height: 75px; object-fit: cover; } .action-buttons { width: 100%; justify-content: space-between; } .book-btn { flex: 1; } } @media (max-width: 480px) { .flight-card-compact { padding: 8px; margin-bottom: 8px; } .flight-card-content { padding: 0 var(--space-xs); } .airport-info { flex-direction: column; align-items: flex-start; gap: 2px; } .country-flag { display: none; } } .fp-multi-leg-card { border-color: #a5b4fc; display: flex; flex-direction: column; touch-action: manipulation; } .fp-multi-leg-card:hover { border-color: var(--primary); } .fp-multi-leg-card .flight-card-content { padding-bottom: 14px; margin-bottom: 2px; } .fp-multi-leg-badge { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); max-width: calc(100% - 24px); } .fp-multi-leg-badge .flight-id-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; color: inherit; } .fp-multi-leg-badge i { color: inherit; opacity: 1; } .fp-multi-leg-legs-panel { border-top: 1px solid var(--color-border); margin-top: 10px; padding: 18px 14px 14px; background: var(--color-surface-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .fp-leg-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 0 14px; padding: 10px 0; border-bottom: 0.5px dashed var(--color-border); } .fp-leg-row:last-child { border-bottom: none; padding-bottom: 2px; } .fp-leg-row + .fp-leg-row { margin-top: 0; padding-top: 10px; } .fp-leg-index { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-control); font-size: 11px; font-weight: 700; color: var(--color-text-secondary); flex-shrink: 0; } .fp-leg-route { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; } .fp-leg-point { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 5px; min-width: 0; } .fp-leg-code { flex-shrink: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); line-height: 1.2; } .fp-leg-city { min-width: 0; font-size: 13px; font-weight: 400; color: var(--color-text-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-leg-arrow { position: relative; display: inline-block; width: 14px; height: 1px; margin: 0; background: var(--color-border); align-self: center; flex-shrink: 0; } .fp-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(--color-text-faint); } .fp-leg-meta { font-size: 12px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .fp-leg-metrics, .fp-leg-aircraft { display: none; } .fp-leg-price { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 76px; } @media (min-width: 1025px) { .fp-leg-row { align-items: baseline; } } @media (max-width: 1024px) { .fp-leg-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "index route route" "index metrics metrics" "index aircraft price"; gap: 4px 10px; align-items: baseline; } .fp-leg-index { grid-area: index; align-self: start; margin-top: 1px; } .fp-leg-route { grid-area: route; grid-column: 2 / -1; } .fp-leg-meta { display: none; } .fp-leg-metrics { display: block; grid-area: metrics; grid-column: 2 / -1; font-size: 13px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: left; white-space: normal; } .fp-leg-aircraft { display: block; grid-area: aircraft; min-width: 0; font-size: 14px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-leg-price { grid-area: price; min-width: 0; align-self: baseline; } .fp-multi-leg-card.flight-card-compact .flight-id-badge.fp-multi-leg-badge, .fp-multi-leg-card .fp-multi-leg-badge { color: var(--color-text); background: var(--color-control); border-color: transparent; } } .fp-multi-leg-card .fp-multi-leg-date { display: flex; flex-direction: row; align-items: center; } .fp-multi-leg-card.booking-card .flight-card-content { padding-bottom: 10px; } @media (min-width: 1025px) { .fp-multi-leg-card.booking-card .booking-info-section, .fp-multi-leg-card.booking-card .price-info-section { flex-wrap: wrap; } } .fp-multi-leg-card .fp-multi-leg-date-line { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.3; white-space: nowrap; } @media (max-width: 768px) { .fp-multi-leg-badge .flight-id-text { max-width: min(160px, 52vw); } .fp-multi-leg-card .flight-card-content { overflow-x: visible; } .fp-multi-leg-card .flight-datetime.fp-multi-leg-datetime { grid-row: 1; grid-column: 1; place-self: start start; padding-top: 26px; margin-top: 0; } .fp-multi-leg-card .fp-multi-leg-date-line { font-size: 13px; } } .popup-multi-leg-via { grid-column: 1 / -1; margin-bottom: 12px; } .popup-multi-leg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(68, 93, 239, 0.12); color: #1e2a6e; font-size: 13px; font-weight: 600; border: 1px solid #8b9cff; } .popup-multi-leg-section { grid-column: 1 / -1; padding-bottom: 4px; } .popup-multi-leg-legs-grid { display: grid; gap: 12px; } .popup-multi-leg-leg-card { padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); } .popup-multi-leg-leg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .popup-multi-leg-leg-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #2f40c2; } .popup-multi-leg-leg-price { font-size: 15px; font-weight: 700; color: var(--gray-900); } .popup-multi-leg-leg-route { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .popup-multi-leg-leg-endpoint { flex: 1; min-width: 0; } .popup-multi-leg-leg-code { display: block; font-size: 20px; font-weight: 700; color: var(--gray-900); letter-spacing: 0.04em; } .popup-multi-leg-leg-city { display: block; font-size: 13px; color: var(--gray-600); } .popup-multi-leg-leg-arrow { color: var(--primary); flex-shrink: 0; } .popup-multi-leg-leg-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 13px; color: var(--gray-600); } .popup-multi-leg-leg-meta i { margin-right: 5px; color: var(--gray-400); } @media (min-width: 768px) { .popup-multi-leg-legs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .prebook-modal { --pb-bg: var(--color-surface-muted); --pb-surface: var(--color-surface); --pb-text: var(--color-text); --pb-secondary: var(--color-text-secondary); --pb-label: var(--color-text-muted); --pb-separator: var(--color-border-subtle); --pb-accent: #445def; --pb-footer-bg: var(--color-surface-glass-strong); --pb-menu-bg: var(--color-surface-glass-strong); --pb-preview-bg: var(--color-surface-muted); --pb-disclaimer-bg: var(--color-control); --pb-disclaimer-bg-end: var(--color-control-hover); --pb-disclaimer-highlight: var(--color-highlight); --pb-disclaimer-item: var(--color-text-secondary); --pb-search-focus-bg: var(--color-surface); --pb-placeholder-flag-start: var(--color-surface-strong); --pb-placeholder-flag-end: var(--color-control); --pb-remove-bg: rgb(120 120 128 / 16%); --pb-remove-color: rgb(60 60 67 / 60%); --pb-remove-hover-bg: rgb(120 120 128 / 24%); --pb-link: #007aff; --pb-route-via-bg: var(--primary-light); --pb-route-via-color: var(--primary-hover); --pb-radius: 20px; --pb-radius-inner: 14px; --pb-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; } :root[data-theme="dark"] .prebook-modal { --pb-remove-bg: var(--color-control); --pb-remove-color: var(--color-text-muted); --pb-remove-hover-bg: var(--color-control-hover); --pb-link: #409cff; } .prebook-modal { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--color-overlay); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); font-family: var(--pb-font); } .prebook-modal.active { display: flex; } .prebook-modal--viewport-framed { transform: none; transition: none; } .prebook-modal__panel { display: flex; flex-direction: column; width: min(100%, 420px); max-height: min(90dvh, 680px); overflow: hidden; overscroll-behavior: contain; border-radius: var(--pb-radius); background: var(--pb-bg); box-shadow: var(--shadow-surface-lg); } .prebook-modal__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 18px 16px; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .prebook-modal__body::-webkit-scrollbar { width: 4px; } .prebook-modal__body::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 999px; } .prebook-modal__toolbar { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; background: var(--color-surface-glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--pb-separator); } .prebook-modal__title { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__close { width: 30px; height: 30px; border: 0.5px solid var(--pb-separator); border-radius: 999px; background: var(--color-surface-glass-strong); color: var(--pb-secondary); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-surface-sm); } .prebook-modal__close:hover { color: var(--pb-text); background: var(--pb-surface); } .prebook-modal__trip { padding: 16px; border-radius: var(--pb-radius-inner); background: var(--pb-surface); box-shadow: var(--shadow-surface-sm); } .prebook-modal__route { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 650; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__route-endpoints { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; } .prebook-modal__route-arrow { color: var(--pb-label); font-weight: 500; } .prebook-modal__route-via { display: inline-flex; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--pb-route-via-bg); color: var(--pb-route-via-color); font-size: 12px; font-weight: 600; } .prebook-modal__trip-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--pb-secondary); } .prebook-modal__trip-meta-dot { color: var(--pb-label); } .prebook-modal__price { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--pb-separator); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--pb-text); font-variant-numeric: tabular-nums; } .prebook-modal__price--empty { font-size: 15px; font-weight: 500; color: var(--pb-label); } .prebook-modal__group { margin-top: 14px; border-radius: var(--pb-radius-inner); background: var(--pb-surface); overflow: visible; box-shadow: var(--shadow-surface-sm); } .prebook-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; } .prebook-modal__row--passengers { align-items: center; min-height: 72px; padding: 14px 16px; } .prebook-modal__row-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } .prebook-modal__row--passengers .prebook-modal__row-label { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; } .prebook-modal__row--passengers .prebook-modal__row-hint { margin: 0; font-size: 13px; line-height: 1.35; } .prebook-modal__row + .prebook-modal__row, .prebook-modal__row + .prebook-modal__row-block { border-top: 0.5px solid var(--pb-separator); } .prebook-modal__row-label { font-size: 15px; font-weight: 500; color: var(--pb-text); } .prebook-modal__row-hint { margin: -6px 16px 12px; font-size: 12px; line-height: 1.4; color: var(--pb-secondary); } .prebook-modal__stepper { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 4px; border-radius: 12px; background: var(--pb-bg); } .prebook-modal__stepper-btn { width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--pb-surface); color: var(--pb-text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / 6%); } .prebook-modal__stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .prebook-modal__stepper-value { min-width: 28px; text-align: center; font-size: 17px; font-weight: 650; color: var(--pb-text); font-variant-numeric: tabular-nums; } .prebook-modal__row-block { padding: 12px 16px 14px; } .prebook-modal__row-block .prebook-modal__row-label { display: block; margin-bottom: 10px; } .prebook-country-picker { position: relative; } .prebook-country-picker--headless { position: absolute; width: 0; height: 0; overflow: visible; pointer-events: none; } .prebook-country-picker--headless .prebook-country-picker__trigger { display: none; } .prebook-country-picker--headless .prebook-country-picker__menu, .prebook-country-picker--headless .prebook-country-sheet { pointer-events: auto; } .prebook-country-picker__trigger { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0.5px solid var(--pb-separator); border-radius: 12px; background: var(--pb-bg); color: var(--pb-text); font-size: 15px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .prebook-country-picker__trigger:hover { border-color: var(--color-border-strong); } .prebook-country-picker.is-open .prebook-country-picker__trigger, .prebook-country-picker__trigger:focus-visible { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 3px rgb(13 174 156 / 14%); } .prebook-country-picker__trigger-flag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .prebook-country-picker__placeholder-flag { display: inline-block; width: 1.2rem; height: 0.82rem; border-radius: 3px; background: linear-gradient( 180deg, var(--pb-placeholder-flag-start) 0%, var(--pb-placeholder-flag-end) 100% ); } .prebook-country-picker__trigger-label { flex: 1; text-align: left; color: var(--pb-secondary); } .prebook-country-picker__chevron { color: var(--pb-label); font-size: 13px; } .prebook-country-picker__menu { position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; right: 0; z-index: 5; border-radius: 14px; border: 0.5px solid var(--pb-separator, var(--color-border-subtle)); background: var(--pb-menu-bg, var(--color-surface-raised)); box-shadow: var(--shadow-surface-lg); overflow: hidden; } .prebook-country-picker.is-open-up .prebook-country-picker__menu { top: auto; bottom: calc(100% + 6px); } .prebook-country-picker__menu[style*='position: fixed'] { right: auto; } .prebook-country-picker__search-wrap { padding: 10px 10px 0; } .prebook-country-picker__search { width: 100%; height: 38px; padding: 0 12px; border: 0.5px solid var(--pb-separator, var(--color-border-subtle)); border-radius: 10px; background: var(--pb-bg, var(--color-control)); font-size: 14px; color: var(--pb-text, var(--color-text)); } .prebook-country-picker__search:focus { outline: none; border-color: var(--pb-accent, #445def); background: var(--pb-search-focus-bg, var(--color-surface)); } .prebook-country-picker__options { max-height: 200px; overflow: auto; padding: 8px; overscroll-behavior: contain; background: var(--pb-menu-bg, var(--color-surface-raised)); } .prebook-country-picker__option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: var(--pb-text, var(--color-text)); font-size: 14px; text-align: left; cursor: pointer; } .prebook-country-picker__option:hover, .prebook-country-picker__option:focus-visible { outline: none; background: rgb(13 174 156 / 8%); } .prebook-country-picker__option-flag { width: 1.28rem; height: 0.86rem; } .prebook-country-picker__empty { padding: 14px 10px; color: var(--pb-secondary, var(--color-text-secondary)); font-size: 13px; text-align: center; } .prebook-modal__citizenship-section { margin-top: 18px; } .prebook-modal__citizenship-header { margin-bottom: 10px; } .prebook-modal__citizenship-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-modal__citizenship-subtitle { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--pb-secondary); } .prebook-modal__citizenship-card { border-radius: var(--pb-radius-inner); background: var(--pb-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 0 0 0.5px rgb(0 0 0 / 4%); overflow: hidden; } .prebook-modal__citizenship-empty { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; } .prebook-modal__citizenship-empty-icon { flex: 0 0 auto; margin-top: 1px; color: var(--pb-label); } .prebook-modal__citizenship-empty-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--pb-secondary); } .prebook-modal__citizenship-list { display: flex; flex-direction: column; } .prebook-modal__citizenship-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--pb-separator); } .prebook-modal__citizenship-item:last-of-type { border-bottom: none; } .prebook-modal__citizenship-item-flag { flex: 0 0 auto; display: inline-flex; align-items: center; } .prebook-modal__citizenship-item-flag img, .prebook-modal__citizenship-item-flag .booking-country-flag { width: 1.5rem; height: 1rem; border-radius: 2px; object-fit: cover; } .prebook-modal__citizenship-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .prebook-modal__citizenship-item-label { font-size: 12px; line-height: 1.2; color: var(--pb-label); } .prebook-modal__citizenship-item-value { font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-modal__citizenship-item-remove { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--pb-remove-bg); color: var(--pb-remove-color); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .prebook-modal__citizenship-item-remove:hover, .prebook-modal__citizenship-item-remove:focus-visible { outline: none; background: var(--pb-remove-hover-bg); } .prebook-modal__citizenship-add { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border: none; border-top: none; background: transparent; color: var(--pb-link); font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; } .prebook-modal__citizenship-card--has-entries .prebook-modal__citizenship-add { border-top: 0.5px solid var(--pb-separator); } .prebook-modal__citizenship-add:disabled { opacity: 0.45; cursor: not-allowed; } .prebook-modal__citizenship-add-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--pb-link); color: #fff; font-size: 18px; line-height: 1; font-weight: 500; } .prebook-modal__citizenship-add-label { line-height: 1.2; } .prebook-modal__citizenship-footnote { margin: 10px 4px 0; font-size: 13px; line-height: 1.45; color: var(--pb-secondary); } .prebook-modal__error { margin-top: 12px; margin-bottom: 14px; padding: 11px 14px; border-radius: 12px; background: rgb(255 59 48 / 10%); color: #c41e12; font-size: 13px; line-height: 1.4; } .prebook-modal__footer { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--pb-separator); background: var(--pb-footer-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .prebook-modal__footer--single { grid-template-columns: 1fr; } .prebook-modal__footer--single .prebook-modal__btn { width: 100%; height: 50px; border-radius: 14px; font-size: 17px; font-weight: 650; } .prebook-modal__btn { height: 46px; border-radius: 13px; font-size: 15px; font-weight: 650; cursor: pointer; letter-spacing: -0.01em; } .prebook-modal__btn--ghost { border: 0.5px solid var(--pb-separator); background: var(--pb-surface); color: var(--pb-text); } .prebook-modal__btn--primary { border: none; background: linear-gradient(180deg, #5e7eff 0%, var(--pb-accent) 48%, #009a88 100%); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset, 0 4px 14px rgb(13 174 156 / 28%); } .prebook-modal__btn--primary:disabled { opacity: 0.55; cursor: not-allowed; } .prebook-modal--success { align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px)); } .prebook-modal__panel--success { display: flex; flex-direction: column; width: min(100%, 560px); height: fit-content; max-height: min(90dvh, 760px); overflow: hidden; padding: 0; background: var(--pb-surface); border-radius: calc(var(--pb-radius) + 2px); box-shadow: 0 32px 96px rgb(0 0 0 / 18%), 0 0 0 0.5px rgb(0 0 0 / 6%); } .prebook-success__scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .prebook-success__scroll::-webkit-scrollbar { width: 4px; } .prebook-success__scroll::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 999px; } .prebook-success__content { padding: 32px 32px 24px; } .prebook-success__hero { display: flex; flex-direction: column; align-items: center; text-align: center; } .prebook-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 18px; border-radius: 999px; background: linear-gradient(180deg, rgb(13 174 156 / 16%) 0%, rgb(13 174 156 / 5%) 100%); color: #0a8f7f; box-shadow: 0 0 0 0.5px rgb(13 174 156 / 22%), 0 10px 28px rgb(13 174 156 / 12%); } .prebook-success__title { margin: 0; font-size: 26px; line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; color: var(--pb-text); } .prebook-success__lead { margin: 12px 0 0; align-self: stretch; width: 100%; max-width: none; font-size: 15px; line-height: 1.55; font-weight: 400; text-align: left; text-wrap: pretty; white-space: pre-line; color: var(--pb-secondary); } .prebook-success__note-text { margin: 16px 0 0; font-size: 14px; line-height: 1.5; font-weight: 400; text-wrap: pretty; color: var(--pb-secondary); } .prebook-success__footer--charter { padding-top: 12px; border-top: none; } .prebook-success__footer--charter .prebook-success__cta { margin-top: 0; padding-top: 0; border-top: none; } .prebook-success__disclaimer { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: linear-gradient( 180deg, var(--pb-disclaimer-bg) 0%, var(--pb-disclaimer-bg-end) 100% ); box-shadow: 0 0 0 0.5px var(--pb-separator), inset 0 1px 0 var(--pb-disclaimer-highlight); } .prebook-success__disclaimer-lead { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; letter-spacing: -0.015em; color: var(--pb-text); } .prebook-success__disclaimer-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .prebook-success__disclaimer-item { position: relative; margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--pb-disclaimer-item); } .prebook-success__disclaimer-item::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 999px; background: var(--pb-accent); box-shadow: 0 0 0 3px rgb(13 174 156 / 12%); transform: translateY(-50%); } .prebook-success__disclaimer-foot { margin: 16px 0 0; padding-top: 16px; border-top: 0.5px solid var(--pb-separator); font-size: 14px; line-height: 1.55; color: var(--pb-secondary); } .prebook-success__footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 28px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--pb-separator); background: var(--pb-footer-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .prebook-success__option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--pb-route-via-bg); box-shadow: 0 0 0 0.5px var(--primary-light); cursor: pointer; user-select: none; } .prebook-success__option-input { position: relative; flex: 0 0 auto; display: block; width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin: 1px 0 0; padding: 0; border: none; border-radius: 7px; background: var(--pb-search-focus-bg); box-shadow: inset 0 0 0 1.5px var(--pb-separator); box-sizing: border-box; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 0.15s ease, box-shadow 0.15s ease; } .prebook-success__option-input:checked { background: var(--pb-accent); box-shadow: inset 0 0 0 1.5px var(--pb-accent); } .prebook-success__option-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -58%) rotate(45deg); } .prebook-success__option-input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--pb-accent), 0 0 0 3px rgb(13 174 156 / 20%); } .prebook-success__option-input:checked:focus-visible { box-shadow: inset 0 0 0 1.5px var(--pb-accent), 0 0 0 3px rgb(13 174 156 / 20%); } .prebook-success__option-copy { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; min-width: 0; } .prebook-success__option-label { font-size: 14px; line-height: 1.45; font-weight: 550; color: var(--pb-text); } .prebook-success__option-hint { font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; text-transform: lowercase; color: var(--pb-route-via-color); } .prebook-success__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 14px; border-top: 0.5px solid var(--pb-separator); } .prebook-success__cta-notice { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; text-align: center; color: var(--pb-text); } .prebook-success__error { margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 59 48 / 10%); color: #c41e12; font-size: 13px; line-height: 1.4; text-align: center; } .prebook-success__btn { width: 100%; height: 52px; border: none; border-radius: 14px; background: linear-gradient(180deg, #5e7eff 0%, var(--pb-accent) 48%, #009a88 100%); color: #fff; font-family: var(--pb-font); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset, 0 4px 14px rgb(13 174 156 / 24%); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .prebook-success__btn:hover:not(:disabled) { box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset, 0 6px 18px rgb(13 174 156 / 30%); } .prebook-success__btn:active:not(:disabled) { transform: scale(0.985); } .prebook-success__btn:disabled { opacity: 0.72; cursor: wait; } .prebook-modal--country-open .prebook-modal__body { overflow: hidden; } .prebook-country-sheet__panel { will-change: transform; } .prebook-country-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; } .prebook-country-sheet[hidden] { display: none !important; } .prebook-country-sheet__backdrop { position: absolute; inset: 0; border: none; background: rgb(0 0 0 / 18%); cursor: pointer; } .prebook-country-sheet__panel { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 260px; max-height: calc(100dvh - 10px); overflow: hidden; border-radius: 16px 16px 0 0; background: var(--pb-surface); box-shadow: 0 -8px 32px rgb(0 0 0 / 12%); } .prebook-country-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 0.5px solid var(--pb-separator); } .prebook-country-sheet__title { font-size: 15px; font-weight: 650; color: var(--pb-text); } .prebook-country-sheet__done { border: none; background: transparent; color: var(--pb-accent); font-size: 15px; font-weight: 650; cursor: pointer; padding: 4px 0; } .prebook-country-sheet .prebook-country-picker__search-wrap { padding: 10px 12px 0; } .prebook-country-sheet .prebook-country-picker__options { flex: 1 1 auto; min-height: 0; max-height: none; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 767px) { .prebook-modal--profile-mobile { align-items: flex-end; padding: 0; } .prebook-modal--profile-mobile.prebook-modal--viewport-framed { align-items: stretch; justify-content: flex-end; padding: 0; } .prebook-modal--profile-mobile.prebook-modal--viewport-framed .prebook-modal__panel:not( .prebook-modal__panel--success ) { width: 100%; max-height: 100%; height: 100%; border-radius: 20px 20px 0 0; } .prebook-modal--profile-mobile .prebook-modal__panel:not(.prebook-modal__panel--success) { width: 100%; height: 100%; max-height: 100%; border-radius: 20px 20px 0 0; } } @media (max-width: 520px) { .prebook-modal { align-items: flex-end; padding: 0; } .prebook-modal--viewport-framed { align-items: stretch; justify-content: flex-end; padding: 0; } .prebook-modal--viewport-framed .prebook-modal__panel:not(.prebook-modal__panel--success) { width: 100%; max-height: 100%; height: 100%; border-radius: 20px 20px 0 0; } .prebook-modal--viewport-framed.prebook-modal--profile .prebook-modal__panel:not( .prebook-modal__panel--success ) { width: 100%; max-height: 100%; height: 100%; border-radius: 20px 20px 0 0; } .prebook-modal--profile-mobile .prebook-modal__panel:not(.prebook-modal__panel--success) { width: 100%; height: 100%; max-height: 100%; border-radius: 20px 20px 0 0; } .prebook-modal--success { align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); } .prebook-modal__panel--success { width: min(100%, 560px); max-height: min(92dvh, 760px); border-radius: calc(var(--pb-radius) + 2px); overflow: hidden; box-shadow: 0 28px 88px rgb(0 0 0 / 16%), 0 0 0 0.5px rgb(0 0 0 / 6%); } .prebook-success__content { padding: 24px 18px 18px; } .prebook-success__icon { width: 60px; height: 60px; margin-bottom: 14px; } .prebook-success__title { font-size: 22px; } .prebook-success__lead { font-size: 14px; } .prebook-success__note-text { font-size: 13px; } .prebook-success__disclaimer { margin-top: 18px; padding: 16px; border-radius: 14px; } .prebook-success__disclaimer-lead { font-size: 14px; } .prebook-success__disclaimer-item { font-size: 13px; } .prebook-success__disclaimer-foot { font-size: 13px; } .prebook-success__footer { gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .prebook-success__option { padding: 12px 14px; } .prebook-success__option-label { font-size: 13px; } .prebook-success__cta-notice { font-size: 12px; } .prebook-success__btn { height: 50px; } .prebook-modal__panel:not(.prebook-modal__panel--success) { position: relative; width: 100%; height: fit-content; max-height: 100dvh; border-radius: 20px 20px 0 0; overflow: hidden; } .prebook-modal--profile.prebook-modal--scrollable .prebook-modal__panel:not( .prebook-modal__panel--success ) { height: auto; } .prebook-modal--profile.prebook-modal--scrollable.prebook-modal--profile-mobile .prebook-modal__panel:not(.prebook-modal__panel--success) { height: 100%; max-height: 100%; } .prebook-modal__panel.prebook-modal__panel--success { border-radius: var(--pb-radius); overflow: hidden; } .prebook-modal__body { flex: 0 1 auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } .prebook-modal--scrollable .prebook-modal__body { flex: 1 1 auto; min-height: 0; } .prebook-modal__toolbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .prebook-modal__footer { grid-template-columns: 1fr 1fr; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .prebook-modal__footer--single { display: flex; flex-direction: column; grid-template-columns: none; } .prebook-modal__footer--single .prebook-modal__btn { width: 100%; } .prebook-country-sheet .prebook-country-picker__search { height: 40px; font-size: 16px; } } body.prebook-modal-open { overflow: hidden; } @media (max-width: 767px) { html.prebook-modal-open, body.prebook-modal-open { overscroll-behavior: none; touch-action: none; height: 100%; } body.prebook-modal-open { position: fixed; left: 0; right: 0; width: 100%; } } .prebook-modal--profile { --sf-bg: var(--color-surface); --sf-fill: var(--color-control); --sf-fill-elevated: var(--color-control-hover); --sf-separator: var(--color-border-subtle); --sf-label: var(--color-text-muted); --sf-text: var(--color-text); --sf-radius-field: 12px; --sf-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --prebook-profile-preview-width: 360px; } .prebook-modal--profile .prebook-modal__panel:not(.prebook-modal__panel--success) { width: min(100%, 100%); max-height: min(92dvh, 820px); } .prebook-modal--profile.prebook-modal--profile-desktop .prebook-modal__panel:not( .prebook-modal__panel--success ) { width: min(calc(100vw - 48px), 1040px); max-height: min(88dvh, 820px); } .prebook-modal__profile-shell { display: flex; flex-direction: column; gap: 0; min-height: 0; flex: 1 1 auto; } .prebook-modal__profile-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .prebook-modal__preview-column { min-width: 0; } .prebook-profile-pane { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; } .prebook-profile-pane__intro { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .prebook-profile-pane__lead { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; color: var(--pb-text); } .prebook-profile-pane__copy { margin: 0; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-profile-pane__form { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 20px; } .prebook-profile-pane__form.profile-container--embedded, .profile-container.profile-container--embedded { max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; } .prebook-profile-pane__form .profile-form-card { gap: 1rem; } .prebook-profile-pane__form .profile-form-group__title { font-family: var(--sf-font); font-size: 13px; } .prebook-profile-pane__form .profile-form-group__body { border-radius: var(--sf-radius-field); background: var(--sf-fill); } .prebook-profile-pane__form .profile-form-field label, .prebook-profile-pane__form .profile-form-toggle-row__label, .prebook-profile-pane__form .profile-form-field input[type="text"], .prebook-profile-pane__form .profile-form-field input[type="email"] { font-family: var(--sf-font); } .prebook-profile-pane__form .profile-country-field__trigger, .prebook-profile-pane__form .intl-phone-input { border: none; border-radius: 10px; background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--sf-separator); } .prebook-profile-pane__error { flex-shrink: 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 59 48 / 10%); color: #c41e12; font-size: 13px; line-height: 1.4; } .prebook-modal--profile .prebook-country-picker__menu { z-index: 10160; } .prebook-modal--profile .profile-country-sheet { z-index: 10170; } .prebook-modal--profile-desktop .prebook-modal__profile-shell { flex-direction: row; align-items: stretch; min-height: 0; } .prebook-modal--profile-desktop .prebook-modal__profile-column { flex: 1 1 auto; min-width: 0; padding: 4px 28px 10px; border-right: 0.5px solid var(--pb-separator); } .prebook-modal--profile-desktop .prebook-modal__preview-column { flex: 0 0 var(--prebook-profile-preview-width); width: var(--prebook-profile-preview-width); display: flex; align-items: stretch; padding: 20px 24px 24px; background: var(--pb-preview-bg); } .prebook-modal--profile-desktop .prebook-modal__preview-column .prebook-modal__trip { align-self: flex-start; width: 100%; margin: 0; padding: 20px; border-radius: 16px; background: var(--pb-surface); box-shadow: 0 1px 0 rgb(0 0 0 / 4%); } .prebook-modal--profile-desktop .prebook-profile-pane__footer { margin-top: auto; padding: 6px 0 4px; border-top: 0.5px solid var(--pb-separator); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .prebook-modal--profile-mobile .prebook-modal__panel:not(.prebook-modal__panel--success) { display: flex; flex-direction: column; width: 100%; min-height: 0; height: 100%; max-height: 100%; overflow: hidden; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgb(0 0 0 / 12%); } .prebook-modal--profile-mobile .prebook-modal__toolbar--profile { flex-shrink: 0; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 0.5px solid var(--pb-separator); background: var(--pb-bg); } .prebook-modal--profile-mobile .prebook-modal__toolbar--profile .prebook-modal__title { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.25; } .prebook-modal--profile-mobile .prebook-modal__profile-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 12px; scroll-padding-bottom: 24px; padding: 10px 16px 20px; } .prebook-profile-mobile__instruction { margin: 4px 0 18px; padding: 0; font-family: var(--sf-font); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-modal--profile-mobile .prebook-modal__trip--profile-inline { margin: 0 0 6px; padding: 14px 16px; } .prebook-modal--profile-mobile .prebook-modal__trip--profile-inline .prebook-modal__price { margin-top: 12px; padding-top: 12px; font-size: 24px; } .prebook-modal--profile-mobile .prebook-modal__profile-form-host { min-width: 0; } .prebook-modal--profile-mobile .prebook-profile-pane { gap: 0; min-height: auto; } .prebook-modal--profile-mobile .prebook-profile-pane--static-form .prebook-profile-pane__form { flex: none; min-height: auto; overflow: visible; } .prebook-modal--profile-mobile .prebook-modal__footer { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--pb-separator); background: var(--pb-footer-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .prebook-modal--profile-mobile .prebook-profile-pane__form .profile-form-field, .prebook-modal--profile-mobile .prebook-profile-pane__form .profile-form-toggle-row, .prebook-modal--profile-mobile .prebook-profile-pane__form .intl-phone-input, .prebook-modal--profile-mobile .prebook-profile-pane__form .profile-country-field { scroll-margin-top: 12px; scroll-margin-bottom: 16px; } .prebook-modal--profile-mobile .prebook-modal__footer--single .prebook-modal__btn { width: 100%; min-width: 0; height: 50px; border-radius: 14px; font-size: 17px; font-weight: 650; } @media (max-width: 767px) { .prebook-modal--profile-mobile .prebook-profile-pane__form input[type="text"], .prebook-modal--profile-mobile .prebook-profile-pane__form input[type="email"], .prebook-modal--profile-mobile .prebook-profile-pane__form .intl-phone-input__number, .prebook-modal--profile-mobile .profile-country-field__trigger .prebook-country-picker__trigger-label { font-size: 16px; } } .prebook-modal--profile-desktop .prebook-profile-pane { gap: 8px; } .prebook-modal--profile-desktop .prebook-profile-pane__intro { padding-top: 2px; } .prebook-modal--profile-desktop .prebook-modal__toolbar--profile { justify-content: space-between; padding-left: 28px; padding-right: 28px; } .prebook-modal--profile-desktop .prebook-modal__toolbar--profile .prebook-modal__title { font-size: 20px; } .prebook-modal--profile-desktop .prebook-profile-pane__copy { margin: 0 0 2px; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--pb-text); } .prebook-modal__footer.prebook-profile-pane__footer { display: flex; flex-direction: column; align-items: center; gap: 8px; } .prebook-modal__footer.prebook-profile-pane__footer .prebook-modal__btn { width: 100%; } .prebook-profile-legal { width: 100%; margin: 0; font-size: 12px; line-height: 1.45; color: var(--pb-secondary); text-align: center; letter-spacing: -0.005em; } .prebook-profile-legal a { color: var(--pb-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--pb-separator); transition: color 0.15s ease, text-decoration-color 0.15s ease; } .prebook-profile-legal a:hover { color: var(--pb-text); text-decoration-color: currentcolor; } .profile-container { --sf-bg: var(--color-surface); --sf-fill: var(--color-control); --sf-fill-elevated: var(--color-control-hover); --sf-separator: var(--color-border-subtle); --sf-label: var(--color-text-muted); --sf-text: var(--color-text); --sf-radius-shell: 16px; --sf-radius-field: 10px; --sf-radius-control: 10px; --pf-row-h: 44px; --pf-pad-x: 0.875rem; --pf-pad-y: 0.5rem; --sf-shadow: var(--shadow-surface); --sf-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; max-width: none; margin: 0 0 2rem; padding: 1.125rem; background: var(--sf-bg); border: none; border-radius: var(--sf-radius-shell); box-shadow: var(--sf-shadow); font-family: var(--sf-font); } .profile-page .profile-booking-banner-host { margin-bottom: 0.75rem; } .profile-segment .tab-check-icon, .profile-segment .tab-incomplete-icon { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; } .profile-segment .tab-check-icon { color: #34c759; } .profile-segment .tab-incomplete-icon { color: #ff9500; } .profile-segment .tab-check-icon[hidden], .profile-segment .tab-incomplete-icon[hidden] { display: none; } .profile-tab-content { display: none; } .profile-tab-content.active { display: block; } .form-section { margin-bottom: 0; } .profile-form-card { display: flex; flex-direction: column; gap: 1.125rem; } .profile-form-group__title { margin: 0 0 0.25rem; padding: 0 0.125rem; font-family: var(--sf-font); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--sf-label); } .profile-form-group__hint { margin: 0 0 0.375rem; padding: 0 0.125rem; font-family: var(--sf-font); font-size: 11px; line-height: 1.35; color: var(--sf-label); } .profile-form-group__footnote { margin: 0.5rem 0 0; padding: 0 0.125rem; font-family: var(--sf-font); font-size: 12px; line-height: 1.4; color: var(--sf-label); } .profile-form-group { margin: 0; } .profile-form-group__body { overflow: hidden; border-radius: var(--sf-radius-field); background: var(--sf-fill); } .profile-form-field { display: flex; flex-direction: column; align-items: stretch; gap: 0.3125rem; padding: 0.5625rem 0.75rem; } .profile-form-field label { display: block; margin: 0; font-family: var(--sf-font); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; color: var(--sf-label); } .profile-form-field input[type="text"], .profile-form-field input[type="email"] { width: 100%; margin: 0; padding: 0.5rem 0.625rem; border: none; border-radius: 8px; background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-font); font-size: 15px; font-weight: 400; letter-spacing: -0.018em; line-height: 1.3; text-align: left; box-shadow: inset 0 0 0 1px var(--sf-separator); transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-form-field input[type="text"]::placeholder, .profile-form-field input[type="email"]::placeholder { color: var(--color-text-faint); } .profile-form-field input[type="text"]:focus, .profile-form-field input[type="email"]:focus { outline: none; background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 3px var(--primary-light); } .profile-form-field input[type="text"].is-invalid, .profile-form-field input[type="email"].is-invalid { background: rgb(255 59 48 / 4%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 55%), 0 0 0 3px rgb(255 59 48 / 10%); } .profile-form-field input[type="text"].is-invalid:focus, .profile-form-field input[type="email"].is-invalid:focus { box-shadow: inset 0 0 0 1px rgb(255 59 48 / 65%), 0 0 0 3px rgb(255 59 48 / 14%); } .profile-form-field__error { margin: 0.125rem 0 0; font-size: 12px; line-height: 1.35; color: #b42318; } .profile-form-toggle-row.is-disabled { opacity: 0.45; cursor: default; } .profile-form-toggle-row.is-disabled .profile-form-toggle-row__input[type="checkbox"] { cursor: default; } .profile-country-field.is-disabled .profile-country-field__trigger { opacity: 0.55; cursor: not-allowed; } .profile-form-field + .profile-form-field, .profile-form-field + .profile-form-toggle-row, .profile-form-toggle-row + .profile-form-field { border-top: 1px solid var(--sf-separator); } .profile-form-field.is-collapsed { display: none; } .profile-form-field--phone .intl-phone-input-host, .profile-form-field--phone .intl-phone-input { width: min(100%, var(--pf-phone-width, 21rem)); max-width: var(--pf-phone-width, 21rem); } .profile-form-group--phones .profile-form-group__body { --pf-phone-width: 21rem; } .profile-form-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; min-height: 42px; padding: 0.5rem 0.75rem; border-top: 1px solid var(--sf-separator); cursor: pointer; user-select: none; } .profile-form-toggle-row__label { flex: 1; min-width: 0; font-family: var(--sf-font); font-size: 14px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; color: var(--sf-text); } .profile-form-toggle-row__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-right: -0.375rem; } .profile-container .profile-form-toggle-row__input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; display: block; flex: 0 0 auto; width: 51px; height: 31px; min-width: 51px; min-height: 31px; max-width: 51px; max-height: 31px; margin: 0; padding: 0; border: none; border-radius: 31px; background: rgba(120, 120, 128, 0.16); box-shadow: none; box-sizing: border-box; line-height: 0; font-size: 0; cursor: pointer; transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .profile-container .profile-form-toggle-row__input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.06); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .profile-container .profile-form-toggle-row__input[type="checkbox"]:checked { background: var(--primary); box-shadow: none; } .profile-container .profile-form-toggle-row__input[type="checkbox"]:checked::before { transform: translateX(20px); } .profile-container .profile-form-toggle-row__input[type="checkbox"]:checked::after { content: none; } .profile-form-group--consent .profile-form-group__body--consent { padding: 0.25rem; background: var(--sf-fill); } .profile-form-group--consent .consent-checkboxes { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; } .profile-form-group--consent .consent-checkbox-option { margin: 0; padding: 0.625rem 0.75rem; gap: 0.625rem; } .profile-form-group--consent .consent-checkbox-option label { font-size: 13px; line-height: 1.35; } .profile-form-group--consent .consent-disclaimer { margin-top: 0.5rem; padding: 0.625rem 0.75rem; font-size: 12px; } .profile-form-actions { display: flex; justify-content: flex-end; align-items: center; margin-top: 0.25rem; padding-top: 0.75rem; } .profile-form-actions .btn-primary { margin-top: 0; width: auto; min-height: 36px; padding: 0.4375rem 1.125rem; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .profile-form-card--page { display: flex; flex-direction: column; gap: 1rem; } .profile-form-card--page .profile-form-card--embedded { box-shadow: none; padding: 0; margin: 0; max-width: none; } .profile-form-error, .prebook-profile-pane__error { flex-shrink: 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 59 48 / 10%); color: #c41e12; font-size: 13px; line-height: 1.4; } .section-title { margin: 0 0 1.25rem; font-family: var(--sf-font); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--sf-text); gap: 0.5rem; } .section-title i { color: var(--sf-label); font-size: 14px; } .profile-container .form-group { margin-bottom: 1rem; } .profile-container .form-group label, .profile-container .consent-section .section-label { display: block; margin-bottom: 0.375rem; font-family: var(--sf-font); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--sf-label); } .profile-container #questionnaire-section .section-title { display: none; } .profile-container .questionnaire-form { display: flex; flex-direction: column; gap: 1.125rem; margin: 0; } .profile-container .questionnaire-form .questionnaire-block { margin: 0; display: flex; flex-direction: column; gap: 0.3125rem; } .profile-container .questionnaire-form .questionnaire-block > label { margin: 0; padding: 0 0.125rem; font-family: var(--sf-font); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; color: var(--sf-text); } .profile-container .questionnaire-form .radio-group, .profile-container .questionnaire-form .checkbox-group-vertical { display: flex; flex-direction: column; gap: 0; margin: 0; overflow: hidden; border-radius: var(--sf-radius-field); background: var(--sf-fill); } .profile-container .questionnaire-form .radio-option, .profile-container .questionnaire-form .checkbox-option { margin: 0; padding: 0.6875rem 0.875rem; border: none; border-radius: 0; background: transparent; box-shadow: none; } .profile-container .questionnaire-form .radio-option:not(:last-child), .profile-container .questionnaire-form .checkbox-option:not(:last-child) { border-bottom: 1px solid var(--sf-separator); } .profile-container .questionnaire-form .radio-option:hover, .profile-container .questionnaire-form .checkbox-option:hover { background: var(--color-highlight); } .profile-container .questionnaire-form .radio-option.selected, .profile-container .questionnaire-form .checkbox-option.selected, .profile-container .questionnaire-form .checkbox-option:has(input[type="checkbox"]:checked) { background: var(--sf-bg); box-shadow: none; } .profile-container .questionnaire-form .radio-option label, .profile-container .questionnaire-form .checkbox-option label { font-size: 14px; line-height: 1.35; } .profile-container .questionnaire-form > .btn-primary, .profile-container .questionnaire-form > button[type="submit"] { margin-top: 0.25rem; width: auto; min-height: 36px; padding: 0.4375rem 1.125rem; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .profile-container .section-completed .questionnaire-form .radio-option, .profile-container .section-completed .questionnaire-form .checkbox-option { background: transparent; box-shadow: none; } .profile-container .section-completed .questionnaire-form .radio-option.selected, .profile-container .section-completed .questionnaire-form .checkbox-option.selected, .profile-container .section-completed .questionnaire-form .checkbox-option:has(input[type="checkbox"]:checked) { background: var(--color-highlight); } .profile-container .form-group input, .profile-container .form-group select { width: 100%; padding: 0.75rem 0.875rem; border: none; border-radius: var(--sf-radius-field); background: var(--sf-fill); color: var(--sf-text); font-family: var(--sf-font); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; line-height: 1.235; transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .form-group input::placeholder { color: var(--color-text-faint); } .profile-container .form-group input:focus, .profile-container .form-group select:focus { outline: none; background: var(--sf-bg); box-shadow: 0 0 0 3px var(--primary-light), inset 0 0 0 1px rgba(68, 93, 239, 0.45); } .profile-container .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .profile-container .checkbox-group { margin-top: 0.625rem; gap: 0.5rem; } .profile-container .checkbox-group label { margin-bottom: 0; font-size: 13px; font-weight: 400; color: var(--sf-text); letter-spacing: -0.01em; } .profile-container .checkbox-group input[type="checkbox"], .profile-container .checkbox-option input[type="checkbox"], .profile-container .consent-checkbox-option input[type="checkbox"] { appearance: none; position: relative; width: 20px; height: 20px; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; margin: 0; padding: 0; cursor: pointer; border: none; border-radius: 6px; background: var(--sf-fill-elevated); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.18); transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .profile-form-group__body .consent-checkbox-option input[type="checkbox"]:checked, .profile-container .checkbox-group input[type="checkbox"]:checked, .profile-container .checkbox-option input[type="checkbox"]:checked, .profile-container .consent-checkbox-option input[type="checkbox"]:checked { background: var(--primary); box-shadow: none; } .profile-container .checkbox-group input[type="checkbox"]:checked::after, .profile-container .checkbox-option input[type="checkbox"]:checked::after, .profile-container .consent-checkbox-option input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); } .profile-container .radio-group { gap: 0.5rem; margin-top: 0.5rem; } .profile-container .radio-option, .profile-container .checkbox-option, .profile-container .consent-checkbox-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border: none; border-radius: var(--sf-radius-field); background: var(--sf-fill); cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .radio-option:hover, .profile-container .checkbox-option:hover, .profile-container .consent-checkbox-option:hover { background: var(--sf-fill-elevated); } .profile-container .radio-option.selected, .profile-container .checkbox-option.selected, .profile-container .consent-checkbox-option:has(input[type="checkbox"]:checked) { background: transparent; box-shadow: none; } .profile-container .radio-option input[type="radio"] { appearance: none; width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin: 0.125rem 0 0; padding: 0; cursor: pointer; border: none; border-radius: 50%; background: var(--sf-fill-elevated); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.18); transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .radio-option input[type="radio"]:checked { background: var(--primary); box-shadow: inset 0 0 0 4px var(--sf-bg); } .profile-container .radio-option label, .profile-container .checkbox-option label, .profile-container .consent-checkbox-option label { margin: 0; flex: 1; font-family: var(--sf-font); font-size: 15px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.4; color: var(--sf-text); cursor: pointer; } .profile-container .consent-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sf-separator); } .profile-container .profile-form-group--consent { margin-top: 0; padding-top: 0; border-top: none; } .profile-container .consent-checkboxes { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.875rem; } .profile-container .consent-disclaimer { padding: 0.875rem 1rem; border: none; border-radius: var(--sf-radius-field); background: rgba(255, 149, 0, 0.08); font-family: var(--sf-font); font-size: 13px; line-height: 1.5; color: rgba(60, 60, 67, 0.85); } .profile-container .consent-disclaimer a { color: var(--primary); font-weight: 500; text-decoration: none; } .profile-container .consent-disclaimer a:hover { text-decoration: underline; } .profile-container .btn-primary { margin-top: 1.25rem; min-height: 48px; padding: 0.75rem 1.75rem; border: none; border-radius: 980px; background: var(--primary); box-shadow: none; color: var(--white); font-family: var(--sf-font); font-size: 17px; font-weight: 600; letter-spacing: -0.022em; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .profile-container .btn-primary:hover { background: var(--primary-hover); transform: none; box-shadow: none; } .profile-container .btn-primary:active { transform: scale(0.98); opacity: 0.92; } .profile-container .btn-primary:disabled { background: rgba(60, 60, 67, 0.18); color: rgba(60, 60, 67, 0.55); border: none; opacity: 1; box-shadow: none; transform: none; } .profile-container .btn-primary:disabled:hover { background: rgba(60, 60, 67, 0.18); transform: none; box-shadow: none; } .profile-container .alert { padding: 0.875rem 1rem; margin-bottom: 1rem; border: none; border-radius: var(--sf-radius-field); font-family: var(--sf-font); font-size: 14px; line-height: 1.4; } .profile-container .alert-warning { background: rgba(255, 149, 0, 0.1); color: rgba(60, 60, 67, 0.9); } .profile-container .alert-success { background: rgba(52, 199, 89, 0.12); color: rgba(28, 80, 45, 0.95); } .profile-container .alert-error { background: rgba(255, 59, 48, 0.1); color: rgba(120, 30, 25, 0.95); } .profile-container .section-locked { opacity: 0.45; pointer-events: none; } .profile-container .section-completed { opacity: 0.65; pointer-events: none; } .profile-container .section-completed .radio-option, .profile-container .section-completed .checkbox-option { cursor: not-allowed; background: var(--sf-fill); } .profile-container .section-completed .radio-option:hover, .profile-container .section-completed .checkbox-option:hover { background: var(--sf-fill); box-shadow: none; } .profile-container .checkbox-group-vertical { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .profile-container .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--sf-fill-elevated); border-top-color: var(--primary); border-radius: 50%; animation: pf-spin 1s linear infinite; } @keyframes pf-spin { to { transform: rotate(360deg); } } @media (min-width: 768px) { .profile-page .profile-container { padding: 0 1rem 2rem; } body:not(.profile-page) .profile-form-card--page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; align-items: start; } body:not(.profile-page) .profile-form-card--page #profile-form-host { display: contents; } body:not(.profile-page) .profile-form-card--page .profile-form-group--phones, body:not(.profile-page) .profile-form-card--page .profile-form-group--consent, body:not(.profile-page) .profile-form-card--page #profile-form-error, body:not(.profile-page) .profile-form-card--page .profile-form-actions { grid-column: 1 / -1; } .profile-form-group--phones .profile-form-group__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 2rem; } .profile-form-group--phones .profile-form-field--phone { flex: 0 1 auto; width: min(100%, var(--pf-phone-width, 21rem)); max-width: var(--pf-phone-width, 21rem); padding-right: 0; } .profile-form-group--phones .profile-form-toggle-row { flex: 1 1 100%; } .profile-form-group--phones .profile-form-group__body:has(.profile-form-field.is-collapsed) { gap: 0; } body:not(.profile-page) .profile-container .questionnaire-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; align-items: start; } body:not(.profile-page) .profile-container .questionnaire-form > .btn-primary, body:not(.profile-page) .profile-container .questionnaire-form > button[type="submit"] { grid-column: 1 / -1; justify-self: end; margin-top: 0; } } @media (min-width: 1024px) { body:not(.profile-page) .profile-form-card--page { grid-template-columns: repeat(3, minmax(0, 1fr)); } body:not(.profile-page) .profile-form-card--page .profile-form-group--phones { grid-column: auto; } body:not(.profile-page) .profile-form-card--page .profile-form-group--consent, body:not(.profile-page) .profile-form-card--page #profile-form-error, body:not(.profile-page) .profile-form-card--page .profile-form-actions { grid-column: 1 / -1; } .profile-form-group--phones .profile-form-group__body { display: block; } .profile-form-group--phones .profile-form-field--phone { width: 100%; max-width: none; } .profile-form-group--phones .profile-form-field--phone .intl-phone-input-host, .profile-form-group--phones .profile-form-field--phone .intl-phone-input { width: 100%; max-width: none; } } @media (max-width: 767px) { .profile-container { max-width: none; margin: 0.75rem 0 1.5rem; padding: 1rem; border-radius: 14px; } .profile-form-field--phone .intl-phone-input-host, .profile-form-field--phone .intl-phone-input { width: 100%; max-width: none; } .profile-form-card { gap: 1rem; } .profile-form-field input[type="text"], .profile-form-field input[type="email"], .profile-container .profile-form-group__body .intl-phone-input__number, .profile-form-field .profile-country-field__trigger, .profile-form-field .profile-country-field__trigger .prebook-country-picker__trigger-label { font-size: 16px; } .profile-form-field, .profile-form-field .intl-phone-input, .profile-form-field .profile-country-field, .profile-container .form-group { scroll-margin-top: 12px; scroll-margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } body.profile-page.profile-keyboard-open { overscroll-behavior: none; } .profile-form-field:has(.intl-phone-input-host) .intl-phone-input, .profile-form-field:has(.intl-phone-input-host) .intl-phone-input:focus-within { box-shadow: inset 0 0 0 1px rgba(68, 93, 239, 0.45); transform: none; } .profile-form-field:has(.intl-phone-input-host) .intl-phone-input__flag .flag-icon { transform: none; } .profile-container .profile-form-toggle-row__input[type="checkbox"] { width: 51px; height: 31px; min-width: 51px; min-height: 31px; max-width: 51px; max-height: 31px; padding: 0; } .profile-container .form-row { grid-template-columns: 1fr; gap: 0; } .profile-container .form-group input, .profile-container .form-group select { font-size: 16px; } .profile-container .radio-option label, .profile-container .checkbox-option label, .profile-container .consent-checkbox-option label { font-size: 14px; } .profile-container .btn-primary { width: 100%; justify-content: center; } .profile-container .profile-form-actions .btn-primary, .profile-container .questionnaire-form > button[type="submit"] { width: auto; min-height: 40px; padding: 0.5rem 1.125rem; } body.profile-page .profile-container .btn-primary { width: auto; justify-content: center; } } .profile-form-field--error > label { color: #b42318; } .profile-form-field--error .profile-country-field.is-invalid .profile-country-field__trigger, .profile-form-field--error .profile-country-field__trigger.is-invalid { background: rgb(255 59 48 / 4%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 55%), 0 0 0 3px rgb(255 59 48 / 10%); } .profile-form-field--error .profile-country-field__error { margin: 0.125rem 0 0; font-size: 12px; line-height: 1.35; color: #b42318; } .profile-form-field--error-animate { animation: profile-form-field-error-enter 0.35s ease; } @keyframes profile-form-field-error-enter { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } .profile-form-group--error > .profile-form-group__title { color: #b42318; } .profile-form-group--consent.profile-form-group--error .consent-checkbox-option.is-invalid { background: rgb(255 59 48 / 5%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 42%); } .profile-form-field--error .profile-phone-verify__status--note, .profile-form-field--error .profile-phone-verify__status--error { color: #b42318; font-weight: 500; } .profile-phone-verify-host { margin-top: 0.375rem; } .profile-phone-verify { display: flex; flex-direction: column; gap: 0.375rem; } .profile-phone-verify__btn { align-self: flex-start; min-height: 34px; padding: 0.375rem 0.875rem; border: 0.5px solid var(--color-border-strong); border-radius: 980px; background: var(--color-surface-glass); color: var(--sf-text); font-family: var(--sf-font, -apple-system, blinkmacsystemfont, system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; box-shadow: var(--shadow-surface-sm); } .profile-phone-verify__btn:hover:not(:disabled) { background: var(--color-control-hover); border-color: var(--color-border-strong); } .profile-phone-verify__btn:active:not(:disabled) { background: var(--color-control-active); } .profile-phone-verify__btn:disabled { opacity: 0.45; cursor: not-allowed; } .profile-phone-verify__status { margin: 0; font-family: var(--sf-font, -apple-system, blinkmacsystemfont, system-ui, sans-serif); font-size: 13px; line-height: 1.4; } .profile-phone-verify__status--verified { display: inline-flex; align-items: center; gap: 0.4375rem; color: var(--color-text-secondary); font-weight: 500; } .profile-phone-verify__check { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-control-hover); } .profile-phone-verify__check::after { content: ""; position: absolute; top: 3px; left: 5px; width: 4px; height: 7px; border-right: 1.5px solid var(--sf-text); border-bottom: 1.5px solid var(--sf-text); transform: rotate(45deg); } .profile-phone-verify__status--note { color: var(--color-text-muted); } .profile-phone-verify__status--error { color: #b42318; } @media (max-width: 640px) { .profile-phone-verify__btn { width: 100%; justify-content: center; } } body.profile-page { --pf-gutter: var(--space-md, 1rem); --pf-shell-max: 1400px; --pf-page-surface: #fff; --pf-page-fill: #f2f2f7; --pf-page-fill-hover: rgba(60, 60, 67, 0.12); --pf-page-text: #1d1d1f; --pf-page-secondary: #3a3a3c; --pf-page-secondary-muted: #636366; --pf-page-secondary-strong: #48484a; --pf-page-muted: #8e8e93; --pf-page-faint: #aeaeb2; --pf-page-border: rgba(60, 60, 67, 0.1); --pf-page-card-border: rgba(60, 60, 67, 0.14); --pf-page-input-border: rgba(60, 60, 67, 0.12); --pf-page-button-hover: #2c2c2e; --pf-page-disabled-text: rgba(60, 60, 67, 0.38); background: #f2f2f7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root[data-theme="dark"] body.profile-page { --pf-page-surface: var(--color-surface); --pf-page-fill: var(--color-control); --pf-page-fill-hover: var(--color-control-hover); --pf-page-text: var(--color-text); --pf-page-secondary: var(--color-text-secondary); --pf-page-secondary-muted: var(--color-text-secondary); --pf-page-secondary-strong: var(--color-text-secondary); --pf-page-muted: var(--color-text-muted); --pf-page-faint: var(--color-text-faint); --pf-page-border: var(--color-border-subtle); --pf-page-card-border: var(--color-border); --pf-page-input-border: var(--color-border-subtle); --pf-page-button-hover: var(--color-control-hover); --pf-page-disabled-text: var(--color-text-faint); background: var(--color-canvas-subtle); } body.profile-page .container { box-sizing: border-box; width: 100%; max-width: var(--pf-shell-max); margin-left: auto; margin-right: auto; padding-left: var(--pf-gutter); padding-right: var(--pf-gutter); } body.profile-page .search-container { width: 100%; margin: 0.75rem 0 0.875rem; box-sizing: border-box; } body.profile-page .search-container, body.profile-page .search-container::before { border-radius: var(--sf-radius-shell, 20px); } body.profile-page .profile-container { --pf-page-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif; width: 100%; max-width: 100%; margin: 0; padding: 0 0 1.5rem; background: transparent; border: none; border-radius: 0; box-shadow: none; font-family: var(--pf-page-font); box-sizing: border-box; } body.profile-page .profile-form-card--page, body.profile-page .profile-form-card--page #profile-form-host, body.profile-page .profile-form-group, body.profile-page .questionnaire-form { width: 100%; min-width: 0; box-sizing: border-box; } body.profile-page .profile-page-header { display: none; } body.profile-page .profile-form-card--page { display: flex; flex-direction: column; gap: 1.25rem; } body.profile-page .profile-form-card--page #profile-form-host { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } body.profile-page .profile-form-group__title { margin: 0 0 0.625rem; padding: 0; font-family: var(--pf-page-font); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; color: var(--pf-page-text); text-transform: none; } body.profile-page .profile-form-group__hint { display: none; } body.profile-page .profile-form-group__footnote { margin: 0.5rem 0 0; padding: 0 0.125rem; font-family: var(--pf-page-font); font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.006em; color: var(--pf-page-secondary-muted); } body.profile-page .profile-form-group__body { overflow: hidden; border-radius: 14px; background: var(--pf-page-surface); box-shadow: 0 0 0 0.5px var(--pf-page-card-border); } body.profile-page .profile-form-field { display: flex; flex-direction: column; align-items: stretch; gap: 0.4375rem; padding: 0.875rem 1rem; } body.profile-page .profile-form-field > label { margin: 0; font-family: var(--pf-page-font); font-size: 13px; font-weight: 600; letter-spacing: -0.006em; line-height: 1.3; color: var(--pf-page-secondary); } body.profile-page .profile-form-field input[type="text"], body.profile-page .profile-form-field input[type="email"] { width: 100%; margin: 0; padding: 0.6875rem 0.875rem; border: none; border-radius: 10px; background: var(--pf-page-fill); color: var(--pf-page-text); font-family: var(--pf-page-font); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; line-height: 1.35; text-align: left; box-shadow: inset 0 0 0 1px var(--pf-page-input-border); transition: background 0.18s ease, box-shadow 0.18s ease; } body.profile-page .profile-form-field input[type="text"]::placeholder, body.profile-page .profile-form-field input[type="email"]::placeholder { color: var(--pf-page-faint); } body.profile-page .profile-form-field input[type="text"]:focus, body.profile-page .profile-form-field input[type="email"]:focus { outline: none; background: var(--pf-page-surface); box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px var(--primary-light); } body.profile-page .profile-form-field input[type="text"]:disabled, body.profile-page .profile-form-field input[type="email"]:disabled { opacity: 0.55; cursor: not-allowed; } body.profile-page .profile-form-field--error > label { color: #d70015; } body.profile-page .profile-form-field input[type="text"].is-invalid, body.profile-page .profile-form-field input[type="email"].is-invalid { background: rgb(255 59 48 / 6%); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 62%), 0 0 0 4px rgb(255 59 48 / 10%); } body.profile-page .profile-form-field input[type="text"].is-invalid:focus, body.profile-page .profile-form-field input[type="email"].is-invalid:focus { background: var(--pf-page-surface); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 72%), 0 0 0 4px rgb(255 59 48 / 14%); } body.profile-page .profile-form-field__error { margin: 0; font-family: var(--pf-page-font); font-size: 12px; line-height: 1.35; font-weight: 500; color: #d70015; } body.profile-page .profile-form-group--error > .profile-form-group__title { color: #d70015; } body.profile-page .profile-form-group--consent.profile-form-group--error .consent-checkbox-option.is-invalid { background: rgb(255 59 48 / 5%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 40%); } body.profile-page .profile-form-group--consent-unified.profile-form-group--error .consent-checkbox-option.is-invalid { box-shadow: none; } body.profile-page .profile-form-field + .profile-form-field, body.profile-page .profile-form-field + .profile-form-toggle-row, body.profile-page .profile-form-toggle-row + .profile-form-field { border-top: 1px solid var(--pf-page-border); } body.profile-page .profile-form-toggle-row { min-height: 48px; padding: 0.5625rem 1rem; border-top: 1px solid var(--pf-page-border); } body.profile-page .profile-form-toggle-row__label { font-family: var(--pf-page-font); font-size: 15px; font-weight: 400; letter-spacing: -0.016em; line-height: 1.35; color: var(--pf-page-text); } body.profile-page .profile-form-toggle-row__check { flex: 0 0 auto; width: auto; height: auto; margin-right: 0; } body.profile-page .profile-form-field--phone .intl-phone-input-host, body.profile-page .profile-form-field--phone .intl-phone-input { width: 100%; max-width: none; } body.profile-page .profile-form-group--consent .profile-form-group__body--consent { padding: 0; background: var(--pf-page-surface); } body.profile-page .profile-form-group--consent .consent-checkboxes { gap: 0; } body.profile-page .profile-form-group--consent .consent-checkbox-option { align-items: flex-start; padding: 0.875rem 1rem; border-top: 1px solid var(--pf-page-border); } body.profile-page .profile-form-group--consent .consent-checkbox-option:first-child { border-top: none; } body.profile-page .profile-form-group--consent .consent-checkbox-option label { font-family: var(--pf-page-font); font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: -0.012em; color: var(--pf-page-text); } body.profile-page .profile-form-group--consent .consent-disclaimer { margin: 0.625rem 0 0; padding: 0 0.125rem; border: none; border-radius: 0; background: transparent; font-family: var(--pf-page-font); font-size: 13px; line-height: 1.5; color: var(--pf-page-secondary-muted); } body.profile-page .profile-form-group--consent .consent-disclaimer a { color: var(--primary); font-weight: 500; } body.profile-page .profile-form-group--consent-unified .profile-form-group__body--consent-unified { padding: 0; overflow: hidden; } body.profile-page .consent-card-footer { display: flex; align-items: center; gap: 1rem 1.25rem; margin: 0; padding: 0.875rem 1rem; border-top: 0.5px solid var(--pf-page-border); background: var(--pf-page-surface); } body.profile-page .consent-card-footer__copy { flex: 1 1 auto; min-width: 0; } body.profile-page .consent-card-footer__copy .consent-disclaimer { margin: 0; padding: 0; font-size: 12px; line-height: 1.45; color: var(--pf-page-secondary-muted); } body.profile-page .consent-card-footer__copy .consent-disclaimer a { color: var(--primary); font-weight: 500; } body.profile-page .consent-card-footer__note { margin: 0.25rem 0 0; padding: 0; font-family: var(--pf-page-font); font-size: 11px; line-height: 1.35; font-weight: 500; color: var(--pf-page-secondary-strong); } body.profile-page .consent-card-footer__btn.btn-primary { flex: 0 0 auto; width: auto; min-width: 7.5rem; min-height: 36px; margin: 0; padding: 0.4375rem 1.125rem; border: none; border-radius: 980px; background: var(--pf-page-text); color: var(--color-text-inverse); font-family: var(--pf-page-font); font-size: 14px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; white-space: nowrap; box-shadow: none; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; } body.profile-page .consent-card-footer__btn.btn-primary:hover:not(:disabled) { background: var(--pf-page-button-hover); transform: none; box-shadow: none; } body.profile-page .consent-card-footer__btn.btn-primary:active:not(:disabled) { background: var(--pf-page-text); transform: scale(0.985); opacity: 0.96; } body.profile-page .consent-card-footer__btn.btn-primary:disabled { background: var(--pf-page-fill-hover); color: var(--pf-page-disabled-text); opacity: 1; cursor: not-allowed; transform: none; } body.profile-page .consent-card-footer__btn.btn-primary:disabled:hover { background: var(--pf-page-fill-hover); transform: none; } body.profile-page .questionnaire-form { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } body.profile-page .questionnaire-form .questionnaire-block > label { margin: 0 0 0.625rem; padding: 0; font-family: var(--pf-page-font); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.35; color: var(--pf-page-text); } body.profile-page .questionnaire-form .radio-group, body.profile-page .questionnaire-form .checkbox-group-vertical { border-radius: 14px; background: var(--pf-page-surface); box-shadow: 0 0 0 0.5px var(--pf-page-card-border); } body.profile-page .questionnaire-form .radio-option label, body.profile-page .questionnaire-form .checkbox-option label { font-size: 15px; line-height: 1.4; color: var(--pf-page-text); } body.profile-page .questionnaire-form-actions { grid-column: 1 / -1; display: flex; justify-content: stretch; margin: 0.5rem 0 0; padding: 0; } body.profile-page .questionnaire-form-actions__btn.btn-primary { position: static; z-index: auto; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 0.875rem 1.5rem; border: none; border-radius: 14px; background: var(--pf-page-text); color: var(--color-text-inverse); font-family: var(--pf-page-font); font-size: 17px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; white-space: nowrap; box-shadow: none; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; } body.profile-page .questionnaire-form-actions__btn.btn-primary:hover:not(:disabled) { background: var(--pf-page-button-hover); transform: none; box-shadow: none; } body.profile-page .questionnaire-form-actions__btn.btn-primary:active:not(:disabled) { background: var(--pf-page-text); transform: scale(0.985); opacity: 0.96; } body.profile-page .questionnaire-form-actions__btn.btn-primary:disabled { background: var(--pf-page-fill-hover); color: var(--pf-page-disabled-text); opacity: 1; cursor: not-allowed; transform: none; } body.profile-page .questionnaire-form-actions__btn.btn-primary:disabled:hover { background: var(--pf-page-fill-hover); transform: none; } @media (min-width: 768px) { body.profile-page .profile-form-card--page #profile-form-host { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } body.profile-page .profile-form-group--phones, body.profile-page .profile-form-group--consent { grid-column: 1 / -1; } body.profile-page .profile-form-group--consent .profile-form-group__body--consent-unified { padding: 0; } body.profile-page .profile-form-group--consent .profile-form-group__body--consent:not(.profile-form-group__body--consent-unified) { padding: 0.75rem; } body.profile-page .profile-form-group--consent-unified .consent-checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0.25rem 0; } body.profile-page .profile-form-group--consent:not(.profile-form-group--consent-unified) .consent-checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } body.profile-page .profile-form-group--consent-unified .consent-checkbox-option { margin: 0; padding: 0.875rem 1rem; border: none; border-radius: 0; background: transparent; box-shadow: none; } body.profile-page .profile-form-group--consent-unified .consent-checkbox-option + .consent-checkbox-option { border-left: 0.5px solid var(--pf-page-border); } body.profile-page .profile-form-group--consent:not(.profile-form-group--consent-unified) .consent-checkbox-option { margin: 0; padding: 0.875rem; border: none; border-radius: 10px; background: var(--pf-page-fill); box-shadow: none; } body.profile-page .profile-form-group--consent.profile-form-group--error .consent-checkbox-option.is-invalid { background: rgb(255 59 48 / 5%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 40%); } body.profile-page .profile-form-group--consent-unified.profile-form-group--error .consent-checkbox-option.is-invalid { background: rgb(255 59 48 / 5%); box-shadow: none; } body.profile-page .consent-card-footer { margin-top: 0; padding: 0.875rem 1rem; flex-direction: row; align-items: center; } body.profile-page .consent-card-footer__btn.btn-primary { width: auto; min-width: 7.5rem; } body.profile-page .questionnaire-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } body.profile-page .questionnaire-form-actions { margin-top: 0.75rem; } body.profile-page .questionnaire-form-actions__btn.btn-primary { min-height: 52px; font-size: 17px; border-radius: 14px; } } @media (max-width: 768px) { body.profile-page .search-container { margin-left: 0; margin-right: 0; } } @media (max-width: 767px) { body.profile-page .search-container { margin: 0.5rem 0 0.75rem; } body.profile-page .profile-container { max-width: 100%; margin: 0; padding: 0 0 1.25rem; background: transparent; border-radius: 0; box-shadow: none; } body.profile-page .profile-form-field input[type="text"], body.profile-page .profile-form-field input[type="email"], body.profile-page .profile-form-group__body, body.profile-page .profile-form-field--phone .intl-phone-input, body.profile-page .profile-form-field--phone .intl-phone-input-host, body.profile-page .profile-form-field--picker .profile-country-field__trigger { width: 100%; max-width: 100%; box-sizing: border-box; } body.profile-page .profile-form-toggle-row__label { font-size: 14px; line-height: 1.35; padding-right: 0.5rem; } body.profile-page .consent-card-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; } body.profile-page .consent-card-footer__btn.btn-primary { width: auto; min-width: 7.5rem; margin-top: 0; } } @media (max-width: 480px) { body.profile-page { --pf-gutter: 0.75rem; } } @media (min-width: 1100px) { body.profile-page .profile-form-card--page #profile-form-host { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.profile-page .profile-form-group--phones { grid-column: auto; } body.profile-page .profile-form-group--consent { grid-column: 1 / -1; } } .profile-container .profile-form-group__body .intl-phone-input { background: var(--sf-bg); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--sf-separator); min-height: 38px; align-items: stretch; } .profile-container .profile-form-group__body .intl-phone-input:focus-within { background: var(--sf-bg); box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.4), 0 0 0 3px rgba(0, 122, 255, 0.1); } body.profile-page .profile-form-group__body .intl-phone-input { border-radius: 10px; background: var(--color-control); box-shadow: inset 0 0 0 1px var(--color-border-subtle); min-height: 46px; } body.profile-page .profile-form-group__body .intl-phone-input:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px var(--primary-light); } body.profile-page .profile-form-group__body .intl-phone-input__number { font-size: 17px; letter-spacing: -0.022em; color: var(--color-text); } body.profile-page .profile-form-group__body .intl-phone-input__number::placeholder { color: var(--color-text-faint); } body.profile-page .profile-form-group__body .intl-phone-input__dial { font-size: 16px; font-weight: 500; color: var(--color-text); } body.profile-page .profile-form-field--error .intl-phone-input.is-invalid { background: rgb(255 59 48 / 6%); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 62%), 0 0 0 4px rgb(255 59 48 / 10%); } body.profile-page .profile-form-field--error .intl-phone-input.is-invalid:focus-within { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 72%), 0 0 0 4px rgb(255 59 48 / 14%); } body.profile-page .profile-form-field--error .intl-phone-input__error { color: #d70015; font-weight: 500; } .profile-container .profile-form-group__body .intl-phone-input__code { padding: 0.4375rem 0.5rem 0.4375rem 0.625rem; border-radius: 8px 0 0 8px; font-size: 14px; gap: 0.3125rem; } .profile-container .profile-form-group__body .intl-phone-input__flag { width: 20px; height: 14px; } .profile-container .profile-form-group__body .intl-phone-input__flag .flag-icon { transform: scale(1.08); } .profile-container .profile-form-group__body .intl-phone-input__dial { min-width: 1.875rem; } .profile-container .profile-form-group__body .intl-phone-input__chevron { font-size: 10px; } .profile-container .profile-form-group__body .intl-phone-input__number { padding: 0.4375rem 0.625rem 0.4375rem 0.5rem; border-radius: 0 8px 8px 0; font-size: 15px; text-align: left; } .profile-container .intl-phone-input-host { margin: 0; } .profile-container .intl-phone-input-host .intl-phone-input__error { padding: 0 0 0.25rem; } .profile-container .intl-phone-input { position: relative; display: flex; align-items: stretch; gap: 0; border-radius: var(--sf-radius-field); background: var(--sf-fill); box-shadow: inset 0 0 0 1px transparent; transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-container .intl-phone-input:focus-within { background: var(--sf-bg); box-shadow: 0 0 0 3px rgba(68, 93, 239, 0.14), inset 0 0 0 1px rgba(68, 93, 239, 0.22); } .profile-container .intl-phone-input.is-invalid { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12), inset 0 0 0 1px rgba(255, 59, 48, 0.35); } .profile-container .intl-phone-input.is-disabled { opacity: 0.55; pointer-events: none; } .profile-container .intl-phone-input__code { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; margin: 0; padding: 0.75rem 0.625rem 0.75rem 0.875rem; border: none; border-right: 1px solid var(--sf-separator); border-radius: var(--sf-radius-field) 0 0 var(--sf-radius-field); background: transparent; color: var(--sf-text); font-family: var(--sf-font); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; transition: background 0.2s ease; } .profile-container .intl-phone-input__code:hover { background: var(--color-control-hover); } .profile-container .intl-phone-input__code:focus-visible { outline: none; background: rgba(68, 93, 239, 0.08); } .profile-container .intl-phone-input__flag { display: inline-flex; width: 22px; height: 16px; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .profile-container .intl-phone-input__flag .flag-icon { transform: scale(1.15); } .profile-container .intl-phone-input__placeholder-flag { display: inline-block; width: 22px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--color-control), var(--color-surface-strong)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .profile-container .intl-phone-input.is-unknown-region .intl-phone-input__dial { color: var(--sf-label); } .profile-container .intl-phone-input__dial { min-width: 2.25rem; text-align: left; white-space: nowrap; } .profile-container .intl-phone-input__chevron { color: var(--sf-label); font-size: 11px; line-height: 1; } .profile-container .intl-phone-input__number { flex: 1; min-width: 0; margin: 0; padding: 0.75rem 0.875rem 0.75rem 0.75rem; border: none; border-radius: 0 var(--sf-radius-field) var(--sf-radius-field) 0; background: transparent; color: var(--sf-text); font-family: var(--sf-font); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; } .profile-container .intl-phone-input__number::placeholder { color: var(--color-text-faint); } .profile-container .intl-phone-input__number:focus { outline: none; } .profile-container .intl-phone-input__hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .profile-container .intl-phone-input__error { margin-top: 0.375rem; font-family: var(--sf-font); font-size: 12px; line-height: 1.35; color: #ff3b30; } .intl-phone-menu { position: fixed; z-index: 10200; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--color-surface-glass-strong); box-shadow: var(--shadow-surface-lg); backdrop-filter: blur(20px); } .intl-phone-menu__search-wrap { padding: 0.625rem 0.75rem 0.5rem; border-bottom: 1px solid var(--sf-separator, rgba(60, 60, 67, 0.14)); } .intl-phone-menu__search { width: 100%; margin: 0; padding: 0.625rem 0.75rem; border: none; border-radius: 10px; background: var(--color-control); color: var(--color-text); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; } .intl-phone-menu__search:focus { outline: none; box-shadow: 0 0 0 3px rgba(68, 93, 239, 0.14); } .intl-phone-menu__options { overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem; } .intl-phone-menu__option { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border: none; border-radius: 10px; background: transparent; color: var(--color-text); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 15px; text-align: left; cursor: pointer; transition: background 0.15s ease; } .intl-phone-menu__option:hover, .intl-phone-menu__option:focus-visible { background: rgba(68, 93, 239, 0.08); outline: none; } .intl-phone-menu__option-flag { flex-shrink: 0; } .intl-phone-menu__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intl-phone-menu__option-dial { flex-shrink: 0; color: var(--color-text-muted); font-size: 14px; font-variant-numeric: tabular-nums; } .intl-phone-menu__empty { padding: 1rem 0.75rem; color: var(--color-text-muted); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 14px; text-align: center; } .intl-phone-sheet { position: fixed; inset: 0; z-index: 10200; display: flex; flex-direction: column; justify-content: flex-end; } .intl-phone-sheet__backdrop { position: absolute; inset: 0; border: none; background: var(--color-overlay); cursor: pointer; } .intl-phone-sheet__panel { position: relative; display: flex; max-height: min(78vh, 560px); flex-direction: column; border-radius: 18px 18px 0 0; background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); } .intl-phone-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem 0.5rem; border-bottom: 1px solid var(--color-border-subtle); } .intl-phone-sheet__title { font-family: -apple-system, blinkmacsystemfont, "SF Pro Display", system-ui, sans-serif; font-size: 17px; font-weight: 600; color: var(--color-text); } .intl-phone-sheet__done { border: none; border-radius: 8px; background: transparent; color: var(--primary, #445def); font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; } @media (max-width: 767px) { .profile-container .intl-phone-input:focus-within, .profile-container .profile-form-group__body .intl-phone-input:focus-within { box-shadow: inset 0 0 0 1px rgba(68, 93, 239, 0.45); } .profile-container .intl-phone-input__number, .profile-container .profile-form-group__body .intl-phone-input__number { font-size: 16px; touch-action: manipulation; } .profile-container .intl-phone-input__code { padding-left: 0.75rem; font-size: 16px; touch-action: manipulation; } } .profile-country-field { width: 100%; } .profile-country-field__picker { width: 100%; } .profile-form-field .profile-country-field__trigger { width: 100%; height: auto; min-height: 38px; margin: 0; padding: 0.5rem 0.625rem; gap: 0.5rem; border: none; border-radius: 8px; background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-font); font-size: 15px; font-weight: 400; letter-spacing: -0.018em; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--sf-separator); transition: background 0.2s ease, box-shadow 0.2s ease; } .profile-form-field .profile-country-field__trigger:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); } .profile-form-field .profile-country-field__trigger:focus-visible, .profile-country-field__picker.is-open .profile-country-field__trigger { outline: none; box-shadow: inset 0 0 0 1px #445def, 0 0 0 3px rgba(68, 93, 239, 0.14); } .profile-form-field .profile-country-field.is-invalid .profile-country-field__trigger, .profile-form-field .profile-country-field__trigger.is-invalid { background: rgb(255 59 48 / 4%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 55%), 0 0 0 3px rgb(255 59 48 / 10%); } .profile-country-field__error { margin: 0.125rem 0 0; font-size: 12px; line-height: 1.35; color: #b42318; } .profile-form-field .profile-country-field__trigger .prebook-country-picker__trigger-label { color: var(--color-text-faint); font-size: 15px; font-weight: 400; } .profile-form-field .profile-country-field__trigger.has-selection .prebook-country-picker__trigger-label, .profile-form-field .profile-country-field__trigger .prebook-country-picker__trigger-label:not(.is-placeholder) { color: var(--sf-text); } .profile-form-field .profile-country-field__trigger .prebook-country-picker__chevron { color: var(--color-text-faint); font-size: 11px; } body.profile-page .profile-form-field--picker .profile-country-field__trigger { min-height: 46px; padding: 0.6875rem 0.875rem; border-radius: 10px; background: var(--color-control); box-shadow: inset 0 0 0 1px var(--color-border-subtle); justify-content: space-between; } body.profile-page .profile-form-field--picker .profile-country-field__trigger:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); } body.profile-page .profile-form-field--picker .profile-country-field__trigger:focus-visible, body.profile-page .profile-form-field--picker .profile-country-field__picker.is-open .profile-country-field__trigger { outline: none; background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px var(--primary-light); } body.profile-page .profile-form-field--picker .profile-country-field__trigger .prebook-country-picker__trigger-label { text-align: left; font-size: 17px; letter-spacing: -0.022em; color: var(--color-text-faint); } body.profile-page .profile-form-field--picker .profile-country-field__trigger.has-selection .prebook-country-picker__trigger-label, body.profile-page .profile-form-field--picker .profile-country-field__trigger .prebook-country-picker__trigger-label:not(.is-placeholder) { color: var(--color-text); } body.profile-page .profile-form-field--picker .profile-country-field__trigger .prebook-country-picker__chevron { margin-left: 0.5rem; color: var(--color-text-muted); font-size: 12px; } body.profile-page .profile-form-field--error .profile-country-field.is-invalid .profile-country-field__trigger, body.profile-page .profile-form-field--error .profile-country-field__trigger.is-invalid { background: rgb(255 59 48 / 6%); box-shadow: inset 0 0 0 1.5px rgb(255 59 48 / 62%), 0 0 0 4px rgb(255 59 48 / 10%); } body.profile-page .profile-form-field--error .profile-country-field__error { margin: 0; font-size: 12px; font-weight: 500; color: #d70015; } .profile-form-field .profile-country-field__trigger .prebook-country-picker__trigger-flag { width: 20px; height: 20px; } .profile-form-field .profile-country-field__trigger .prebook-country-picker__placeholder-flag { width: 1.1rem; height: 0.75rem; } .profile-form-field .profile-country-field__trigger.has-legacy-selection .prebook-country-picker__trigger-label { color: var(--sf-text); font-style: normal; } .profile-page .prebook-country-picker__menu { z-index: 10100; border: 0.5px solid var(--color-border-subtle); background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); } .profile-page .prebook-country-picker__search { background: var(--color-control); border-color: var(--color-border-subtle); color: var(--color-text); } .profile-page .prebook-country-picker__option { color: var(--color-text); } body.profile-picker-swap-guard .profile-country-field__picker, body.profile-picker-swap-guard .profile-country-sheet, body.profile-picker-swap-guard .intl-phone-input__code { pointer-events: none; } body.profile-country-sheet-open { overflow: hidden; touch-action: none; } .profile-country-sheet { --pb-bg: var(--color-control); --pb-surface: var(--color-surface); --pb-text: var(--color-text); --pb-secondary: var(--color-text-secondary); --pb-label: var(--color-text-muted); --pb-separator: var(--color-border-subtle); --pb-accent: #445def; --pb-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; position: fixed; inset: 0; z-index: 10150; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 100%; margin: 0; font-family: var(--pb-font); overscroll-behavior: none; } .profile-country-sheet[hidden] { display: none !important; } .profile-country-sheet__backdrop { position: absolute; inset: 0; border: none; margin: 0; padding: 0; background: var(--color-overlay); cursor: pointer; -webkit-tap-highlight-color: transparent; } .profile-country-sheet__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 100%; min-height: 260px; max-height: calc(100dvh - 10px); margin: 0; overflow: hidden; border-radius: 16px 16px 0 0; background: var(--pb-surface); box-shadow: var(--shadow-surface-lg); transform: translate3d(0, 0, 0); will-change: height; } .profile-country-sheet__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 0.5px solid var(--pb-separator); background: var(--pb-surface); } .profile-country-sheet__title { font-size: 15px; font-weight: 650; color: var(--pb-text); } .profile-country-sheet__done { border: none; background: transparent; color: var(--pb-accent); font-size: 15px; font-weight: 650; cursor: pointer; padding: 4px 0; } .profile-country-sheet .prebook-country-picker__search-wrap { flex-shrink: 0; padding: 10px 12px 0; background: var(--pb-surface); } .profile-country-sheet .prebook-country-picker__search { width: 100%; height: 40px; padding: 0 12px; border: 0.5px solid var(--pb-separator); border-radius: 10px; background: var(--pb-bg); font-size: 16px; color: var(--pb-text); } .profile-country-sheet .prebook-country-picker__search:focus { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 3px rgba(68, 93, 239, 0.14); } .profile-country-sheet .prebook-country-picker__options { flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--pb-surface); } .profile-country-sheet .prebook-country-picker__option { width: 100%; color: var(--pb-text); background: transparent; } .profile-country-sheet .prebook-country-picker__option:hover, .profile-country-sheet .prebook-country-picker__option:focus-visible { background: var(--color-control-hover); } .profile-country-sheet .prebook-country-picker__empty { color: var(--pb-secondary); } @media (max-width: 767px) { .profile-form-field .profile-country-field__trigger, .profile-form-field .profile-country-field__trigger .prebook-country-picker__trigger-label { font-size: 16px; } } @media (max-width: 520px) { .profile-page .prebook-country-picker__menu { border-radius: 14px; background: var(--color-surface-raised); } } dialog.prebook-country-sheet.prebook-country-sheet--standalone { position: fixed; inset: 0; z-index: 10150; width: 100%; max-width: 100vw; height: 100%; max-height: 100dvh; margin: 0; padding: 0; border: none; background: transparent; color: inherit; overflow: hidden; overscroll-behavior: none; box-sizing: border-box; } dialog.prebook-country-sheet.prebook-country-sheet--standalone:not([open]) { display: none; } dialog.prebook-country-sheet.prebook-country-sheet--standalone[open] { display: flex; flex-direction: column; justify-content: flex-end; } dialog.prebook-country-sheet.prebook-country-sheet--standalone.is-keyboard-open[open] { justify-content: flex-start; } dialog.prebook-country-sheet.prebook-country-sheet--standalone::backdrop { background: transparent; } .prebook-country-sheet--standalone .prebook-country-sheet__backdrop { position: absolute; inset: 0; border: none; margin: 0; padding: 0; background: var(--color-overlay, rgb(0 0 0 / 45%)); cursor: pointer; -webkit-tap-highlight-color: transparent; } .prebook-country-sheet--standalone .prebook-country-sheet__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 100%; min-height: 160px; max-height: calc(100dvh - 10px); margin: 0; overflow: hidden; border-radius: 16px 16px 0 0; background: var(--pb-surface, var(--color-surface-raised)); box-shadow: var(--shadow-surface-lg); box-sizing: border-box; } .prebook-country-sheet--standalone.is-keyboard-open .prebook-country-sheet__panel { border-radius: 0; max-height: none; } .prebook-country-sheet--standalone .prebook-country-sheet__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 0.5px solid var(--pb-separator, var(--color-border)); background: var(--pb-surface, var(--color-surface-raised)); } .prebook-country-sheet--standalone .prebook-country-sheet__title { font-size: 15px; font-weight: 650; color: var(--pb-text, var(--color-text)); } .prebook-country-sheet--standalone .prebook-country-sheet__done { border: none; background: transparent; color: var(--pb-accent, var(--color-accent, #445def)); font-size: 15px; font-weight: 650; cursor: pointer; padding: 4px 0; } .prebook-country-sheet--standalone .prebook-country-picker__search-wrap { flex-shrink: 0; padding: 10px 12px 0; background: var(--pb-surface, var(--color-surface-raised)); } .prebook-country-sheet--standalone .prebook-country-picker__search { width: 100%; height: 40px; padding: 0 12px; border: 0.5px solid var(--pb-separator, var(--color-border)); border-radius: 10px; background: var(--pb-bg, var(--color-control)); font-size: 16px; color: var(--pb-text, var(--color-text)); } .prebook-country-sheet--standalone .prebook-country-picker__search:focus { outline: none; border-color: var(--pb-accent, var(--color-accent, #445def)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-accent, #445def) 18%, transparent); } .prebook-country-sheet--standalone .prebook-country-picker__options { flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--pb-surface, var(--color-surface-raised)); } .prebook-country-sheet--standalone .prebook-country-picker__option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: var(--pb-text, var(--color-text)); font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .prebook-country-sheet--standalone .prebook-country-picker__option:hover, .prebook-country-sheet--standalone .prebook-country-picker__option:focus-visible { outline: none; background: var(--color-control-hover); } .prebook-country-sheet--standalone .prebook-country-picker__empty { padding: 14px 10px; color: var(--pb-secondary, var(--color-text-secondary)); font-size: 13px; text-align: center; } .profile-phone-verify-modal { position: fixed; inset: 0; z-index: 10300; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--color-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: pf-modal-fade-in 0.25s ease; } .profile-phone-verify-modal__content { position: relative; width: min(100%, 420px); max-height: min(92vh, 640px); overflow: auto; border-radius: 20px; background: var(--color-surface-raised); box-shadow: var(--shadow-surface-lg); animation: pf-modal-slide-up 0.3s ease; } .profile-phone-verify-modal__close { position: absolute; top: 0.875rem; right: 0.875rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--color-control); color: var(--color-text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; } .profile-phone-verify-modal__close:hover { background: var(--color-control-hover); color: var(--color-text); } .profile-phone-verify-modal__header { padding: 2rem 1.5rem 1rem; text-align: center; background: var(--color-surface-muted); border-radius: 20px 20px 0 0; } .profile-phone-verify-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 0.875rem; border-radius: 16px; background: var(--color-control); color: var(--color-text); font-size: 24px; } .profile-phone-verify-modal__title { margin: 0 0 0.375rem; font-family: -apple-system, blinkmacsystemfont, "SF Pro Display", system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .profile-phone-verify-modal__subtitle { margin: 0; font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 14px; line-height: 1.45; color: var(--color-text-muted); } .profile-phone-verify-modal__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; } .profile-phone-verify-modal__code { width: 100%; margin: 0; padding: 0.875rem 1rem; border: none; border-radius: 12px; background: var(--color-control); color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 28px; font-weight: 600; letter-spacing: 0.24em; text-align: center; box-shadow: inset 0 0 0 1px var(--color-border-subtle); } .profile-phone-verify-modal__code:focus { outline: none; background: var(--color-surface-raised); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.28), 0 0 0 3px rgba(60, 60, 67, 0.08); } .profile-phone-verify-modal__error { padding: 0.75rem 0.875rem; border-radius: 10px; background: rgba(255, 59, 48, 0.1); color: #b42318; font-size: 13px; line-height: 1.4; } .profile-phone-verify-modal__primary, .profile-phone-verify-modal__secondary { width: 100%; min-height: 48px; border: none; border-radius: 980px; font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease; } .profile-phone-verify-modal__primary { background: var(--color-text); color: var(--color-text-inverse); } .profile-phone-verify-modal__primary:hover:not(:disabled) { background: #2c2c2e; } .profile-phone-verify-modal__secondary { background: var(--color-control); color: var(--color-text); } .profile-phone-verify-modal__secondary:hover:not(:disabled) { background: var(--color-control-hover); } .profile-phone-verify-modal__primary:disabled, .profile-phone-verify-modal__secondary:disabled { opacity: 0.55; cursor: not-allowed; } .profile-phone-verify-modal__status { margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--color-text-muted); } body.profile-phone-verify-open { overflow: hidden; } @media (max-width: 640px) { .profile-phone-verify-modal { align-items: flex-end; padding: 0; } .profile-phone-verify-modal__content { width: 100%; max-height: min(88vh, 720px); border-radius: 18px 18px 0 0; } .profile-phone-verify-modal__header { border-radius: 18px 18px 0 0; } .profile-phone-verify-modal__code { font-size: 24px; } } .cancel-booking-modal { --cbm-bg: var(--color-surface-muted); --cbm-surface: var(--color-surface); --cbm-text: var(--color-text); --cbm-secondary: var(--color-text-secondary); --cbm-label: var(--color-text-muted); --cbm-separator: var(--color-border-subtle); --cbm-danger: #ff3b30; --cbm-danger-hover: #e6352b; --cbm-radius: 20px; --cbm-radius-inner: 14px; --cbm-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; display: none; position: fixed; inset: 0; z-index: 10002; align-items: center; justify-content: center; padding: 20px; background: var(--color-overlay); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); font-family: var(--cbm-font); animation: cancel-booking-overlay-in 0.28s cubic-bezier(0.25, 0.1, 0.25, 1); } .cancel-booking-modal.active { display: flex; } .cancel-booking-modal-content { display: flex; flex-direction: column; width: min(100%, 420px); max-height: min(90dvh, 560px); overflow: hidden; position: relative; border-radius: var(--cbm-radius); background: var(--cbm-bg); box-shadow: var(--shadow-surface-lg); animation: cancel-booking-panel-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .cancel-booking-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: 16px 18px 12px; background: var(--color-surface-glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--cbm-separator); } .cancel-booking-modal__title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--cbm-text); } .cancel-booking-modal-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin: 0; padding: 0; border: 0.5px solid var(--cbm-separator); border-radius: 999px; background: var(--color-surface-glass-strong); color: var(--cbm-secondary); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-surface-sm); transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1); } .cancel-booking-modal-close:hover { color: var(--cbm-text); background: var(--cbm-surface); } .cancel-booking-modal-close:active { transform: scale(0.96); } .cancel-booking-modal-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cancel-booking-modal__subtitle { margin: 0; font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.45; color: var(--cbm-secondary); text-align: center; } .cancel-booking-modal .warning-message { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 14px 16px; border: none; border-radius: var(--cbm-radius-inner); background: var(--cbm-surface); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px var(--cbm-separator); } .cancel-booking-modal .warning-message i { display: none; } .cancel-booking-modal .warning-message p { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.006em; line-height: 1.5; color: var(--cbm-secondary); } .cancel-booking-modal .warning-message p:last-child { margin-bottom: 0; } .cancel-booking-modal .warning-message p strong { display: block; margin-bottom: 4px; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cbm-text); } .cancel-booking-modal .modal-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 4px; } .cancel-booking-modal .btn-keep, .cancel-booking-modal .btn-cancel-confirm { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 0 18px; border: none; border-radius: 980px; font-family: var(--cbm-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; cursor: pointer; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease; } .cancel-booking-modal .btn-keep i, .cancel-booking-modal .btn-cancel-confirm i { display: none; } .cancel-booking-modal .btn-keep { background: var(--cbm-surface); color: var(--primary); box-shadow: inset 0 0 0 0.5px var(--cbm-separator); } .cancel-booking-modal .btn-keep:hover { background: rgba(68, 93, 239, 0.08); color: var(--primary-hover); box-shadow: inset 0 0 0 0.5px rgba(68, 93, 239, 0.32); } .cancel-booking-modal .btn-cancel-confirm { background: var(--cbm-danger); color: #fff; box-shadow: none; } .cancel-booking-modal .btn-cancel-confirm:hover { background: var(--cbm-danger-hover); } .cancel-booking-modal .btn-keep:active, .cancel-booking-modal .btn-cancel-confirm:active { transform: scale(0.98); } .cancel-booking-modal .btn-keep:focus-visible, .cancel-booking-modal .btn-cancel-confirm:focus-visible, .cancel-booking-modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .cancel-booking-modal-header { display: none; } @keyframes cancel-booking-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cancel-booking-panel-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (max-width: 768px) { .cancel-booking-modal { align-items: flex-end; padding: 0; } .cancel-booking-modal .cancel-booking-modal-content { position: relative; inset: auto; width: 100%; max-width: 100%; max-height: 85dvh; border-radius: 20px 20px 0 0; animation: cancel-booking-sheet-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)); } .cancel-booking-modal-body { padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))); } } @keyframes cancel-booking-sheet-in { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .cancel-booking-modal, .cancel-booking-modal-content { animation: none; } .cancel-booking-modal-close, .cancel-booking-modal .btn-keep, .cancel-booking-modal .btn-cancel-confirm { transition: none; } .cancel-booking-modal-close:active, .cancel-booking-modal .btn-keep:active, .cancel-booking-modal .btn-cancel-confirm:active { transform: none; } } .bookings-section { margin-top: 0.5rem; } .bookings-list { display: block; } .booking-list { display: flex; flex-direction: column; gap: 0.5rem; } .booking-list-row { --blr-font: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; --blr-surface: #fff; --blr-surface-hover: #fbfbfc; --blr-fill: #f5f5f7; --blr-text: #1d1d1f; --blr-secondary: #3a3a3c; --blr-muted: #8e8e93; --blr-border: rgba(60, 60, 67, 0.14); --blr-status-awaiting-bg: #fef3e2; --blr-status-awaiting: #8b572a; --blr-status-confirmed-bg: rgba(34, 197, 94, 0.12); --blr-status-confirmed: #15803d; --blr-status-completed-bg: rgba(59, 130, 246, 0.12); --blr-status-completed: #1d4ed8; --blr-status-cancelled-bg: rgba(239, 68, 68, 0.1); --blr-status-cancelled: #b91c1c; --blr-date-col: 5.25rem; --blr-fleet-col: 14.5rem; --blr-price-col: 5.25rem; --blr-status-col: 10rem; --blr-ref-col: 5.75rem; --blr-chevron-col: 1.25rem; --blr-connector-col: 5.25rem; display: grid; grid-template-columns: var(--blr-date-col) minmax(0, 1fr) var(--blr-fleet-col) var(--blr-price-col) var(--blr-status-col) var(--blr-ref-col) var(--blr-chevron-col); grid-template-areas: "date route fleet price status ref chevron"; align-items: center; column-gap: 0.75rem; row-gap: 0; min-height: 3.25rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--blr-surface); color: inherit; text-decoration: none; font-family: var(--blr-font); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 0.5px rgba(60, 60, 67, 0.12); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .booking-list-row:hover { color: inherit; background: var(--blr-surface-hover); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 0 0 0.5px rgba(60, 60, 67, 0.14); } .booking-list-row:active { background: var(--blr-fill); } .booking-list-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .booking-list-row__date { grid-area: date; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.0625rem; min-width: 0; padding-right: 0.75rem; border-right: 1px solid var(--blr-border); line-height: 1.15; color: var(--blr-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .booking-list-row__date-compact { display: inline-flex; flex-direction: column; gap: 0.0625rem; } .booking-list-row__date-full { display: none; } .booking-list-row__date-day { font-size: 0.875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--blr-text); } .booking-list-row__date-year { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--blr-muted); } .booking-list-row__route { grid-area: route; display: grid; grid-template-columns: minmax(0, 1fr) var(--blr-connector-col) minmax(0, 1fr); align-items: center; column-gap: 0.5rem; min-width: 0; overflow: hidden; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--blr-text); } .booking-list-row__endpoint { display: inline-flex; align-items: center; gap: 0.375rem; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } .booking-list-row__flag { display: inline-flex; flex-shrink: 0; align-items: center; line-height: 1; } .booking-list-row__flag .flag-icon { width: 1rem; height: 0.75rem; border-radius: 1px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); } .booking-list-row__code { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: 1.375rem; padding: 0.125rem 0.4375rem; border-radius: 5px; background: var(--blr-fill); border: 1px solid var(--blr-border); color: var(--blr-secondary); font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; } .booking-list-row__city { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .booking-list-row__airport { display: none; } .booking-list-row__meta { display: contents; } .booking-list-row__fleet { grid-area: fleet; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; overflow: hidden; padding-left: 0.75rem; border-left: 1px solid var(--blr-border); } .booking-list-row__aircraft { display: flex; flex-direction: column; min-width: 0; } .booking-list-row__aircraft-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--blr-secondary); } .booking-list-row__aircraft-category { display: none; } .booking-list-row__price { grid-area: price; box-sizing: border-box; width: 100%; min-width: 0; justify-self: stretch; padding-left: 0.75rem; border-left: 1px solid var(--blr-border); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--blr-secondary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .booking-list-row__topline { display: contents; } .booking-list-row__status-col { grid-area: status; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.125rem; width: 100%; max-width: 100%; min-width: 0; min-height: 100%; padding: 0 0.5rem 0 0.75rem; border-left: 1px solid var(--blr-border); } .booking-list-row__status-badge { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.375rem; max-width: 100%; min-width: 0; padding: 0; border: none; background: transparent; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--blr-text); text-align: left; } .booking-list-row__status-dot { display: none; } .booking-list-row__status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .booking-list-row__status-badge--awaiting { color: #c2410c; } .booking-list-row__status-badge--confirmed { color: #15803d; } .booking-list-row__status-badge--completed { color: #1d4ed8; } .booking-list-row__status-badge--cancelled, .booking-list-row__status-badge--declined { color: #b91c1c; } .booking-list-row__status-badge--airline { color: #7c3aed; } :root[data-theme="dark"] .booking-list-row__status-badge--airline { color: #a78bfa; } .booking-list-row__ref { grid-area: ref; box-sizing: border-box; width: 100%; min-width: 0; justify-self: stretch; padding-left: 0.25rem; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--blr-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .booking-list-row__footer { display: contents; } .booking-list-row__pax { display: none; } .booking-list-row__options { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; font-weight: 500; line-height: 1.25; color: var(--blr-secondary); white-space: nowrap; text-align: left; } .booking-list-row__options.is-empty { display: none; } .booking-list-row__chevron { grid-area: chevron; display: inline-flex; align-items: center; justify-content: center; color: #8e8e93; font-size: 0.75rem; line-height: 1; } .booking-list-row__connector { box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } .booking-list-row__multileg { max-width: 100%; padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--primary-light); border: none; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--primary-dark); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .booking-list-row__arrow { flex-shrink: 0; font-size: 0.8125rem; font-weight: 600; color: var(--blr-muted); line-height: 1; } .booking-list-row__via { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--blr-muted); text-align: center; } @media (max-width: 768px) { .booking-list-row__connector { align-self: center; width: auto; max-width: 7rem; margin-top: 0.375rem; gap: 0.25rem; overflow: visible; } .booking-list-row__multileg { font-size: 0.625rem; padding: 0.125rem 0.4375rem; border-radius: 999px; } .booking-list-row__arrow { margin-top: 0; font-size: 0.875rem; font-weight: 500; } .booking-list-row__via { padding: 0.1875rem 0.5rem; border-radius: 999px; background: var(--blr-fill); font-weight: 600; color: var(--blr-secondary); } } :root[data-theme="dark"] .booking-list-row { --blr-surface: var(--color-surface); --blr-surface-hover: var(--color-surface-raised); --blr-fill: var(--color-control); --blr-text: var(--color-text); --blr-secondary: var(--color-text-secondary); --blr-muted: var(--color-text-muted); --blr-border: var(--color-border-subtle); --blr-status-awaiting-bg: rgba(245, 158, 11, 0.14); --blr-status-awaiting: #fbbf24; --blr-status-confirmed-bg: rgba(34, 197, 94, 0.16); --blr-status-confirmed: #4ade80; --blr-status-completed-bg: rgba(59, 130, 246, 0.16); --blr-status-completed: #60a5fa; --blr-status-cancelled-bg: rgba(239, 68, 68, 0.14); --blr-status-cancelled: #f87171; box-shadow: var(--shadow-surface-sm); } :root[data-theme="dark"] .booking-list-row:hover { box-shadow: var(--shadow-surface); } @media (max-width: 1100px) { .booking-list-row { --blr-fleet-col: 12.5rem; --blr-price-col: 5rem; --blr-status-col: 9.5rem; --blr-connector-col: 4.75rem; grid-template-columns: 4.75rem minmax(0, 1fr) var(--blr-fleet-col) var(--blr-price-col) var(--blr-status-col) var(--blr-chevron-col); grid-template-areas: "date route fleet price status chevron"; column-gap: 0.625rem; } .booking-list-row__ref { display: none; } } @media (max-width: 900px) { .booking-list-row { --blr-price-col: 5rem; --blr-status-col: 9rem; --blr-connector-col: 4.5rem; grid-template-columns: 4.75rem minmax(0, 1fr) var(--blr-price-col) var(--blr-status-col) var(--blr-chevron-col); grid-template-areas: "date route price status chevron" "date fleet price status chevron"; gap: 0.25rem 0.625rem; } .booking-list-row__status-col { grid-row: 1 / -1; } .booking-list-row__fleet { display: inline-flex; width: auto; padding-left: 0; border-left: none; } .booking-list-row__price { align-self: center; grid-row: 1 / -1; } } @media (max-width: 768px) { .booking-list { gap: 0.75rem; } .booking-list-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.875rem; min-height: 0; padding: 1rem 1.125rem; border-radius: 20px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), inset 0 0 0 0.5px rgba(60, 60, 67, 0.08); } .booking-list-row__topline { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; } .booking-list-row__status-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25rem; width: auto; max-width: calc(100% - 5.5rem); min-height: 0; padding: 0; border-left: none; } .booking-list-row__status-badge { grid-area: auto; grid-row: auto; justify-self: auto; align-self: auto; justify-content: flex-start; width: auto; max-width: 100%; min-height: 1.625rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; border-left: none; border-radius: 999px; background: var(--blr-status-awaiting-bg); color: var(--blr-status-awaiting); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em; text-align: left; } .booking-list-row__status-badge--awaiting { background: var(--blr-status-awaiting-bg); color: var(--blr-status-awaiting); } .booking-list-row__status-badge--confirmed { background: var(--blr-status-confirmed-bg); color: var(--blr-status-confirmed); } .booking-list-row__status-badge--completed { background: var(--blr-status-completed-bg); color: var(--blr-status-completed); } .booking-list-row__status-badge--cancelled, .booking-list-row__status-badge--declined { background: var(--blr-status-cancelled-bg); color: var(--blr-status-cancelled); } .booking-list-row__status-badge--airline { background: rgba(124, 58, 237, 0.12); color: #7c3aed; } :root[data-theme="dark"] .booking-list-row__status-badge--airline { background: rgba(167, 139, 250, 0.16); color: #a78bfa; } .booking-list-row__status-dot { display: block; flex-shrink: 0; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; } .booking-list-row__ref { grid-area: auto; display: block; flex-shrink: 0; justify-self: auto; padding-left: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blr-muted); } .booking-list-row__date { grid-area: auto; display: block; padding-right: 0; border-right: none; white-space: normal; } .booking-list-row__date-compact { display: none; } .booking-list-row__date-full { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; color: var(--blr-text); } .booking-list-row__route { grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 0.625rem; width: 100%; font-size: inherit; font-weight: inherit; } .booking-list-row__endpoint { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; overflow: visible; } .booking-list-row__endpoint--arrival { align-items: flex-end; text-align: right; } .booking-list-row__flag { margin-bottom: 0.125rem; } .booking-list-row__flag .flag-icon { width: 1.25rem; height: 0.875rem; border-radius: 2px; } .booking-list-row__code { min-height: 0; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--blr-text); font-family: var(--blr-font); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .booking-list-row__city { flex: 0 0 auto; overflow: visible; text-overflow: unset; white-space: normal; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--blr-text); } .booking-list-row__airport { display: block; max-width: 100%; font-size: 0.75rem; font-weight: 400; letter-spacing: -0.008em; line-height: 1.35; color: var(--blr-muted); } .booking-list-row__endpoint--arrival .booking-list-row__airport { text-align: right; } .booking-list-row__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; width: 100%; } .booking-list-row__fleet { grid-area: auto; display: flex; align-items: flex-start; min-width: 0; padding-left: 0; border-left: none; } .booking-list-row__aircraft { min-width: 0; gap: 0.125rem; } .booking-list-row__aircraft-model { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--blr-text); white-space: normal; } .booking-list-row__aircraft-category { display: block; font-size: 0.75rem; font-weight: 400; line-height: 1.3; color: var(--blr-muted); } .booking-list-row__price { grid-area: auto; justify-self: auto; width: auto; flex-shrink: 0; padding-left: 0; border-left: none; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; color: var(--blr-text); overflow: visible; text-overflow: clip; } .booking-list-row__footer { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; width: 100%; } .booking-list-row__pax { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.3; color: var(--blr-muted); } .booking-list-row__pax i { font-size: 0.75rem; opacity: 0.9; } .booking-list-row__pax--empty { display: none; } .booking-list-row__options { grid-area: auto; justify-self: auto; flex-shrink: 0; padding-left: 0; border-left: none; font-size: 0.75rem; font-weight: 500; line-height: 1.25; color: var(--blr-muted); white-space: nowrap; text-align: left; } .booking-list-row__options.is-empty { display: none; } .booking-list-row__chevron { display: none; } .booking-detail-summary__route { font-size: 1.125rem; } } .booking-detail-page .booking-detail-root { margin-top: 0.75rem; } .booking-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .booking-detail-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--primary); text-decoration: none; } .booking-detail-back-link:hover { color: var(--primary-hover); } .booking-detail-header__ref { font-size: 0.75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .booking-detail-summary { padding: 1rem 1.125rem; border-radius: 16px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } :root[data-theme="dark"] .booking-detail-summary { box-shadow: var(--shadow-surface-sm); } .booking-detail-summary__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .booking-detail-summary__date { font-size: 0.75rem; font-weight: 600; color: var(--color-text); } .booking-detail-summary__status { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; } .booking-detail-summary__status--awaiting { background: rgba(245, 158, 11, 0.12); color: #c2410c; } .booking-detail-summary__status--confirmed { background: rgba(34, 197, 94, 0.12); color: #15803d; } .booking-detail-summary__status--completed { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; } .booking-detail-summary__status--cancelled, .booking-detail-summary__status--declined { background: rgba(239, 68, 68, 0.1); color: #b91c1c; } .booking-detail-summary__route { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.2; } .booking-detail-summary__aircraft, .booking-detail-summary__variants { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--color-text-secondary); } .booking-detail-placeholder { margin-top: 0.875rem; padding: 1.25rem 1rem; border-radius: 14px; border: 1px dashed var(--color-border-strong); background: var(--color-surface-muted); text-align: center; } .booking-detail-placeholder p { margin: 0; font-size: 0.8125rem; color: var(--color-text-secondary); } .booking-detail-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 12rem; padding: 2rem 1rem; text-align: center; border-radius: 16px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } :root[data-theme="dark"] .booking-detail-state { box-shadow: var(--shadow-surface-sm); } .booking-detail-state i { font-size: 1.5rem; color: var(--color-text-muted); } .booking-detail-state h1 { font-size: 1.125rem; font-weight: 600; color: var(--color-text); } .booking-detail-state p { margin: 0; max-width: 22rem; font-size: 0.875rem; color: var(--color-text-secondary); } .booking-detail-page { --bd-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --bd-text: var(--color-text); --bd-label: var(--color-text-muted); --bd-secondary: var(--color-text-secondary); --bd-fill: var(--color-control); --bd-surface: var(--color-surface); --bd-separator: var(--color-border-subtle); --bd-gallery-media-fill: var(--bd-fill); --bd-offer-btn-bg: var(--bd-text); --bd-offer-btn-fg: var(--color-text-inverse); --bd-offer-btn-bg-hover: color-mix(in srgb, var(--bd-text) 88%, #000); --bd-radius: 20px; --bd-radius-sm: 14px; background: var(--color-canvas); } :root[data-theme="dark"] .booking-detail-page { --bd-gallery-media-fill: var(--color-canvas); --bd-offer-btn-bg-hover: color-mix(in srgb, var(--bd-text) 84%, var(--color-surface-strong)); } .booking-detail-page .container { max-width: 1400px; width: 100%; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .booking-detail-page .bookings-section { margin-top: 1.25rem; padding-bottom: 2rem; } .booking-detail-page .booking-detail-root { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0; font-family: var(--bd-font); } .booking-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .booking-detail-toolbar__meta { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; } .booking-detail-toolbar__meta .booking-detail-summary__status { flex-shrink: 0; min-height: 1.75rem; padding: 0.3rem 0.8rem; font-size: 0.875rem; font-weight: 650; letter-spacing: -0.01em; } .booking-detail-toolbar__ref { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bd-label); font-variant-numeric: tabular-nums; } .booking-detail-page .booking-detail-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bd-secondary); text-decoration: none; } .booking-detail-page .booking-detail-back-link:hover { color: var(--bd-text); } .booking-detail-hero { padding: 1.25rem 1.375rem 1.375rem; border-radius: var(--bd-radius); background: var(--bd-surface); box-shadow: var(--shadow-surface-sm); } .booking-detail-hero__stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr); gap: 1.25rem 1.5rem; align-items: stretch; margin: 0; } .booking-detail-hero__route-pane { display: flex; flex-direction: column; min-width: 0; min-height: 100%; gap: 0.625rem; } .booking-detail-hero__date { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--bd-text); } .booking-detail-hero__route-pane .booking-detail-meta { flex: 1 1 auto; margin: 0; min-height: 0; } .booking-detail-text-link { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: var(--primary); cursor: pointer; } .booking-detail-text-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 0.18em; } .booking-detail-hero__map-pane { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; min-height: 100%; } .booking-detail-hero__map-pane .bd-journey__map-frame { flex: 1 1 auto; height: auto; min-height: 280px; max-height: none; } .booking-detail-hero__map-pane .bd-journey__map, .booking-detail-hero__map-pane #booking-hero-route-map { height: 100%; min-height: 280px; } .booking-detail-hero__map-pane .bd-journey__stats { flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; } .booking-detail-hero__map-pane .bd-journey__stat { padding: 0.5rem 0.625rem; border-radius: 10px; background: var(--bd-fill); box-shadow: inset 0 0 0 0.5px var(--color-border-subtle); } .booking-detail-hero__map-pane .bd-journey__stat-label { margin-bottom: 0.125rem; font-size: 0.5625rem; } .booking-detail-hero__map-pane .bd-journey__stat-value { font-size: 0.75rem; font-weight: 600; line-height: 1.3; } .bd-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem 1rem; align-items: start; margin: 0; } .bd-route__endpoint { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } .bd-route__city-row { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; } .bd-route__city-row .flag-icon { width: 1.125rem; height: 0.8125rem; flex-shrink: 0; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); } .bd-route__city { font-size: clamp(1rem, 1.55vw, 1.125rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; color: var(--bd-text); } .bd-route__airport { margin: 0; font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.008em; line-height: 1.4; color: var(--bd-secondary); } .bd-route__code { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.35rem; min-height: 1.375rem; padding: 0.18rem 0.5rem; border-radius: 6px; background: var(--bd-fill); box-shadow: inset 0 0 0 0.5px var(--bd-separator); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bd-secondary); font-variant-numeric: tabular-nums; } .bd-route__divider { width: 1px; align-self: stretch; min-height: 4.5rem; margin-top: 0.15rem; background: var(--bd-separator); } .booking-detail-hero__date-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .bd-route__multileg { flex-shrink: 0; padding: 0.125rem 0.4375rem; border-radius: 4px; background: var(--primary-light); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--primary-dark); text-transform: uppercase; white-space: nowrap; } .bd-route__legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 0.5rem; margin: 0.875rem 0 0; padding: 0; list-style: none; } .bd-route__leg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "index codes" "index cities"; column-gap: 0.625rem; row-gap: 0.125rem; align-items: center; padding: 0.625rem 0.75rem; border-radius: 12px; background: var(--bd-fill); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .bd-route__leg-index { grid-area: index; display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); font-size: 0.6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .bd-route__leg-codes { grid-area: codes; display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--bd-text); font-variant-numeric: tabular-nums; } .bd-route__leg-sep { color: var(--bd-label); font-weight: 500; } .bd-route__leg-cities { grid-area: cities; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 450; letter-spacing: -0.01em; color: var(--bd-secondary); } .booking-detail-hero__hint { margin: 0; font-size: 0.8125rem; font-weight: 500; color: #15803d; } .booking-detail-meta { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0.85rem 0.95rem 0.75rem; border-radius: var(--bd-radius-sm); background: var(--bd-fill); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .booking-detail-meta__header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.55rem; box-shadow: 0 1px 0 var(--bd-separator); } .booking-detail-meta__price { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.55rem; box-shadow: 0 -1px 0 var(--bd-separator); } .booking-detail-meta__price-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bd-secondary); text-transform: none; } .booking-detail-meta__price-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--bd-text); font-variant-numeric: tabular-nums; text-align: right; } .booking-detail-meta__segments { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.55rem; flex: 1 1 auto; min-height: 0; align-items: stretch; } .booking-detail-meta__segment { display: flex; flex-direction: column; min-width: 0; padding: 0.55rem 0.65rem; border-radius: 10px; background: var(--color-surface-glass); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .booking-detail-meta__facts { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; flex: 1 1 auto; justify-content: space-evenly; } .booking-detail-meta__item { min-width: 0; } .booking-detail-meta__item dt { margin: 0 0 0.1rem; font-size: 0.5625rem; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--bd-label); } .booking-detail-meta__item dd { margin: 0; font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; color: var(--bd-text); word-break: break-word; } .booking-detail-meta__booking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.75rem; margin: 0; padding-top: 0.45rem; box-shadow: 0 -1px 0 var(--bd-separator); } .booking-detail-meta__booking .booking-detail-meta__item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .booking-detail-meta__booking .booking-detail-meta__item dt { margin: 0; flex-shrink: 0; } .booking-detail-meta__booking .booking-detail-meta__item dd { text-align: right; } .booking-detail-meta__booked { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin: 0; min-width: 0; } .booking-detail-meta__booked-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.005em; color: var(--bd-label); } .booking-detail-meta__booked-value { font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.015em; color: var(--bd-text); } .booking-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.35rem; padding: 0 0.125rem; } .booking-detail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 34px; padding: 0.375rem 0.85rem; border: none; border-radius: 980px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; } .booking-detail-btn i { font-size: 0.75rem; opacity: 0.85; } .booking-detail-btn:active { transform: scale(0.98); } .booking-detail-btn--primary { background: var(--color-control); color: var(--bd-text); } .booking-detail-btn--primary:hover { background: var(--color-control-hover); } .booking-detail-btn--danger { background: transparent; color: #ff3b30; box-shadow: inset 0 0 0 0.5px rgba(255, 59, 48, 0.28); } .booking-detail-btn--danger:hover { background: rgba(255, 59, 48, 0.08); } .booking-detail-section { display: flex; flex-direction: column; gap: 0.75rem; } .booking-detail-section__header { display: flex; flex-direction: column; gap: 0.125rem; padding: 0 0.125rem; } .booking-detail-section__title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--bd-text); } .booking-detail-section__subtitle { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--bd-label); } .booking-detail-options-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 11rem; padding: 2rem 1.25rem; text-align: center; border-radius: var(--bd-radius); background: linear-gradient( 180deg, var(--color-surface-muted) 0%, var(--color-surface) 100% ); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .booking-detail-options-placeholder__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.25rem; border-radius: 50%; background: rgba(68, 93, 239, 0.1); color: var(--primary); font-size: 1.125rem; } .booking-detail-options-placeholder h3 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; color: var(--bd-text); } .booking-detail-options-placeholder p { margin: 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.45; color: var(--bd-secondary); } .booking-detail-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 14rem; padding: 2rem 1rem; text-align: center; border-radius: var(--bd-radius); background: var(--bd-surface); box-shadow: var(--shadow-surface-sm); } .booking-detail-state i { font-size: 1.5rem; color: var(--bd-label); } .booking-detail-state h1 { margin: 0; font-size: 1.125rem; font-weight: 650; color: var(--bd-text); } .booking-detail-state p { margin: 0; max-width: 22rem; font-size: 0.875rem; color: var(--bd-secondary); } .bd-journey__map-frame { position: relative; height: 220px; border-radius: 22px; overflow: hidden; background: var(--color-surface-strong); box-shadow: var(--shadow-surface); } .bd-journey__map, .bd-journey__map-frame #booking-hero-route-map, .bd-journey__map-frame #flight-route-map { width: 100%; height: 100%; min-height: 220px; } .bd-journey__map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 0.875rem; font-weight: 500; color: var(--bd-label); } .bd-journey__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .bd-journey__stats[hidden] { display: none !important; } .bd-journey__stat { padding: 0.75rem 0.875rem; border-radius: 14px; background: var(--bd-surface); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .bd-journey__stat-label { display: block; margin-bottom: 0.25rem; font-size: 0.625rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bd-label); } .bd-journey__stat-value { display: block; font-size: 0.875rem; font-weight: 650; letter-spacing: -0.02em; color: var(--bd-text); line-height: 1.25; } @media (max-width: 1024px) { .booking-detail-hero__stage { grid-template-columns: 1fr; } .booking-detail-hero__map-pane .bd-journey__map-frame, .booking-detail-hero__map-pane .bd-journey__map, .booking-detail-hero__map-pane #booking-hero-route-map { min-height: 240px; max-height: none; } } @media (max-width: 768px) { .booking-detail-page .booking-detail-root { gap: 1.125rem; } .booking-detail-page .bookings-section { margin-top: 1rem; } .booking-detail-hero { padding: 1rem 1rem 1.125rem; border-radius: 16px; } .bd-route { gap: 0.75rem; } .bd-route__city { font-size: 1.0625rem; } .bd-route__legs { grid-template-columns: 1fr; margin-top: 0.75rem; } .booking-detail-hero__date { font-size: 1rem; } .booking-detail-meta { padding: 0.75rem 0.8rem 0.65rem; } .booking-detail-meta__price-value { font-size: 1.125rem; } .booking-detail-meta__segments { gap: 0.45rem; } .booking-detail-hero__map-pane .bd-journey__stat-value { font-size: 0.6875rem; } .booking-detail-actions { flex-direction: column; } .booking-detail-btn { width: 100%; } } @media (max-width: 480px) { .booking-detail-meta__segments { grid-template-columns: 1fr; } .bd-route { grid-template-columns: 1fr; gap: 0.875rem; } .bd-route__divider { width: 100%; height: 1px; min-height: 0; margin: 0; } .booking-detail-toolbar__meta { flex-wrap: wrap; justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .booking-detail-btn { transition: none; } .booking-detail-btn:active { transform: none; } } .bd-opt-root { min-height: 4rem; } .bd-opt-list { display: flex; flex-direction: column; gap: 1.15rem; } .bd-opt-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr); grid-template-areas: "main aside"; gap: 1rem 1.5rem; padding: 0.75rem; border-radius: 24px; background: var(--bd-surface, #fff); box-shadow: var(--shadow-surface); transition: box-shadow 0.2s ease, transform 0.2s ease; } .bd-opt-card.is-offer-requested { box-shadow: var(--shadow-surface), inset 0 0 0 1px rgba(10, 127, 115, 0.28); } .bd-opt-card.is-email-focus { box-shadow: var(--shadow-surface), inset 0 0 0 2px rgba(68, 93, 239, 0.45); } .bd-opt-card__main { grid-area: main; display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; padding: 0.65rem 0 0.15rem 0.65rem; } .bd-opt-card__head { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .bd-opt-card__stack { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; margin-top: auto; } .bd-opt-card__aside { grid-area: aside; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; min-height: 0; } .bd-opt-card:not([data-multi-leg="1"]) .bd-opt-specs { padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--bd-fill, #f5f5f7); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .bd-opt-aircraft { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .bd-opt-aircraft__eyebrow { margin: 0; color: var(--primary, #445def); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; } .bd-opt-aircraft__identity { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; } .bd-opt-card__title { max-width: 100%; margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 650; line-height: 1.16; letter-spacing: -0.03em; color: var(--bd-text, #1d1d1f); overflow-wrap: anywhere; } .bd-opt-aircraft__class { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; margin: 0; color: var(--bd-secondary, #6e6e73); font-size: 0.75rem; letter-spacing: -0.01em; } .bd-opt-aircraft__class strong { color: var(--bd-text, #1d1d1f); font-weight: 600; } .bd-opt-card .booking-detail-meta--option { flex: 1 1 auto; gap: 0.7rem; margin: 0; padding: 0; min-height: 0; justify-content: flex-start; background: transparent; box-shadow: none; } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__booking { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.15rem 0.1rem 0; } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__booking .booking-detail-meta__item dt { font-size: 0.8125rem; font-weight: 500; color: var(--bd-secondary, #6e6e73); } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__booking .booking-detail-meta__item dd { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__price { margin-top: auto; padding: 0.55rem 0.1rem 0; } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__price-label { font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.01em; color: var(--bd-text, #1d1d1f); } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__price-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; color: #0a7f73; } .bd-opt-card__media { flex: 1 1 auto; min-width: 0; min-height: 0; } .co-itin { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--bd-fill, #f5f5f7); box-shadow: inset 0 0 0 0.5px var(--bd-separator, rgba(60, 60, 67, 0.12)); } .co-itin--operator { background: var(--color-fill, #f5f5f7); box-shadow: inset 0 0 0 1px var(--color-border, rgba(60, 60, 67, 0.12)); } .co-itin__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .co-itin__label { color: var(--bd-label, #86868b); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .co-itin--operator .co-itin__label { color: var(--color-text-faint, #86868b); } .co-itin__badge { display: inline-flex; align-items: center; padding: 0.15rem 0.45rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #087f73; background: rgba(10, 127, 115, 0.1); } .co-itin__date { margin: 0; font-size: 0.75rem; font-weight: 650; color: var(--bd-secondary, #6e6e73); } .co-itin__legs { display: flex; flex-direction: column; gap: 0.5rem; } .co-itin-leg { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.65rem; border-radius: 12px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08); } .co-itin--operator .co-itin-leg { background: var(--color-surface, #fff); box-shadow: inset 0 0 0 1px var(--color-border, rgba(60, 60, 67, 0.1)); } .co-itin-leg__label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bd-label, #86868b); line-height: 1; } .co-itin--operator .co-itin-leg__label { color: var(--color-text-faint, #86868b); } .co-itin-leg__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 0.5rem; width: 100%; } .co-itin-leg__from, .co-itin-leg__to { display: grid; gap: 0.15rem; min-width: 0; } .co-itin-leg__from { justify-items: start; text-align: left; } .co-itin-leg__to { justify-items: end; text-align: right; } .co-itin-leg__code { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; } .co-itin-leg__code .flag-icon { width: 1.05rem; height: 0.72rem; border-radius: 1px; flex-shrink: 0; box-shadow: 0 0 0 0.5px rgba(60, 60, 67, 0.18); } .co-itin-leg__iata { font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.025em; color: var(--bd-text, #1d1d1f); font-variant-numeric: tabular-nums; } .co-itin--operator .co-itin-leg__iata { color: var(--color-text, #1d1d1f); } .co-itin-leg__place { font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--bd-secondary, #6e6e73); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .co-itin--operator .co-itin-leg__place { color: var(--color-text-secondary, #6e6e73); } .co-itin-leg__arrow { padding-top: 0.2rem; color: #087f73; font-size: 0.875rem; line-height: 1; opacity: 0.8; } .co-itin-leg__meta { margin: 0; font-size: 0.6875rem; font-weight: 550; color: var(--bd-secondary, #6e6e73); white-space: nowrap; overflow: hidden; max-width: 100%; } .co-itin--operator .co-itin-leg__meta { color: var(--color-text-secondary, #6e6e73); } .co-itin-leg__meta.is-meta-compact .co-itin-leg__ftime-label { display: none; } .co-itin--oneway .co-itin-leg__route { margin-top: 0.15rem; } @media (max-width: 900px) { .co-itin { padding: 0.7rem 0.75rem; gap: 0.55rem; } .co-itin-leg { padding: 0.55rem 0.6rem; gap: 0.35rem; } .co-itin-leg__route { column-gap: 0.4rem; } .co-itin-leg__iata { font-size: 1.0625rem; } .co-itin-leg__place { font-size: 0.6875rem; } .co-itin-leg__code .flag-icon { width: 0.95rem; height: 0.65rem; } .co-itin-leg__arrow { background: none; border-radius: 0; width: auto; height: auto; } } @media (max-width: 480px) { .co-itin { padding: 0.65rem 0.7rem; } .co-itin-leg { padding: 0.5rem 0.55rem; } } .bd-opt-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; margin: 0; padding: 0.55rem 0.15rem; min-width: 0; } .bd-opt-specs[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .bd-opt-specs[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-opt-specs[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-opt-specs__item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; padding: 0 0.5rem; text-align: center; border-left: 0.5px solid var(--bd-separator, rgba(60, 60, 67, 0.18)); } .bd-opt-specs__item:first-child { border-left: none; padding-left: 0.15rem; } .bd-opt-specs__item:last-child { padding-right: 0.15rem; } .bd-opt-specs__item:only-child { align-items: flex-start; text-align: left; } .bd-opt-specs__item dt { margin: 0; color: var(--bd-label, #86868b); font-size: 0.625rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } .bd-opt-specs__item dd { margin: 0; color: var(--bd-text, #1d1d1f); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .bd-opt-validity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 59, 48, 0.14); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 59, 48, 0.055), transparent); } .bd-opt-validity__icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: rgba(255, 59, 48, 0.1); color: #d92d20; } .bd-opt-validity__icon svg { width: 1rem; height: 1rem; } .bd-opt-validity__copy { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; color: var(--bd-secondary, #6e6e73); font-size: 0.75rem; line-height: 1.35; } .bd-opt-validity__copy strong { color: var(--bd-text, #1d1d1f); font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.01em; } .bd-opt-validity__time { color: #d92d20; font-size: 0.8125rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: 0.015em; white-space: nowrap; } .bd-opt-card.is-expired { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 0.5px rgba(60, 60, 67, 0.16); } .bd-opt-validity.is-expired { border-color: var(--bd-separator); background: var(--bd-fill, #f5f5f7); } .bd-opt-validity.is-expired .bd-opt-validity__icon { background: var(--color-control-hover); color: var(--bd-label, #86868b); } .bd-opt-offer-btn.is-expired, .bd-opt-offer-btn:disabled.is-expired { background: var(--bd-fill, #f5f5f7); color: var(--bd-label, #86868b); cursor: default; box-shadow: inset 0 0 0 1px var(--bd-separator); } @media (max-width: 640px) { .bd-opt-validity { padding: 0.65rem 0.7rem; } .bd-opt-validity__copy { font-size: 0.6875rem; } } .bd-opt-gallery { display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: var(--bd-fill, #f5f5f7); box-shadow: inset 0 0 0 1px var(--bd-separator); } .bd-opt-gallery__stage { position: relative; flex: 1 1 auto; min-height: 280px; background: var(--bd-gallery-media-fill, var(--bd-fill, #f5f5f7)); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .bd-opt-gallery__stage--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--color-control), var(--color-control-hover)); } .bd-opt-gallery__stage--empty .bd-opt-gallery__slide-img { max-width: 72%; max-height: 72%; width: auto; height: auto; object-fit: contain; opacity: 0.72; } .bd-opt-gallery__track { display: flex; height: 100%; will-change: transform; } .bd-opt-gallery__track.is-anim { transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } .bd-opt-gallery__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bd-gallery-media-fill, var(--bd-fill, #f5f5f7)); } .bd-opt-gallery__slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) brightness(1.08) saturate(1.05); transform: scale(1.2); opacity: 0.45; z-index: 0; } .bd-opt-gallery__slide-img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .bd-opt-gallery__nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: none; border-radius: 50%; background: var(--color-surface-glass-strong); color: var(--bd-text); cursor: pointer; transform: translateY(-50%); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .bd-opt-gallery__nav svg { width: 18px; height: 18px; } .bd-opt-gallery__nav:hover { background: var(--bd-surface); transform: translateY(-50%) scale(1.06); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); } .bd-opt-gallery__nav:active { transform: translateY(-50%) scale(0.96); } .bd-opt-gallery__nav--prev { left: 14px; } .bd-opt-gallery__nav--next { right: 14px; } .bd-opt-gallery__counter, .bd-opt-gallery__badge { position: absolute; z-index: 3; font-size: 11px; font-weight: 650; letter-spacing: 0.03em; color: var(--bd-text, #1d1d1f); background: var(--color-surface-glass-strong); border: 1px solid var(--bd-separator); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 980px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); } .bd-opt-gallery__counter { bottom: 14px; right: 14px; font-variant-numeric: tabular-nums; } .bd-opt-gallery__badge { top: 14px; left: 14px; font-size: 10px; } .bd-opt-gallery__thumbs { display: flex; gap: 8px; padding: 12px 14px; background: var(--bd-fill, #f5f5f7); border-top: 1px solid rgba(60, 60, 67, 0.1); overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bd-opt-gallery__thumbs::-webkit-scrollbar { display: none; } .bd-opt-gallery__thumb { flex: 0 0 auto; width: 68px; height: 52px; margin: 0; padding: 0; border: none; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bd-fill); box-shadow: inset 0 0 0 1px var(--bd-separator); opacity: 0.55; transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .bd-opt-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--bd-gallery-media-fill, var(--bd-fill)); } :root[data-theme="dark"] .booking-detail-page .bd-opt-gallery__slide-bg { filter: blur(40px) brightness(0.58) saturate(1.05); opacity: 0.34; } .bd-opt-gallery__thumb:hover { opacity: 0.82; transform: translateY(-1px); } .bd-opt-gallery__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px #445def, 0 2px 8px rgba(68, 93, 239, 0.18); } .bd-opt-gallery__thumb.is-static { cursor: default; opacity: 1; pointer-events: none; } .bd-opt-empty, .bd-opt-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 8rem; padding: 1.5rem 1rem; text-align: center; border-radius: var(--bd-radius, 20px); background: var(--bd-fill, #f5f5f7); box-shadow: inset 0 0 0 0.5px var(--bd-separator); color: var(--bd-secondary, #6e6e73); font-size: 0.875rem; } .bd-opt-empty p, .bd-opt-state p { margin: 0; } .bd-opt-card__footer { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; } .bd-opt-offer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; min-height: 2.75rem; margin: 0; padding: 0.7rem 1.1rem; border: none; border-radius: 980px; background: var(--bd-offer-btn-bg, var(--bd-text)); color: var(--bd-offer-btn-fg, var(--color-text-inverse)); font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } .bd-opt-offer-btn:hover:not(:disabled) { background: var(--bd-offer-btn-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-surface); } .bd-opt-offer-btn:active:not(:disabled) { transform: scale(0.98); } .bd-opt-offer-btn:focus-visible { outline: 3px solid rgba(10, 127, 115, 0.28); outline-offset: 3px; } .bd-opt-offer-btn.is-loading { opacity: 0.72; pointer-events: none; } .bd-opt-offer-btn.is-requested, .bd-opt-offer-btn:disabled.is-requested { background: rgba(10, 127, 115, 0.12); color: #0a7f73; cursor: default; box-shadow: inset 0 0 0 1px rgba(10, 127, 115, 0.22); } .bd-opt-offer-btn__check { font-size: 1rem; font-weight: 700; line-height: 1; } .bd-opt-offer-dialog { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 1.25rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .bd-opt-offer-dialog.is-open { opacity: 1; pointer-events: auto; } .bd-opt-offer-dialog__backdrop { position: absolute; inset: 0; background: var(--color-overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .bd-opt-offer-dialog__sheet { position: relative; z-index: 1; width: min(100%, 22.5rem); padding: 1.65rem 1.4rem 1.25rem; border-radius: 22px; background: var(--color-surface-glass-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px rgba(60, 60, 67, 0.12); text-align: center; transform: translateY(10px) scale(0.98); transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); } .bd-opt-offer-dialog.is-open .bd-opt-offer-dialog__sheet { transform: translateY(0) scale(1); } .bd-opt-offer-dialog__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 auto 0.85rem; border-radius: 999px; background: rgba(10, 127, 115, 0.12); color: #0a7f73; font-size: 1.25rem; font-weight: 700; } .bd-opt-offer-dialog__title { margin: 0 0 0.45rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; color: var(--bd-text); } .bd-opt-offer-dialog__body { margin: 0 0 1.15rem; font-size: 0.9375rem; line-height: 1.45; color: var(--bd-secondary); } .bd-opt-offer-dialog__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.6rem; margin: 0; padding: 0.65rem 1rem; border: none; border-radius: 980px; background: var(--bd-offer-btn-bg, var(--bd-text)); color: var(--bd-offer-btn-fg, var(--color-text-inverse)); font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; } .bd-opt-offer-dialog__btn:active { transform: scale(0.98); } .bd-opt-card__identity-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-width: 0; } .bd-opt-card__identity-row .bd-opt-aircraft { flex: 1 1 auto; } .bd-opt-pdf-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 0.3rem; min-height: 1.9rem; margin: 0; padding: 0.35rem 0.6rem; border: 1px solid var(--bd-separator); border-radius: 999px; background: transparent; color: var(--bd-secondary, #6e6e73); font: inherit; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.01em; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease; -webkit-tap-highlight-color: transparent; } .bd-opt-pdf-btn svg { width: 0.85rem; height: 0.85rem; } .bd-opt-pdf-btn:hover:not(:disabled) { border-color: rgba(68, 93, 239, 0.35); background: rgba(68, 93, 239, 0.07); color: var(--primary-dark, #2f40c2); } .bd-opt-pdf-btn:focus-visible { outline: 3px solid rgba(68, 93, 239, 0.24); outline-offset: 2px; } .bd-opt-pdf-btn:disabled { cursor: wait; opacity: 0.55; } @media (max-width: 480px) { .bd-opt-card__identity-row { gap: 0.5rem; } .bd-opt-pdf-btn { min-height: 1.8rem; padding: 0.3rem 0.5rem; } } @media (prefers-reduced-motion: reduce) { .bd-opt-pdf-btn { transition: none; } } .bd-opt-gallery:focus-visible, .bd-opt-gallery__nav:focus-visible, .bd-opt-gallery__thumb:focus-visible { outline: 3px solid rgba(10, 127, 115, 0.3); outline-offset: 2px; } @media (max-width: 900px) { .bd-opt-card { grid-template-columns: 1fr; gap: 0.85rem; padding: 0.75rem; } .bd-opt-card[data-multi-leg="1"] { grid-template-areas: "media" "head" "specs" "stack"; } .bd-opt-card[data-multi-leg="1"] .bd-opt-card__main, .bd-opt-card[data-multi-leg="1"] .bd-opt-card__aside { display: contents; } .bd-opt-card[data-multi-leg="1"] .bd-opt-card__head { grid-area: head; } .bd-opt-card[data-multi-leg="1"] .bd-opt-specs { grid-area: specs; } .bd-opt-card[data-multi-leg="1"] .bd-opt-card__stack { grid-area: stack; margin-top: 0; } .bd-opt-card[data-multi-leg="1"] .bd-opt-card__media { grid-area: media; } .bd-opt-card:not([data-multi-leg="1"]) { grid-template-areas: "media" "main"; } .bd-opt-card:not([data-multi-leg="1"]) .bd-opt-card__aside { grid-area: media; } .bd-opt-card:not([data-multi-leg="1"]) .bd-opt-card__main { grid-area: main; padding: 0.35rem 0.35rem 0.2rem; } .bd-opt-specs { padding: 0.65rem 0.75rem; border-radius: 12px; background: var(--bd-fill, #f5f5f7); box-shadow: inset 0 0 0 0.5px var(--bd-separator); } .bd-opt-gallery { height: auto; } .bd-opt-gallery__stage { flex: none; min-height: 0; aspect-ratio: 16 / 9; } } @media (max-width: 480px) { .bd-opt-card { gap: 0.75rem; padding: 0.5rem; border-radius: 18px; } .bd-opt-card__main { gap: 0.85rem; } .bd-opt-card:not([data-multi-leg="1"]) .bd-opt-card__main { padding: 0.25rem 0.15rem 0.1rem; } .bd-opt-card__head { gap: 0.8rem; } .bd-opt-card__stack { gap: 0.7rem; } .bd-opt-card__title { font-size: 1.25rem; line-height: 1.18; } .bd-opt-aircraft__class { font-size: 0.6875rem; } .bd-opt-specs { padding: 0.55rem 0.5rem; } .bd-opt-specs__item { padding: 0 0.35rem; } .bd-opt-specs__item:first-child, .bd-opt-specs__item:last-child { padding-left: 0.35rem; padding-right: 0.35rem; } .bd-opt-specs__item dt { font-size: 0.5625rem; } .bd-opt-specs__item dd { font-size: 0.8125rem; } .bd-opt-card .booking-detail-meta--option .booking-detail-meta__price-value { font-size: 1.375rem; } .bd-opt-offer-btn { min-height: 2.9rem; } .bd-opt-gallery { border-radius: 14px; } .bd-opt-gallery__thumb { width: 58px; height: 44px; } .bd-opt-gallery__nav { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .bd-opt-card, .bd-opt-offer-btn, .bd-opt-gallery__track, .bd-opt-gallery__nav, .bd-opt-gallery__thumb { scroll-behavior: auto; transition: none; } } .booking-warning-banner { --pcb-bg: var(--color-surface-glass-strong); --pcb-fill: var(--color-control); --pcb-text: var(--color-text); --pcb-label: var(--color-text-muted); --pcb-border: rgba(68, 93, 239, 0.38); --pcb-accent: #445def; --pcb-accent-soft: rgba(68, 93, 239, 0.12); --pcb-radius: 16px; --pcb-shadow: var(--shadow-surface); --pcb-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; box-sizing: border-box; margin-bottom: 1.25rem; padding: 0.875rem 1rem; border: 1px solid var(--pcb-border); border-radius: var(--pcb-radius); background: var(--pcb-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--pcb-shadow); animation: profile-banner-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes profile-banner-enter { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .booking-warning-banner .profile-banner-body { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .booking-warning-banner .profile-banner-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--pcb-accent-soft); color: var(--pcb-accent); font-size: 1rem; line-height: 1; } .booking-warning-banner .profile-banner-message { margin: 0; font-family: var(--pcb-font); font-size: 0.875rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.45; color: var(--pcb-text); } .booking-warning-banner .profile-banner-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 2.125rem; padding: 0.4375rem 0.9375rem; border: none; border-radius: 999px; background: var(--pcb-accent); color: var(--primary-contrast); font-family: var(--pcb-font); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .booking-warning-banner .profile-banner-action:hover { background: #0b9a8e; color: var(--primary-contrast); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(68, 93, 239, 0.24); } .booking-warning-banner .profile-banner-action:focus-visible { outline: 2px solid rgba(68, 93, 239, 0.45); outline-offset: 2px; } .booking-warning-banner .warning-icon, .booking-warning-banner .warning-text, .booking-warning-banner .complete-profile-link { display: none; } @media (max-width: 640px) { .booking-warning-banner { flex-direction: column; align-items: stretch; gap: 0.875rem; padding: 0.9375rem 1rem 1rem; text-align: left; } .booking-warning-banner .profile-banner-action { width: 100%; } } .profile-booking-banner-host { box-sizing: border-box; max-width: 560px; margin: 1rem auto 0; padding: 0 1.125rem; } .profile-booking-banner-host[hidden] { display: none; } .profile-booking-banner { margin-bottom: 0; } .search-container { --sf-bg: #ffffff; --sf-fill: #f2f2f7; --sf-fill-elevated: #eaeaed; --sf-separator: rgba(60, 60, 67, 0.14); --sf-label: #8e8e93; --sf-text: #1d1d1f; --sf-radius-shell: 20px; --sf-radius-field: 14px; --sf-radius-control: 10px; --sf-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --sf-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; position: relative; isolation: isolate; background: transparent; border: none; border-radius: var(--sf-radius-shell); box-shadow: none; margin: var(--space-lg) 0; overflow: hidden; } .search-container:has(.airport-dropdown.active), .search-container:has(.fpn-class-picker.is-open), .search-container:has(.date-range-picker-open) { overflow: visible; } :root[data-theme="dark"] .search-container { --sf-bg: rgba(28, 30, 36, 0.55); --sf-fill: rgba(255, 255, 255, 0.035); --sf-fill-elevated: rgba(255, 255, 255, 0.06); --sf-separator: rgba(255, 255, 255, 0.08); --sf-label: var(--color-text-muted); --sf-text: var(--color-text); --sf-shadow: none; } .search-container::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--sf-bg); box-shadow: var(--sf-shadow), inset 0 0 0 0.5px rgba(60, 60, 67, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dark"] .search-container::before { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); } .search-container > * { position: relative; z-index: 1; } .search-container:has(.airport-dropdown.active) .search-form, .search-container:has(.date-range-picker-open) .search-form { z-index: 40; } .search-container .form-row-single:has(.airport-dropdown.active), .search-container .form-group:has(.airport-dropdown.active), .search-container .form-group:has(.date-range-picker-open) { z-index: 50; } .search-container:has(.fpn-class-picker.is-open) .search-charter-slot { z-index: 40; } .search-container .search-header { padding: 1.25rem 1.25rem 0.75rem; background: transparent; } .search-container:not(:has(.search-form)) .search-header { padding-bottom: 1.25rem; } .search-container:not(:has(.search-form)) { margin-bottom: 0.5rem; } .search-container .search-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 3px; background: var(--sf-fill); border: none; border-bottom: none; border-radius: var(--sf-radius-control); margin-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .search-container .search-tabs::-webkit-scrollbar { display: none; } .search-container .search-tab { flex: 1 1 0; min-width: 0; margin-bottom: 0; padding: 0.5rem 0.5rem; border: none; border-bottom: none; border-radius: 8px; background: transparent; color: var(--sf-label); font-family: var(--sf-font); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; text-align: center; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .search-container .search-tab:hover { background: rgba(255, 255, 255, 0.45); color: var(--sf-text); border-bottom-color: transparent; } :root[data-theme="dark"] .search-container .search-tab:hover { background: var(--color-surface-glass); } .search-container .search-tab.active { background: var(--sf-bg); color: var(--sf-text); font-weight: 600; border-bottom: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04); } :root[data-theme="dark"] .search-container .search-tab.active { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); } .search-container .search-tab.active:hover { background: var(--sf-bg); color: var(--sf-text); border-bottom-color: transparent; } .search-container .search-form { padding: 0.75rem 1.25rem 1.25rem; font-family: var(--sf-font); background: transparent; border-radius: 0; margin: 0; } .search-container .form-row-single { display: grid; gap: 0; align-items: stretch; margin-bottom: 0.875rem; padding: 0.375rem; background: var(--sf-fill); border-radius: var(--sf-radius-field); transition: background 0.2s ease, box-shadow 0.2s ease; } .search-container .form-row-single .date-group { width: 100%; min-width: 0; max-width: none; flex: none; } .search-container .search-form .date-range-wrapper { width: 100%; min-width: 0; overflow: visible; } .search-container .form-row-single:focus-within { background: var(--sf-bg); box-shadow: 0 0 0 3px var(--color-focus-ring), inset 0 0 0 1px rgba(68, 93, 239, 0.22); } .search-container .form-row-single .form-group { position: relative; min-width: 0; margin-bottom: 0; padding: 0.375rem 0.5rem; gap: 0.125rem; } .search-container .form-row-single .form-group:not(:last-child)::after { content: ""; position: absolute; top: 18%; right: 0; bottom: 14%; width: 1px; background: var(--sf-separator); pointer-events: none; } .search-container .search-form .form-group label, .search-container .search-form .date-label { margin: 0 0 0 0.5rem; font-family: var(--sf-font); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--sf-label); } .search-container .search-form .input-wrapper input, .search-container .search-form .date-range-input { width: 100%; min-height: 28px; padding: 0.125rem 0.5rem 0.375rem; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--sf-text); font-family: var(--sf-font); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; line-height: 1.235; transition: none; overflow: visible; text-overflow: clip; white-space: nowrap; } .search-container .search-form .input-wrapper input::placeholder, .search-container .search-form .date-range-input::placeholder { color: rgba(60, 60, 67, 0.45); } :root[data-theme="dark"] .search-container .search-form .input-wrapper input::placeholder, :root[data-theme="dark"] .search-container .search-form .date-range-input::placeholder { color: var(--color-text-faint); } .search-container .search-form .input-wrapper input:focus, .search-container .search-form .date-range-input:focus { outline: none; border: none; box-shadow: none; } .search-container .search-form .input-wrapper input:hover, .search-container .search-form .date-range-input:hover { border: none; box-shadow: none; } .search-container .search-form .input-wrapper input.invalid { background: rgba(220, 38, 38, 0.06); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35); } .search-container .search-form input.location-loading { background: linear-gradient( 90deg, transparent 0%, rgba(68, 93, 239, 0.08) 50%, transparent 100% ); background-size: 200% 100%; } .search-container .search-form .input-icon { display: none; } .search-container .search-form .airport-dropdown { margin-top: 0.5rem; border: none; border-radius: var(--sf-radius-field); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } :root[data-theme="dark"] .search-container .search-form .airport-dropdown { box-shadow: var(--shadow-surface-lg), 0 0 0 0.5px var(--color-border-subtle); } .search-container .search-form .airport-option { border-left: none; border-bottom: 1px solid rgba(60, 60, 67, 0.06); min-height: 44px; padding: 0.625rem 0.875rem; } :root[data-theme="dark"] .search-container .search-form .airport-option { border-bottom-color: var(--color-border-subtle); } .search-container .search-form .airport-option:hover, .search-container .search-form .airport-option.selected, .search-container .search-form .airport-option.highlighted { background: rgba(68, 93, 239, 0.08); border-left: none; } .search-container .search-form .flight-details { display: flex; align-items: stretch; gap: 0.875rem; margin: 0; padding: 0; background: transparent; border: none; } .search-container .search-form .flight-route-details { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem; background: var(--sf-fill); border-radius: var(--sf-radius-field); } .search-container .search-form .route-detail-row { align-items: flex-start; gap: 0.625rem; } .search-container .search-form .route-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .search-container .search-form .route-value { gap: 0.5rem; font-family: var(--sf-font); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--sf-text); line-height: 1.35; } .search-container .search-form .route-value .city-header-display strong { color: var(--sf-text); } .search-container .search-form .route-value i { flex-shrink: 0; width: 1rem; color: var(--sf-label); font-size: 12px; } .search-container .search-form .airport-count-badge { border-color: rgba(68, 93, 239, 0.35); background: rgba(68, 93, 239, 0.08); border-radius: 999px; font-size: 10px; font-weight: 600; } .search-container .search-form .search-actions { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; flex-shrink: 0; } .search-container .search-form .reset-btn { width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--sf-fill); box-shadow: none; color: var(--sf-label); transition: background 0.2s ease, transform 0.15s ease; } .search-container .search-form .reset-btn:hover { background: var(--sf-fill-elevated); border-color: transparent; transform: none; box-shadow: none; } .search-container .search-form .reset-btn i { color: inherit; font-size: 14px; } .search-container .search-form .show-flights-btn { margin-left: 0; white-space: nowrap; } @media (min-width: 769px) { .search-container .search-form .flight-route-details { flex-flow: row wrap; align-items: center; gap: 0.75rem 1.25rem; } .search-container .search-form .route-detail-row { align-items: center; } .search-container .search-form .route-detail-row--dates { flex-wrap: wrap; } .search-container .search-form .search-actions { flex-direction: row; align-items: center; gap: 0.625rem; } } @media (min-width: 901px) { .search-container .form-row-single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(288px, 336px); } } @media (max-width: 900px) { .search-container .form-row-single { grid-template-columns: 1fr 1fr; } .search-container .form-row-single .date-group { grid-column: 1 / -1; margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--sf-separator); } .search-container .form-row-single .date-group::after { display: none; } .search-container .form-row-single .to-group::after { display: none; } } @media (max-width: 768px) { .search-container { --sf-radius-shell: 18px; margin: 1rem 0; border-radius: var(--sf-radius-shell); } .search-container .search-header { padding: 1rem 1rem 0.625rem; } .search-container:not(:has(.search-form)) .search-header { padding-bottom: 1rem; } .search-container .search-form { padding: 0.625rem 1rem 1.125rem; } .search-container .form-row-single { grid-template-columns: 1fr; padding: 0.25rem 0.375rem; } .search-container .form-row-single .form-group { padding: 0.5rem 0.375rem; } .search-container .form-row-single .form-group:not(:last-child)::after { inset: auto 0.5rem 0; width: auto; height: 1px; } .search-container .form-row-single .date-group { margin-top: 0.375rem; padding: 0.625rem 0.375rem 0.5rem; border-top: 1px solid rgba(60, 60, 67, 0.14); } :root[data-theme="dark"] .search-container .form-row-single .date-group { border-top-color: var(--color-border-subtle); } .search-container .search-form .date-range-input { font-weight: 600; letter-spacing: -0.018em; } .search-container .search-form .date-label { margin-bottom: 0.125rem; } .search-container .search-form .input-wrapper input, .search-container .search-form .date-range-input { min-height: 24px; font-size: 16px; } .search-container .search-form .flight-details { flex-direction: column; gap: 0.75rem; } .search-container .search-form .flight-route-details { padding: 0.75rem 0.875rem; } .search-container .search-form .search-actions { flex-direction: row; align-items: center; gap: 0.625rem; width: 100%; } .search-container .search-form .reset-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; order: 0; border: 0.5px solid var(--sf-separator); border-radius: 50%; background: var(--sf-fill); box-shadow: none; color: var(--sf-label); } .search-container .search-form .reset-btn:active { transform: scale(0.96); background: var(--sf-fill-elevated); } .search-container .search-form .show-flights-btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; order: 1; } } @media (max-width: 768px) { .search-container .search-tabs { flex-wrap: nowrap; } .search-container .search-tab[data-tab="bookings"] .tab-icon, .search-container .search-tab[data-tab="bookmarks"] .tab-icon, .search-container .search-tab[data-tab="profile"] .tab-icon, .search-container .search-tab[data-tab="charter"] .tab-icon { display: none !important; } .search-container .search-tab .tab-text-mobile { display: inline !important; } } @media (max-width: 640px) { .search-container { --sf-radius-shell: 16px; margin: 0.75rem 0; border-radius: var(--sf-radius-shell); } .search-container .search-header { padding: 0.875rem 0.625rem 0.5rem; } .search-container:not(:has(.search-form)) .search-header { padding-bottom: 0.875rem; } .search-container .search-form { padding: 0.5rem 0.875rem 1rem; } .search-container .search-tabs { flex-wrap: nowrap; gap: 1px; padding: 2px; } .search-container .search-tab { flex: 1 1 0; min-width: 0; padding: 0.5rem 0.25rem; font-size: 12px; } .search-container .search-tab .tab-text-mobile { font-size: 12px; } .search-container .search-form .route-value { font-size: 13px; } .search-container .search-form .show-flights-btn { min-height: 50px; font-size: 16px; } } @media (max-width: 390px) { .search-container .search-header { padding-left: 0.5rem; padding-right: 0.5rem; } .search-container .search-tabs { gap: 0; padding: 2px; } .search-container .search-tab { padding: 0.4375rem 0.125rem; font-size: 11px; letter-spacing: -0.02em; } .search-container .search-tab .tab-text-mobile { display: inline !important; font-size: 11px; } } .search-container .flight-route-details .route-value--dates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; } .search-container .flight-route-details #date-range-detail.is-muted { color: var(--sf-label); text-decoration: line-through; text-decoration-color: rgba(60, 60, 67, 0.28); } :root[data-theme="dark"] .search-container .flight-route-details #date-range-detail.is-muted { text-decoration-color: var(--color-border-strong); } .search-container .route-alert-chip { display: none; align-items: center; cursor: pointer; user-select: none; } .search-container .route-preview--alert-open .route-alert-chip { display: inline-flex; } .search-container .route-alert-chip__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .search-container .route-alert-chip__label { display: inline-flex; align-items: center; min-height: 22px; padding: 0 0.4375rem; border-radius: 5px; background: rgba(255, 255, 255, 0.65); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.16); font-family: var(--sf-font); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; color: var(--sf-label); transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } :root[data-theme="dark"] .search-container .route-alert-chip__label { background: var(--color-surface-glass); box-shadow: inset 0 0 0 0.5px var(--color-border); } .search-container .route-alert-chip__input:checked + .route-alert-chip__label { background: var(--color-text); box-shadow: none; color: var(--color-text-inverse); } .search-container .route-alert-trigger { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding: 0.3125rem 0; border: none; background: transparent; color: var(--sf-label); font-family: var(--sf-font); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: color 0.18s ease; } .search-container .route-alert-trigger:hover { color: var(--sf-text); } .search-container .route-alert-trigger__icon { font-size: 12px; } .search-container .route-alert-trigger__chevron { font-size: 10px; transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); } .search-container .route-preview--alert-open .route-alert-trigger { color: var(--sf-text); } .search-container .route-preview--alert-open .route-alert-trigger__chevron { transform: rotate(180deg); } .search-container .route-alert-extras { flex: 0 0 100%; display: none; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.28s cubic-bezier(0.25, 0.1, 0.25, 1); } .search-container .route-alert-extras__inner { overflow: hidden; min-height: 0; } .search-container .route-preview--alert-open .route-alert-extras { display: grid; grid-template-rows: 1fr; } .search-container .route-alert-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; margin-top: 0.625rem; } .search-container .route-preview--alert-open .route-alert-toolbar { margin-top: 0; } .search-container .route-alert-field { display: inline-flex; align-items: center; gap: 0.4375rem; flex: 0 0 auto; } .search-container .route-alert-field--toggle { user-select: none; } .search-container .route-alert-field__label { flex-shrink: 0; font-family: var(--sf-font); font-size: 13px; font-weight: 400; letter-spacing: -0.01em; color: var(--sf-text); white-space: nowrap; } .search-container .route-alert-field--toggle .route-alert-field__label { cursor: pointer; } .search-container .route-alert-field__input { width: 5.5rem; min-height: 30px; padding: 0.25rem 0.4375rem; border: none; border-radius: 7px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.14); font-family: var(--sf-font); font-size: 13px; text-align: right; color: var(--sf-text); cursor: text; appearance: textfield; -moz-appearance: textfield; } :root[data-theme="dark"] .search-container .route-alert-field__input { background: var(--sf-fill); box-shadow: inset 0 0 0 0.5px var(--sf-separator); } .search-container .route-alert-field__input::-webkit-inner-spin-button, .search-container .route-alert-field__input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; } .search-container .route-alert-field__input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.3), 0 0 0 2px rgba(60, 60, 67, 0.06); } :root[data-theme="dark"] .search-container .route-alert-field__input:focus { background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 2px var(--color-focus-ring); } .search-container .route-alert-field__input::placeholder { color: var(--sf-label); } .search-container .route-alert-switch { position: relative; display: inline-flex; width: 40px; height: 24px; flex-shrink: 0; } .search-container .route-alert-switch__input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; } .search-container .route-alert-switch__track { position: absolute; inset: 0; border-radius: 999px; background: rgba(120, 120, 128, 0.16); pointer-events: none; transition: background 0.2s ease; } .search-container .route-alert-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); } .search-container .route-alert-switch__input:checked + .route-alert-switch__track { background: #1d1d1f; } .search-container .route-alert-switch__input:checked + .route-alert-switch__track::after { transform: translateX(16px); } :root[data-theme="dark"] .search-container .route-alert-switch__track { background: rgba(120, 120, 128, 0.16); box-shadow: none; } :root[data-theme="dark"] .search-container .route-alert-switch__track::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); } :root[data-theme="dark"] .search-container .route-alert-switch__input:checked + .route-alert-switch__track { background: var(--primary); } :root[data-theme="dark"] .search-container .route-alert-switch__input:checked + .route-alert-switch__track::after { background: #fff; } :root[data-theme="dark"] .search-container .route-alert-switch__input:focus-visible + .route-alert-switch__track { box-shadow: 0 0 0 3px var(--color-focus-ring); } .search-container .route-alert-submit { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 30px; padding: 0.3125rem 0.875rem; border: none; border-radius: 980px; background: var(--color-text); color: var(--color-text-inverse); font-family: var(--sf-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background 0.18s ease, opacity 0.18s ease; } .search-container .route-alert-submit:hover { background: #000; } :root[data-theme="dark"] .search-container .route-alert-submit:hover { background: var(--color-text-secondary); } .search-container .route-preview--alert-saving .route-alert-submit, .search-container .route-preview--alert-saving .route-alert-trigger { opacity: 0.55; pointer-events: none; } @media (max-width: 768px) { .search-container .route-preview--alert-open .route-alert-trigger { margin-top: 0.25rem; padding-top: 0; padding-bottom: 0; } .search-container .route-preview--alert-open .route-alert-extras { margin-top: -0.125rem; } .search-container .route-alert-toolbar { flex-wrap: wrap; gap: 0.625rem 0.75rem; } .search-container .route-alert-field--toggle { flex: 0 0 100%; } .search-container .route-alert-submit { flex: 0 0 auto; margin-left: auto; } } @media (min-width: 769px) { .search-container .search-form .flight-route-details:not(.route-preview--alert-open) { align-content: center; align-items: center; min-height: 0; } .search-container .route-alert-trigger { margin-top: 0; margin-left: auto; } } .favorites-segment { display: flex; align-items: center; gap: 3px; width: 100%; padding: 4px; margin: 0.75rem 0 0; border-radius: 12px; background: rgba(242, 242, 247, 0.78); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08), 0 1px 2px rgba(0, 0, 0, 0.02); backdrop-filter: blur(14px); } :root[data-theme="dark"] .favorites-segment { background: var(--color-control); box-shadow: inset 0 0 0 0.5px var(--color-border-subtle), var(--shadow-surface-sm); } .favorites-segment__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; flex: 1; min-height: 36px; border: none; border-radius: 980px; background: transparent; color: var(--color-text-muted); font-family: -apple-system, "blinkmacsystemfont", system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .favorites-segment__badge, .subscription-card__new-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; min-height: 1.25rem; padding: 0 0.375rem; border-radius: 980px; background: var(--color-text); color: var(--color-text-inverse); font-family: -apple-system, "blinkmacsystemfont", system-ui, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .favorites-segment__badge[hidden] { display: none; } .favorites-segment__btn:hover { color: var(--color-text); } .favorites-segment__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18); } :root[data-theme="dark"] .favorites-segment__btn:focus-visible { box-shadow: 0 0 0 2px var(--color-focus-ring); } .favorites-segment__btn.is-active { background: rgba(255, 255, 255, 0.96); color: var(--color-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04); } :root[data-theme="dark"] .favorites-segment__btn.is-active { background: var(--color-control-active); color: var(--color-text); box-shadow: inset 0 0 0 1px rgba(68, 93, 239, 0.42), 0 2px 8px rgba(10, 15, 20, 0.3); } :root[data-theme="dark"] .favorites-segment__btn:not(.is-active):hover { background: var(--color-control-hover); } :root[data-theme="dark"] .favorites-segment__btn.is-active .favorites-segment__badge { background: var(--primary); color: var(--primary-contrast); } @media (max-width: 768px) { .favorites-segment { padding: 3px; margin-top: 0.75rem; border-radius: 10px; } .favorites-segment__btn { min-height: 30px; font-size: 12px; } } .subscriptions-list { display: flex; flex-direction: column; gap: 0.75rem; } .subscription-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04); overflow: hidden; } .subscription-card--has-new { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(29, 29, 31, 0.035); } :root[data-theme="dark"] .subscription-card { background: var(--color-surface-raised); box-shadow: var(--shadow-surface), 0 0 0 0.5px var(--color-border-subtle); } :root[data-theme="dark"] .subscription-card--has-new { box-shadow: var(--shadow-surface), 0 0 0 0.5px var(--color-border-subtle), 0 0 0 3px var(--primary-light); } .subscription-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 0.875rem 0.75rem 1.125rem; border: none; background: transparent; text-align: left; } .subscription-card__expand { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; min-width: 0; width: 100%; min-height: 44px; padding: 0; border: none; background: transparent; text-align: left; cursor: pointer; } .subscription-card__route { font-family: -apple-system, "blinkmacsystemfont", system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .subscription-card__meta { margin-top: 0.25rem; font-size: 13px; color: var(--color-text-muted); } .subscription-card__count { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; } .subscription-card__new-badge { background: rgba(29, 29, 31, 0.92); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); white-space: nowrap; } :root[data-theme="dark"] .subscription-card__new-badge { background: var(--color-text); box-shadow: var(--shadow-surface-sm); } .subscription-card__chevron { color: var(--color-text-muted); transition: transform 0.2s ease; } .subscription-card--expanded .subscription-card__chevron { transform: rotate(180deg); } .subscription-card__body { padding: 0 1rem 1rem; } .subscription-card__flights { display: flex; flex-direction: column; gap: 0.75rem; } .subscription-card__flight-list { display: flex; flex-direction: column; gap: 0.75rem; } .subscription-card__load-more { width: 100%; min-height: 44px; border: none; border-radius: 980px; background: var(--color-control); color: var(--color-text); font-family: -apple-system, "blinkmacsystemfont", system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; } .subscription-card__delete { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 0.75rem; border: none; border-radius: 980px; background: rgba(255, 59, 48, 0.08); color: #c4231d; font-family: -apple-system, "blinkmacsystemfont", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .subscription-card__delete:hover { background: rgba(255, 59, 48, 0.12); color: #a91d18; } .subscription-card__loading, .subscription-card__empty, .no-subscriptions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2.5rem 1.5rem; text-align: center; color: var(--color-text-muted); } .no-subscriptions i { font-size: 2rem; color: #c7c7cc; } :root[data-theme="dark"] .no-subscriptions i { color: var(--color-text-faint); } .no-subscriptions h3 { margin: 0; font-size: 1.125rem; color: var(--color-text); } .no-subscriptions p { margin: 0; max-width: 22rem; line-height: 1.5; } .search-container .form-row-single, .search-container .form-row-single .form-group, .search-container .search-form .airport-search-wrapper { overflow: visible; } .search-container:has(.airport-dropdown.active), .search-container:has(.fpn-class-picker.is-open) { z-index: 10050; } .search-container .search-form .airport-dropdown, .search-container .search-form .airport-dropdown.active { --aa-bg: rgba(255, 255, 255, 0.97); --aa-fill: #f5f5f7; --aa-fill-hover: rgba(60, 60, 67, 0.06); --aa-text: #1d1d1f; --aa-label: #86868b; --aa-border: rgba(68, 93, 239, 0.38); --aa-separator: rgba(60, 60, 67, 0.1); --aa-radius: 14px; --aa-shadow: 0 8px 28px rgba(68, 93, 239, 0.08), 0 0 0 1px rgba(68, 93, 239, 0.12); --aa-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; margin-top: 0.375rem; padding: 0.375rem; border: 1px solid var(--aa-border); border-radius: var(--aa-radius); background: var(--aa-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--aa-shadow); max-height: min(300px, 50vh); overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, 0.22) transparent; } :root[data-theme="dark"] .search-container .search-form .airport-dropdown, :root[data-theme="dark"] .search-container .search-form .airport-dropdown.active { --aa-bg: var(--color-surface-glass-strong); --aa-fill: var(--color-control); --aa-fill-hover: var(--color-control-active); --aa-text: var(--color-text); --aa-label: var(--color-text-muted); --aa-separator: var(--color-border-subtle); --aa-shadow: var(--shadow-surface); scrollbar-color: var(--color-scrollbar) transparent; } .search-container .search-form .airport-dropdown::-webkit-scrollbar { width: 4px; } .search-container .search-form .airport-dropdown::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(60, 60, 67, 0.22); } :root[data-theme="dark"] .search-container .search-form .airport-dropdown::-webkit-scrollbar-thumb { background: var(--color-scrollbar); } .search-container .search-form .dropdown-header { padding: 0.375rem 0.625rem 0.25rem; background: transparent; border-bottom: none; font-family: var(--aa-font); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aa-label); } .search-container .search-form .dropdown-header i { font-size: 0.625rem; color: var(--aa-label); } .search-container .search-form .city-group { border-bottom: none; margin-bottom: 0.125rem; } .search-container .search-form .city-option, .search-container .search-form .airport-option { border: none; border-left: none; border-bottom: none; border-radius: 10px; min-height: 40px; padding: 0.5rem 0.625rem; margin: 0 0 0.125rem; transition: background 0.18s ease; } .search-container .search-form .airport-option { display: flex; align-items: center; gap: 0.625rem; } .search-container .search-form .airport-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; align-items: flex-start; } .search-container .search-form .city-option { background: transparent; } .search-container .search-form .city-option:hover, .search-container .search-form .airport-option:hover, .search-container .search-form .airport-option.selected, .search-container .search-form .airport-option.highlighted, .search-container .search-form .airport-option.exact-match:hover { background: var(--aa-fill-hover); border-left: none; transform: none; opacity: 1; } .search-container .search-form .airport-option.exact-match { background: var(--aa-fill); border-left: none; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08); } .search-container .search-form .airport-option.highlighted { outline: none; box-shadow: inset 0 0 0 1px rgba(68, 93, 239, 0.28); } .search-container .search-form .nested-airport { padding-left: 1.375rem; background: transparent; min-height: 36px; } .search-container .search-form .nested-airport:hover { background: var(--aa-fill-hover); border-left: none; } .search-container .search-form .autocomplete-location-line, .search-container .search-form .autocomplete-city-line { display: inline-flex; align-items: center; gap: 0.3125rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .search-container .search-form .autocomplete-country-flag { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; } .search-container .search-form .autocomplete-country-flag .flag-icon { width: 1.0625rem; height: 0.6875rem; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); vertical-align: middle; } .search-container .search-form .selected-indicator strong { display: inline; font-weight: 600; } .search-container .search-form .selected-indicator strong .autocomplete-city-line { display: inline-flex; } .search-container .search-form .location-detail { display: inline; white-space: nowrap; } .search-container .search-form .city-name, .search-container .search-form .airport-name { display: block; width: 100%; max-width: 100%; font-family: var(--aa-font); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--aa-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-container .search-form .city-name i { display: none; } .search-container .search-form .city-info, .search-container .search-form .airport-location { display: block; width: 100%; max-width: 100%; font-family: var(--aa-font); font-size: 0.6875rem; font-weight: 400; color: var(--aa-label); line-height: 1.25; padding-left: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-container .search-form .airport-prefix { display: inline-block; color: var(--aa-label); font-size: 0.6875rem; margin-right: 0.3125rem; opacity: 0.55; font-weight: 400; vertical-align: baseline; } .search-container .search-form .airport-codes { flex-shrink: 0; padding: 0.1875rem 0.5rem; background: var(--aa-fill); border: none; border-radius: 980px; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); opacity: 1; } .search-container .search-form .airport-option:hover .airport-codes { background: #efeff4; border-color: transparent; } :root[data-theme="dark"] .search-container .search-form .airport-option:hover .airport-codes { background: var(--color-surface-strong); box-shadow: inset 0 0 0 0.5px var(--color-border-strong); } :root[data-theme="dark"] .search-container .search-form .airport-option.exact-match { box-shadow: inset 0 0 0 0.5px var(--color-border-subtle); } .search-container .search-form .airport-code { font-family: var(--aa-font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--aa-text); } .search-container .search-form .airport-icao { font-size: 0.625rem; color: var(--aa-label); border-left-color: rgba(60, 60, 67, 0.16); opacity: 1; } .search-container .search-form .airport-type { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: 980px; background: rgba(60, 60, 67, 0.06); font-size: 0.625rem; color: var(--aa-label); white-space: nowrap; } :root[data-theme="dark"] .search-container .search-form .airport-type { background: var(--color-control-hover); } .search-container .search-form .distance-badge { padding: 0.1875rem 0.4375rem; border-radius: 980px; background: var(--aa-fill); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); font-family: var(--aa-font); font-size: 0.625rem; font-weight: 600; color: var(--aa-label); } .search-container .search-form .city-code-badge { display: inline-flex; align-items: center; margin-left: 0.375rem; padding: 0.125rem 0.4375rem; border-radius: 980px; background: rgba(68, 93, 239, 0.1); font-family: var(--aa-font); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; color: var(--primary); vertical-align: middle; } .search-container .search-form .city-code-badge--alt { background: var(--aa-fill); color: var(--aa-label); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } .search-container .search-form .airport-dropdown .no-results, .search-container .search-form .airport-dropdown .error { padding: 0.875rem 0.625rem; font-family: var(--aa-font); font-size: 0.8125rem; font-weight: 500; color: var(--aa-label); text-align: center; } .search-container .search-form .airport-search-loading { padding: 1.25rem 0.75rem; } .search-container .search-form .plane-loader i { color: var(--primary); font-size: 1.125rem; } .search-container .search-form .loading-dots span { width: 6px; height: 6px; background: var(--aa-label); } .search-container .search-form .selection-info { padding: 0.25rem; } .search-container .search-form .selected-city-header, .search-container .search-form .selected-airport-header { padding: 0.5rem 0.625rem; margin-bottom: 0.375rem; border: none; border-radius: 10px; background: transparent; } .search-container .search-form .selected-indicator { align-items: flex-start; gap: 0.625rem; font-family: var(--aa-font); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--aa-text); } .search-container .search-form .selected-indicator i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border-radius: 50%; background: rgba(52, 199, 89, 0.14); color: #34c759; font-size: 0.6875rem; } .search-container .search-form .selected-indicator .location-detail { display: inline; margin-top: 0; font-size: inherit; font-weight: 400; color: var(--aa-label); white-space: nowrap; } .search-container .search-form .selected-airports-list { padding: 0 0.625rem 0.375rem; margin-bottom: 0; } .search-container .search-form .airports-in-selection { gap: 0.3125rem; } .search-container .search-form .airport-code-badge { padding: 0.1875rem 0.5rem; border: none; border-radius: 980px; background: var(--aa-fill); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); font-family: var(--aa-font); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--aa-text); } .search-container .search-form .clear-selection-option { margin-top: 0.25rem; padding: 0.5rem 0.625rem; border: none; border-top: 0.5px solid var(--aa-separator); border-radius: 0; background: transparent; font-family: var(--aa-font); font-size: 0.75rem; font-weight: 500; color: var(--aa-label); transition: background 0.18s ease, color 0.18s ease; } .search-container .search-form .clear-selection-option:hover { background: rgba(60, 60, 67, 0.04); border-color: var(--aa-separator); color: #ff3b30; transform: none; } .search-container .search-form .clear-selection-option i { font-size: 0.6875rem; opacity: 0.75; } @media (max-width: 768px) { .search-container .search-form .airport-dropdown, .search-container .search-form .airport-dropdown.active { max-height: min(260px, 42vh); } .search-container .search-form .city-option, .search-container .search-form .airport-option { min-height: 38px; padding: 0.4375rem 0.5625rem; } } .search-container .form-row-single, .search-container .form-row-single .date-group { overflow: visible; } .date-range-wrapper { position: relative; } .date-range-wrapper.date-range-picker-open { z-index: 40; } .search-container:has(.date-range-picker-open) { z-index: 10050; } .date-range-picker-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-width: min(320px, calc(100vw - 24px)); background: var(--color-surface-raised); border: none; border-radius: 16px; box-shadow: var(--shadow-surface-lg); z-index: 10000; display: flex; flex-direction: column; font-family: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; animation: date-picker-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .date-range-picker-dropdown.is-above { top: auto; bottom: calc(100% + 6px); } .date-range-picker-dropdown.is-align-right { left: auto; right: 0; } @keyframes date-picker-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .date-picker-backdrop { display: none; position: fixed; inset: 0; background: var(--color-overlay); z-index: 9999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .date-range-quick-select { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--color-border-subtle); display: flex; gap: 0.375rem; flex-wrap: wrap; } .quick-select-btn { padding: 0.375rem 0.75rem; border: none; border-radius: 980px; background: var(--color-control); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .quick-select-btn:hover { background: rgba(68, 93, 239, 0.12); color: #0a8f80; } .date-range-calendars { display: block; padding: 0.625rem 0.875rem 0.75rem; flex: 1; overflow-y: auto; min-height: 0; } .date-range-calendar-month .calendar-month-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding: 0 0.125rem; } .date-range-calendar-month .calendar-month-label { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .date-range-calendar-month .calendar-nav-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--color-control); color: var(--color-text); cursor: pointer; transition: background 0.2s ease; } .date-range-calendar-month .calendar-nav-btn:hover { background: var(--color-control-hover); color: var(--color-text); } .date-range-calendar-month .calendar-days-header { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; margin-bottom: 0.375rem; } .date-range-calendar-month .calendar-day-label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text-muted); padding: 0.125rem 0; } .date-range-calendar-month .calendar-days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; } .date-range-calendar-month .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: var(--color-text); border-radius: 50%; cursor: pointer; transition: background 0.15s ease; position: relative; } .date-range-calendar-month .calendar-day-empty { cursor: default; } .date-range-calendar-month .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: var(--color-control-hover); } .date-range-calendar-month .calendar-day-disabled { color: var(--color-text-faint); } .date-range-calendar-month .calendar-day-today { font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(68, 93, 239, 0.55); } .date-range-calendar-month .calendar-day-today::after { display: none; } .date-range-picker-dropdown .calendar-day-range-start, .date-range-picker-dropdown .calendar-day-range-end { background: var(--primary) !important; color: var(--primary-contrast) !important; font-weight: 600; border-radius: 50% !important; box-shadow: none; } .date-range-picker-dropdown .calendar-day-in-range { background: rgba(68, 93, 239, 0.14) !important; color: var(--color-text); border-radius: 0; } .date-range-picker-dropdown .calendar-day-range-start.calendar-day-in-range, .date-range-picker-dropdown .calendar-day-range-end.calendar-day-in-range { border-radius: 50% !important; } .date-range-picker-dropdown .calendar-day-range-start:not(.calendar-day-range-end) { border-radius: 50% 0 0 50% !important; } .date-range-picker-dropdown .calendar-day-range-end:not(.calendar-day-range-start) { border-radius: 0 50% 50% 0 !important; } .date-range-picker-dropdown .calendar-day-range-start.calendar-day-range-end { border-radius: 50% !important; } .date-range-picker-dropdown .calendar-day-preview { background: rgba(68, 93, 239, 0.08) !important; border-radius: 0; } .date-range-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.875rem; border-top: 1px solid var(--color-border-subtle); gap: 0.5rem; background: var(--color-surface-raised); border-radius: 0 0 16px 16px; } .date-range-clear-btn, .date-range-apply-btn { min-height: 36px; padding: 0.4375rem 1rem; border-radius: 980px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s ease, opacity 0.2s ease; } .date-range-clear-btn { background: var(--color-control); border: none; color: var(--color-text); } .date-range-clear-btn:hover { background: var(--color-control-hover); border: none; transform: none; } .date-range-apply-btn { background: var(--primary); border: none; color: var(--primary-contrast); flex: 1; max-width: none; } .date-range-apply-btn:hover { background: var(--primary-hover); transform: none; box-shadow: none; } @media (max-width: 768px) { body.date-picker-modal-open { overflow: hidden; } .date-range-picker-dropdown { position: fixed !important; inset: auto !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 32px) !important; max-width: 400px !important; max-height: min(calc(100vh - 32px), 600px) !important; animation: date-picker-modal-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .date-range-picker-dropdown.is-above, .date-range-picker-dropdown.is-align-right { left: 50% !important; right: auto !important; bottom: auto !important; } @keyframes date-picker-modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96) !important; } to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; } } .date-picker-backdrop { display: block; } .date-range-calendar-month .calendar-nav-btn { width: 44px; height: 44px; } .date-range-footer { flex-direction: row; } .date-range-clear-btn, .date-range-apply-btn { width: auto; } } @media (max-width: 480px) { .date-range-picker-dropdown { width: calc(100vw - 20px) !important; max-height: min(calc(100vh - 20px), 550px) !important; } .date-range-quick-select { padding: 0.625rem 0.75rem; } .quick-select-btn { font-size: 12px; padding: 0.3125rem 0.625rem; } } .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-radius: 20px; --scs-shell-pad: var(--space-md, 1rem); --scs-drawer-width: min(720px, 84%); --scs-drawer-radius: 14px; --scs-fill: var(--color-control); --scs-border: var(--color-border-subtle); --scs-shadow: var(--shadow-surface); } .contact-bar:has(+ .container > .search-container) { position: relative; z-index: 2; display: flex; justify-content: center; overflow: visible; padding: var(--space-lg, 1.5rem) var(--scs-shell-pad) 0; max-width: 1400px; margin-inline: auto; background: transparent; border-bottom: none; } .contact-bar:has(+ .container > .search-container) .contact-container { position: relative; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 0.5rem; width: fit-content; max-width: calc(100% - 1rem); margin-inline: auto; margin-top: 0; margin-bottom: 0; padding: 0.4375rem 0.625rem 0.5625rem; background: var(--scs-fill); border: 0.5px solid var(--scs-border); border-bottom: none; border-radius: var(--scs-drawer-radius) var(--scs-drawer-radius) 0 0; box-shadow: none; } .contact-bar:has(+ .container > .search-container) .contact-meta { flex: 0 1 auto; min-width: 0; } .contact-bar:has(+ .container > .search-container) .contact-label { font-weight: 500; } .contact-bar:has(+ .container > .search-container) .contact-btn .notification-badge, .contact-bar:has(+ .container > .search-container) .chat-btn .notification-badge { border-color: var(--scs-fill); } .contact-bar + .container:has(> .search-container) { position: relative; z-index: 1; margin-top: -1px; padding-inline: var(--scs-shell-pad); padding-top: 0; } .contact-bar + .container > .search-container { --sf-bg: var(--color-surface); --sf-shadow: var(--scs-shadow); margin-top: 0; margin-inline: 0; border: none; border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); box-shadow: none; overflow: visible; } .contact-bar + .container > .search-container .search-header { padding-top: 1rem; } @media (max-width: 1024px) { .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-drawer-width: 88%; } .contact-bar:has(+ .container > .search-container) .contact-container { flex-wrap: nowrap; gap: 0.4375rem; padding: 0.5rem 0.875rem 0.5625rem; } .contact-bar:has(+ .container > .search-container) .contact-label { margin-right: 0.375rem; padding-right: 0.125rem; } } @media (max-width: 768px) { .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-radius: 18px; --scs-shell-pad: 1rem; --scs-drawer-width: 80%; --scs-drawer-radius: 12px; } .contact-bar:has(+ .container > .search-container) { padding: 1rem var(--scs-shell-pad) 0; } .contact-bar:has(+ .container > .search-container) .contact-container { padding: 0.4375rem 0.5rem 0.5rem; gap: 0.375rem; } .contact-bar:has(+ .container > .search-container) .contact-label { margin-right: 0.25rem; padding-right: 0.125rem; font-weight: 500; } .contact-bar + .container:has(> .search-container) { padding-inline: var(--scs-shell-pad); } .contact-bar + .container > .search-container { border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); } .contact-bar + .container > .search-container .search-header { padding-top: 0.875rem; } } @media (max-width: 640px) { .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-radius: 16px; --scs-shell-pad: 0.875rem; --scs-drawer-width: 84%; --scs-drawer-radius: 11px; } .contact-bar:has(+ .container > .search-container) { padding: 0.75rem var(--scs-shell-pad) 0; } .contact-bar + .container:has(> .search-container) { padding-inline: var(--scs-shell-pad); } .contact-bar + .container > .search-container { border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); } .contact-bar:has(+ .container > .search-container) .contact-container { padding: 0.375rem 0.375rem 0.4375rem; gap: 0.3125rem; } .contact-bar:has(+ .container > .search-container) .contact-label { margin-right: 0.1875rem; font-weight: 500; } } @media (max-width: 480px) { .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-shell-pad: 0.75rem; --scs-drawer-width: 86%; --scs-drawer-radius: 10px; } .contact-bar:has(+ .container > .search-container) { padding: 0.625rem var(--scs-shell-pad) 0; } .contact-bar:has(+ .container > .search-container) .contact-label { font-size: 10px; } } @media (max-width: 1024px) { html body .contact-bar + .container > .search-container { border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); } } @media (max-width: 768px) { html body .contact-bar + .container > .search-container { border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); } } @media (max-width: 640px) { html body .contact-bar + .container > .search-container { border-radius: var(--scs-radius); border-top-left-radius: var(--scs-radius); border-top-right-radius: var(--scs-radius); border-bottom-left-radius: var(--scs-radius); border-bottom-right-radius: var(--scs-radius); } } .search-progress { --sp-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --sp-teal: rgba(68, 93, 239, 0.38); --sp-teal-soft: rgba(68, 93, 239, 0.14); --sp-teal-faint: rgba(68, 93, 239, 0.08); --sp-label: var(--color-text-muted); --sp-stage-w: 320px; --sp-stage-h: 88px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; max-width: var(--sp-stage-w); margin: 0.375rem auto 0; padding: 0.75rem 1rem 0.25rem; opacity: 0; transform: translateY(-8px); transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); pointer-events: none; } .search-progress.is-visible { opacity: 1; transform: translateY(0); } .search-progress[hidden] { display: none !important; } .search-progress__stage { position: relative; width: 100%; max-width: var(--sp-stage-w); height: var(--sp-stage-h); } .search-progress__svg { display: block; width: 100%; height: 100%; overflow: visible; } .search-progress__node { fill: var(--sp-teal-soft); transform-origin: center; animation: search-progress-node-breathe 2.8s ease-in-out infinite; } .search-progress__node--to { animation-delay: 0.45s; } .search-progress__arc--base { stroke: var(--sp-teal-faint); stroke-width: 1.5; stroke-linecap: round; fill: none; } .search-progress__arc--pulse { stroke: var(--sp-teal); stroke-width: 2; stroke-linecap: round; fill: none; stroke-dasharray: 48 280; stroke-dashoffset: 0; animation: search-progress-flow 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; } .search-progress__glow { fill: var(--sp-teal); opacity: 0.55; filter: blur(6px); animation: search-progress-glow 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; } .search-progress__traveler { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(68, 93, 239, 0.42); box-shadow: 0 0 12px rgba(68, 93, 239, 0.18); offset-path: path("M 32 56 Q 160 8, 288 56"); offset-distance: 0%; offset-rotate: 0deg; animation: search-progress-travel 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; } .search-progress__label { margin: 0; max-width: 18rem; text-align: center; font-family: var(--sp-font); font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.006em; line-height: 1.3; color: var(--sp-label); -webkit-font-smoothing: antialiased; transition: opacity 0.35s ease; } .search-progress__label.is-extended { opacity: 0.92; } @keyframes search-progress-flow { 0% { stroke-dashoffset: 0; opacity: 0.35; } 45% { opacity: 0.75; } 100% { stroke-dashoffset: -328; opacity: 0.35; } } @keyframes search-progress-travel { 0% { offset-distance: 0%; opacity: 0.25; transform: scale(0.85); } 12% { opacity: 0.7; transform: scale(1); } 88% { opacity: 0.7; transform: scale(1); } 100% { offset-distance: 100%; opacity: 0.25; transform: scale(0.85); } } @keyframes search-progress-node-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } } @keyframes search-progress-glow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.55; } } @media (max-width: 640px) { .search-progress { --sp-stage-w: 280px; --sp-stage-h: 77px; padding-top: 0.625rem; } .search-progress__traveler { offset-path: path("M 28 49 Q 140 7, 252 49"); } } @media (prefers-reduced-motion: reduce) { .search-progress { transition: opacity 0.2s ease; transform: none; } .search-progress.is-visible { transform: none; } .search-progress__arc--pulse, .search-progress__traveler, .search-progress__node, .search-progress__glow { animation: none; } .search-progress__arc--pulse { stroke-dasharray: none; opacity: 0.45; } .search-progress__traveler { offset-distance: 50%; opacity: 0.5; } } body.webview-mode { -webkit-transform: none !important; transform: none !important; transition: none !important; } body.ios-webview { -webkit-overflow-scrolling: touch; overscroll-behavior: none; } .ios-webview .auth-modal { -webkit-transform-origin: center center; transform-origin: center center; transition: opacity 0.3s ease; transition-property: opacity, visibility; z-index: 10050; } .ios-webview .ej-activity-indicator, .ios-webview .loading-hud .ej-activity-indicator { animation-play-state: paused !important; } .ios-webview .auth-active .ej-activity-indicator, .ios-webview .auth-active .loading-hud .ej-activity-indicator { animation-play-state: running !important; } .ios-webview .modal-backdrop { position: fixed !important; width: 100% !important; height: 100vh !important; -webkit-transform: none !important; transform: none !important; } .webview-mode .auth-container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .ios-webview { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); min-height: 100vh; } .webview-mode * { animation-fill-mode: both !important; } @keyframes smooth-fade-in { from { opacity: 0; } to { opacity: 1; } } .webview-mode .auth-success { animation: smooth-fade-in 0.5s ease; } .ios-webview .remember-me-container { display: none !important; } .webview-mode #loading-overlay.loading-overlay { background: var(--color-surface-glass); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } .webview-mode #loading-overlay .loading-hud { box-shadow: var(--shadow-surface); } .ios-webview button, .ios-webview a, .ios-webview .clickable { -webkit-tap-highlight-color: var(--color-highlight); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .ios-webview input, .ios-webview textarea, .ios-webview select { font-size: 16px !important; -webkit-appearance: none; border-radius: 0; } .webview-mode .user-menu, .webview-mode .auth-button { transition: opacity 0.3s ease, visibility 0.3s ease; } .webview-airport-icon { display: none !important; } body.webview-mode .webview-airport-icon { display: inline-flex !important; left: auto; right: 0.75rem; color: var(--primary); } .webview-mode .airport-search-wrapper .airport-input { padding-right: 2.5rem; } .webview-mode .search-form label[for="from"], .webview-mode .search-form label[for="to"] { display: none !important; } .webview-mode .flight-route-details .route-detail-row:nth-child(1) .route-label, .webview-mode .flight-route-details .route-detail-row:nth-child(2) .route-label, .webview-mode .flight-route-details .route-detail-row:nth-child(3) .route-label { display: none !important; } body.auth-redirecting .main-content { opacity: 0.5; pointer-events: none; } .ios-webview .loading-overlay { z-index: 10001; } .ios-webview.keyboard-visible { padding-bottom: 0 !important; } .ios-webview.keyboard-visible .auth-modal { transform: translateY(-25%); } @media screen and (orientation: landscape) { .ios-webview .auth-modal { max-height: 90vh; overflow-y: auto; } } @media (max-width: 375px) { .webview-mode .auth-modal { width: 100%; height: 100%; max-width: none; border-radius: 0; } } .webview-mode::before { content: 'WebView Mode Active'; position: fixed; top: -100px; left: 0; font-size: 10px; color: red; z-index: 99999; } @keyframes loading-overlay-safety-fade { 0%, 95% { opacity: 1; } 100% { opacity: 0; pointer-events: none; visibility: hidden; } } .webview-mode #loading-overlay[style*="display: flex"] { animation: loading-overlay-safety-fade 15s forwards; } .webview-mode #loading-overlay:not([style*="display: flex"]) { pointer-events: none !important; } .ios-webview #flight-details-popup.flight-popup-overlay.active .flight-popup, .ios-webview #booking-details-modal.flight-popup-overlay.active .flight-popup { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } .ios-webview #flight-details-popup .popup-content, .ios-webview #booking-details-modal .popup-content, .ios-webview #booking-flight-panel .popup-content { flex: 1 1 0; height: 0; min-height: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .ios-webview #flight-details-popup .fd-layout--mobile-flat, .ios-webview #booking-details-modal .fd-layout--mobile-flat { height: auto; } .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); } } .tbo-ticket-list { display: flex; flex-direction: column; gap: 22px; container-type: inline-size; container-name: tbo-tickets; } .tbo-ticket-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (min-width: 769px) and (max-width: 1024px) { .flights-list > .tbo-ticket-block, .bookmarks-list > .tbo-ticket-block, .flights-list > .tbo-ticket-list, .bookmarks-list > .tbo-ticket-list { grid-column: 1 / -1; } .flights-list > .tbo-ticket-block > .tbo-ticket-list > .tbo-ticket-section, .bookmarks-list > .tbo-ticket-block > .tbo-ticket-list > .tbo-ticket-section, .flights-list > .tbo-ticket-list > .tbo-ticket-section, .bookmarks-list > .tbo-ticket-list > .tbo-ticket-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .flights-list .tbo-ticket-section > .tbo-ticket-heading, .bookmarks-list .tbo-ticket-section > .tbo-ticket-heading { grid-column: 1 / -1; } .flights-list .tbo-ticket-section > .tbo-ticket-card, .bookmarks-list .tbo-ticket-section > .tbo-ticket-card { min-width: 0; } } .tbo-ticket-heading { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 0.5px solid rgba(60, 60, 67, 0.14); border-radius: 16px; background: var(--color-surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.045), 0 1px 2px rgba(0, 0, 0, 0.025); } :root[data-theme="dark"] .tbo-ticket-heading { border-color: rgba(255, 255, 255, 0.14); background: rgba(28, 30, 36, 0.52); 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%); } .tbo-ticket-heading__title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-text); } .tbo-ticket-heading--certified { border-color: rgba(68, 93, 239, 0.55); border-width: 1px; } :root[data-theme="dark"] .tbo-ticket-heading--certified { border-color: rgba(68, 93, 239, 0.6); } .tbo-ticket-heading--certified .tbo-ticket-heading__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; } .tbo-ticket-heading__mark { color: var(--primary-dark, #2f40c2); font-weight: 700; letter-spacing: -0.015em; } .tbo-ticket-heading__sep { color: var(--color-text-muted); font-weight: 500; } .tbo-ticket-heading__product { color: var(--color-text); font-weight: 600; } .tbo-ticket-heading__note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); } @media (max-width: 480px) { .tbo-ticket-heading { padding: 12px 14px; } .tbo-ticket-heading__title { font-size: 17px; } } .tbo-ticket-card { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.1); --tt-accent-line: rgba(68, 93, 239, 0.28); --tt-bg: var(--color-surface); --tt-border: rgba(60, 60, 67, 0.14); --tt-hairline: rgba(60, 60, 67, 0.12); --tt-good: #157f52; --tt-warn: #9a5b00; --tt-alert: #b3261e; --tt-radius: 18px; display: grid; grid-template: "head fare aside" auto "routes fare aside" 1fr / minmax(0, 1.15fr) minmax(210px, 1.2fr) minmax(168px, 188px); column-gap: 24px; --tt-cabin-photo-radius: var(--fc-aircraft-photo-radius, 14px); padding: 18px 20px; color: var(--color-text); background: var(--tt-bg); border: 0.5px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .tbo-ticket-card:hover { border-color: var(--tt-accent-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--tt-accent-line); } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 38%); column-gap: 16px; align-items: center; } .tbo-ticket__fare-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tbo-ticket__cabin-photo { display: flex; align-items: center; justify-content: flex-end; margin: 0; width: 100%; min-width: 0; height: 100%; } .tbo-ticket__cabin-photo-frame { position: relative; width: 100%; height: auto; max-height: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tt-cabin-photo-radius); background: #f2f2f7; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } :root[data-theme='dark'] .tbo-ticket__cabin-photo-frame { background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } .tbo-ticket__cabin-photo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; cursor: zoom-in; } @media (hover: hover) and (pointer: fine) { .tbo-ticket__cabin-photo-img:hover { filter: brightness(1.03); } } .tbo-ticket__head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 14px; } .tbo-ticket__carrier { display: flex; align-items: center; gap: 10px; min-width: 0; } .tbo-ticket__airline-marks { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; } .tbo-ticket__airline-logo { display: block; width: 30px; height: 30px; object-fit: contain; background: transparent; border: none; border-radius: 0; } .tbo-ticket__airline-name { overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; } .tbo-ticket__kind { flex: 0 0 auto; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; white-space: nowrap; } .tbo-ticket__routes { grid-area: routes; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .tbo-route__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--color-text-muted); } .tbo-route__direction { font-weight: 700; letter-spacing: 0.08em; color: var(--tt-accent); text-transform: uppercase; } .tbo-route__date { overflow: hidden; font-size: 11px; letter-spacing: 0.01em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__grid { display: grid; grid-template-columns: minmax(76px, 1fr) minmax(92px, 1.15fr) minmax(76px, 1fr); gap: 14px; align-items: start; width: 100%; } .tbo-route__point { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tbo-route__point--arrival { text-align: right; justify-self: stretch; } .tbo-route__time { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .tbo-route__city { overflow: hidden; font-size: 14px; font-weight: 550; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__caption { overflow: hidden; font-size: 11px; letter-spacing: 0.02em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__path { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding-top: 22px; } .tbo-route__duration { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .tbo-route__line { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 7px; } .tbo-route__line::before { position: absolute; right: 0; left: 0; height: 1px; content: ""; background: linear-gradient( to right, transparent, var(--tt-accent-line) 12%, var(--tt-accent-line) 88%, transparent ); } .tbo-route__node { position: relative; width: 7px; height: 7px; background: var(--tt-bg); border: 1.5px solid var(--tt-accent); border-radius: 50%; } .tbo-route__via { overflow: hidden; max-width: 100%; font-size: 12px; letter-spacing: -0.005em; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; } .tbo-route__via--stops { font-weight: 550; color: var(--color-text-secondary); } .tbo-ticket__aside { grid-area: aside; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--tt-hairline); } .tbo-ticket__seats { align-self: flex-end; margin: 0; font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--tt-alert); white-space: nowrap; text-align: right; } .tbo-ticket__commit { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; width: 100%; min-width: 0; margin-top: auto; } .tbo-ticket__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; } .tbo-ticket__price-note { font-size: 11px; line-height: 1.3; color: var(--color-text-muted); } .tbo-ticket__amount { font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .tbo-ticket__details-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 36px; padding: 9px 14px; 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; background: var(--primary); border: 0.5px solid var(--primary-dark); border-radius: 11px; -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, box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.15s ease; } .tbo-ticket__details-button:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary); box-shadow: 0 2px 6px rgba(68, 93, 239, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .tbo-ticket__details-button:active { transform: scale(0.97); opacity: 0.94; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); } .tbo-ticket__details-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } :root[data-theme="dark"] .tbo-ticket-card { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.16); --tt-accent-line: rgba(68, 93, 239, 0.38); --tt-bg: rgba(28, 30, 36, 0.52); --tt-border: rgba(255, 255, 255, 0.14); --tt-hairline: rgba(255, 255, 255, 0.12); --tt-good: #6ee7a8; --tt-warn: #f6c177; --tt-alert: #ff938c; 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"] .tbo-route__node { background: rgba(20, 22, 28, 0.9); } .tbo-ticket-list--status { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.1); --tt-accent-line: rgba(68, 93, 239, 0.28); --tt-border: rgba(60, 60, 67, 0.14); --tt-bg: var(--color-surface); --tt-radius: 18px; display: block; order: 0; min-width: 0; margin-top: 8px; } :root[data-theme="dark"] .tbo-ticket-list--status { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.16); --tt-accent-line: rgba(68, 93, 239, 0.38); --tt-border: rgba(255, 255, 255, 0.14); --tt-bg: rgba(28, 30, 36, 0.52); } .tbo-ticket-status { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.1); --tt-accent-line: rgba(68, 93, 239, 0.28); --tt-border: rgba(60, 60, 67, 0.14); --tt-bg: var(--color-surface); --tt-radius: 18px; display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 18px 20px; color: var(--color-text); background: var(--tt-bg); border: 0.5px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); animation: tbo-status-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; } :root[data-theme="dark"] .tbo-ticket-status { 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%); } .tbo-ticket-status__visual { flex: 0 0 auto; } .tbo-ticket-status__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } .tbo-ticket-status__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; color: var(--color-text); } .tbo-ticket-status__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); } .tbo-ticket-status--error { min-height: 0; padding-block: 13px; border-color: color-mix(in srgb, var(--warning) 35%, var(--tt-border)); } .tbo-ticket-status__retry { flex: 0 0 auto; min-height: 34px; padding: 7px 13px; font-size: 12px; font-weight: 650; color: var(--color-text); background: var(--color-control); border: 0.5px solid var(--color-border); border-radius: 9px; } .tbo-ticket-status__retry:hover { background: var(--color-control-hover); } .tbo-ticket-results > .tbo-ticket-status--loading { order: -1; } .tbo-ticket-route-loader { position: relative; width: 76px; height: 28px; } .tbo-ticket-route-loader__track { position: absolute; top: 50%; right: 10px; left: 10px; height: 1.5px; overflow: hidden; background: linear-gradient( 90deg, var(--tt-accent-line) 0%, color-mix(in srgb, var(--tt-accent) 12%, transparent) 50%, var(--tt-accent-line) 100% ); border-radius: 1px; transform: translateY(-50%); } .tbo-ticket-route-loader__node { position: absolute; top: 50%; z-index: 1; width: 9px; height: 9px; background: var(--tt-bg); border: 1.5px solid var(--tt-accent); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 3px var(--tt-accent-soft); } .tbo-ticket-route-loader__node--from { left: 0; } .tbo-ticket-route-loader__node--to { right: 0; } .tbo-ticket-route-loader__pulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; background: var(--tt-accent); border-radius: 50%; box-shadow: 0 0 0 0 var(--tt-accent-soft), 0 0 12px color-mix(in srgb, var(--tt-accent) 35%, transparent); animation: tbo-route-travel 1.55s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } .tbo-ticket-route-loader__track::after { position: absolute; inset: 0; content: ""; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 70% ); opacity: 0.55; animation: tbo-route-sheen 1.55s ease-in-out infinite; } .tbo-ticket-empty-mark { position: relative; width: 28px; height: 28px; } .tbo-ticket-empty-mark__ring { position: absolute; inset: 0; border: 1.5px solid var(--tt-accent-line); border-radius: 50%; } .tbo-ticket-empty-mark__gap { position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--color-text-secondary); border-radius: 1px; opacity: 0.55; transform: translate(-50%, -50%); } @keyframes tbo-status-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes tbo-route-travel { 0% { left: 0%; opacity: 0; transform: scale(0.7); } 12% { opacity: 1; transform: scale(1); } 88% { opacity: 1; transform: scale(1); } 100% { left: calc(100% - 7px); opacity: 0; transform: scale(0.7); } } @keyframes tbo-route-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (max-width: 560px) { .tbo-ticket-status { align-items: flex-start; gap: 14px; padding: 16px; } .tbo-ticket-status__title { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .tbo-ticket-status { animation: none; } .tbo-ticket-route-loader__pulse, .tbo-ticket-route-loader__track::after { animation: none; } .tbo-ticket-route-loader__pulse { left: calc(50% - 3.5px); opacity: 1; transform: none; } } .tbo-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: inherit; } .tbo-ticket__fare { grid-area: fare; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--tt-hairline); box-sizing: border-box; } .tbo-fare { display: flex; flex-direction: column; margin: 0; } .tbo-fare__row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; } .tbo-fare__label { display: flex; flex: 0 1 auto; gap: 7px; align-items: center; min-width: 0; font-size: 12px; letter-spacing: -0.005em; color: var(--color-text-muted); white-space: nowrap; } .tbo-fare__value { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; justify-content: flex-end; min-width: 0; margin: 0; font-size: 13px; font-weight: 550; letter-spacing: -0.01em; color: var(--color-text); text-align: right; } .tbo-fare__row--strong .tbo-fare__value { font-size: 14px; font-weight: 600; } .tbo-fare__row--headline { align-items: center; } .tbo-fare__row--headline .tbo-fare__label { flex: 0 0 auto; } .tbo-fare__row--headline .tbo-fare__value { flex: 1 1 auto; justify-content: flex-start; text-align: left; } .tbo-fare__row--good .tbo-fare__value { color: var(--tt-good); } .tbo-fare__row--warn .tbo-fare__value { color: var(--tt-warn); } .tbo-fare__note { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); } .tbo-fare__trip-notes { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; list-style: none; } .tbo-fare__trip-note { display: flex; gap: 7px; align-items: center; font-size: 11.5px; line-height: 1.35; color: var(--color-text-secondary); } .tbo-fare__trip-note--accent { color: var(--tt-accent); } .tbo-fare__trip-note--alert { font-weight: 600; color: var(--tt-alert); } @container tbo-tickets (max-width: 960px) { .tbo-ticket-card { grid-template: "head" auto "routes" auto "fare" auto "aside" auto / minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 16px 16px 18px; border-radius: 16px; } .tbo-ticket__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-bottom: 12px; } .tbo-ticket__carrier { flex: 1 1 12rem; min-width: 0; } .tbo-ticket__airline-name { white-space: normal; text-overflow: clip; line-height: 1.25; } .tbo-ticket__kind { flex: 0 0 auto; margin-left: auto; } .tbo-ticket__routes { gap: 14px; } .tbo-route__grid { grid-template-columns: minmax(0, 1.1fr) minmax(68px, 0.9fr) minmax(0, 1.1fr); gap: 8px; } .tbo-route__time { font-size: 22px; } .tbo-route__city { font-size: 13px; } .tbo-route__path { padding-top: 18px; gap: 4px; } .tbo-route__duration { font-size: 10.5px; } .tbo-route__via { font-size: 11px; } .tbo-ticket__fare { gap: 12px; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; column-gap: 0; row-gap: 12px; } .tbo-ticket__fare-main { width: 100%; min-width: 0; } .tbo-fare { display: flex; flex-direction: column; gap: 0; } .tbo-fare__row { padding: 8px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; padding-bottom: 0; } .tbo-fare__row--headline { padding-top: 0; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo { display: block; width: 100%; max-width: none; height: auto; justify-content: stretch; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo-frame { width: 100%; max-height: none; aspect-ratio: 16 / 10; border-radius: 12px; } .tbo-ticket__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seats price" "cta cta"; column-gap: 12px; row-gap: 12px; align-items: start; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket__seats { grid-area: seats; align-self: start; justify-self: start; text-align: left; white-space: normal; } .tbo-ticket__commit { display: contents; } .tbo-ticket__price { grid-area: price; align-items: flex-end; width: auto; max-width: 100%; text-align: right; } .tbo-ticket__amount { font-size: 24px; } .tbo-ticket__details-button { grid-area: cta; width: 100%; } } @container tbo-tickets (max-width: 420px) { .tbo-ticket-card { padding: 14px 14px 16px; } .tbo-ticket__airline-logo { width: 26px; height: 26px; } .tbo-ticket__airline-name { font-size: 14px; } .tbo-ticket__kind { font-size: 9px; letter-spacing: 0.08em; } .tbo-route__grid { grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) minmax(0, 1.15fr); gap: 6px; } .tbo-route__time { font-size: 20px; } .tbo-route__date, .tbo-route__caption { font-size: 10px; } .tbo-route__city { font-size: 12.5px; } .tbo-route__path { padding-top: 16px; } .tbo-fare__label { font-size: 12px; } .tbo-fare__value { font-size: 12.5px; } .tbo-fare__row--strong .tbo-fare__value, .tbo-fare__row--headline .tbo-fare__value { font-size: 14px; } .tbo-ticket__amount { font-size: 22px; } } @media (max-width: 1024px) { .tbo-ticket-card { grid-template: "head" auto "routes" auto "fare" auto "aside" auto / minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 16px 16px 18px; border-radius: 16px; } .tbo-ticket__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-bottom: 12px; } .tbo-ticket__carrier { flex: 1 1 12rem; min-width: 0; } .tbo-ticket__airline-name { white-space: normal; text-overflow: clip; line-height: 1.25; } .tbo-ticket__kind { flex: 0 0 auto; margin-left: auto; } .tbo-ticket__routes { gap: 14px; } .tbo-route__grid { grid-template-columns: minmax(0, 1.1fr) minmax(68px, 0.9fr) minmax(0, 1.1fr); gap: 8px; } .tbo-route__time { font-size: 22px; } .tbo-route__city { font-size: 13px; } .tbo-route__path { padding-top: 18px; gap: 4px; } .tbo-ticket__fare { gap: 12px; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__fare { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; column-gap: 0; row-gap: 12px; } .tbo-ticket__fare-main { width: 100%; min-width: 0; } .tbo-fare { display: flex; flex-direction: column; gap: 0; } .tbo-fare__row { padding: 8px 0; border-bottom: 1px solid var(--tt-hairline); } .tbo-fare__row:last-child { border-bottom: none; padding-bottom: 0; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo { display: block; width: 100%; max-width: none; height: auto; justify-content: stretch; } .tbo-ticket-card--has-cabin-photo .tbo-ticket__cabin-photo-frame { width: 100%; max-height: none; aspect-ratio: 16 / 10; border-radius: 12px; } .tbo-ticket__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seats price" "cta cta"; column-gap: 12px; row-gap: 12px; align-items: start; padding-top: 14px; padding-left: 0; margin-top: 14px; border-top: 1px solid var(--tt-hairline); border-left: none; } .tbo-ticket__seats { grid-area: seats; align-self: start; justify-self: start; text-align: left; white-space: normal; } .tbo-ticket__commit { display: contents; } .tbo-ticket__price { grid-area: price; align-items: flex-end; width: auto; max-width: 100%; text-align: right; } .tbo-ticket__amount { font-size: 24px; } .tbo-ticket__details-button { grid-area: cta; width: 100%; } } @media (max-width: 420px) { .tbo-ticket-card { padding: 14px 14px 16px; } .tbo-ticket__airline-logo { width: 26px; height: 26px; } .tbo-ticket__airline-name { font-size: 14px; } .tbo-ticket__kind { font-size: 9px; letter-spacing: 0.08em; } .tbo-route__grid { grid-template-columns: minmax(0, 1.15fr) minmax(56px, 0.85fr) minmax(0, 1.15fr); gap: 6px; } .tbo-route__time { font-size: 20px; } .tbo-route__date, .tbo-route__caption { font-size: 10px; } .tbo-route__city { font-size: 12.5px; } .tbo-fare__label { font-size: 12px; } .tbo-fare__value { font-size: 12.5px; } .tbo-ticket__amount { font-size: 22px; } } .tbo-ticket-block { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-top: 8px; } .tbo-ticket-panel { --tt-panel-accent: #445def; --tt-panel-border: rgba(60, 60, 67, 0.14); --tt-panel-divider: rgba(60, 60, 67, 0.1); overflow: hidden; background: var(--color-surface); border: 0.5px solid var(--tt-panel-border); border-radius: 20px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03); } :root[data-theme="dark"] .tbo-ticket-panel { --tt-panel-border: rgba(255, 255, 255, 0.14); --tt-panel-divider: rgba(255, 255, 255, 0.09); background: rgba(28, 30, 36, 0.52); 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%); } .tbo-ticket-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "header update" "switches switches" "summary summary"; gap: 18px 24px; align-items: start; padding: 20px; } .tbo-ticket-controls__header { grid-area: header; min-width: 0; } .tbo-ticket-controls__eyebrow { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--tt-panel-accent); text-transform: uppercase; } .tbo-ticket-controls__title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; color: var(--color-text); } .tbo-ticket-controls__intro { max-width: 620px; margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); } .tbo-ticket-controls__update { grid-area: update; justify-self: end; min-height: 40px; padding: 9px 16px; font-size: 13px; font-weight: 650; color: #fff; background: var(--primary); border: 0.5px solid var(--primary-dark); border-radius: 11px; box-shadow: 0 1px 2px rgba(0, 168, 148, 0.22); transition: background 0.18s ease, opacity 0.18s ease, transform 0.15s ease; } .tbo-ticket-controls__update:hover:not(:disabled) { background: var(--primary-hover); } .tbo-ticket-controls__update:active:not(:disabled) { transform: scale(0.97); } .tbo-ticket-controls__update:disabled { color: var(--color-text-muted); cursor: not-allowed; background: var(--color-control); border-color: var(--color-border-subtle); box-shadow: none; opacity: 0.75; } .tbo-ticket-controls__switches { grid-area: switches; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tbo-ticket-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 12px 13px; cursor: pointer; background: var(--color-surface-muted); border: 0.5px solid var(--color-border-subtle); border-radius: 13px; } .tbo-ticket-switch__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tbo-ticket-switch__label { font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--color-text); } .tbo-ticket-switch__note { font-size: 11px; line-height: 1.35; color: var(--color-text-muted); } .tbo-ticket-switch__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tbo-ticket-switch__track { position: relative; flex: 0 0 38px; width: 38px; height: 23px; background: var(--color-surface-strong); border: 0.5px solid var(--color-border); border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease; } .tbo-ticket-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); } .tbo-ticket-switch__input:checked + .tbo-ticket-switch__track { background: var(--tt-panel-accent); border-color: var(--primary-dark); } .tbo-ticket-switch__input:checked + .tbo-ticket-switch__track .tbo-ticket-switch__thumb { transform: translateX(15px); } .tbo-ticket-switch__input:focus-visible + .tbo-ticket-switch__track { outline: 2px solid var(--primary); outline-offset: 3px; } .tbo-ticket-controls__summary { grid-area: summary; margin: 0 2px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); } .tbo-ticket-results:empty { display: none; } @media (max-width: 760px) { .tbo-ticket-controls { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "switches" "summary" "update"; gap: 14px; } .tbo-ticket-controls__update { width: 100%; justify-self: stretch; } .tbo-ticket-controls__switches { grid-template-columns: 1fr; } } @media (max-width: 480px) { .tbo-ticket-controls { padding: 16px; } .tbo-ticket-controls__title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .tbo-ticket-controls__update, .tbo-ticket-switch__track, .tbo-ticket-switch__thumb { transition: none; } } .tbo-modal { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.1); --tt-accent-line: rgba(68, 93, 239, 0.28); --tt-bg: var(--color-surface); --tt-hairline: rgba(60, 60, 67, 0.13); --tt-chip: rgba(60, 60, 67, 0.06); --tt-good: #157f52; --tt-warn: #9a5b00; --tt-alert: #b3261e; --tt-rail: rgba(68, 93, 239, 0.3); position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; padding: 28px 20px; overflow: hidden; } .tbo-modal[hidden] { display: none; } .tbo-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 0.22s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .tbo-modal.is-open .tbo-modal__backdrop { opacity: 1; } .tbo-modal__dialog { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); max-height: min(92vh, 940px); max-height: min(92dvh, 940px); min-height: 0; overflow: hidden; color: var(--color-text); background: var(--tt-bg); border: 0.5px solid var(--tt-hairline); border-radius: 24px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32); opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 0.22s ease, transform 0.22s ease; } .tbo-modal.is-open .tbo-modal__dialog { opacity: 1; transform: none; } .tbo-modal__dialog:focus { outline: none; } .tbo-modal__head { display: flex; flex: 0 0 auto; gap: 12px; align-items: flex-start; padding: 18px 22px 15px; border-bottom: 1px solid var(--tt-hairline); } .tbo-modal__kind { flex: 0 0 auto; margin-top: 5px; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; white-space: nowrap; } .tbo-modal__identity { display: flex; flex: 1 1 auto; gap: 13px; align-items: center; min-width: 0; } .tbo-modal__marks { display: inline-flex; flex: 0 0 auto; gap: 4px; align-items: center; } .tbo-modal__titles { min-width: 0; } .tbo-modal__title { margin: 0; overflow: hidden; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; white-space: nowrap; text-overflow: ellipsis; } .tbo-modal__subtitle { margin: 3px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; } .tbo-modal__close { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; min-width: 36px; max-width: 36px; min-height: 36px; max-height: 36px; padding: 0; margin-left: auto; aspect-ratio: 1; color: var(--color-text-secondary); cursor: pointer; background: var(--tt-chip); border: none; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .tbo-modal__close .tbo-icon { display: block; width: 18px; height: 18px; } .tbo-modal__close:hover { color: var(--color-text); background: var(--tt-accent-soft); } .tbo-modal__close:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; } .tbo-modal__scroll { display: flex; flex: 1 1 auto; flex-direction: column; gap: 22px; min-height: 0; padding: 20px 22px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .tbo-modal__route-panel { display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; } .tbo-modal__map { position: relative; flex: 0 0 auto; height: 260px; overflow: hidden; background: var(--tt-chip); border: 1px solid var(--tt-hairline); border-radius: 16px; } .tbo-map__canvas { position: absolute; inset: 0; } .tbo-map__marker { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-map-marker-text, #fff); border: 3px solid var(--color-map-marker-surface, #fff); border-radius: var(--radius-full, 999px); box-shadow: var(--shadow-map-marker, 0 2px 6px rgba(0, 0, 0, 0.35)); } .tbo-modal__foot { display: flex; flex: 0 0 auto; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--tt-hairline); } .tbo-modal__price { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; } .tbo-modal__amount { font-size: 24px; font-weight: 650; line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .tbo-modal__price-note { font-size: 12px; line-height: 1.3; color: var(--color-text-muted); } .tbo-modal__seats { margin: 0; font-size: 12px; font-weight: 650; line-height: 1.25; color: var(--tt-alert); white-space: nowrap; text-align: center; } .tbo-modal__purchase { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; align-items: stretch; } .tbo-modal__buy { padding: 12px 26px; font: inherit; font-size: 15px; font-weight: 650; color: #fff; background: var(--tt-accent); border: none; border-radius: 12px; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; } .tbo-modal__buy:hover:not(:disabled) { filter: brightness(1.08); } .tbo-modal__buy:active:not(:disabled) { transform: translateY(1px); } .tbo-modal__buy:disabled { cursor: progress; opacity: 0.65; } .tbo-modal__buy:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 3px; } .tbo-modal__purchase-error { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 550; color: var(--tt-alert); text-align: right; } :root[data-theme="dark"] .tbo-modal { --tt-accent: #445def; --tt-accent-soft: rgba(68, 93, 239, 0.16); --tt-accent-line: rgba(68, 93, 239, 0.38); --tt-bg: #1b1d23; --tt-hairline: rgba(255, 255, 255, 0.12); --tt-chip: rgba(255, 255, 255, 0.07); --tt-good: #6ee7a8; --tt-warn: #f6c177; --tt-alert: #ff938c; --tt-rail: rgba(68, 93, 239, 0.38); } :root[data-theme="dark"] .tbo-modal__dialog { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); } .tbo-modal__itinerary { display: flex; flex-direction: column; gap: 22px; } .tbo-itinerary__head { display: flex; flex-wrap: nowrap; gap: 6px 12px; align-items: center; justify-content: space-between; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--tt-hairline); } .tbo-itinerary__title { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; align-items: baseline; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; } .tbo-itinerary__route { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .tbo-itinerary__direction { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: var(--tt-accent); text-transform: uppercase; } .tbo-chip { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 3px 8px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--color-text-secondary); white-space: nowrap; background: var(--tt-chip); border-radius: 999px; } .tbo-chip--cabin { align-self: center; font-weight: 700; letter-spacing: 0.02em; color: var(--tt-accent); background: var(--tt-accent-soft); } .tbo-chip--flight { gap: 5px; } .tbo-chip--flight .tbo-chip__label { color: var(--color-text-secondary); } .tbo-chip--flight .tbo-chip__value { font-weight: 700; letter-spacing: 0.02em; color: var(--tt-accent); } .tbo-legs { padding: 0; margin: 10px 0 0; list-style: none; } .tbo-leg__row { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 14px; align-items: stretch; } .tbo-leg__time { display: flex; flex-direction: column; padding-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .tbo-leg__date { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-muted); white-space: nowrap; } .tbo-leg__duration { padding: 8px 0; font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .tbo-leg__rail { position: relative; display: flex; justify-content: center; align-items: flex-start; } .tbo-leg__rail::before { position: absolute; left: 50%; width: 1px; content: ""; background: var(--tt-rail); transform: translateX(-50%); } .tbo-leg__rail--departure::before { top: 9.5px; bottom: 0; } .tbo-leg__rail--flight::before { top: 0; bottom: 0; } .tbo-leg__rail--arrival::before { top: 0; height: 9.5px; } .tbo-leg__node { position: relative; z-index: 1; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; background: var(--tt-bg); border: 2px solid var(--tt-accent); border-radius: 50%; } .tbo-leg__place { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tbo-leg__city { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .tbo-leg__code { font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.05em; color: var(--tt-accent); } .tbo-leg__airport { font-size: 11.5px; line-height: 1.35; color: var(--color-text-muted); } .tbo-leg__flight { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 0; } .tbo-leg__flight-head { display: flex; flex-wrap: wrap; gap: 3px 9px; align-items: center; min-width: 0; } .tbo-leg__flight-head .tbo-ticket__airline-logo { width: 22px; height: 22px; } .tbo-leg__carrier { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } .tbo-leg__facts { font-size: 11.5px; line-height: 1.4; color: var(--color-text-muted); } .tbo-leg__alert { font-size: 11.5px; line-height: 1.4; color: var(--tt-warn); } .tbo-wait { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; padding: 8px 0 8px 68px; margin: 6px 0; font-size: 12px; color: var(--color-text-secondary); border-top: 1px dashed var(--tt-hairline); border-bottom: 1px dashed var(--tt-hairline); } .tbo-wait .tbo-icon { color: var(--color-text-muted); } .tbo-wait__terminals { font-weight: 600; color: var(--tt-warn); } .tbo-wait__terminals::before { margin-right: 8px; color: var(--color-text-muted); content: "·"; } .tbo-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; align-items: start; font-size: 13px; } .tbo-details__section { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: 16px; background: var(--color-surface-raised); } .tbo-details__section > .tbo-details__heading { display: flex; gap: 8px; align-items: center; margin: 0; padding: 11px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--color-text-secondary); text-transform: uppercase; border-bottom: 1px solid var(--color-border-subtle); background: color-mix(in srgb, var(--color-surface-muted) 65%, var(--color-surface-raised)); } .tbo-details__section > .tbo-details__heading .tbo-icon { width: 1.2em; height: 1.2em; color: var(--primary); } .tbo-details__section--good > .tbo-details__heading .tbo-icon { color: var(--tt-good); } .tbo-details__section--warn > .tbo-details__heading .tbo-icon { color: var(--tt-warn); } .tbo-details__section--price > .tbo-details__heading .tbo-icon { color: var(--primary-dark); } .tbo-details__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; } .tbo-details__group { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tbo-details h5 { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .tbo-details__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; } .tbo-details__row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .tbo-details__row dt { display: flex; gap: 7px; align-items: center; min-width: 0; color: var(--color-text-secondary); } .tbo-details__row dt .tbo-icon { width: 1.05em; height: 1.05em; color: var(--color-text-muted); } .tbo-details__row dd { flex: 0 0 auto; margin: 0; font-weight: 600; letter-spacing: -0.01em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text); } .tbo-details__row--muted dd { font-weight: 500; color: var(--color-text-muted); } .tbo-details__rows--charges { gap: 7px; padding: 10px 11px; border-radius: 11px; background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent); } .tbo-details__section--price .tbo-details__body { gap: 10px; padding-bottom: 0; } .tbo-details__rows--total { gap: 0; margin: 0 -14px 0; padding: 12px 14px; border-top: 1px solid var(--tt-accent-line); background: color-mix(in srgb, var(--primary) 9%, var(--color-surface-raised)); } .tbo-details__row--total { gap: 10px; align-items: baseline; } .tbo-details__row--total dt { font-weight: 600; color: var(--color-text); } .tbo-details__row--total dd { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-text); } .tbo-details__leg-bags { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; margin: 0; list-style: none; border-radius: 11px; background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent); } .tbo-details__leg-bags li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); } .tbo-details__leg-bags li span:last-child { font-weight: 600; color: var(--color-text); } .tbo-details__notes { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; } .tbo-details__notes li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; line-height: 1.4; } .tbo-details__note-route { padding: 1px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-secondary); border-radius: 999px; background: var(--color-surface-muted); } .tbo-details__note-who { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); } .tbo-details__note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--color-text-muted); } .tbo-details__note--foot { padding-top: 2px; } :root[data-theme="dark"] .tbo-details__rows--total { background: color-mix(in srgb, var(--primary) 14%, var(--color-surface-raised)); } @media (max-width: 720px) { .tbo-details { gap: 10px; } .tbo-details__section { border-radius: 14px; } .tbo-details__body { padding: 13px; } .tbo-details__rows--total { margin-left: -13px; margin-right: -13px; padding: 11px 13px; } .tbo-details__row--total dd { font-size: 15px; } } .tbo-details__section--privileges { overflow: hidden; grid-column: 1 / -1; margin-bottom: 8px; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: 18px; background: var(--color-surface-raised); } .tbo-privileges__header { padding: 17px 18px 15px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); } .tbo-privileges__header > .tbo-details__heading { margin-bottom: 5px; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; text-transform: none; } .tbo-privileges { padding: 0; } .tbo-privileges__intro { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; color: var(--color-text-secondary); } .tbo-privileges__footnote { margin: 16px 0 0; padding-top: 12px; border-top: 0.5px solid var(--tt-hairline); font-size: 11px; line-height: 1.45; color: var(--color-text-muted); } .tbo-privileges__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .tbo-privileges__station { min-width: 0; background: transparent; } .tbo-privileges__station + .tbo-privileges__station { border-left: 1px solid var(--color-border-subtle); } .tbo-privileges__station-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 16px; border-bottom: 1px solid var(--color-border-subtle); background: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface-raised)); } .tbo-privileges__direction { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--color-surface-raised)); } .tbo-privileges__direction-icon { font-size: 16px; } .tbo-privileges__station-copy { display: grid; min-width: 0; gap: 2px; } .tbo-privileges__role { font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-dark); } .tbo-privileges__place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .tbo-privileges__iata { font-size: 23px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; color: var(--color-text); font-variant-numeric: tabular-nums; } .tbo-privileges__airport { font-size: 13px; font-weight: 400; letter-spacing: -0.015em; color: var(--color-text-secondary); } .tbo-privileges__carrier { margin-top: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-muted); } .tbo-privileges__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .tbo-privileges__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 14px 16px; } .tbo-privileges__item + .tbo-privileges__item { border-top: 1px solid var(--color-border-subtle); } .tbo-privileges__item-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--color-text-secondary); background: var(--color-surface-muted); } .tbo-privileges__item-icon i { font-size: 14px; } .tbo-privileges__item-copy { min-width: 0; } .tbo-privileges__title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--color-text); } .tbo-privileges__detail { margin: 4px 0 0; max-width: 42ch; font-size: 12px; line-height: 1.45; letter-spacing: -0.005em; color: var(--color-text-secondary); } .tbo-privileges__fine { margin: 7px 0 0; max-width: 42ch; font-size: 11px; line-height: 1.4; letter-spacing: -0.005em; color: var(--color-text-muted); } :root[data-theme="dark"] .tbo-privileges__footnote { border-color: var(--color-border-subtle); } @media (max-width: 720px) { .tbo-privileges__grid { grid-template-columns: 1fr; } .tbo-privileges__station + .tbo-privileges__station { border-top: 1px solid var(--color-border-subtle); border-left: 0; } .tbo-privileges__iata { font-size: 20px; } } @media (max-width: 430px) { .tbo-privileges__header > .tbo-details__heading { font-size: 14px; } .tbo-privileges__header { padding: 15px 14px 13px; } .tbo-privileges__station-head { padding: 14px; } .tbo-privileges__item { padding: 13px 14px; } } @media (max-width: 900px) { .tbo-modal { padding: 20px 14px; } .tbo-modal__map { height: 220px; } } @media (max-width: 720px) { .tbo-modal { align-items: stretch; justify-content: stretch; padding: 0; } .tbo-modal__dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: none; } .tbo-modal__head { gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; } .tbo-modal__close { width: 44px; height: 44px; min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px; aspect-ratio: 1; border-radius: 50%; } .tbo-modal__title { font-size: 18px; } .tbo-modal__kind { display: none; } .tbo-modal__scroll { gap: 18px; padding: 16px 16px 20px; } .tbo-modal__map { height: 200px; border-radius: 14px; } .tbo-modal__foot { flex-direction: row; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); } .tbo-modal__price { flex: 1 1 auto; gap: 1px; min-width: 0; } .tbo-modal__amount { font-size: 20px; } .tbo-modal__price-note { font-size: 11.5px; } .tbo-modal__seats { font-size: 11px; } .tbo-modal__purchase { flex: 0 0 auto; max-width: 58%; } .tbo-modal__buy { width: auto; padding: 10px 16px; font-size: 14px; white-space: nowrap; } .tbo-modal__purchase-error { max-width: 11rem; font-size: 11px; text-align: right; } .tbo-details { grid-template-columns: minmax(0, 1fr); gap: 18px; } .tbo-leg__row { grid-template-columns: 46px 14px minmax(0, 1fr); gap: 11px; } .tbo-wait { padding-left: 60px; } } @media (max-width: 430px) { .tbo-modal__identity { gap: 10px; } .tbo-modal__title { font-size: 17px; } .tbo-leg__row { grid-template-columns: 42px 14px minmax(0, 1fr); gap: 10px; } .tbo-leg__time, .tbo-leg__city { font-size: 13px; } .tbo-wait { padding-left: 0; } .tbo-modal__amount { font-size: 19px; } } .load-more { display: flex; justify-content: center; width: 100%; margin-top: 0.75rem; padding: 0; box-sizing: border-box; } .load-more[hidden] { display: none !important; } .load-more-button { --lm-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --lm-icon-size: 16px; --lm-gap: 8px; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border: 0.5px solid var(--color-border); border-radius: 980px; background: var(--color-surface-glass-strong); font-family: var(--lm-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.016em; line-height: 1; color: var(--color-text); cursor: pointer; -webkit-font-smoothing: antialiased; box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1); } .load-more-button:hover:not(:disabled):not(.end-of-results) { background: var(--color-surface-raised); border-color: var(--color-border-strong); transform: none; box-shadow: none; } .load-more-button:active:not(:disabled):not(.end-of-results) { transform: scale(0.98); } .load-more-button:disabled:not(.end-of-results):not(.is-loading) { opacity: 0.45; cursor: not-allowed; } .load-more-button .load-more-content { display: inline-flex; align-items: center; justify-content: center; gap: var(--lm-gap); min-width: 0; } .load-more-button .load-more-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--lm-icon-size); width: var(--lm-icon-size); height: var(--lm-icon-size); color: var(--primary); } .load-more-button .load-more-icon svg { display: block; width: var(--lm-icon-size); height: var(--lm-icon-size); } .load-more-button .load-more-label { display: block; white-space: nowrap; line-height: 1.15; } .load-more:has(.end-of-results) { align-items: center; gap: 14px; margin-top: 0.25rem; padding: 1rem 0 0.125rem; } .load-more:has(.end-of-results)::before, .load-more:has(.end-of-results)::after { content: ""; flex: 1 1 0; height: 0.5px; background: var(--color-border-subtle); } .load-more-button.end-of-results, .load-more-button.end-of-results:hover, .load-more-button.end-of-results:disabled { width: auto; max-width: none; min-height: 0; padding: 0; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none; font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.006em; color: var(--color-text-muted); cursor: default; pointer-events: none; opacity: 1; flex: 0 0 auto; } .load-more-button.is-loading { cursor: progress; pointer-events: none; color: var(--color-text-muted); border-color: var(--color-border-subtle); background: transparent; } .load-more-button.is-loading .load-more-spinner { flex: 0 0 15px; width: 15px; height: 15px; border: 1.5px solid var(--color-border-subtle); border-top-color: var(--primary); border-radius: 50%; animation: load-more-spin 0.7s linear infinite; } @keyframes load-more-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .load-more-button.is-loading .load-more-spinner { animation: none; border-top-color: var(--color-text-faint); } } @media (max-width: 640px) { .load-more:has(.end-of-results) { gap: 10px; padding-top: 0.875rem; } .load-more-button:not(.end-of-results) { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; } } .results-header { --rh-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --rh-text: var(--color-text); --rh-label: var(--color-text-muted); --rh-fill: var(--color-control); --rh-separator: var(--color-border-subtle); --rh-icon-size: 15px; background: transparent; padding: 0.625rem 0 0.75rem; margin-bottom: 0.25rem; } .results-header .results-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; } .results-header .results-header-bar__summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3em; margin: 0; min-width: 0; font-family: var(--rh-font); font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.022em; line-height: 1.25; color: var(--rh-text); -webkit-font-smoothing: antialiased; } .results-header .results-header-bar__count { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.028em; color: var(--primary); } .results-header .results-header-bar__label { color: var(--rh-text); font-weight: 400; } .results-header .share-results-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; min-height: 34px; min-width: 34px; padding: 0 14px; margin: 0; border: none; border-radius: 980px; background: var(--rh-fill); box-shadow: inset 0 0 0 0.5px var(--rh-separator); font-family: var(--rh-font); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.016em; line-height: 1; color: var(--rh-text); cursor: pointer; vertical-align: middle; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.2s ease; } .results-header .share-results-btn:hover { background: var(--color-control-hover); border-color: transparent; box-shadow: inset 0 0 0 0.5px var(--color-border); color: var(--rh-text); } .results-header .share-results-btn:active { transform: scale(0.98); } .results-header .share-results-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .results-header .share-results-btn__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--rh-icon-size); width: var(--rh-icon-size); height: var(--rh-icon-size); color: var(--rh-label); transition: color 0.2s ease; } .results-header .share-results-btn__icon svg { display: block; width: var(--rh-icon-size); height: var(--rh-icon-size); } .results-header .share-results-btn:hover .share-results-btn__icon { color: var(--rh-text); } .results-header .share-results-btn__label { display: block; white-space: nowrap; line-height: 1.15; } .results-header .share-results-btn.is-copied { background: rgba(52, 199, 89, 0.12); box-shadow: inset 0 0 0 0.5px rgba(52, 199, 89, 0.35); color: #248a3d; pointer-events: none; } .results-header .share-results-btn.is-copied .share-results-btn__icon { color: #34c759; } .results-header .share-results-btn.is-copied:hover, .results-header .share-results-btn.is-copied:active { transform: none; background: rgba(52, 199, 89, 0.12); box-shadow: inset 0 0 0 0.5px rgba(52, 199, 89, 0.35); } @media (prefers-reduced-motion: reduce) { .results-header .share-results-btn, .results-header .share-results-btn__icon { transition: none; } .results-header .share-results-btn:active { transform: none; } } @media (max-width: 768px) { .results-header { padding: 0.5rem 0 0.625rem; text-align: left; } .results-header .results-header-bar { flex-direction: row; align-items: center; gap: 10px; } .results-header .results-header-bar__summary { font-size: 1rem; letter-spacing: -0.02em; } .results-header .share-results-btn { margin-left: 0; margin-top: 0; width: auto; min-height: 36px; min-width: 36px; padding: 0 12px; background: var(--rh-fill); border: none; box-shadow: inset 0 0 0 0.5px var(--rh-separator); font-size: 0.8125rem; font-weight: 500; line-height: 1; } } @media (max-width: 480px) { .results-header .results-header-bar__summary { font-size: 0.9375rem; } } @media (max-width: 380px) { .results-header .share-results-btn { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; } .results-header .share-results-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .results-header .share-results-btn__icon { --rh-icon-size: 16px; } } .fp-samples-heading { --fsh-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; box-sizing: border-box; width: 100%; margin: 0.35rem 0 0.85rem; padding: 0; border: none; background: transparent; font-family: var(--fsh-font); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.35; color: var(--color-text, #1d1d1f); -webkit-font-smoothing: antialiased; } .fp-samples-heading[hidden] { display: none !important; } :root[data-theme="dark"] .fp-samples-heading { color: var(--color-text, rgba(235, 235, 245, 0.92)); } @media (max-width: 640px) { .fp-samples-heading { margin: 0.25rem 0 0.7rem; font-size: 1rem; } } .fpn-class-picker { --fpn-menu-bg: rgba(255, 255, 255, 0.96); --fpn-menu-border: rgba(60, 60, 67, 0.12); --fpn-menu-shadow: 0 10px 36px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); --fpn-option-hover: rgba(68, 93, 239, 0.1); --fpn-option-selected: rgba(68, 93, 239, 0.14); position: relative; grid-column: 1 / 3; min-width: 0; width: 100%; z-index: 20; } .fpn-class-picker.is-open { z-index: 60; } :root[data-theme="dark"] .fpn-class-picker { --fpn-menu-bg: rgba(40, 42, 50, 0.96); --fpn-menu-border: rgba(255, 255, 255, 0.12); --fpn-menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.1); --fpn-option-hover: rgba(68, 93, 239, 0.16); --fpn-option-selected: rgba(68, 93, 239, 0.22); } .fpn-class-picker__trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.4rem 0.55rem 0.45rem 0.7rem; border: none; border-radius: 10px; background: var(--fpn-fill); color: var(--fpn-text); font-family: var(--fpn-font); text-align: left; cursor: pointer; transition: box-shadow 0.15s ease, filter 0.15s ease; } .fpn-class-picker__trigger:hover { filter: brightness(0.98); } :root[data-theme="dark"] .fpn-class-picker__trigger:hover { filter: brightness(1.08); } .fpn-class-picker__trigger:focus-visible, .fpn-class-picker.is-open .fpn-class-picker__trigger { outline: none; filter: none; box-shadow: inset 0 0 0 1px rgba(68, 93, 239, 0.5), 0 0 0 3px rgba(68, 93, 239, 0.12); } .fpn-class-picker.is-error .fpn-class-picker__trigger { background: rgb(255 59 48 / 5%); box-shadow: inset 0 0 0 1px rgb(255 59 48 / 55%), 0 0 0 3px rgb(255 59 48 / 10%); } .fpn-class-picker.is-error .fpn-class-picker__label { color: #d70015; } .fpn-class-picker__meta { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-width: 0; flex: 1 1 auto; } .fpn-class-picker__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fpn-muted); line-height: 1.2; } .fpn-class-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; color: var(--fpn-text); } .fpn-class-picker__chevron { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--fpn-muted); font-size: 0.55rem; transition: transform 0.15s ease, color 0.15s ease; } .fpn-class-picker.is-open .fpn-class-picker__chevron { transform: rotate(180deg); color: var(--fpn-accent); } .fpn-class-picker__menu { position: absolute; z-index: 140; left: 0; right: 0; top: calc(100% + 0.35rem); bottom: auto; box-sizing: border-box; display: none; width: 100%; margin: 0; padding: 0.35rem; border: none; border-radius: 12px; background: var(--fpn-menu-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--fpn-menu-shadow); max-height: min(320px, 50vh); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .fpn-class-picker.is-open .fpn-class-picker__menu { display: block; } .fpn-class-picker.is-drop-up .fpn-class-picker__menu { top: auto; bottom: calc(100% + 0.35rem); } .fpn-class-picker__menu.is-portaled { display: block; left: auto; right: auto; top: auto; bottom: auto; width: auto; z-index: 10200; } .fpn-class-picker__option { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; min-height: 2.25rem; margin: 0; padding: 0.5rem 0.7rem; border: none; border-radius: 8px; background: transparent; color: var(--fpn-text); font-family: var(--fpn-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.016em; text-align: left; cursor: pointer; transition: background 0.12s ease; } .fpn-class-picker__option:hover, .fpn-class-picker__option:focus-visible { outline: none; background: var(--fpn-option-hover); } .fpn-class-picker__option[aria-selected="true"] { background: var(--fpn-option-selected); font-weight: 600; color: var(--fpn-text); } .fpn-class-picker__check { flex-shrink: 0; color: var(--fpn-accent); font-size: 0.7rem; opacity: 0; } .fpn-class-picker__option[aria-selected="true"] .fpn-class-picker__check { opacity: 1; } .fpn-class-picker__empty { padding: 0.75rem 0.65rem; font-size: 0.8125rem; color: var(--fpn-muted); text-align: center; line-height: 1.35; } .fpn-class-picker.is-disabled .fpn-class-picker__trigger { opacity: 0.55; cursor: not-allowed; } .fpn-class-picker__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; appearance: none !important; -webkit-appearance: none !important; } @media (max-width: 560px) { .fpn-class-picker { grid-column: 1; width: 100%; } .fpn-class-picker__menu { max-height: min(72vh, 440px); padding: 0.4rem; } .fpn-class-picker__option { min-height: 2.5rem; padding: 0.6rem 0.75rem; } } #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; } } .frm-beacon { --frm-fill: #445def; --frm-ink: #163a45; position: relative; width: 10px; height: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; } .frm-beacon--dep { --frm-fill: #445def; } .frm-beacon--arr { --frm-fill: #163a45; } .frm-beacon--stop { --frm-fill: #2f40c2; } .frm-beacon__pip { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; background: var(--frm-fill); box-shadow: 0 1px 2px rgba(15, 23, 32, 0.28); } .frm-beacon__code { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.94); color: var(--frm-ink); font-family: "IBM Plex Mono", ui-monospace, sfmono-regular, menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 32, 0.12); } .frm-beacon--arr .frm-beacon__code { left: auto; right: 14px; } .frm-beacon:focus-visible { outline: 2px solid #445def; outline-offset: 3px; } .frm-waypoint { width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 50%; background: #c4922a; } :root[data-theme="dark"] .frm-beacon { --frm-ink: #e8eef4; } :root[data-theme="dark"] .frm-beacon--arr { --frm-fill: #5e7eff; } :root[data-theme="dark"] .frm-beacon__code { background: rgba(11, 16, 22, 0.9); } :root[data-theme="dark"] .frm-beacon__pip { border-color: #0b1016; } .frm-plane-anchor { width: 0; height: 0; overflow: visible; pointer-events: none; } .frm-plane { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; transform: translate(-50%, -50%); background: transparent; } .frm-plane__jet { width: 44px; height: 44px; color: #ffffff; transform: rotate(var(--frm-heading, 0deg)); transform-origin: 50% 50%; filter: drop-shadow(0 1px 2px rgba(15, 23, 32, 0.45)); } .frm-plane__jet svg { display: block; width: 100%; height: 100%; } #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)); } .seo-intro.content-page { --sp-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --sp-text: var(--color-text); --sp-label: var(--color-text-secondary); --sp-fill: var(--color-control); --sp-separator: var(--color-border-subtle); max-width: 1400px; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--sp-text); } .seo-intro.content-page .footer-container { padding: 0 clamp(1rem, 2.5vw, 1.25rem); } .seo-intro.content-page h2 { margin: 0 0 0.875rem; font-family: var(--sp-font); font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; color: var(--sp-text); } .seo-intro.content-page p { margin: 0 0 0.75rem; font-family: var(--sp-font); font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.55; color: color-mix(in srgb, var(--sp-label) 80%, var(--sp-text) 20%); } .seo-intro.content-page p:last-of-type { margin-bottom: 0; } .seo-top-routes { --str-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --str-text: var(--color-text); --str-label: var(--color-text-muted); --str-fill: var(--color-control); --str-separator: var(--color-border-subtle); --str-accent: #445def; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 0.5px solid var(--str-separator); } .seo-top-routes__title { margin: 0 0 0.875rem; font-family: var(--str-font); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: color-mix(in srgb, var(--str-text) 72%, var(--str-label) 28%); } .seo-top-routes__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4375rem; } .seo-top-routes__item { display: flex; align-items: center; justify-content: center; gap: 0.3125rem; min-width: 0; min-height: 2.125rem; padding: 0.375rem 0.5625rem; border: 0.5px solid var(--str-separator); border-radius: 980px; background: var(--str-fill); box-shadow: inset 0 1px 0 var(--color-highlight); font-family: var(--str-font); font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--str-text); text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .seo-top-routes__item:hover { background: var(--color-surface-raised); border-color: rgba(68, 93, 239, 0.28); color: var(--str-text); box-shadow: 0 1px 4px rgba(68, 93, 239, 0.08), inset 0 0 0 0.5px rgba(68, 93, 239, 0.12); text-decoration: none; } .seo-top-routes__origin, .seo-top-routes__dest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-top-routes__arrow { flex-shrink: 0; font-size: 0.625rem; font-weight: 400; color: var(--str-label); opacity: 0.72; } @media (max-width: 1180px) { .seo-top-routes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 768px) { .seo-top-routes { margin-top: 1.5rem; padding-top: 1.25rem; } .seo-top-routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; } .seo-top-routes__item { min-height: 2rem; padding: 0.3125rem 0.4375rem; } } @media (max-width: 480px) { .seo-top-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .seo-top-routes__item { transition: none; } }