.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: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 0; transition: all var(--transition-base) ease; box-shadow: var(--shadow-md); position: relative; } .flight-card-compact:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); background: var(--gray-50); cursor: pointer; } .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: 120px !important; height: 90px !important; min-width: 120px; min-height: 90px; max-width: 120px; max-height: 90px; object-fit: cover; object-position: center; border-radius: var(--radius-sm); 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); padding: 8px 16px; font-weight: var(--font-medium); border-radius: var(--radius-full); } .book-btn:hover { background: var(--primary-hover); 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: #99f6e4; 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: #ccfbf1; color: #115e59; border-color: #5eead4; max-width: calc(100% - 24px); } .fp-multi-leg-badge .flight-id-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .fp-multi-leg-legs-panel { border-top: 1px solid var(--gray-200); margin-top: 10px; padding: 18px 14px 14px; background: var(--gray-50); 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(--gray-200); } .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(--gray-100); font-size: 11px; font-weight: 700; color: var(--gray-600); flex-shrink: 0; } .fp-leg-route { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; min-width: 0; } .fp-leg-point { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fp-leg-code { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--gray-900); line-height: 1.2; } .fp-leg-city { font-size: 12px; font-weight: 400; color: var(--gray-500); line-height: 1.25; } .fp-leg-arrow { position: relative; display: inline-block; width: 14px; height: 1px; margin: 10px 2px 0; background: var(--gray-300); align-self: flex-start; 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(--gray-400); } .fp-leg-meta { font-size: 12px; font-weight: 500; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .fp-leg-price { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--gray-900); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 76px; } @media (max-width: 768px) { .fp-leg-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; } .fp-leg-index { grid-row: 1; } .fp-leg-route { grid-row: 1; grid-column: 2; } .fp-leg-price { grid-row: 1; grid-column: 3; min-width: 0; } .fp-leg-meta { grid-row: 2; grid-column: 2 / -1; text-align: left; white-space: normal; } } .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(--gray-700); 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: #ccfbf1; color: #115e59; font-size: 13px; font-weight: 600; border: 1px solid #5eead4; } .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: #0f766e; } .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: #f5f5f7; --pb-surface: #fff; --pb-text: #1d1d1f; --pb-secondary: #6e6e73; --pb-label: #86868b; --pb-separator: rgb(60 60 67 / 14%); --pb-accent: #0dae9c; --pb-radius: 20px; --pb-radius-inner: 14px; --pb-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px; background: rgb(0 0 0 / 38%); 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__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: 0 28px 88px rgb(0 0 0 / 16%), 0 0 0 0.5px rgb(0 0 0 / 5%); } .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: rgb(0 0 0 / 12%) transparent; } .prebook-modal__body::-webkit-scrollbar { width: 4px; } .prebook-modal__body::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 12%); 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: rgb(245 245 247 / 92%); 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 rgb(0 0 0 / 6%); border-radius: 999px; background: rgb(255 255 255 / 88%); color: var(--pb-secondary); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 8px rgb(0 0 0 / 6%); } .prebook-modal__close:hover { color: var(--pb-text); background: #fff; } .prebook-modal__trip { padding: 16px; border-radius: var(--pb-radius-inner); background: var(--pb-surface); box-shadow: 0 1px 0 rgb(0 0 0 / 4%); } .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: rgb(13 174 156 / 10%); color: #0a7f72; 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: 0 1px 0 rgb(0 0 0 / 4%); } .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: rgb(60 60 67 / 22%); } .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, #e5e5ea, #d1d1d6); } .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); background: rgb(255 255 255 / 98%); box-shadow: 0 16px 40px rgb(0 0 0 / 12%), 0 0 0 0.5px rgb(0 0 0 / 4%); 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); border-radius: 10px; background: var(--pb-bg); font-size: 14px; color: var(--pb-text); } .prebook-country-picker__search:focus { outline: none; border-color: var(--pb-accent); background: #fff; } .prebook-country-picker__options { max-height: 200px; overflow: auto; padding: 8px; overscroll-behavior: contain; } .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); 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); 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: rgb(120 120 128 / 16%); color: rgb(60 60 67 / 60%); 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: rgb(120 120 128 / 24%); } .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: #007aff; 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: #007aff; 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: rgb(245 245 247 / 96%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .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, #14c9b5 0%, var(--pb-accent) 48%, #098f7f 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--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; height: 420px; max-height: 420px; 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: 520px) { .prebook-modal { align-items: flex-end; padding: 0; } .prebook-modal__panel { position: relative; width: 100%; height: fit-content; max-height: 100dvh; border-radius: 20px 20px 0 0; } .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)); } } .search-container { --sf-bg: #fff; --sf-fill: #f5f5f7; --sf-fill-elevated: #efeff4; --sf-separator: rgba(60, 60, 67, 0.14); --sf-label: #86868b; --sf-text: #1d1d1f; --sf-radius-shell: 20px; --sf-radius-field: 14px; --sf-radius-control: 10px; --sf-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 0 0 0.5px 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); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-radius: var(--sf-radius-shell); box-shadow: none; margin: var(--space-lg) 0; overflow: visible; } .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); } .search-container > * { position: relative; z-index: 1; } .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 .search-tabs { display: flex; 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 0 auto; min-width: 0; margin-bottom: 0; padding: 0.5rem 0.875rem; 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; 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; } .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); } .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; } .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 rgba(13, 174, 156, 0.14), inset 0 0 0 1px rgba(13, 174, 156, 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); } .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(13, 174, 156, 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-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .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; } .search-container .search-form .airport-option:hover, .search-container .search-form .airport-option.selected, .search-container .search-form .airport-option.highlighted { background: rgba(13, 174, 156, 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 i { flex-shrink: 0; width: 1rem; color: var(--sf-label); font-size: 12px; } .search-container .search-form .airport-count-badge { border-color: rgba(13, 174, 156, 0.35); background: rgba(13, 174, 156, 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-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; } .search-container .search-form .route-detail-row { align-items: center; } .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); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-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 { top: auto; right: 0.5rem; bottom: 0; left: 0.5rem; 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); } .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: column; width: 100%; } .search-container .search-form .show-flights-btn { width: 100%; justify-content: center; order: 1; } .search-container .search-form .reset-btn { display: none; } } @media (max-width: 640px) { .search-container { --sf-radius-shell: 16px; margin: 0.75rem 0; border-radius: var(--sf-radius-shell); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-radius: var(--sf-radius-shell); } .search-container .search-header { padding: 0.875rem 0.875rem 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-tab { padding: 0.5rem 0.75rem; 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-tabs { padding: 2px; } .search-container .search-tab { padding: 0.4375rem 0.5rem; } .search-container .search-tab .tab-text-mobile { display: inline !important; font-size: 11px; } } @media (max-width: 768px) { .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="help"] .tab-icon { display: none !important; } .search-container .search-tab .tab-text-mobile { display: inline !important; font-size: 12px; } } @media (max-width: 1024px) { html body .container > .search-container, html body .search-container { --sf-radius-shell: 20px; border: none; border-radius: var(--sf-radius-shell); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-radius: var(--sf-radius-shell); } } @media (max-width: 768px) { html body .container > .search-container, html body .search-container { --sf-radius-shell: 18px; border-radius: var(--sf-radius-shell); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-radius: var(--sf-radius-shell); } } @media (max-width: 640px) { html body .container > .search-container, html body .search-container { --sf-radius-shell: 16px; border-radius: var(--sf-radius-shell); border-top-left-radius: var(--sf-radius-shell); border-top-right-radius: var(--sf-radius-shell); border-bottom-left-radius: var(--sf-radius-shell); border-bottom-right-radius: var(--sf-radius-shell); } } .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) { 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(13, 174, 156, 0.38); --aa-separator: rgba(60, 60, 67, 0.1); --aa-radius: 14px; --aa-shadow: 0 8px 28px rgba(13, 174, 156, 0.08), 0 0 0 1px rgba(13, 174, 156, 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-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, 0.22) 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); } .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(13, 174, 156, 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; } .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; } .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(13, 174, 156, 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: #fff; border: none; border-radius: 16px; box-shadow: 0 20px 56px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.06); 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: rgba(0, 0, 0, 0.28); 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 rgba(60, 60, 67, 0.08); display: flex; gap: 0.375rem; flex-wrap: wrap; } .quick-select-btn { padding: 0.375rem 0.75rem; border: none; border-radius: 980px; background: #f5f5f7; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: #1d1d1f; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .quick-select-btn:hover { background: rgba(13, 174, 156, 0.12); color: #0a8f80; } .date-range-calendars { padding: 0.625rem 0.875rem 0.75rem; flex: 1; overflow-y: auto; min-height: 0; } .date-range-calendar-month .calendar-month-header { 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: #1d1d1f; } .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: #f5f5f7; color: #1d1d1f; cursor: pointer; transition: background 0.2s ease; } .date-range-calendar-month .calendar-nav-btn:hover { background: #e8e8ed; color: #1d1d1f; } .date-range-calendar-month .calendar-day-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #86868b; padding: 0.125rem 0; } .date-range-calendar-month .calendar-days-grid { gap: 0.125rem; } .date-range-calendar-month .calendar-day { aspect-ratio: 1; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: #1d1d1f; border-radius: 50%; transition: background 0.15s ease; } .date-range-calendar-month .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: rgba(60, 60, 67, 0.08); } .date-range-calendar-month .calendar-day-disabled { color: #c7c7cc; } .date-range-calendar-month .calendar-day-today { font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(13, 174, 156, 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: #fff !important; font-weight: 600; border-radius: 50% !important; box-shadow: none; } .date-range-picker-dropdown .calendar-day-in-range { background: rgba(13, 174, 156, 0.14) !important; color: #1d1d1f; 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(13, 174, 156, 0.08) !important; border-radius: 0; } .date-range-footer { padding: 0.75rem 0.875rem; border-top: 1px solid rgba(60, 60, 67, 0.08); gap: 0.5rem; background: #fff; 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: #f5f5f7; border: none; color: #1d1d1f; } .date-range-clear-btn:hover { background: #e8e8ed; border: none; transform: none; } .date-range-apply-btn { background: var(--primary); border: none; color: #fff; 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: #f5f5f7; --scs-border: rgba(60, 60, 67, 0.1); --scs-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04); } .contact-bar:has(+ .container > .search-container) { position: relative; z-index: 2; 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; flex-wrap: nowrap; gap: 0.375rem 0.5rem; width: var(--scs-drawer-width); max-width: none; margin-inline: auto; margin-top: 0; margin-bottom: 0; padding: 0.5625rem 1rem 0.625rem; 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-label { font-weight: 500; } .contact-bar:has(+ .container > .search-container) .contact-btn:not(.whatsapp-btn) { background: #fff; } .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: 0; padding-inline: var(--scs-shell-pad); padding-top: 0; } .contact-bar + .container > .search-container { --sf-bg: #fff; --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.625rem; 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.5625rem 0.5rem; gap: 0.4375rem; } .contact-bar:has(+ .container > .search-container) .contact-label { margin-right: 0.5rem; 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); } } @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-container { padding: 0.375rem 0.4375rem 0.4375rem; gap: 0.375rem; } .contact-bar:has(+ .container > .search-container) .contact-label { margin-right: 0.4375rem; font-weight: 500; } .contact-bar:has(+ .container > .search-container) .contact-btn { min-height: 30px; padding: 0.3125rem 0.4375rem; } .contact-bar:has(+ .container > .search-container) .contact-btn-text { font-size: 11px; } .contact-bar:has(+ .container > .search-container) .contact-btn i { font-size: 10px; } } @media (max-width: 390px) { .contact-bar:has(+ .container > .search-container), .contact-bar + .container:has(> .search-container) { --scs-drawer-width: 88%; } .contact-bar:has(+ .container > .search-container) .contact-label { font-size: 10px; } .contact-bar:has(+ .container > .search-container) .contact-btn-text { 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); } } 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 .loading-spinner, .ios-webview .fa-spin, .ios-webview .fa-sync-alt { animation-play-state: paused !important; } .ios-webview .auth-active .loading-spinner, .ios-webview .auth-active .fa-spin, .ios-webview .auth-active .fa-sync-alt { 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 { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .webview-mode .loading-overlay .loading-spinner { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .ios-webview button, .ios-webview a, .ios-webview .clickable { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); -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-mode .search-tabs { display: none !important; } .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; } body.webview-mode.profile-page .search-container { display: none !important; } body.webview-mode.profile-page .profile-container { margin-top: 0 !important; } .webview-mode .search-container.webview-hidden { display: none !important; } .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; } .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-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { --cta-apple-top: #14c9b5; --cta-apple-mid: var(--primary); --cta-apple-bottom: var(--primary-dark); --cta-apple-hover-top: #16d4bf; --cta-apple-hover-mid: var(--primary-hover); --cta-apple-hover-bottom: #098f7f; background: linear-gradient( 180deg, var(--cta-apple-top) 0%, var(--cta-apple-mid) 46%, var(--cta-apple-bottom) 100% ); border: none; 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 0.5px 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: background 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-details-popup .popup-footer .book-btn:hover, #booking-details-modal .popup-footer .book-btn:hover { background: linear-gradient( 180deg, var(--cta-apple-hover-top) 0%, var(--cta-apple-hover-mid) 46%, var(--cta-apple-hover-bottom) 100% ); color: #fff; transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.26); } .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-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 { 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-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { border-radius: 980px; min-height: 44px; padding: 0 22px; font-size: 15px; 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, #flight-details-popup .popup-footer .book-btn.booked, #booking-details-modal .popup-footer .book-btn.booked { --booked-top: #3ee07a; --booked-mid: #34c759; --booked-bottom: #248a3d; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.018em; background: linear-gradient( 180deg, var(--booked-top) 0%, var(--booked-mid) 46%, var(--booked-bottom) 100% ); color: #fff; cursor: default; pointer-events: none; opacity: 1; border: none; box-shadow: none; transform: none; } .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, .btn.btn--solid.book-btn.is-success.booked:disabled, .btn.btn--solid.book-btn.is-success.booked:disabled:hover { background: linear-gradient( 180deg, var(--booked-top) 0%, var(--booked-mid) 46%, var(--booked-bottom) 100% ); color: #fff; transform: none; box-shadow: none; } .flight-card-compact .action-buttons .book-btn.booked, .fp-multi-leg-card .action-buttons .book-btn.booked { border-radius: 10px; min-height: 36px; padding: 0 14px; } #flight-details-popup .popup-footer .book-btn.booked, #booking-details-modal .popup-footer .book-btn.booked { border-radius: 980px; min-height: 44px; padding: 0 20px; font-size: 15px; } .show-flights-btn:disabled { background: rgba(60, 60, 67, 0.18); color: rgba(60, 60, 67, 0.55); box-shadow: none; opacity: 1; } .show-flights-btn:disabled:hover { background: rgba(60, 60, 67, 0.18); transform: none; box-shadow: none; } .show-flights-btn.is-loading, .show-flights-btn.is-loading:disabled, .show-flights-btn.is-loading:disabled:hover { position: relative; overflow: hidden; isolation: isolate; cursor: progress; pointer-events: none; color: #fff; opacity: 1; background: linear-gradient( 180deg, var(--cta-apple-top) 0%, var(--cta-apple-mid) 46%, var(--cta-apple-bottom) 100% ); box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: none; } .show-flights-btn.is-loading::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 105deg, transparent 34%, rgba(255, 255, 255, 0.34) 49%, rgba(255, 255, 255, 0.08) 53%, transparent 68% ); transform: translate3d(-125%, 0, 0) skewX(-14deg); animation: show-flights-shimmer 1.65s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; pointer-events: none; will-change: transform; } .show-flights-btn.is-loading::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 7px; height: 1.5px; border-radius: 2px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.85) 55%, transparent ); transform: scaleX(0); transform-origin: left center; opacity: 0; animation: show-flights-scan 1.85s cubic-bezier(0.55, 0.08, 0.25, 1) infinite; pointer-events: none; will-change: transform, opacity; } .show-flights-btn__scan-content { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0; } .show-flights-btn__label { letter-spacing: -0.024em; } .show-flights-btn__meter { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; height: 1em; } .show-flights-btn__meter span { width: 3px; height: 3px; border-radius: 50%; background: currentcolor; opacity: 0.28; transform: scale(0.82); animation: show-flights-pulse 1.05s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; } .show-flights-btn__meter span:nth-child(2) { animation-delay: 0.16s; } .show-flights-btn__meter span:nth-child(3) { animation-delay: 0.32s; } @keyframes show-flights-shimmer { to { transform: translate3d(125%, 0, 0) skewX(-14deg); } } @keyframes show-flights-scan { 0% { transform: scaleX(0); transform-origin: left center; opacity: 0; } 18% { opacity: 0.85; } 48% { transform: scaleX(1); transform-origin: left center; opacity: 0.95; } 52% { transform: scaleX(1); transform-origin: right center; opacity: 0.95; } 82% { opacity: 0.5; } 100% { transform: scaleX(0); transform-origin: right center; opacity: 0; } } @keyframes show-flights-pulse { 0%, 72%, 100% { opacity: 0.22; transform: scale(0.78); } 36% { opacity: 1; transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .show-flights-btn.is-loading::before, .show-flights-btn.is-loading::after, .show-flights-btn__meter span { animation: none; } .show-flights-btn.is-loading::before, .show-flights-btn.is-loading::after { display: none; } .show-flights-btn__meter span { opacity: 0.65; transform: none; } } .flight-card-compact, .fp-multi-leg-card { --fc-bg: #fff; --fc-fill: #f5f5f7; --fc-fill-elevated: #efeff4; --fc-separator: rgba(60, 60, 67, 0.12); --fc-label: #86868b; --fc-text: #1d1d1f; --fc-text-secondary: #6e6e73; --fc-radius: 16px; --fc-radius-inner: 12px; --fc-radius-pill: 980px; --fc-shadow: 0 2px 16px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.04); --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: 1px solid transparent; border-radius: var(--fc-radius); padding: 14px 16px; margin-bottom: 0; box-shadow: var(--fc-shadow); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .flight-card-compact:hover, .fp-multi-leg-card:hover { background: rgba(13, 174, 156, 0.03); border-color: rgba(13, 174, 156, 0.55); box-shadow: 0 4px 20px rgba(13, 174, 156, 0.1), 0 0 0 1px rgba(13, 174, 156, 0.18); cursor: pointer; } .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-radius-inner); 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-radius-inner); } .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 { gap: 1px; } .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 { flex-direction: row; gap: 8px; border: none; box-shadow: none; overflow: visible; background: transparent; border-radius: 0; } .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 { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; background: var(--fc-fill); color: var(--fc-label); border: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; } .flight-card-compact .action-buttons .fc-share-btn:hover { background: var(--fc-fill-elevated); color: var(--fc-text); box-shadow: none; } .flight-card-compact .action-buttons .favorite-btn:hover { background: var(--fc-fill-elevated); color: var(--danger); 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.1); } .flight-card-compact.booking-card { border-left: none; } .flight-card-compact.booking-card:hover { background: rgba(13, 174, 156, 0.03); border-color: rgba(13, 174, 156, 0.55); } .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(13, 174, 156, 0.2); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(13, 174, 156, 0.12); } .fp-multi-leg-card:hover { border-color: rgba(13, 174, 156, 0.65); box-shadow: 0 4px 20px rgba(13, 174, 156, 0.12), 0 0 0 1px rgba(13, 174, 156, 0.22); } .fp-multi-leg-card .fp-multi-leg-badge { background: rgba(13, 174, 156, 0.1); color: #0a8b7d; border: none; border-radius: var(--fc-radius) 0 10px 0; font-family: var(--fc-font); font-size: 10px; font-weight: 600; } .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-arrow { background: var(--fc-separator); } .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-price { font-family: var(--fc-font); color: var(--fc-text); } .flights-list, .bookmarks-list { gap: 12px; } @media (max-width: 1024px) { .flight-card-compact, .fp-multi-leg-card { --fc-tear-cutout: #f8fafc; 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; justify-self: end; align-self: start; 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); } .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; justify-self: start; align-self: end; 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; justify-self: end; align-self: 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-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 14px 14px; margin: 0 -14px; border-bottom: none; width: calc(100% + 28px) !important; } .flight-card-compact .fc-tear, .fp-multi-leg-card .fc-tear { --fc-tear-notch: 22px; display: block; position: relative; flex-shrink: 0; box-sizing: border-box; height: 0; margin: 0 -14px; padding: 0 calc(var(--fc-tear-notch) / 2); width: calc(100% + 28px); background: transparent; border: none; border-top: 1px dashed rgba(60, 60, 67, 0.34); pointer-events: none; } .flight-card-compact .fc-tear::before, .flight-card-compact .fc-tear::after, .fp-multi-leg-card .fc-tear::before, .fp-multi-leg-card .fc-tear::after { content: ""; position: absolute; top: 0; width: var(--fc-tear-notch); height: var(--fc-tear-notch); border-radius: 50%; background: var(--fc-tear-cutout); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.14); z-index: 2; pointer-events: none; } .flight-card-compact .fc-tear::before, .fp-multi-leg-card .fc-tear::before { left: 0; transform: translate(-50%, -50%); } .flight-card-compact .fc-tear::after, .fp-multi-leg-card .fc-tear::after { right: 0; transform: translate(50%, -50%); } .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 { 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; align-self: start; justify-self: 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; align-self: start; justify-self: 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; align-self: center; justify-self: start; max-width: none; text-align: left; } .flight-card-compact .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; justify-self: end; align-self: start; 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 { text-align: right; font-size: 11px; } .flight-card-compact .fc-bottom .price-line { justify-content: 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 { 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; } .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-direction: row !important; flex-wrap: 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 .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, .fp-multi-leg-card .fc-route { display: contents; } .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: 1; min-width: 0; display: flex; align-items: center; justify-content: center; height: auto; width: auto; padding: 0 4px; } .flight-card-compact .fc-hero .aircraft-image-container, .fp-multi-leg-card .fc-hero .aircraft-image-container { width: 120px !important; height: 90px !important; min-width: 120px !important; min-height: 52px !important; max-width: 120px !important; max-height: 90px !important; flex-shrink: 0; border-radius: var(--fc-radius-inner); background: var(--fc-fill) !important; } .flight-card-compact .fc-hero .flight-list-aircraft-image, .fp-multi-leg-card .fc-hero .flight-list-aircraft-image { width: 120px !important; height: 90px !important; min-width: 120px !important; min-height: 90px !important; max-width: 120px !important; max-height: 90px !important; object-fit: cover; border-radius: var(--fc-radius-inner); 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 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; max-width: none; } .flight-card-compact .flight-actions, .fp-multi-leg-card .flight-actions { order: 8; display: flex; flex-direction: column; width: 140px; 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: #fff; --fc-shell-bg: #f5f5f7; background: var(--fc-shell-bg); padding: 13px 16px; border: 0.5px solid rgba(60, 60, 67, 0.1); box-shadow: none; } .flight-card-compact:hover, .fp-multi-leg-card:hover, .flight-card-compact.booking-card:hover { background: #eef6f5; border-color: rgba(13, 174, 156, 0.55); box-shadow: none; } .fp-multi-leg-card:hover { box-shadow: none; } .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: var(--fc-segment-bg); } .flight-card-compact .flight-card-content, .fp-multi-leg-card .flight-card-content { gap: 10px 12px; } .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: var(--fc-segment-bg); border: 0.5px solid var(--fc-separator); border-radius: 12px; } .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: rgba(245, 245, 247, 0.95); font-size: 10px; letter-spacing: 0.06em; } .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; padding: 8px 12px 8px 4px; } .flight-card-compact .fc-hero .flight-aircraft-image::before, .fp-multi-leg-card .fc-hero .flight-aircraft-image::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--fc-shell-bg); transform: translate(50%, -50%); z-index: 2; pointer-events: none; } .flight-card-compact .fc-hero .flight-aircraft-image::after, .fp-multi-leg-card .fc-hero .flight-aircraft-image::after { content: ""; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--fc-shell-bg); transform: translate(50%, 50%); z-index: 2; pointer-events: none; } .flight-card-compact .flight-ratings:not(:empty):has(*)::before, .fp-multi-leg-card .flight-ratings:not(:empty):has(*)::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 1px dashed rgba(60, 60, 67, 0.34); z-index: 1; pointer-events: none; } .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 .savings-line.has-savings, .fp-multi-leg-card .savings-line.has-savings { font-weight: 600; } .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: 7; 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 .booking-info-section::before, .fp-multi-leg-card.booking-card .booking-info-section::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 1px dashed rgba(60, 60, 67, 0.34); pointer-events: none; } .flight-card-compact.booking-card .price-info-section, .fp-multi-leg-card.booking-card .price-info-section { order: 8; 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; } } .load-more { display: flex; justify-content: center; width: 100%; margin-top: 0.75rem; padding: 0; box-sizing: border-box; } .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 rgba(60, 60, 67, 0.14); border-radius: 980px; background: rgba(255, 255, 255, 0.88); font-family: var(--lm-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.016em; line-height: 1; color: #1d1d1f; 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: #fff; border-color: rgba(60, 60, 67, 0.2); 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: rgba(60, 60, 67, 0.12); } .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: #86868b; cursor: default; pointer-events: none; opacity: 1; flex: 0 0 auto; } .load-more-button.is-loading { cursor: progress; pointer-events: none; color: #86868b; border-color: rgba(60, 60, 67, 0.12); background: transparent; } .load-more-button.is-loading .load-more-spinner { flex: 0 0 15px; width: 15px; height: 15px; border: 1.5px solid rgba(60, 60, 67, 0.12); 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: rgba(60, 60, 67, 0.35); } } @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; } } #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-separator: rgba(60, 60, 67, 0.14); --fd-separator-light: rgba(60, 60, 67, 0.08); --fd-label: #86868b; --fd-text: #1d1d1f; --fd-text-secondary: #6e6e73; --fd-accent: #0dae9c; --fd-radius: 22px; --fd-radius-inner: 16px; --fd-radius-pill: 980px; --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; } #flight-details-popup.flight-popup-overlay, #booking-details-modal.flight-popup-overlay { background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } #flight-details-popup.flight-popup-overlay.active, #booking-details-modal.flight-popup-overlay.active { padding: 24px; } #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { 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: 1080px; width: min(94vw, 1080px); max-height: min(90vh, 820px); } #flight-details-popup .popup-close-corner, #booking-details-modal .popup-close-corner { top: 14px; right: 14px; width: 32px; height: 32px; 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; } #flight-details-popup .popup-close-corner:hover, #booking-details-modal .popup-close-corner:hover { background: #fff; color: var(--fd-text); transform: scale(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } #flight-details-popup .popup-content, #booking-details-modal .popup-content { padding: 14px 16px 16px; gap: 10px; background: var(--fd-shell); flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; } #flight-details-popup .route-map-container, #booking-details-modal .route-map-container { height: 168px; min-height: 168px; border-radius: var(--fd-radius-inner); overflow: hidden; box-shadow: none; border: 0.5px solid var(--fd-separator-light); background: var(--fd-surface); } #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { height: 100%; min-height: 168px; } #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; } #flight-details-popup .route-section, #booking-details-modal .route-section { grid-column: 1; grid-row: 1; } #flight-details-popup .pricing-section, #booking-details-modal .pricing-section { grid-column: 2; grid-row: 1; } #flight-details-popup .aircraft-section, #booking-details-modal .aircraft-section { grid-column: 1; grid-row: 2; } #flight-details-popup .details-section, #booking-details-modal .details-section { grid-column: 2; grid-row: 2; } #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: 14px 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); min-width: 0; overflow: visible; height: 100%; } #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; } #flight-details-popup .popup-section-title > i, #booking-details-modal .popup-section-title > i { display: none; } #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); } #flight-details-popup .popup-footer .action-btn, #booking-details-modal .popup-footer .action-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; transition: background 0.2s ease, transform 0.12s ease, opacity 0.2s ease; } #flight-details-popup .popup-footer .popup-footer-close, #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; } #flight-details-popup .popup-footer .popup-footer-close: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; } #flight-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { min-width: 120px; } #flight-details-popup .popup-footer .favorite-btn, #booking-details-modal .popup-footer .favorite-btn { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; background: var(--fd-fill); color: var(--fd-label); border: none; border-radius: 50%; } #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; } #flight-details-popup .popup-footer .favorite-btn.favorited, #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: rgba(255, 59, 48, 0.1); border: none; } #flight-details-popup .popup-footer .chat-btn, #booking-details-modal .popup-footer .popup-btn { background: var(--fd-fill); color: var(--fd-text); border: none; } #flight-details-popup .popup-footer .cancel-btn { background: rgba(255, 59, 48, 0.12); color: #d70015; border: none; padding: 0 18px; min-width: 120px; } #flight-details-popup .popup-footer .cancel-btn:hover { background: rgba(255, 59, 48, 0.18); color: #c10012; transform: none; box-shadow: none; } #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); } #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; } #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; } } @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 { display: flex !important; flex-direction: column !important; width: 100%; max-width: 100%; min-height: 100dvh; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; overflow: hidden !important; margin: 0; box-shadow: none !important; } #flight-details-popup .popup-content, #booking-details-modal .popup-content { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px 16px; padding-top: calc(52px + env(safe-area-inset-top, 0px)); padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; gap: 12px; } #flight-details-popup .flight-info-grid, #booking-details-modal .flight-info-grid { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } #flight-details-popup .info-section, #booking-details-modal .info-section { padding: 14px; border-radius: 14px; height: auto; } #flight-details-popup .route-map-container, #booking-details-modal .route-map-container, #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { height: 180px; min-height: 180px; max-height: 180px; border-radius: 14px; } #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; } #flight-details-popup .popup-footer, #booking-details-modal .popup-footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 10001; display: flex !important; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px)) !important; background: rgba(255, 255, 255, 0.96); border-top: 0.5px solid var(--fd-separator); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04); } #flight-details-popup .popup-footer .book-btn, #booking-details-modal .popup-footer .book-btn { flex: 1 1 auto; min-width: 0; max-width: none; } #flight-details-popup .popup-footer .favorite-btn, #booking-details-modal .popup-footer .favorite-btn { flex: 0 0 44px; border-radius: 50%; } #flight-details-popup .popup-footer .popup-footer-close, #flight-details-popup .popup-footer .copy-link-btn, #booking-details-modal .popup-footer .popup-footer-close { flex: 0 0 44px; min-width: 44px; padding: 0; } } #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; } #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(13, 174, 156, 0.1); color: #0a8b7d; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; } #flight-details-popup .fd-route-legs-badge[hidden], #booking-details-modal .fd-route-legs-badge[hidden] { display: none; } #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; } #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; } #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; } #flight-details-popup .departure-detail::before, #booking-details-modal .departure-detail::before, #flight-details-popup .arrival-detail::before, #booking-details-modal .arrival-detail::before, #flight-details-popup .departure-detail::after, #booking-details-modal .departure-detail::after { content: none; } #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; } #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; } #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; } #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; } #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; } #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; } #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); } #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; } #flight-details-popup .fd-route-legs-note[hidden], #booking-details-modal .fd-route-legs-note[hidden] { display: none; } #flight-details-popup .fd-route-legs, #booking-details-modal .fd-route-legs { margin-top: 14px; border-top: 0.5px solid var(--fd-separator-light); } #flight-details-popup .fd-route-legs[hidden], #booking-details-modal .fd-route-legs[hidden] { display: none; } #flight-details-popup .fd-ml-leg-row, #booking-details-modal .fd-ml-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 solid var(--fd-separator-light); font-family: var(--fd-font); } #flight-details-popup .fd-ml-leg-row:last-child, #booking-details-modal .fd-ml-leg-row:last-child { border-bottom: none; padding-bottom: 2px; } #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; border-radius: 50%; background: var(--fd-fill); font-size: 11px; font-weight: 700; color: var(--fd-text-secondary); } #flight-details-popup .fd-ml-leg-route, #booking-details-modal .fd-ml-leg-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } #flight-details-popup .fd-ml-leg-code, #booking-details-modal .fd-ml-leg-code { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--fd-text); } #flight-details-popup .fd-ml-leg-city, #booking-details-modal .fd-ml-leg-city { font-size: 12px; font-weight: 400; color: var(--fd-text-secondary); } #flight-details-popup .fd-ml-leg-arrow, #booking-details-modal .fd-ml-leg-arrow { position: relative; display: inline-block; width: 14px; height: 1px; margin: 0 2px; background: var(--fd-separator); align-self: center; } #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); } #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); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } #flight-details-popup .fd-ml-leg-price, #booking-details-modal .fd-ml-leg-price { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--fd-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 76px; } #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); border-radius: 10px; } #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; } #flight-details-popup .fd-route-statsbar-item + .fd-route-statsbar-item, #booking-details-modal .fd-route-statsbar-item + .fd-route-statsbar-item { border-left: 1px solid rgba(60, 60, 67, 0.1); } #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-label); line-height: 1.3; } #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; } #flight-details-popup .fd-aircraft-stack, #flight-details-popup .aircraft-details, #booking-details-modal .fd-aircraft-stack, #booking-details-modal .aircraft-details { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 14px; grid-template-columns: none !important; } #flight-details-popup .aircraft-info, #booking-details-modal .aircraft-info { flex: 1 1 auto; min-width: 0; width: auto; text-align: left !important; align-items: flex-start !important; } #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { flex: 0 0 min(50%, 360px); width: auto; min-width: 180px; max-width: none; height: auto; min-height: 200px; align-self: stretch; margin: 0; padding: 8px; background: var(--fd-fill); border: none; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } #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; } #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { width: 100%; height: 100%; max-height: 260px; object-fit: contain; object-position: center; border-radius: 8px; box-shadow: none; } #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 0 2px; text-align: left !important; width: 100%; line-height: 1.25; } #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 0 10px; text-align: left !important; width: 100%; } #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; } #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: 0.5px solid var(--fd-separator-light); } #flight-details-popup .spec-item, #booking-details-modal .spec-item { display: flex; align-items: center; gap: 8px; font-family: var(--fd-font); font-size: 12px; color: var(--fd-text-secondary); white-space: normal; padding: 7px 0; border-bottom: 0.5px solid var(--fd-separator-light); width: 100%; } #flight-details-popup .spec-item:last-child, #booking-details-modal .spec-item:last-child { border-bottom: none; padding-bottom: 0; } #flight-details-popup .spec-item i, #booking-details-modal .spec-item i { width: 14px; font-size: 10px; color: var(--fd-label); text-align: center; } #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; } #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; } #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; } #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: 9px 0; border-bottom: 0.5px solid var(--fd-separator-light); } #flight-details-popup .detail-item:last-child, #booking-details-modal .detail-item:last-child { border-bottom: none; padding-bottom: 0; } #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; } #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; } #flight-details-popup .pricing-section, #booking-details-modal .pricing-section { display: flex; flex-direction: column; } #flight-details-popup .details-section .detail-items, #booking-details-modal .details-section .detail-items { flex: 1; } #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; } #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; } #flight-details-popup .pricing-section .price-value, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-family: var(--fd-font); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--fd-text); text-shadow: none; background: none; -webkit-text-fill-color: currentcolor; text-align: center !important; line-height: 1.1; } #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) { #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; } #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-size: 18px; } #flight-details-popup .fd-aircraft-stack, #flight-details-popup .aircraft-details, #booking-details-modal .fd-aircraft-stack, #booking-details-modal .aircraft-details { min-height: 220px; } #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { min-height: 210px; } } #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; } #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; } #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; } #flight-details-popup .pricing-section .booking-info-details, #booking-details-modal .pricing-section .booking-info-details { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--fd-separator); text-align: left; } #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: 4px; margin-bottom: 0; padding: 8px 0; border-bottom: 0.5px solid var(--fd-separator-light); } #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; } #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); } #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); } #flight-details-popup .pricing-section .booking-status-badge, #booking-details-modal .pricing-section .booking-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--fd-radius-pill); font-size: 13px; font-weight: 600; text-transform: capitalize; } #flight-details-popup .pricing-section .booking-status-badge.status-pending, #booking-details-modal .pricing-section .booking-status-badge.status-pending { background: rgba(255, 149, 0, 0.14); color: #c93400; } #flight-details-popup .pricing-section .booking-status-badge.status-processing, #booking-details-modal .pricing-section .booking-status-badge.status-processing { background: rgba(0, 122, 255, 0.12); color: #0040dd; } #flight-details-popup .pricing-section .booking-status-badge.status-confirmed, #booking-details-modal .pricing-section .booking-status-badge.status-confirmed, #flight-details-popup .pricing-section .booking-status-badge.status-completed, #booking-details-modal .pricing-section .booking-status-badge.status-completed { background: rgba(52, 199, 89, 0.12); color: #248a3d; } #flight-details-popup .pricing-section .booking-status-badge.status-declined, #booking-details-modal .pricing-section .booking-status-badge.status-declined, #flight-details-popup .pricing-section .booking-status-badge.status-cancelled, #booking-details-modal .pricing-section .booking-status-badge.status-cancelled { background: rgba(255, 59, 48, 0.1); color: #d70015; } @media (max-width: 768px) { #flight-details-popup .flight-info-grid, #booking-details-modal .flight-info-grid { align-items: stretch; } #flight-details-popup .info-section, #booking-details-modal .info-section { height: auto; } #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-size: 18px; } #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; } #flight-details-popup .fd-route-connector, #booking-details-modal .fd-route-connector { padding-top: 22px; } #flight-details-popup .fd-route-arrow, #booking-details-modal .fd-route-arrow { width: 28px; } #flight-details-popup .fd-route-legs-note, #booking-details-modal .fd-route-legs-note { white-space: normal; } #flight-details-popup .fd-ml-leg-row, #booking-details-modal .fd-ml-leg-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; } #flight-details-popup .fd-ml-leg-index, #booking-details-modal .fd-ml-leg-index { grid-row: 1; } #flight-details-popup .fd-ml-leg-route, #booking-details-modal .fd-ml-leg-route { grid-row: 1; grid-column: 2; } #flight-details-popup .fd-ml-leg-price, #booking-details-modal .fd-ml-leg-price { grid-row: 1; grid-column: 3; min-width: 0; } #flight-details-popup .fd-ml-leg-meta, #booking-details-modal .fd-ml-leg-meta { grid-row: 2; grid-column: 2 / -1; text-align: left; white-space: normal; } #flight-details-popup .fd-route-statsbar-item, #booking-details-modal .fd-route-statsbar-item { padding: 0 12px; } #flight-details-popup .fd-aircraft-stack, #flight-details-popup .aircraft-details, #booking-details-modal .fd-aircraft-stack, #booking-details-modal .aircraft-details { flex-direction: column !important; gap: 12px; } #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; height: 150px; min-height: 0; padding: 0; } #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { object-fit: cover; max-height: none; } #flight-details-popup .pricing-section .price-value, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-size: 24px; } } @media (min-width: 1025px) { #flight-details-popup .flight-popup, #booking-details-modal .flight-popup { width: min(92vw, 1040px); } #flight-details-popup .popup-content, #booking-details-modal .popup-content { padding: 16px 18px 18px; gap: 10px; } #flight-details-popup .route-map-container, #booking-details-modal .route-map-container { height: 176px; min-height: 176px; } #flight-details-popup #flight-route-map, #booking-details-modal #flight-route-map { min-height: 176px; } #flight-details-popup .flight-info-grid, #booking-details-modal .flight-info-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); gap: 10px; } #flight-details-popup .info-section, #booking-details-modal .info-section { padding: 16px 18px; } #flight-details-popup .airport-code-large, #booking-details-modal .airport-code-large { font-size: 21px; } #flight-details-popup .fd-route-statsbar, #booking-details-modal .fd-route-statsbar { padding: 11px 0; } #flight-details-popup .fd-route-statsbar-value, #booking-details-modal .fd-route-statsbar-value { font-size: 16px; } #flight-details-popup .fd-aircraft-image-wrap, #booking-details-modal .fd-aircraft-image-wrap { flex: 0 0 min(52%, 400px); min-width: 200px; max-width: none; min-height: 220px; } #flight-details-popup .fd-aircraft-photo, #booking-details-modal .fd-aircraft-photo { object-fit: contain; object-position: center; } #flight-details-popup .aircraft-model-large, #booking-details-modal .aircraft-model-large { font-size: 15px; } #flight-details-popup .pricing-section .price-value, #flight-details-popup .pricing-section .actions-price-display .current-price, #booking-details-modal .pricing-section .price-value { font-size: 22px; } #flight-details-popup .popup-footer, #booking-details-modal .popup-footer { padding: 12px 18px; } } html.ios-update-gate-active, html.ios-update-gate-active body { height: 100%; overflow: hidden; } html.ios-update-gate-active body { touch-action: none; } .ios-webview-update-gate { box-sizing: border-box; position: fixed; inset: 0; z-index: 200100; display: none; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 1.25rem) max(env(safe-area-inset-right), 1.25rem) max(env(safe-area-inset-bottom), 1.25rem) max(env(safe-area-inset-left), 1.25rem); background: radial-gradient(120% 80% at 50% 0%, rgba(13, 174, 156, 0.28) 0%, transparent 55%), linear-gradient(165deg, var(--gray-900) 0%, #0b1220 45%, var(--background-secondary) 100%); color: var(--gray-100); font-family: var(--font-body, 'Inter', system-ui, sans-serif); } html.ios-update-gate-active .ios-webview-update-gate { display: flex; } .ios-webview-update-gate__panel { width: min(100%, 28rem); max-height: min(92dvh, 40rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--radius-xl); background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 174, 156, 0.12) inset; text-align: center; animation: ios-gate-ease-in 0.45s ease-out both; } @media (prefers-reduced-motion: reduce) { .ios-webview-update-gate__panel { animation: none; } } @keyframes ios-gate-ease-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ios-webview-update-gate__badge { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); font-size: 1.5rem; box-shadow: 0 8px 24px rgba(13, 174, 156, 0.35); } .ios-webview-update-gate__title { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 4.2vw, 1.65rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--white); } .ios-webview-update-gate__lead { margin: 0 0 1.5rem; font-size: clamp(0.95rem, 2.8vw, 1.05rem); line-height: 1.55; color: var(--gray-300); } .ios-webview-update-gate__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3rem; padding: 0.85rem 1.25rem; border: none; border-radius: var(--radius-lg); font-size: clamp(0.95rem, 2.6vw, 1.05rem); font-weight: 600; text-decoration: none; cursor: pointer; color: var(--white); background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%); box-shadow: 0 4px 16px rgba(13, 174, 156, 0.4); transition: transform 0.15s ease, box-shadow 0.15s ease; } .ios-webview-update-gate__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13, 174, 156, 0.45); } .ios-webview-update-gate__cta:active { transform: translateY(0); } .ios-webview-update-gate__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .ios-webview-update-gate__cta:hover, .ios-webview-update-gate__cta:active { transform: none; } } html.android-update-gate-active, html.android-update-gate-active body { height: 100%; overflow: hidden; } html.android-update-gate-active body { touch-action: none; } .android-webview-update-gate { box-sizing: border-box; position: fixed; inset: 0; z-index: 200100; display: none; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 1.25rem) max(env(safe-area-inset-right), 1.25rem) max(env(safe-area-inset-bottom), 1.25rem) max(env(safe-area-inset-left), 1.25rem); background: radial-gradient(120% 80% at 50% 0%, rgba(13, 174, 156, 0.28) 0%, transparent 55%), linear-gradient(165deg, var(--gray-900) 0%, #0b1220 45%, var(--background-secondary) 100%); color: var(--gray-100); font-family: var(--font-body, 'Inter', system-ui, sans-serif); } html.android-update-gate-active .android-webview-update-gate { display: flex; } .android-webview-update-gate__panel { width: min(100%, 28rem); max-height: min(92dvh, 40rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--radius-xl); background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 174, 156, 0.12) inset; text-align: center; animation: android-gate-ease-in 0.45s ease-out both; } @media (prefers-reduced-motion: reduce) { .android-webview-update-gate__panel { animation: none; } } @keyframes android-gate-ease-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .android-webview-update-gate__badge { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); font-size: 1.5rem; box-shadow: 0 8px 24px rgba(13, 174, 156, 0.35); } .android-webview-update-gate__title { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 4.2vw, 1.65rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--white); } .android-webview-update-gate__lead { margin: 0 0 1.5rem; font-size: clamp(0.95rem, 2.8vw, 1.05rem); line-height: 1.55; color: var(--gray-300); } .android-webview-update-gate__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3rem; padding: 0.85rem 1.25rem; border: none; border-radius: var(--radius-lg); font-size: clamp(0.95rem, 2.6vw, 1.05rem); font-weight: 600; text-decoration: none; cursor: pointer; color: var(--white); background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%); box-shadow: 0 4px 16px rgba(13, 174, 156, 0.4); transition: transform 0.15s ease, box-shadow 0.15s ease; } .android-webview-update-gate__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13, 174, 156, 0.45); } .android-webview-update-gate__cta:active { transform: translateY(0); } .android-webview-update-gate__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .android-webview-update-gate__cta:hover, .android-webview-update-gate__cta:active { transform: none; } }