:root { --primary: #0dae9c; --primary-hover: #0b9987; --primary-light: rgba(13, 174, 156, 0.1); --primary-dark: #0a8b7d; --background: #1e293b; --background-secondary: #0f172a; --background-muted: rgba(30, 41, 59, 0.95); --primary-green: #22c55e; --light-green: #f0fdf4; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --success: var(--primary-green); --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --white: #fff; --black: #000; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.02); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); --font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif; --font-mono: "Courier New", courier, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-notification: 800; --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 350ms; --container-max: 1400px; --container-padding: var(--space-lg); --primary-green-light: #86efac; --primary-green-deep: #059669; --primary-green-whatsapp: #25d366; --primary-green-whatsapp-dark: #1fa855; --status-pending: #f59e0b; --status-confirmed: #22c55e; --status-cancelled: #ef4444; --status-cancelled-dark: #dc2626; --status-cancelled-border: #b91c1c; --status-warning: #fbbf24; --status-warning-light: #fde047; --status-warning-dark: #d97706; --status-completed: #3b82f6; --gray-250: #e5e7eb; --gray-350: #d1d5db; --gray-450: #9ca3af; --gray-650: #374151; --gray-750: #1f2937; --gray-950: #0b1120; --surface-muted: #f9fafb; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-80: 0.8; --backdrop-blur-sm: blur(4px); --backdrop-blur-md: blur(8px); --backdrop-blur-lg: blur(12px); --font-body: "Roboto", "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif; --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); } @media (max-width: 428px) { :root { --text-xs: 0.875rem; --text-sm: 1rem; --text-base: 1.125rem; } } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); color: var(--gray-900); background: var(--gray-50); min-height: 100vh; -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-semibold); line-height: var(--leading-tight); } p { margin-bottom: var(--space-md); } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast) ease; } a:hover { color: var(--primary-hover); } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; margin: 0; } input, textarea, select { -webkit-appearance: none; appearance: none; border-radius: 0; font-size: 16px; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: auto; } button { cursor: pointer; -webkit-appearance: none; appearance: none; } button:disabled { cursor: not-allowed; } table { border-collapse: collapse; width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } ::selection { background: var(--primary-light); color: var(--primary-dark); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--radius); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-700); } .form-control, .form-input, .search-input { width: 100%; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: var(--text-base); background: var(--white); color: var(--gray-900); transition: all var(--transition-fast) ease; } .form-control:focus, .form-input:focus, .search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-control::placeholder, .form-input::placeholder, .search-input::placeholder { color: var(--gray-400); } .search-form { background: var(--white); padding: var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); } .search-row { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); } .search-group { flex: 1; position: relative; } .search-group label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--gray-600); letter-spacing: 0.05em; } .input-with-icon { position: relative; } .input-with-icon .form-control { padding-left: 40px; } .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; } .clear-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--gray-400); cursor: pointer; padding: 4px; display: none; transition: color var(--transition-fast) ease; } .clear-input:hover { color: var(--gray-600); } .form-control:not(:placeholder-shown) ~ .clear-input { display: block; } .date-input-group { display: flex; gap: var(--space-sm); align-items: center; } .date-input { flex: 1; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: var(--text-sm); background: var(--white); } .date-separator { color: var(--gray-400); font-weight: var(--font-medium); } .quick-dates { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); } .quick-date-btn { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-700); font-size: var(--text-xs); cursor: pointer; transition: all var(--transition-fast) ease; } .quick-date-btn:hover { background: var(--gray-50); border-color: var(--primary); color: var(--primary); } .quick-date-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .form-check { display: flex; align-items: center; margin-bottom: var(--space-sm); } .form-check-input { width: 18px; height: 18px; margin-right: var(--space-sm); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; } .form-check-input[type="radio"] { border-radius: var(--radius-full); } .form-check-input:checked { background: var(--primary); border-color: var(--primary); } .form-check-label { font-size: var(--text-sm); color: var(--gray-700); cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body, inherit); font-size: var(--text-base); font-weight: var(--font-medium); cursor: pointer; transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease; text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn--solid, .btn-primary { background: var(--primary); color: var(--white); border-color: transparent; } .btn--solid:hover, .btn-primary:hover { background: var(--primary-hover); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--solid:active, .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16); } .btn--outline, .btn-secondary, .btn-outline { background: rgba(13, 174, 156, 0.1); color: var(--primary); border-color: rgba(13, 174, 156, 0.3); } .btn--outline:hover, .btn-secondary:hover, .btn-outline:hover { background: rgba(13, 174, 156, 0.2); color: var(--primary-hover); border-color: rgba(13, 174, 156, 0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.25); } .btn--outline:active, .btn-secondary:active, .btn-outline:active { transform: translateY(0); box-shadow: none; } .btn--ghost { background: transparent; color: var(--gray-600); border-color: transparent; } .btn--ghost:hover { background: rgba(15, 23, 42, 0.08); color: var(--gray-800); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } .btn--ghost:active { transform: translateY(0); box-shadow: none; } .btn-danger, .btn--solid.is-danger, .btn-primary.is-danger, .btn.is-danger { background: var(--status-cancelled-dark); color: var(--white); border-color: var(--status-cancelled-dark); } .btn-danger:hover, .btn--solid.is-danger:hover, .btn-primary.is-danger:hover, .btn.is-danger:hover { background: var(--status-cancelled-border); border-color: var(--status-cancelled-border); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); } .btn--outline.is-danger, .btn-outline.is-danger, .btn-secondary.is-danger { background: rgba(220, 38, 38, 0.05); color: var(--status-cancelled-dark); border-color: rgba(220, 38, 38, 0.4); } .btn--outline.is-danger:hover, .btn-outline.is-danger:hover, .btn-secondary.is-danger:hover { background: rgba(220, 38, 38, 0.12); color: var(--status-cancelled-dark); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15); } .btn--ghost.is-danger { color: var(--status-cancelled-dark); } .btn--ghost.is-danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--status-cancelled-dark); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15); } .btn-success, .btn--solid.is-success, .btn-primary.is-success, .btn.is-success { background: var(--success); color: var(--white); border-color: var(--success); } .btn-success:hover, .btn--solid.is-success:hover, .btn-primary.is-success:hover, .btn.is-success:hover { background: #16a34a; border-color: #16a34a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); } .btn--outline.is-success, .btn-outline.is-success, .btn-secondary.is-success { background: rgba(34, 197, 94, 0.08); color: var(--success); border-color: rgba(34, 197, 94, 0.4); } .btn--outline.is-success:hover, .btn-outline.is-success:hover, .btn-secondary.is-success:hover { background: rgba(34, 197, 94, 0.15); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2); } .btn--ghost.is-success { color: var(--success); } .btn--ghost.is-success:hover { background: rgba(34, 197, 94, 0.1); color: var(--success); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2); } .btn--solid.is-warning, .btn-primary.is-warning, .btn.is-warning { background: var(--warning); color: var(--gray-900); border-color: var(--warning); } .btn--solid.is-warning:hover, .btn-primary.is-warning:hover, .btn.is-warning:hover { background: #d97706; border-color: #d97706; color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25); } .btn--outline.is-warning, .btn-outline.is-warning, .btn-secondary.is-warning { background: rgba(245, 158, 11, 0.08); color: #b45309; border-color: rgba(245, 158, 11, 0.4); } .btn--outline.is-warning:hover, .btn-outline.is-warning:hover, .btn-secondary.is-warning:hover { background: rgba(245, 158, 11, 0.16); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); } .btn--ghost.is-warning { color: #b45309; } .btn--ghost.is-warning:hover { background: rgba(245, 158, 11, 0.1); color: #b45309; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); } .btn-block { width: 100%; } .btn-sm { padding: 6px 12px; font-size: var(--text-sm); } .btn-lg { padding: 14px 28px; font-size: var(--text-lg); } .search-button { background: var(--primary); color: var(--white); padding: 12px 32px; border: none; border-radius: var(--radius-full); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-sm); transition: all var(--transition-fast) ease; } .search-button:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-xl); } .search-button:active { transform: translateY(0); } .form-control.is-invalid { border-color: var(--danger); } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .form-control.is-valid { border-color: var(--success); } .form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); } .invalid-feedback { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--danger); } .valid-feedback { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--success); } .btn-loading { position: relative; color: transparent; } .btn-loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; border: 2px solid var(--white); border-radius: 50%; border-top-color: transparent; animation: spinner 0.6s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } @media (max-width: 768px) { .search-row { flex-direction: column; } .search-form { padding: var(--space-lg); } .quick-dates { justify-content: space-between; } .quick-date-btn { flex: 1; min-width: calc(50% - 4px); } } @media (max-width: 480px) { .search-form { padding: var(--space-md); border-radius: var(--radius); } .date-input-group { flex-direction: column; align-items: stretch; } .date-separator { display: none; } } .airport-codes-container { display: flex; align-items: flex-start; gap: 2px; } .airport-codes-inline { flex-direction: row; align-items: center; } .airport-codes-stacked { flex-direction: column; align-items: flex-start; gap: 4px; } .airport-code-separator { color: var(--gray-400); font-weight: 300; margin: 0 1px; opacity: 0.6; font-size: 0.875em; } .airport-code-item { display: flex; flex-direction: column; align-items: center; gap: 1px; } .airport-code-type { font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); line-height: 1; font-family: var(--font-body); } .airport-code-value { font-weight: 600; letter-spacing: 0.5px; color: #000; line-height: 1.1; } .airport-code-small .airport-code-type { font-size: 7px; } .airport-code-small .airport-code-value { font-size: 0.875rem; } .airport-code-medium .airport-code-type { font-size: 8px; } .airport-code-medium .airport-code-value { font-size: 1.25rem; } .airport-code-large .airport-code-type { font-size: 9px; } .airport-code-large .airport-code-value { font-size: 1.1rem; } .airport-code-xlarge .airport-code-type { font-size: 10px; } .airport-code-xlarge .airport-code-value { font-size: 2rem; } .airport-code-empty { color: var(--gray-400); font-style: italic; } .route-display .airport-codes-container, .airport-detail .airport-codes-container { justify-content: center; } .route-display .airport-code-item { min-width: 48px; } .route-display .airport-code-value { color: #000; } .airport-codes-stacked .airport-code-item { align-items: flex-start; } .airport-codes-stacked .airport-code-separator { display: none; } @media (prefers-color-scheme: dark) { .airport-code-type { color: var(--gray-500); } .airport-code-separator { color: var(--gray-600); } } @media (max-width: 768px) { .airport-code-large .airport-code-value { font-size: 1.25rem; } .airport-code-xlarge .airport-code-value { font-size: 1.5rem; } .airport-code-type { font-size: 7px; } } .flag-icon { display: inline-block; width: 1.28rem; height: 0.88rem; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; vertical-align: middle; overflow: hidden; } .flag-icon[data-country] { background-image: var(--flag-image); } .flag-icon-ad, .flag-icon[data-country="AD"] { background-image: url('/images/flags/ad.png'); } .flag-icon-ae, .flag-icon[data-country="AE"] { background-image: url('/images/flags/ae.png'); } .flag-icon-af, .flag-icon[data-country="AF"] { background-image: url('/images/flags/af.png'); } .flag-icon-ag, .flag-icon[data-country="AG"] { background-image: url('/images/flags/ag.png'); } .flag-icon-ai, .flag-icon[data-country="AI"] { background-image: url('/images/flags/ai.png'); } .flag-icon-al, .flag-icon[data-country="AL"] { background-image: url('/images/flags/al.png'); } .flag-icon-am, .flag-icon[data-country="AM"] { background-image: url('/images/flags/am.png'); } .flag-icon-ao, .flag-icon[data-country="AO"] { background-image: url('/images/flags/ao.png'); } .flag-icon-aq, .flag-icon[data-country="AQ"] { background-image: url('/images/flags/aq.png'); } .flag-icon-ar, .flag-icon[data-country="AR"] { background-image: url('/images/flags/ar.png'); } .flag-icon-as, .flag-icon[data-country="AS"] { background-image: url('/images/flags/as.png'); } .flag-icon-at, .flag-icon[data-country="AT"] { background-image: url('/images/flags/at.png'); } .flag-icon-au, .flag-icon[data-country="AU"] { background-image: url('/images/flags/au.png'); } .flag-icon-aw, .flag-icon[data-country="AW"] { background-image: url('/images/flags/aw.png'); } .flag-icon-az, .flag-icon[data-country="AZ"] { background-image: url('/images/flags/az.png'); } .flag-icon-ba, .flag-icon[data-country="BA"] { background-image: url('/images/flags/ba.png'); } .flag-icon-bb, .flag-icon[data-country="BB"] { background-image: url('/images/flags/bb.png'); } .flag-icon-bd, .flag-icon[data-country="BD"] { background-image: url('/images/flags/bd.png'); } .flag-icon-be, .flag-icon[data-country="BE"] { background-image: url('/images/flags/be.png'); } .flag-icon-bf, .flag-icon[data-country="BF"] { background-image: url('/images/flags/bf.png'); } .flag-icon-bg, .flag-icon[data-country="BG"] { background-image: url('/images/flags/bg.png'); } .flag-icon-bh, .flag-icon[data-country="BH"] { background-image: url('/images/flags/bh.png'); } .flag-icon-bi, .flag-icon[data-country="BI"] { background-image: url('/images/flags/bi.png'); } .flag-icon-bj, .flag-icon[data-country="BJ"] { background-image: url('/images/flags/bj.png'); } .flag-icon-bl, .flag-icon[data-country="BL"] { background-image: url('/images/flags/bl.png'); } .flag-icon-bm, .flag-icon[data-country="BM"] { background-image: url('/images/flags/bm.png'); } .flag-icon-bn, .flag-icon[data-country="BN"] { background-image: url('/images/flags/bn.png'); } .flag-icon-bo, .flag-icon[data-country="BO"] { background-image: url('/images/flags/bo.png'); } .flag-icon-bq, .flag-icon[data-country="BQ"] { background-image: url('/images/flags/bq.png'); } .flag-icon-br, .flag-icon[data-country="BR"] { background-image: url('/images/flags/br.png'); } .flag-icon-bs, .flag-icon[data-country="BS"] { background-image: url('/images/flags/bs.png'); } .flag-icon-bt, .flag-icon[data-country="BT"] { background-image: url('/images/flags/bt.png'); } .flag-icon-bw, .flag-icon[data-country="BW"] { background-image: url('/images/flags/bw.png'); } .flag-icon-by, .flag-icon[data-country="BY"] { background-image: url('/images/flags/by.png'); } .flag-icon-bz, .flag-icon[data-country="BZ"] { background-image: url('/images/flags/bz.png'); } .flag-icon-ca, .flag-icon[data-country="CA"] { background-image: url('/images/flags/ca.png'); } .flag-icon-cc, .flag-icon[data-country="CC"] { background-image: url('/images/flags/cc.png'); } .flag-icon-cd, .flag-icon[data-country="CD"] { background-image: url('/images/flags/cd.png'); } .flag-icon-cf, .flag-icon[data-country="CF"] { background-image: url('/images/flags/cf.png'); } .flag-icon-cg, .flag-icon[data-country="CG"] { background-image: url('/images/flags/cg.png'); } .flag-icon-ch, .flag-icon[data-country="CH"] { background-image: url('/images/flags/ch.png'); } .flag-icon-ci, .flag-icon[data-country="CI"] { background-image: url('/images/flags/ci.png'); } .flag-icon-ck, .flag-icon[data-country="CK"] { background-image: url('/images/flags/ck.png'); } .flag-icon-cl, .flag-icon[data-country="CL"] { background-image: url('/images/flags/cl.png'); } .flag-icon-cm, .flag-icon[data-country="CM"] { background-image: url('/images/flags/cm.png'); } .flag-icon-cn, .flag-icon[data-country="CN"] { background-image: url('/images/flags/cn.png'); } .flag-icon-co, .flag-icon[data-country="CO"] { background-image: url('/images/flags/co.png'); } .flag-icon-cr, .flag-icon[data-country="CR"] { background-image: url('/images/flags/cr.png'); } .flag-icon-cu, .flag-icon[data-country="CU"] { background-image: url('/images/flags/cu.png'); } .flag-icon-cv, .flag-icon[data-country="CV"] { background-image: url('/images/flags/cv.png'); } .flag-icon-cw, .flag-icon[data-country="CW"] { background-image: url('/images/flags/cw.png'); } .flag-icon-cx, .flag-icon[data-country="CX"] { background-image: url('/images/flags/cx.png'); } .flag-icon-cy, .flag-icon[data-country="CY"] { background-image: url('/images/flags/cy.png'); } .flag-icon-cz, .flag-icon[data-country="CZ"] { background-image: url('/images/flags/cz.png'); } .flag-icon-de, .flag-icon[data-country="DE"] { background-image: url('/images/flags/de.png'); } .flag-icon-dj, .flag-icon[data-country="DJ"] { background-image: url('/images/flags/dj.png'); } .flag-icon-dk, .flag-icon[data-country="DK"] { background-image: url('/images/flags/dk.png'); } .flag-icon-dm, .flag-icon[data-country="DM"] { background-image: url('/images/flags/dm.png'); } .flag-icon-do, .flag-icon[data-country="DO"] { background-image: url('/images/flags/do.png'); } .flag-icon-dz, .flag-icon[data-country="DZ"] { background-image: url('/images/flags/dz.png'); } .flag-icon-ec, .flag-icon[data-country="EC"] { background-image: url('/images/flags/ec.png'); } .flag-icon-ee, .flag-icon[data-country="EE"] { background-image: url('/images/flags/ee.png'); } .flag-icon-eg, .flag-icon[data-country="EG"] { background-image: url('/images/flags/eg.png'); } .flag-icon-eh, .flag-icon[data-country="EH"] { background-image: url('/images/flags/eh.png'); } .flag-icon-er, .flag-icon[data-country="ER"] { background-image: url('/images/flags/er.png'); } .flag-icon-es, .flag-icon[data-country="ES"] { background-image: url('/images/flags/es.png'); } .flag-icon-et, .flag-icon[data-country="ET"] { background-image: url('/images/flags/et.png'); } .flag-icon-fi, .flag-icon[data-country="FI"] { background-image: url('/images/flags/fi.png'); } .flag-icon-fj, .flag-icon[data-country="FJ"] { background-image: url('/images/flags/fj.png'); } .flag-icon-fk, .flag-icon[data-country="FK"] { background-image: url('/images/flags/fk.png'); } .flag-icon-fm, .flag-icon[data-country="FM"] { background-image: url('/images/flags/fm.png'); } .flag-icon-fo, .flag-icon[data-country="FO"] { background-image: url('/images/flags/fo.png'); } .flag-icon-fr, .flag-icon[data-country="FR"] { background-image: url('/images/flags/fr.png'); } .flag-icon-ga, .flag-icon[data-country="GA"] { background-image: url('/images/flags/ga.png'); } .flag-icon-gb, .flag-icon[data-country="GB"] { background-image: url('/images/flags/gb.png'); } .flag-icon-gd, .flag-icon[data-country="GD"] { background-image: url('/images/flags/gd.png'); } .flag-icon-ge, .flag-icon[data-country="GE"] { background-image: url('/images/flags/ge.png'); } .flag-icon-gf, .flag-icon[data-country="GF"] { background-image: url('/images/flags/gf.png'); } .flag-icon-gg, .flag-icon[data-country="GG"] { background-image: url('/images/flags/gg.png'); } .flag-icon-gh, .flag-icon[data-country="GH"] { background-image: url('/images/flags/gh.png'); } .flag-icon-gi, .flag-icon[data-country="GI"] { background-image: url('/images/flags/gi.png'); } .flag-icon-gl, .flag-icon[data-country="GL"] { background-image: url('/images/flags/gl.png'); } .flag-icon-gm, .flag-icon[data-country="GM"] { background-image: url('/images/flags/gm.png'); } .flag-icon-gn, .flag-icon[data-country="GN"] { background-image: url('/images/flags/gn.png'); } .flag-icon-gp, .flag-icon[data-country="GP"] { background-image: url('/images/flags/gp.png'); } .flag-icon-gq, .flag-icon[data-country="GQ"] { background-image: url('/images/flags/gq.png'); } .flag-icon-gr, .flag-icon[data-country="GR"] { background-image: url('/images/flags/gr.png'); } .flag-icon-gs, .flag-icon[data-country="GS"] { background-image: url('/images/flags/gs.png'); } .flag-icon-gt, .flag-icon[data-country="GT"] { background-image: url('/images/flags/gt.png'); } .flag-icon-gu, .flag-icon[data-country="GU"] { background-image: url('/images/flags/gu.png'); } .flag-icon-gw, .flag-icon[data-country="GW"] { background-image: url('/images/flags/gw.png'); } .flag-icon-gy, .flag-icon[data-country="GY"] { background-image: url('/images/flags/gy.png'); } .flag-icon-hk, .flag-icon[data-country="HK"] { background-image: url('/images/flags/hk.png'); } .flag-icon-hn, .flag-icon[data-country="HN"] { background-image: url('/images/flags/hn.png'); } .flag-icon-hr, .flag-icon[data-country="HR"] { background-image: url('/images/flags/hr.png'); } .flag-icon-ht, .flag-icon[data-country="HT"] { background-image: url('/images/flags/ht.png'); } .flag-icon-hu, .flag-icon[data-country="HU"] { background-image: url('/images/flags/hu.png'); } .flag-icon-id, .flag-icon[data-country="ID"] { background-image: url('/images/flags/id.png'); } .flag-icon-ie, .flag-icon[data-country="IE"] { background-image: url('/images/flags/ie.png'); } .flag-icon-il, .flag-icon[data-country="IL"] { background-image: url('/images/flags/il.png'); } .flag-icon-im, .flag-icon[data-country="IM"] { background-image: url('/images/flags/im.png'); } .flag-icon-in, .flag-icon[data-country="IN"] { background-image: url('/images/flags/in.png'); } .flag-icon-io, .flag-icon[data-country="IO"] { background-image: url('/images/flags/io.png'); } .flag-icon-iq, .flag-icon[data-country="IQ"] { background-image: url('/images/flags/iq.png'); } .flag-icon-ir, .flag-icon[data-country="IR"] { background-image: url('/images/flags/ir.png'); } .flag-icon-is, .flag-icon[data-country="IS"] { background-image: url('/images/flags/is.png'); } .flag-icon-it, .flag-icon[data-country="IT"] { background-image: url('/images/flags/it.png'); } .flag-icon-je, .flag-icon[data-country="JE"] { background-image: url('/images/flags/je.png'); } .flag-icon-jm, .flag-icon[data-country="JM"] { background-image: url('/images/flags/jm.png'); } .flag-icon-jo, .flag-icon[data-country="JO"] { background-image: url('/images/flags/jo.png'); } .flag-icon-jp, .flag-icon[data-country="JP"] { background-image: url('/images/flags/jp.png'); } .flag-icon-ke, .flag-icon[data-country="KE"] { background-image: url('/images/flags/ke.png'); } .flag-icon-kg, .flag-icon[data-country="KG"] { background-image: url('/images/flags/kg.png'); } .flag-icon-kh, .flag-icon[data-country="KH"] { background-image: url('/images/flags/kh.png'); } .flag-icon-ki, .flag-icon[data-country="KI"] { background-image: url('/images/flags/ki.png'); } .flag-icon-km, .flag-icon[data-country="KM"] { background-image: url('/images/flags/km.png'); } .flag-icon-kn, .flag-icon[data-country="KN"] { background-image: url('/images/flags/kn.png'); } .flag-icon-kp, .flag-icon[data-country="KP"] { background-image: url('/images/flags/kp.png'); } .flag-icon-kr, .flag-icon[data-country="KR"] { background-image: url('/images/flags/kr.png'); } .flag-icon-kw, .flag-icon[data-country="KW"] { background-image: url('/images/flags/kw.png'); } .flag-icon-ky, .flag-icon[data-country="KY"] { background-image: url('/images/flags/ky.png'); } .flag-icon-kz, .flag-icon[data-country="KZ"] { background-image: url('/images/flags/kz.png'); } .flag-icon-la, .flag-icon[data-country="LA"] { background-image: url('/images/flags/la.png'); } .flag-icon-lb, .flag-icon[data-country="LB"] { background-image: url('/images/flags/lb.png'); } .flag-icon-lc, .flag-icon[data-country="LC"] { background-image: url('/images/flags/lc.png'); } .flag-icon-li, .flag-icon[data-country="LI"] { background-image: url('/images/flags/li.png'); } .flag-icon-lk, .flag-icon[data-country="LK"] { background-image: url('/images/flags/lk.png'); } .flag-icon-lr, .flag-icon[data-country="LR"] { background-image: url('/images/flags/lr.png'); } .flag-icon-ls, .flag-icon[data-country="LS"] { background-image: url('/images/flags/ls.png'); } .flag-icon-lt, .flag-icon[data-country="LT"] { background-image: url('/images/flags/lt.png'); } .flag-icon-lu, .flag-icon[data-country="LU"] { background-image: url('/images/flags/lu.png'); } .flag-icon-lv, .flag-icon[data-country="LV"] { background-image: url('/images/flags/lv.png'); } .flag-icon-ly, .flag-icon[data-country="LY"] { background-image: url('/images/flags/ly.png'); } .flag-icon-ma, .flag-icon[data-country="MA"] { background-image: url('/images/flags/ma.png'); } .flag-icon-mc, .flag-icon[data-country="MC"] { background-image: url('/images/flags/mc.png'); } .flag-icon-md, .flag-icon[data-country="MD"] { background-image: url('/images/flags/md.png'); } .flag-icon-me, .flag-icon[data-country="ME"] { background-image: url('/images/flags/me.png'); } .flag-icon-mf, .flag-icon[data-country="MF"] { background-image: url('/images/flags/mf.png'); } .flag-icon-mg, .flag-icon[data-country="MG"] { background-image: url('/images/flags/mg.png'); } .flag-icon-mh, .flag-icon[data-country="MH"] { background-image: url('/images/flags/mh.png'); } .flag-icon-mk, .flag-icon[data-country="MK"] { background-image: url('/images/flags/mk.png'); } .flag-icon-ml, .flag-icon[data-country="ML"] { background-image: url('/images/flags/ml.png'); } .flag-icon-mm, .flag-icon[data-country="MM"] { background-image: url('/images/flags/mm.png'); } .flag-icon-mn, .flag-icon[data-country="MN"] { background-image: url('/images/flags/mn.png'); } .flag-icon-mo, .flag-icon[data-country="MO"] { background-image: url('/images/flags/mo.png'); } .flag-icon-mp, .flag-icon[data-country="MP"] { background-image: url('/images/flags/mp.png'); } .flag-icon-mq, .flag-icon[data-country="MQ"] { background-image: url('/images/flags/mq.png'); } .flag-icon-mr, .flag-icon[data-country="MR"] { background-image: url('/images/flags/mr.png'); } .flag-icon-ms, .flag-icon[data-country="MS"] { background-image: url('/images/flags/ms.png'); } .flag-icon-mt, .flag-icon[data-country="MT"] { background-image: url('/images/flags/mt.png'); } .flag-icon-mu, .flag-icon[data-country="MU"] { background-image: url('/images/flags/mu.png'); } .flag-icon-mv, .flag-icon[data-country="MV"] { background-image: url('/images/flags/mv.png'); } .flag-icon-mw, .flag-icon[data-country="MW"] { background-image: url('/images/flags/mw.png'); } .flag-icon-mx, .flag-icon[data-country="MX"] { background-image: url('/images/flags/mx.png'); } .flag-icon-my, .flag-icon[data-country="MY"] { background-image: url('/images/flags/my.png'); } .flag-icon-mz, .flag-icon[data-country="MZ"] { background-image: url('/images/flags/mz.png'); } .flag-icon-na, .flag-icon[data-country="NA"] { background-image: url('/images/flags/na.png'); } .flag-icon-nc, .flag-icon[data-country="NC"] { background-image: url('/images/flags/nc.png'); } .flag-icon-ne, .flag-icon[data-country="NE"] { background-image: url('/images/flags/ne.png'); } .flag-icon-nf, .flag-icon[data-country="NF"] { background-image: url('/images/flags/nf.png'); } .flag-icon-ng, .flag-icon[data-country="NG"] { background-image: url('/images/flags/ng.png'); } .flag-icon-ni, .flag-icon[data-country="NI"] { background-image: url('/images/flags/ni.png'); } .flag-icon-nl, .flag-icon[data-country="NL"] { background-image: url('/images/flags/nl.png'); } .flag-icon-no, .flag-icon[data-country="NO"] { background-image: url('/images/flags/no.png'); } .flag-icon-np, .flag-icon[data-country="NP"] { background-image: url('/images/flags/np.png'); } .flag-icon-nr, .flag-icon[data-country="NR"] { background-image: url('/images/flags/nr.png'); } .flag-icon-nu, .flag-icon[data-country="NU"] { background-image: url('/images/flags/nu.png'); } .flag-icon-nz, .flag-icon[data-country="NZ"] { background-image: url('/images/flags/nz.png'); } .flag-icon-om, .flag-icon[data-country="OM"] { background-image: url('/images/flags/om.png'); } .flag-icon-pa, .flag-icon[data-country="PA"] { background-image: url('/images/flags/pa.png'); } .flag-icon-pe, .flag-icon[data-country="PE"] { background-image: url('/images/flags/pe.png'); } .flag-icon-pf, .flag-icon[data-country="PF"] { background-image: url('/images/flags/pf.png'); } .flag-icon-pg, .flag-icon[data-country="PG"] { background-image: url('/images/flags/pg.png'); } .flag-icon-ph, .flag-icon[data-country="PH"] { background-image: url('/images/flags/ph.png'); } .flag-icon-pk, .flag-icon[data-country="PK"] { background-image: url('/images/flags/pk.png'); } .flag-icon-pl, .flag-icon[data-country="PL"] { background-image: url('/images/flags/pl.png'); } .flag-icon-pm, .flag-icon[data-country="PM"] { background-image: url('/images/flags/pm.png'); } .flag-icon-pn, .flag-icon[data-country="PN"] { background-image: url('/images/flags/pn.png'); } .flag-icon-pr, .flag-icon[data-country="PR"] { background-image: url('/images/flags/pr.png'); } .flag-icon-ps, .flag-icon[data-country="PS"] { background-image: url('/images/flags/ps.png'); } .flag-icon-pt, .flag-icon[data-country="PT"] { background-image: url('/images/flags/pt.png'); } .flag-icon-pw, .flag-icon[data-country="PW"] { background-image: url('/images/flags/pw.png'); } .flag-icon-py, .flag-icon[data-country="PY"] { background-image: url('/images/flags/py.png'); } .flag-icon-qa, .flag-icon[data-country="QA"] { background-image: url('/images/flags/qa.png'); } .flag-icon-re, .flag-icon[data-country="RE"] { background-image: url('/images/flags/re.png'); } .flag-icon-ro, .flag-icon[data-country="RO"] { background-image: url('/images/flags/ro.png'); } .flag-icon-rs, .flag-icon[data-country="RS"] { background-image: url('/images/flags/rs.png'); } .flag-icon-ru, .flag-icon[data-country="RU"] { background-image: url('/images/flags/ru.png'); } .flag-icon-rw, .flag-icon[data-country="RW"] { background-image: url('/images/flags/rw.png'); } .flag-icon-sa, .flag-icon[data-country="SA"] { background-image: url('/images/flags/sa.png'); } .flag-icon-sb, .flag-icon[data-country="SB"] { background-image: url('/images/flags/sb.png'); } .flag-icon-sc, .flag-icon[data-country="SC"] { background-image: url('/images/flags/sc.png'); } .flag-icon-sd, .flag-icon[data-country="SD"] { background-image: url('/images/flags/sd.png'); } .flag-icon-se, .flag-icon[data-country="SE"] { background-image: url('/images/flags/se.png'); } .flag-icon-sg, .flag-icon[data-country="SG"] { background-image: url('/images/flags/sg.png'); } .flag-icon-sh, .flag-icon[data-country="SH"] { background-image: url('/images/flags/sh.png'); } .flag-icon-si, .flag-icon[data-country="SI"] { background-image: url('/images/flags/si.png'); } .flag-icon-sj, .flag-icon[data-country="SJ"] { background-image: url('/images/flags/sj.png'); } .flag-icon-sk, .flag-icon[data-country="SK"] { background-image: url('/images/flags/sk.png'); } .flag-icon-sl, .flag-icon[data-country="SL"] { background-image: url('/images/flags/sl.png'); } .flag-icon-sm, .flag-icon[data-country="SM"] { background-image: url('/images/flags/sm.png'); } .flag-icon-sn, .flag-icon[data-country="SN"] { background-image: url('/images/flags/sn.png'); } .flag-icon-so, .flag-icon[data-country="SO"] { background-image: url('/images/flags/so.png'); } .flag-icon-sr, .flag-icon[data-country="SR"] { background-image: url('/images/flags/sr.png'); } .flag-icon-ss, .flag-icon[data-country="SS"] { background-image: url('/images/flags/ss.png'); } .flag-icon-st, .flag-icon[data-country="ST"] { background-image: url('/images/flags/st.png'); } .flag-icon-sv, .flag-icon[data-country="SV"] { background-image: url('/images/flags/sv.png'); } .flag-icon-sx, .flag-icon[data-country="SX"] { background-image: url('/images/flags/sx.png'); } .flag-icon-sy, .flag-icon[data-country="SY"] { background-image: url('/images/flags/sy.png'); } .flag-icon-sz, .flag-icon[data-country="SZ"] { background-image: url('/images/flags/sz.png'); } .flag-icon-tc, .flag-icon[data-country="TC"] { background-image: url('/images/flags/tc.png'); } .flag-icon-td, .flag-icon[data-country="TD"] { background-image: url('/images/flags/td.png'); } .flag-icon-tf, .flag-icon[data-country="TF"] { background-image: url('/images/flags/tf.png'); } .flag-icon-tg, .flag-icon[data-country="TG"] { background-image: url('/images/flags/tg.png'); } .flag-icon-th, .flag-icon[data-country="TH"] { background-image: url('/images/flags/th.png'); } .flag-icon-tj, .flag-icon[data-country="TJ"] { background-image: url('/images/flags/tj.png'); } .flag-icon-tk, .flag-icon[data-country="TK"] { background-image: url('/images/flags/tk.png'); } .flag-icon-tl, .flag-icon[data-country="TL"] { background-image: url('/images/flags/tl.png'); } .flag-icon-tm, .flag-icon[data-country="TM"] { background-image: url('/images/flags/tm.png'); } .flag-icon-tn, .flag-icon[data-country="TN"] { background-image: url('/images/flags/tn.png'); } .flag-icon-to, .flag-icon[data-country="TO"] { background-image: url('/images/flags/to.png'); } .flag-icon-tr, .flag-icon[data-country="TR"] { background-image: url('/images/flags/tr.png'); } .flag-icon-tt, .flag-icon[data-country="TT"] { background-image: url('/images/flags/tt.png'); } .flag-icon-tv, .flag-icon[data-country="TV"] { background-image: url('/images/flags/tv.png'); } .flag-icon-tw, .flag-icon[data-country="TW"] { background-image: url('/images/flags/tw.png'); } .flag-icon-tz, .flag-icon[data-country="TZ"] { background-image: url('/images/flags/tz.png'); } .flag-icon-ua, .flag-icon[data-country="UA"] { background-image: url('/images/flags/ua.png'); } .flag-icon-ug, .flag-icon[data-country="UG"] { background-image: url('/images/flags/ug.png'); } .flag-icon-um, .flag-icon[data-country="UM"] { background-image: url('/images/flags/um.png'); } .flag-icon-us, .flag-icon[data-country="US"] { background-image: url('/images/flags/us.png'); } .flag-icon-uy, .flag-icon[data-country="UY"] { background-image: url('/images/flags/uy.png'); } .flag-icon-uz, .flag-icon[data-country="UZ"] { background-image: url('/images/flags/uz.png'); } .flag-icon-va, .flag-icon[data-country="VA"] { background-image: url('/images/flags/va.png'); } .flag-icon-vc, .flag-icon[data-country="VC"] { background-image: url('/images/flags/vc.png'); } .flag-icon-ve, .flag-icon[data-country="VE"] { background-image: url('/images/flags/ve.png'); } .flag-icon-vg, .flag-icon[data-country="VG"] { background-image: url('/images/flags/vg.png'); } .flag-icon-vi, .flag-icon[data-country="VI"] { background-image: url('/images/flags/vi.png'); } .flag-icon-vn, .flag-icon[data-country="VN"] { background-image: url('/images/flags/vn.png'); } .flag-icon-vu, .flag-icon[data-country="VU"] { background-image: url('/images/flags/vu.png'); } .flag-icon-wf, .flag-icon[data-country="WF"] { background-image: url('/images/flags/wf.png'); } .flag-icon-ws, .flag-icon[data-country="WS"] { background-image: url('/images/flags/ws.png'); } .flag-icon-xk, .flag-icon[data-country="XK"] { background-image: url('/images/flags/xk.png'); } .flag-icon-ye, .flag-icon[data-country="YE"] { background-image: url('/images/flags/ye.png'); } .flag-icon-yt, .flag-icon[data-country="YT"] { background-image: url('/images/flags/yt.png'); } .flag-icon-za, .flag-icon[data-country="ZA"] { background-image: url('/images/flags/za.png'); } .flag-icon-zm, .flag-icon[data-country="ZM"] { background-image: url('/images/flags/zm.png'); } .flag-icon-zw, .flag-icon[data-country="ZW"] { background-image: url('/images/flags/zw.png'); } .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); z-index: 9999; padding: 1.5rem; transform: translateY(100%); transition: transform 0.2s ease-out; border-top: 1px solid var(--gray-200); pointer-events: auto; } .cookie-banner.show { transform: translateY(0); animation: slide-up-instant 0.2s ease-out; } .cookie-banner-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .cookie-banner-content { flex: 1 1 500px; } .cookie-banner-title { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; } .cookie-banner-text { color: var(--gray-600); font-size: 0.875rem; line-height: 1.5; } .cookie-banner-text a { color: var(--primary); text-decoration: none; font-weight: 500; } .cookie-banner-text a:hover { text-decoration: underline; } .cookie-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .cookie-banner-btn { padding: 0.625rem 1.25rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; pointer-events: auto; position: relative; z-index: 1; } .cookie-banner-btn-accept { background: var(--primary); color: white; } .cookie-banner-btn-accept:hover { background: var(--primary-hover); } .cookie-banner-btn-reject { background: var(--gray-200); color: var(--gray-700); } .cookie-banner-btn-reject:hover { background: var(--gray-300); } .cookie-banner-btn-settings { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .cookie-banner-btn-settings:hover { background: var(--primary); color: white; } .cookie-settings-modal { display: none; position: fixed; inset: 0; z-index: 10000; } .cookie-settings-modal.show { display: flex; align-items: center; justify-content: center; } .cookie-settings-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .cookie-settings-container { position: relative; background: white; border-radius: 12px; max-width: 600px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .cookie-settings-header { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; } .cookie-settings-title { font-size: 1.25rem; font-weight: 600; color: var(--gray-900); } .cookie-settings-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: var(--gray-500); transition: all 0.2s; } .cookie-settings-close:hover { background: var(--gray-100); color: var(--gray-700); } .cookie-settings-body { padding: 1.5rem; overflow-y: auto; flex: 1; } .cookie-settings-intro { color: var(--gray-600); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; } .cookie-category { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-100); } .cookie-category:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .cookie-category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .cookie-category-title { font-weight: 600; color: var(--gray-900); font-size: 0.9375rem; display: flex; align-items: center; gap: 0.5rem; } .cookie-category-required { background: var(--gray-200); color: var(--gray-600); padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; } .cookie-category-description { color: var(--gray-600); font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.5rem; } .cookie-toggle { position: relative; width: 44px; height: 24px; } .cookie-toggle input { opacity: 0; width: 0; height: 0; } .cookie-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--gray-300); transition: 0.3s; border-radius: 24px; } .cookie-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .cookie-toggle input:checked + .cookie-toggle-slider { background-color: var(--primary); } .cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); } .cookie-toggle.disabled { opacity: 0.5; pointer-events: none; } .cookie-toggle.disabled .cookie-toggle-slider { background-color: var(--gray-200); } .cookie-settings-footer { padding: 1.5rem; border-top: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .cookie-settings-footer-links { display: flex; gap: 1rem; flex-wrap: wrap; } .cookie-settings-footer-link { color: var(--primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; } .cookie-settings-footer-link:hover { text-decoration: underline; } .cookie-settings-footer-actions { display: flex; gap: 0.75rem; } .cookie-settings-btn { padding: 0.625rem 1.25rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s; } .cookie-settings-btn-save { background: var(--primary); color: white; } .cookie-settings-btn-save:hover { background: var(--primary-hover); } .cookie-settings-btn-accept-all { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .cookie-settings-btn-accept-all:hover { background: var(--primary); color: white; } @media (max-width: 768px) { .cookie-banner { padding: 1rem; } .cookie-banner-container { flex-direction: column; gap: 1rem; align-items: stretch; } .cookie-banner-content { flex: 1 1 auto; } .cookie-banner-title { font-size: 1rem; } .cookie-banner-actions { flex-direction: column; width: 100%; } .cookie-banner-btn { width: 100%; padding: 0.75rem; } .cookie-settings-container { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .cookie-settings-footer { flex-direction: column; align-items: stretch; } .cookie-settings-footer-links { order: 2; justify-content: center; } .cookie-settings-footer-actions { order: 1; flex-direction: column; } .cookie-settings-btn { width: 100%; } } @media (prefers-color-scheme: dark) { .cookie-banner, .cookie-settings-container { background: var(--gray-800, #1f2937); border-color: var(--gray-700, #374151); } .cookie-banner { box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); } .cookie-banner-title, .cookie-settings-title, .cookie-category-title { color: var(--gray-100, #f3f4f6); } .cookie-banner-text, .cookie-settings-intro, .cookie-category-description { color: var(--gray-400, #9ca3af); } .cookie-settings-close { color: var(--gray-400, #9ca3af); } .cookie-settings-close:hover { background: var(--gray-700, #374151); color: var(--gray-200, #e5e7eb); } .cookie-settings-header, .cookie-settings-footer, .cookie-category { border-color: var(--gray-700, #374151); } .cookie-banner-btn-reject { background: var(--gray-700, #374151); color: var(--gray-200, #e5e7eb); } .cookie-banner-btn-reject:hover { background: var(--gray-600, #4b5563); } } @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-up-instant { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .cookie-settings-modal.show .cookie-settings-container { animation: fade-in 0.2s ease-out; } .cookie-banner { --cc-bg: rgba(255, 255, 255, 0.94); --cc-fill: #f5f5f7; --cc-fill-hover: #efeff4; --cc-text: #1d1d1f; --cc-label: #86868b; --cc-separator: rgba(60, 60, 67, 0.1); --cc-radius: 20px; --cc-border: rgba(13, 174, 156, 0.42); --cc-shadow: 0 8px 28px rgba(13, 174, 156, 0.1), 0 0 0 1px rgba(13, 174, 156, 0.14); --cc-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; left: 50%; right: auto; bottom: max(0.875rem, env(safe-area-inset-bottom, 0px)); width: min(680px, calc(100% - 1.5rem)); max-width: min(680px, calc(100% - 1.5rem)); padding: 1rem 1.125rem; margin: 0; border: 1px solid var(--cc-border); border-top: 1px solid var(--cc-border); border-radius: var(--cc-radius); background: var(--cc-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--cc-shadow); transform: translate3d(-50%, calc(100% + 2rem), 0); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; } .cookie-banner.show { transform: translate3d(-50%, 0, 0); animation: none; } .cookie-banner-container { gap: 1rem; align-items: flex-end; } .cookie-banner-title { margin: 0 0 0.25rem; font-family: var(--cc-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--cc-text); } .cookie-banner-text { margin: 0; font-family: var(--cc-font); font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.45; color: var(--cc-label); } .cookie-banner-text a { color: var(--primary); font-weight: 500; text-decoration: none; } .cookie-banner-text a:hover { text-decoration: underline; } .cookie-banner-actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; flex-shrink: 0; } .cookie-banner-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; margin-left: auto; } .cookie-banner-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; padding: 0.5rem 1rem; border: none; border-radius: 980px; font-family: var(--cc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease; } .cookie-banner-actions-row .cookie-banner-btn { flex: 0 0 auto; min-width: 0; } .cookie-banner-btn-accept { background: var(--cc-text); color: #fff; } .cookie-banner-btn-accept:hover { background: #000; opacity: 0.92; } .cookie-banner-btn-reject { background: var(--cc-fill); color: var(--cc-text); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } .cookie-banner-btn-reject:hover { background: var(--cc-fill-hover); } .cookie-banner-btn-settings { flex-shrink: 0; align-self: center; min-height: 32px; padding: 0.375rem 0.75rem; background: transparent; color: var(--primary); box-shadow: none; font-size: 12px; font-weight: 500; } .cookie-banner-btn-settings:hover { background: rgba(13, 174, 156, 0.08); color: var(--primary); } .cookie-settings-modal { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .cookie-settings-overlay { background: rgba(0, 0, 0, 0.32); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .cookie-settings-container { width: min(480px, calc(100% - 2rem)); max-width: 480px; max-height: min(85vh, 640px); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); background: #fff; box-shadow: var(--cc-shadow); animation: cookie-modal-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .cookie-settings-header { padding: 1rem 1.125rem 0.875rem; border-bottom: none; } .cookie-settings-title { font-family: var(--cc-font); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--cc-text); } .cookie-settings-close { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--cc-fill); color: var(--cc-label); } .cookie-settings-close:hover { background: var(--cc-fill-hover); color: var(--cc-text); } .cookie-settings-close svg { width: 14px; height: 14px; } .cookie-settings-body { padding: 0 1.125rem 1rem; } .cookie-settings-intro { margin-bottom: 1rem; font-family: var(--cc-font); font-size: 0.8125rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--cc-label); } .cookie-category { margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; border: none; border-radius: 12px; background: var(--cc-fill); } .cookie-category:last-child { margin-bottom: 0; } .cookie-category-header { margin-bottom: 0.375rem; } .cookie-category-title { font-family: var(--cc-font); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cc-text); } .cookie-category-required { padding: 0.125rem 0.4375rem; border-radius: 980px; background: rgba(60, 60, 67, 0.08); font-family: var(--cc-font); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cc-label); } .cookie-category-description { margin-bottom: 0; font-family: var(--cc-font); font-size: 0.75rem; line-height: 1.4; color: var(--cc-label); } .cookie-toggle { width: 51px; height: 31px; } .cookie-toggle-slider { background-color: rgba(60, 60, 67, 0.16); border-radius: 980px; } .cookie-toggle-slider::before { height: 27px; width: 27px; left: 2px; bottom: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .cookie-toggle input:checked + .cookie-toggle-slider { background-color: #34c759; } .cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); } .cookie-settings-footer { padding: 0.875rem 1.125rem 1rem; border-top: none; background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); } .cookie-settings-footer-link { font-family: var(--cc-font); font-size: 0.8125rem; font-weight: 500; } .cookie-settings-btn { min-height: 34px; padding: 0.4375rem 0.9375rem; border: none; border-radius: 980px; font-family: var(--cc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .cookie-settings-btn-save { background: var(--cc-text); color: #fff; } .cookie-settings-btn-save:hover { background: #000; } .cookie-settings-btn-accept-all { background: var(--cc-fill); color: var(--cc-text); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } .cookie-settings-btn-accept-all:hover { background: var(--cc-fill-hover); color: var(--cc-text); } @media (max-width: 768px) { .cookie-banner { bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); width: calc(100% - 1rem); max-width: calc(100% - 1rem); padding: 0.875rem 1rem; } .cookie-banner-container { flex-direction: column; align-items: stretch; gap: 0.875rem; } .cookie-banner-actions { width: 100%; } .cookie-banner-actions-row .cookie-banner-btn { padding: 0.5rem 0.75rem; font-size: 12px; } .cookie-banner .cookie-banner-btn { width: auto; } .cookie-settings-container { width: 100%; max-width: 100%; max-height: 100%; border-radius: 20px 20px 0 0; align-self: flex-end; } .cookie-settings-modal.show { align-items: flex-end; } } @media (prefers-color-scheme: dark) { .cookie-banner, .cookie-settings-container { background: rgba(255, 255, 255, 0.94); border-color: var(--cc-border); } .cookie-banner { box-shadow: var(--cc-shadow); } .cookie-banner-title, .cookie-settings-title, .cookie-category-title { color: var(--cc-text); } .cookie-banner-text, .cookie-settings-intro, .cookie-category-description { color: var(--cc-label); } .cookie-banner-btn-reject, .cookie-settings-btn-accept-all { background: var(--cc-fill); color: var(--cc-text); } .cookie-settings-close { background: var(--cc-fill); color: var(--cc-label); } .cookie-settings-header, .cookie-settings-footer, .cookie-category { border-color: transparent; } } @keyframes cookie-modal-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } .cookie-settings-modal.show .cookie-settings-container { animation: cookie-modal-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .chat-modal-container { --chat-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif; --chat-radius-shell: 22px; --chat-radius-bubble: 18px; --chat-radius-sm: 12px; --chat-radius-pill: 999px; --chat-bg: #f5f5f7; --chat-surface: #fff; --chat-surface-muted: #ebebef; --chat-border: rgb(0 0 0 / 8%); --chat-text: #1d1d1f; --chat-text-muted: #6e6e73; --chat-accent: #0dae9c; --chat-accent-hover: #0b9987; --chat-accent-soft: rgb(13 174 156 / 12%); --chat-user-bg: #0dae9c; --chat-user-text: #fff; --chat-assistant-bg: #fff; --chat-assistant-text: #1d1d1f; --chat-code-bg: #f2f2f7; --chat-code-text: #bf4800; --chat-shadow: 0 24px 80px rgb(0 0 0 / 16%), 0 8px 24px rgb(0 0 0 / 8%); --chat-header-bg: rgb(255 255 255 / 78%); --chat-typing-dot: #aeaeb2; font-family: var(--chat-font); -webkit-font-smoothing: antialiased; } .chat-modal-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 32%); backdrop-filter: blur(6px); z-index: 10002; display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px; animation: chat-fade-in 0.28s cubic-bezier(0.25, 0.1, 0.25, 1); } @keyframes chat-fade-in { from { opacity: 0; } to { opacity: 1; } } .chat-modal-container { background: var(--chat-surface); border-radius: var(--chat-radius-shell); box-shadow: var(--chat-shadow); border: 1px solid var(--chat-border); width: 400px; max-width: 100%; height: 620px; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; animation: chat-slide-up 0.36s cubic-bezier(0.32, 0.72, 0, 1); user-select: none; } @keyframes chat-slide-up { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .chat-modal-container.minimized { height: 52px; } .chat-modal-container.minimized .chat-modal-messages, .chat-modal-container.minimized .chat-modal-input { display: none; } .chat-modal-header { background: var(--chat-header-bg); backdrop-filter: saturate(180%) blur(20px); color: var(--chat-text); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; border-bottom: 1px solid var(--chat-border); } .chat-header-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; min-width: 0; } .chat-header-title #chat-header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-context-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--chat-radius-pill, 999px); font-size: 11px; font-weight: 500; margin-left: 4px; letter-spacing: 0.01em; text-transform: none; background: var(--chat-surface-muted); color: var(--chat-text-muted); flex-shrink: 0; } .chat-context-badge.booking-context { background: var(--chat-accent-soft); color: var(--chat-accent); } .chat-context-badge.flight-context { background: rgb(10 132 255 / 14%); color: #0a84ff; } .chat-context-badge.authenticated-context, .chat-context-badge.anonymous-context { background: var(--chat-surface-muted); color: var(--chat-text-muted); } .chat-header-actions { display: flex; gap: 4px; flex-shrink: 0; } .chat-header-btn { background: transparent; border: none; color: var(--chat-text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s ease, color 0.18s ease; } .chat-header-btn svg { width: 16px; height: 16px; stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .chat-header-btn:hover { background: var(--chat-surface-muted); color: var(--chat-text); } .chat-header-btn:active { transform: scale(0.94); } .chat-modal-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--chat-bg); } .chat-modal-messages::-webkit-scrollbar { width: 4px; } .chat-modal-messages::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 4px; } .user-message, .assistant-message { display: flex; animation: chat-message-in 0.32s cubic-bezier(0.25, 0.1, 0.25, 1); } @keyframes chat-message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .user-message { justify-content: flex-end; } .assistant-message { justify-content: flex-start; } .message-avatar { display: none; } .message-content { max-width: 82%; padding: 10px 14px; border-radius: var(--chat-radius-bubble); line-height: 1.45; font-size: 15px; letter-spacing: -0.01em; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } .user-message .message-content { background: var(--chat-user-bg); color: var(--chat-user-text); border-bottom-right-radius: 6px; } .assistant-message .message-content { width: 100%; max-width: 100%; background: var(--chat-assistant-bg); color: var(--chat-assistant-text); border-bottom-left-radius: 6px; border: 1px solid var(--chat-border); box-shadow: none; text-align: left; } .chat-assistant-prose, .chat-structured-results { width: 100%; text-align: left; } .system-message { margin: 8px 0; text-align: center; animation: chat-message-in 0.32s cubic-bezier(0.25, 0.1, 0.25, 1); } .system-message-content { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--chat-accent-soft); color: var(--chat-accent); border-radius: var(--chat-radius-pill, 999px); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; } .system-message-content i { display: none; } .message-context-badge { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; margin-bottom: 6px; color: var(--chat-text-muted); text-transform: none; padding: 0; background: none; border-radius: 0; } .message-context-badge.booking-context { color: var(--chat-accent); } .message-context-badge.flight-context { color: #0a84ff; } .message-context-badge.header-context { display: none; } .message-content h2 { font-size: 17px; font-weight: 600; margin: 10px 0 6px; color: var(--chat-text); letter-spacing: -0.02em; } .message-content h3 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; color: var(--chat-text); } .message-content p { margin: 6px 0; } .message-content ul, .message-content ol { margin: 6px 0; padding-left: 18px; } .message-content li { margin: 3px 0; } .message-content code { background: var(--chat-code-bg); padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, "SF Mono", monaco, "Cascadia Code", monospace; font-size: 13px; color: var(--chat-code-text); word-wrap: break-word; overflow-wrap: break-word; } .message-content code.chat-copyable-code { cursor: pointer; transition: background 0.15s ease; } .message-content code.chat-copyable-code:hover { filter: brightness(0.96); } .message-content code.chat-copyable-code.chat-code-copied { background: rgb(52 199 89 / 18%); color: #248a3d; } .message-content pre { background: var(--chat-surface-muted); color: var(--chat-assistant-text); padding: 12px; border-radius: var(--chat-radius-sm); overflow-x: auto; margin: 10px 0; border: 1px solid var(--chat-border); } .message-content pre code { background: transparent; padding: 0; color: inherit; font-size: 13px; } .message-content a { color: var(--chat-accent); text-decoration: none; } .message-content a:hover { text-decoration: underline; } .message-content .chat-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 110px; height: 34px; padding: 0 14px; margin: 0; border-radius: var(--chat-radius-pill, 999px); border: 1px solid var(--chat-border); background: var(--chat-surface); color: var(--chat-text); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .message-content .chat-action-btn i { font-size: 12px; } .message-content .chat-action-btn:hover { background: var(--chat-surface-muted); } .message-content .chat-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .message-content .chat-action-book { border-color: rgb(13 174 156 / 35%); } .message-content .chat-action-login { border-color: rgb(13 174 156 / 35%); background: var(--chat-accent-soft); color: var(--chat-accent); } .message-content .chat-action-login:hover { filter: brightness(0.98); } .message-content .chat-action-favorite.favorited { border-color: rgb(255 59 48 / 30%); background: rgb(255 59 48 / 8%); } .message-content .chat-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; } .message-content strong { font-weight: 600; color: var(--chat-text); } .chat-markdown-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; } .chat-markdown-table th, .chat-markdown-table td { padding: 8px 10px; border: 1px solid var(--chat-border); text-align: left; } .chat-markdown-table th { background: var(--chat-surface-muted); font-weight: 600; color: var(--chat-text); } .chat-markdown-table tr:nth-child(even) { background: var(--chat-code-bg); } .chat-markdown-table tr:hover { background: var(--chat-surface-muted); } .chat-markdown-table code { background: var(--chat-code-bg); padding: 2px 4px; border-radius: 4px; font-size: 12px; } .typing-bubble .message-content { min-height: 40px; display: flex; align-items: center; padding: 12px 16px; border: 1px solid var(--chat-border); } .typing-indicator { display: flex; align-items: center; gap: 5px; } .typing-indicator .typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chat-typing-dot); animation: chat-typing-pulse 1.2s ease-in-out infinite; } .typing-indicator .typing-dot:nth-child(2) { animation-delay: 0.15s; } .typing-indicator .typing-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-typing-pulse { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.92); } 40% { opacity: 1; transform: scale(1); } } .typing-indicator.fade-out { animation: chat-typing-fade 0.2s ease-out forwards; } @keyframes chat-typing-fade { to { opacity: 0; } } .chat-modal-input { padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--chat-surface); border-top: 1px solid var(--chat-border); display: flex; gap: 10px; align-items: flex-end; flex-shrink: 0; position: relative; z-index: 100; } .chat-input-textarea { flex: 1; border: 1px solid var(--chat-border); border-radius: 20px; padding: 10px 16px; font-size: 15px; font-family: inherit; resize: none; max-height: 120px; background: var(--chat-bg); color: var(--chat-text); transition: border-color 0.18s ease, box-shadow 0.18s ease; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .chat-input-textarea::-webkit-scrollbar { display: none; } .chat-input-textarea:focus { outline: none; border-color: var(--chat-accent); box-shadow: 0 0 0 3px var(--chat-accent-soft); } .chat-input-textarea::placeholder { color: var(--chat-text-muted); } .chat-input-textarea:disabled { opacity: 0.55; cursor: not-allowed; } .chat-send-button { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--chat-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.15s ease, opacity 0.18s ease; flex-shrink: 0; } .chat-send-button svg { width: 17px; height: 17px; stroke: currentcolor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chat-send-button:hover:not(:disabled) { background: var(--chat-accent-hover); } .chat-send-button:active:not(:disabled) { transform: scale(0.94); } .chat-send-button:disabled { opacity: 0.35; cursor: not-allowed; } .chat-char-counter { position: absolute; bottom: 68px; right: 18px; background: var(--chat-surface); padding: 4px 8px; border-radius: 8px; font-size: 11px; color: var(--chat-text-muted); border: 1px solid var(--chat-border); box-shadow: var(--chat-shadow); } .chat-welcome-message .message-content { border: 1px dashed var(--chat-border); background: transparent; color: var(--chat-text-muted); font-size: 14px; } .chat-welcome-message .message-content ul { margin: 8px 0; padding-left: 18px; } .chat-welcome-message { animation: chat-message-in 0.32s cubic-bezier(0.25, 0.1, 0.25, 1); } .queued-message .chat-message { opacity: 0.65; } .queue-indicator { display: block; font-size: 11px; color: var(--chat-text-muted); margin-top: 4px; font-style: normal; } .chat-send-button.queued { background: var(--chat-text-muted); animation: chat-queued-pulse 2s ease-in-out infinite; } @keyframes chat-queued-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .chat-header-btn, .chat-send-button { -webkit-tap-highlight-color: transparent; user-select: none; } .user-message .message-content, .assistant-message .message-content { user-select: text; } @media (max-width: 768px) { .chat-modal-overlay { padding: 0; align-items: stretch; justify-content: stretch; background: var(--chat-bg); backdrop-filter: none; } .chat-modal-container { --chat-mobile-input-gap: 12px; width: 100%; position: fixed; inset: 0; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; box-shadow: none; display: flex; flex-direction: column; transform: translateZ(0); touch-action: pan-y; overscroll-behavior: contain; transition: transform 0.3s ease, opacity 0.3s ease; } .chat-modal-container.mobile { animation: chat-slide-up-mobile 0.34s cubic-bezier(0.32, 0.72, 0, 1); } .chat-modal-container.keyboard-visible { height: 100dvh; max-height: 100dvh; transition: height 0.2s ease; } .chat-modal-container.keyboard-visible .chat-modal-input { position: fixed; bottom: calc(var(--chat-mobile-input-gap) + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; background: var(--chat-surface); z-index: 10001; border-top: 1px solid var(--chat-border); box-shadow: 0 -1px 0 var(--chat-border); } .chat-modal-container:not(.keyboard-visible) .chat-modal-input { margin-bottom: env(safe-area-inset-bottom, 0); } @keyframes chat-slide-up-mobile { from { transform: translateY(100%); } to { transform: translateY(0); } } .chat-modal-header { padding: 12px 14px; flex-shrink: 0; } .chat-modal-messages { flex: 1 1 auto; min-height: 0; overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; touch-action: pan-y; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--chat-mobile-input-gap)); } .chat-modal-input { flex-shrink: 0; padding: var(--chat-mobile-input-gap) 14px; padding-bottom: calc(var(--chat-mobile-input-gap) + env(safe-area-inset-bottom, 0px)); background: var(--chat-surface); z-index: 10; position: absolute; bottom: env(safe-area-inset-bottom, 0); left: 0; right: 0; } #chat-minimize-btn { display: none; } .message-content { max-width: 88%; font-size: 16px; } .chat-header-btn { width: 36px; height: 36px; min-width: 44px; min-height: 44px; } .chat-send-button { width: 40px; height: 40px; min-width: 44px; min-height: 44px; } .chat-input-textarea { font-size: 16px; touch-action: manipulation; } body.chat-modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; overscroll-behavior: none; touch-action: none; } } .chat-structured-results { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .chat-search-note { margin: 0 0 4px; font-size: 0.875rem; color: var(--chat-text-muted); } .chat-search-header { display: none; } .chat-search-open-link { display: inline-block; margin-bottom: 8px; font-size: 0.85rem; color: var(--chat-accent); } .chat-flight-card { border: 1px solid var(--chat-border); border-radius: var(--chat-radius-sm); padding: 12px 14px; background: var(--chat-bg); } .chat-flight-card-title { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--chat-text); letter-spacing: -0.02em; } .chat-flight-card-meta { font-size: 0.85rem; color: var(--chat-text-muted); line-height: 1.45; } .chat-flight-card-meta code { font-size: 0.8rem; } .chat-flight-card--multileg { border-color: var(--chat-accent); border-width: 1px; } .chat-flight-card--multileg .chat-flight-card-title { color: var(--chat-accent); } .chat-flight-legs { margin: 6px 0 8px; padding: 8px 10px; border-radius: var(--chat-radius-sm); background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-bg)); } .chat-flight-leg { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; font-size: 0.8rem; line-height: 1.35; } .chat-flight-leg + .chat-flight-leg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--chat-border); } .chat-flight-leg-index { font-weight: 600; color: var(--chat-text); white-space: nowrap; } .chat-flight-leg-route { color: var(--chat-text); } .chat-flight-leg-dep { color: var(--chat-text-muted); white-space: nowrap; text-align: right; } @media (prefers-reduced-motion: reduce) { .chat-modal-overlay, .chat-modal-container, .user-message, .assistant-message, .chat-welcome-message, .typing-indicator .typing-dot { animation: none; } .chat-send-button:active:not(:disabled) { transform: none; } } @media print { .chat-modal-overlay { display: none; } } .auth-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 10050; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .auth-modal.active, .auth-modal.closing { display: flex; } .auth-modal.active { animation: fade-in 0.3s ease forwards; } .auth-modal.closing { animation: fade-out 0.25s ease forwards; } .auth-modal-content { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 90%; max-width: 440px; max-height: 90vh; overflow: hidden; position: relative; display: flex; flex-direction: column; } .auth-modal.active .auth-modal-content { animation: slide-up 0.3s ease forwards; } .auth-modal.closing .auth-modal-content { animation: slide-down 0.25s ease forwards; } .auth-modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: #64748b; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; z-index: 1; } .auth-modal-close:hover { background: rgba(100, 116, 139, 0.1); color: #1e293b; } .auth-modal-header { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); padding: 30px; text-align: center; border-radius: 16px 16px 0 0; flex-shrink: 0; } .auth-modal-header h2 { color: #5fd4c4; font-size: 24px; font-weight: 700; margin: 0 0 8px; font-family: 'Outfit', sans-serif; } .auth-modal-header p { color: #cbd5e1; font-size: 14px; margin: 0; } .auth-debug-button { border: 1px solid rgba(13, 174, 156, 0.4); background: rgba(13, 174, 156, 0.08); color: #0dae9c; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; } .auth-debug-button:hover { border-color: rgba(13, 174, 156, 0.8); background: rgba(13, 174, 156, 0.16); } .auth-debug-textarea { width: calc(100% - 48px); margin: 0 24px 20px; min-height: 240px; max-height: 50vh; resize: vertical; font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; } .auth-debug-actions { display: flex; align-items: center; gap: 12px; padding: 16px 24px 24px; border-top: 1px solid #e2e8f0; } .auth-debug-copy { border: none; border-radius: 8px; padding: 10px 16px; background: linear-gradient(135deg, #0dae9c 0%, #5fd4c4 100%); color: #0f172a; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .auth-debug-copy:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.2); } .auth-debug-status { font-size: 12px; color: #64748b; } .auth-form { padding: 30px; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent; } .auth-form::-webkit-scrollbar { width: 8px; } .auth-form::-webkit-scrollbar-track { background: transparent; } .auth-form::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; } .auth-form::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); } .auth-form .form-group { margin-bottom: 20px; } .auth-form .form-group label { display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px; } .auth-form input[type="email"], .auth-form input[type="password"] { width: 100%; padding: 12px 16px; border: 1px solid rgba(30, 41, 59, 0.15); border-radius: 8px; font-size: 15px; transition: all 0.3s ease; background: white; } .auth-form input[type="email"]:focus, .auth-form input[type="password"]:focus { outline: none; border-color: rgba(13, 174, 156, 0.3); box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.1); } .auth-form .remember-me { display: flex; align-items: center; gap: 8px; } .auth-form .remember-me input[type="checkbox"] { width: auto; margin: 0; } .auth-form .remember-me label { margin: 0; font-weight: 500; color: #475569; } .auth-submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #0dae9c 0%, #5fd4c4 100%); color: #1e293b; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .auth-submit-btn:hover { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); color: #5fd4c4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); } .auth-divider { text-align: center; margin: 25px 0; position: relative; } .auth-divider span { background: white; padding: 0 15px; color: #94a3b8; font-size: 14px; position: relative; } .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e2e8f0; } .auth-google-btn { width: 100%; padding: 14px; background: white; color: #475569; border: 1px solid rgba(30, 41, 59, 0.15); border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; } .auth-google-btn:hover { background: rgba(13, 174, 156, 0.1); border-color: rgba(13, 174, 156, 0.3); color: #0dae9c; } .auth-footer { margin-top: 25px; text-align: center; } .auth-footer p { margin: 8px 0; font-size: 14px; color: #64748b; } .auth-footer a { color: #0dae9c; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .auth-footer a:hover { color: #2563eb; text-decoration: underline; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } } .auth-notification { max-width: 400px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10001; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .auth-notification:not(.positioned, .centered) { position: fixed; top: 20px; right: 20px; transform: translateX(420px); } .auth-notification.positioned { position: fixed; opacity: 0; transform: translateX(-50%) translateY(-10px); } .auth-notification.positioned.show { opacity: 1; transform: translateX(-50%) translateY(0); } .auth-notification.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); } .auth-notification.centered.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .auth-notification:not(.positioned, .centered).show { transform: translateX(0); opacity: 1; } .notification-arrow { display: none; position: absolute; width: 0; height: 0; border-style: solid; } .auth-notification.arrow-bottom .notification-arrow { display: block; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0; border-color: white transparent transparent; } .auth-notification.arrow-top .notification-arrow { display: block; top: -8px; left: 50%; transform: translateX(-50%); border-width: 0 8px 8px; border-color: transparent transparent white; } .auth-notification-content { padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .auth-notification-content i { font-size: 20px; flex-shrink: 0; } .auth-notification-content p { margin: 0; flex: 1; font-size: 14px; color: #475569; } .auth-notification-close { background: none; border: none; font-size: 24px; color: #64748b; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .auth-notification-close:hover { color: #1e293b; } .auth-notification-success { border-left: 4px solid #22c55e; } .auth-notification-success i { color: #22c55e; } .auth-notification-error { border-left: 4px solid #ef4444; } .auth-notification-error i { color: #ef4444; } .auth-notification-info { border-left: 4px solid #0dae9c; } .auth-notification-info i { color: #0dae9c; } .auth-notification-warning { border-left: 4px solid #f59e0b; } .auth-notification-warning i { color: #f59e0b; } .auth-container { min-height: calc(100vh - 70px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .auth-card { background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); max-width: 480px; width: 100%; overflow: hidden; } .auth-header { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); color: white; padding: 40px 30px; text-align: center; } .auth-icon { font-size: 48px; color: #5fd4c4; margin-bottom: 20px; } .auth-header h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; font-family: 'Outfit', sans-serif; } .auth-header p { font-size: 16px; color: #cbd5e1; margin: 0; } .auth-content { padding: 40px 30px; } .auth-benefits { margin-bottom: 30px; } .benefit-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #475569; font-size: 15px; } .benefit-item i { color: #10b981; font-size: 18px; } .auth-actions { margin-top: 30px; } .google-signin-btn { width: 100%; padding: 14px 20px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; font-weight: 600; color: #1f2937; cursor: pointer; transition: all 0.3s ease; } .google-signin-btn:hover { background: #f9fafb; border-color: #0dae9c; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); } .google-signin-btn img { width: 20px; height: 20px; } .auth-terms { text-align: center; font-size: 13px; color: #6b7280; line-height: 1.6; } .auth-terms a { color: #0dae9c; text-decoration: none; } .auth-terms a:hover { text-decoration: underline; } .loading-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 10100; } #loading-overlay .loading-spinner { background: white; padding: 40px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; width: auto; height: auto; border: none; animation: none; } #loading-overlay .loading-spinner i { font-size: 48px; color: #0dae9c; margin-bottom: 16px; } #loading-overlay .loading-spinner p { font-size: 16px; color: #475569; margin: 0; } .user-menu { position: relative; display: flex; align-items: center; gap: 12px; } .user-menu-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: 8px; transition: background 0.2s ease; } .user-menu-toggle:hover { background: rgba(13, 174, 156, 0.08); } .user-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #5fd4c4; cursor: pointer; transition: transform 0.3s ease; } .user-avatar:hover { transform: scale(1.05); } .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 12px; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); min-width: 220px; display: none; z-index: 1000; } .user-dropdown.active { display: block; } .user-dropdown-header { padding: 16px; border-bottom: 1px solid #e5e7eb; } .user-dropdown-name { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 4px; } .user-dropdown-email { font-size: 13px; color: #6b7280; margin-bottom: 8px; } .user-provider-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 12px; font-weight: 500; color: #475569; margin-top: 4px; } .user-provider-badge i { font-size: 11px; } .user-dropdown-menu { padding: 8px 0; } .user-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #475569; text-decoration: none; transition: background 0.2s ease; } .user-dropdown-item:hover { background: #f9fafb; color: #0dae9c; } .user-dropdown-item i { width: 20px; text-align: center; } .user-dropdown-divider { height: 1px; background: #e5e7eb; margin: 8px 0; } .login-btn { display: flex; align-items: center; gap: var(--space-sm); padding: 0.875rem 1.5rem; background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-300); border-radius: var(--radius); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .login-btn:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .notification { position: fixed; top: 100px; right: 20px; background: white; padding: 16px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; z-index: 10000; transform: translateX(400px); transition: transform 0.3s ease; max-width: 400px; } .notification.show { transform: translateX(0); } .notification i { font-size: 20px; } .notification-success { border-left: 4px solid #10b981; } .notification-success i { color: #10b981; } .notification-error { border-left: 4px solid #ef4444; } .notification-error i { color: #ef4444; } .notification-info { border-left: 4px solid #0dae9c; } .notification-info i { color: #0dae9c; } .auth-cancel-btn { padding: 10px 24px; background: rgba(30, 41, 59, 0.05); border: 1px solid rgba(30, 41, 59, 0.15); border-radius: 8px; color: #475569; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 14px; } .auth-cancel-btn:hover { background: rgba(13, 174, 156, 0.1); border-color: rgba(13, 174, 156, 0.3); color: #0dae9c; } .auth-cancel-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.2); } @media (max-width: 768px) { .auth-modal { padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top, 1rem)); align-items: flex-end; } .auth-modal-content { width: 100%; max-width: 100%; max-height: calc(85vh - env(safe-area-inset-top, 0px)); margin: 0; border-radius: 24px 24px 0 0; } .auth-modal.active .auth-modal-content { animation: slide-up-mobile 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .auth-modal.closing .auth-modal-content { animation: slide-down-mobile 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .auth-modal-header { padding: 24px 20px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); } .auth-modal-header h2 { font-size: 22px; margin: 0 0 6px; } .auth-modal-header p { font-size: 13px; } .auth-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 26px; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; aspect-ratio: 1; } .auth-form { padding: 20px; } .form-group label { font-size: 0.875rem; } .form-group input { padding: 0.75rem; font-size: 16px; min-height: 48px; } .auth-submit-btn, .auth-google-btn { padding: 14px; font-size: 15px; min-height: 50px; border-radius: 12px; } .auth-footer { font-size: 0.875rem; } .benefit-item { font-size: 14px; margin-bottom: 12px; } .benefit-item i { font-size: 16px; } } @media (max-width: 640px) { .auth-modal { padding: 0; padding-top: env(safe-area-inset-top, 10px); align-items: flex-end; background: rgba(0, 0, 0, 0.7); } .auth-modal-content { width: 100%; max-height: calc(95vh - env(safe-area-inset-top, 10px)); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 20px); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); } .auth-modal-header { padding: 20px; padding-top: 28px; position: relative; } .auth-modal-header i { display: none; } .auth-modal-header h2 { font-size: 20px; margin: 0 0 4px; } .auth-modal-header p { font-size: 12px; opacity: 0.9; } .auth-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 24px; background: rgba(255, 255, 255, 0.15); color: white; flex-shrink: 0; aspect-ratio: 1; } .auth-modal-close:hover { background: rgba(255, 255, 255, 0.25); color: white; } .auth-form { padding: 20px; padding-top: 10px; } .auth-benefits { margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .benefit-item { font-size: 13px; margin-bottom: 0; } .benefit-item i { font-size: 14px; } .auth-google-btn { background: linear-gradient(135deg, #0dae9c 0%, #5fd4c4 100%); color: white; border: none; font-weight: 600; box-shadow: 0 4px 12px rgba(13, 174, 156, 0.3); } .auth-google-btn:hover { background: linear-gradient(135deg, #0b9987 0%, #4fc3b3 100%); transform: translateY(-1px); } .auth-google-btn img { filter: brightness(0) invert(1); } .auth-divider { margin: 20px 0; } .auth-divider span { font-size: 12px; } .auth-terms { font-size: 11px; line-height: 1.5; padding: 0 10px; color: #64748b; } .auth-card { border-radius: 0; max-width: 100%; min-height: 100vh; } .auth-container { padding: 0; } } @media (max-width: 480px) { .auth-modal-content { max-height: 92vh; } .auth-modal-header { padding: 16px; padding-top: 24px; } .auth-modal-header h2 { font-size: 18px; } .auth-form { padding: 16px; } .auth-benefits { grid-template-columns: 1fr; gap: 8px; } .benefit-item { font-size: 12px; } .auth-notification { max-width: calc(100% - 40px); } .auth-notification.positioned, .auth-notification.centered, .auth-notification:not(.positioned, .centered) { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) scale(0.9); } .auth-notification.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } .notification-arrow { display: none !important; } .auth-notification-content { padding: 12px 16px; } .auth-notification-content p { font-size: 13px; } } @keyframes slide-up-mobile { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slide-down-mobile { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes scale-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .shake-animation { animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fade-in-text { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } } @media (max-width: 768px) { .auth-modal-plane-icon { display: none; } .auth-modal-subtitle { display: none; } .benefit-item-recommendations { display: none !important; } .auth-benefits { display: flex !important; flex-direction: column !important; gap: 12px !important; } .benefit-item { margin-bottom: 0 !important; } .auth-modal { align-items: center; justify-content: center; } .auth-modal-content { position: relative; border-radius: 16px; } } .auth-modal { --am-bg: #fff; --am-fill: #f5f5f7; --am-fill-hover: #efeff4; --am-text: #1d1d1f; --am-label: #86868b; --am-separator: rgba(60, 60, 67, 0.14); --am-radius-shell: 20px; --am-radius-control: 12px; --am-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); --am-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; background: rgba(0, 0, 0, 0.32); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .auth-modal-content { width: min(420px, calc(100% - 2rem)); max-width: 420px; border-radius: var(--am-radius-shell); box-shadow: var(--am-shadow); background: var(--am-bg); overflow: hidden; } .auth-modal-close { top: 0.875rem; right: 0.875rem; width: 30px; height: 30px; font-size: 1.25rem; line-height: 1; color: var(--am-label); background: var(--am-fill); border-radius: 50%; } .auth-modal-close:hover { background: var(--am-fill-hover); color: var(--am-text); } .auth-modal-header { background: var(--am-bg); padding: 1.75rem 1.75rem 0; border-radius: 0; text-align: left; } .auth-modal-header h2 { margin: 0; font-family: var(--am-font); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; color: var(--am-text); } .auth-modal-header p, .auth-modal-subtitle { margin: 0.375rem 0 0; font-family: var(--am-font); font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--am-label); } .auth-modal-plane-icon, .auth-modal-header > i { display: none; } .auth-modal-header .auth-modal-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.875rem; border-radius: 10px; background: rgba(13, 174, 156, 0.1); color: var(--primary); font-size: 1.125rem; } .auth-form { padding: 1.25rem 1.75rem 1.75rem; font-family: var(--am-font); } .auth-form-actions { display: flex; flex-direction: column; gap: 0.5rem; } .auth-provider-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; min-height: 48px; padding: 0.6875rem 1rem; border: none; border-radius: var(--am-radius-control); background: var(--am-fill); color: var(--am-text); font-family: var(--am-font); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .auth-provider-btn:hover { background: var(--am-fill-hover); } .auth-provider-btn:active { transform: scale(0.985); } .auth-provider-btn img { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .auth-provider-btn i { font-size: 1.125rem; flex-shrink: 0; } .auth-provider-btn--apple i { color: var(--am-text); } .auth-provider-btn--phone i { color: var(--primary); } .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.125rem 0; color: var(--am-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .auth-divider-line { flex: 1; height: 1px; background: var(--am-separator); } .auth-email-field { box-sizing: border-box; width: 100%; min-height: 48px; margin-bottom: 0.625rem; padding: 0.8125rem 1rem; border: none; border-radius: var(--am-radius-control); background: var(--am-fill); color: var(--am-text); font-family: var(--am-font); font-size: 1rem; letter-spacing: -0.01em; transition: background 0.2s ease, box-shadow 0.2s ease; } .auth-email-field::placeholder { color: var(--am-label); } .auth-email-field:focus { outline: none; background: var(--am-bg); box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.18), inset 0 0 0 0.5px rgba(13, 174, 156, 0.35); } .auth-primary-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-bottom: 0.75rem; padding: 0.75rem 1.25rem; border: none; border-radius: 980px; background: var(--primary); color: #fff; font-family: var(--am-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease; } .auth-primary-btn:hover { background: var(--primary-hover); } .auth-primary-btn:active { transform: scale(0.985); } .auth-terms { margin: 0.75rem 0 0; text-align: center; font-size: 0.6875rem; line-height: 1.45; color: var(--am-label); } .auth-terms a { color: var(--primary); font-weight: 500; text-decoration: none; } .auth-terms a:hover { text-decoration: underline; } .auth-modal-body { padding: 0 1.75rem 1.75rem; } .auth-modal-body .auth-primary-btn, .auth-modal-body .auth-provider-btn { margin-bottom: 0.5rem; } .auth-modal-body .auth-provider-btn--ghost { background: transparent; color: var(--am-label); min-height: 44px; } .auth-modal-body .auth-provider-btn--ghost:hover { background: var(--am-fill); color: var(--am-text); } .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="tel"], .auth-form input[type="text"] { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.8125rem 1rem; border: none; border-radius: var(--am-radius-control); background: var(--am-fill); color: var(--am-text); font-family: var(--am-font); font-size: 1rem; transition: background 0.2s ease, box-shadow 0.2s ease; } .auth-form input[type="email"]:focus, .auth-form input[type="password"]:focus, .auth-form input[type="tel"]:focus, .auth-form input[type="text"]:focus { outline: none; background: var(--am-bg); box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.18), inset 0 0 0 0.5px rgba(13, 174, 156, 0.35); } .auth-form .form-group label { font-family: var(--am-font); font-size: 0.8125rem; font-weight: 500; color: var(--am-label); } .auth-submit-btn, .auth-google-btn { min-height: 48px; border: none; border-radius: 980px; background: var(--primary); color: #fff; font-family: var(--am-font); font-size: 0.9375rem; font-weight: 600; box-shadow: none; transform: none; } .auth-submit-btn:hover, .auth-google-btn:hover { background: var(--primary-hover); color: #fff; transform: none; box-shadow: none; } .auth-google-btn { background: var(--am-fill); color: var(--am-text); border: none; } .auth-google-btn:hover { background: var(--am-fill-hover); color: var(--am-text); } .auth-cancel-btn { border: none; border-radius: 980px; background: var(--am-fill); color: var(--am-text); font-family: var(--am-font); font-weight: 500; } .auth-cancel-btn:hover { background: var(--am-fill-hover); color: var(--am-text); } #loading-overlay .loading-spinner { border-radius: var(--am-radius-shell); box-shadow: var(--am-shadow); } @media (max-width: 768px) { .auth-modal { align-items: center; justify-content: center; padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top, 1rem)); } .auth-modal-content { width: min(420px, calc(100% - 1.5rem)); max-width: 100%; max-height: min(90vh, 640px); margin: 0; border-radius: var(--am-radius-shell); } .auth-modal-header { padding: 1.5rem 1.5rem 0; } .auth-modal-header h2 { font-size: 1.25rem; } .auth-form { padding: 1rem 1.5rem 1.5rem; } .auth-modal-close { top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; background: var(--am-fill); color: var(--am-label); } .auth-modal-subtitle { display: block; } } @media (max-width: 640px) { .auth-modal-content { width: calc(100% - 1.25rem); border-radius: 18px; } .auth-form { padding: 0.875rem 1.25rem 1.25rem; } .auth-modal-header { padding: 1.375rem 1.25rem 0; } } .notification-container { position: fixed; top: 20px; right: 20px; z-index: 10000; max-width: 420px; pointer-events: none; } .notification { background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 12px; min-width: 320px; max-width: 420px; pointer-events: all; position: relative; overflow: hidden; transform-origin: right center; } .notification-content { display: flex; align-items: center; padding: 16px; gap: 12px; } .notification-icon { font-size: 20px; line-height: 1; flex-shrink: 0; } .notification-message { flex: 1; font-size: 14px; line-height: 1.5; color: #1e293b; } .notification-link { color: #0dae9c; text-decoration: none; font-weight: 500; white-space: nowrap; transition: color 0.2s ease; } .notification-link:hover { color: #0b9987; text-decoration: underline; } .notification-close { background: none; border: none; color: #64748b; cursor: pointer; font-size: 24px; line-height: 1; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s ease; } .notification-close:hover { color: #1e293b; } .notification-info { border-left: 4px solid #3b82f6; } .notification-info .notification-icon { color: #3b82f6; } .notification-success { border-left: 4px solid #22c55e; } .notification-success .notification-icon { color: #22c55e; } .notification-warning { border-left: 4px solid #f59e0b; background: #fffbeb; } .notification-warning .notification-icon { color: #f59e0b; } .notification-warning .notification-message { color: #78350f; } .notification-error { border-left: 4px solid #ef4444; background: #fef2f2; } .notification-error .notification-icon { color: #ef4444; } .notification-error .notification-message { color: #7f1d1d; } @keyframes slide-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } .notification-slide-in { animation: slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .notification-slide-out { animation: slide-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @media (max-width: 480px) { .notification-container { top: 10px; left: 10px; right: 10px; max-width: none; } .notification { min-width: auto; max-width: none; width: 100%; } .notification-content { padding: 12px; } .notification-message { font-size: 13px; } .notification-container:last-of-type { top: auto; bottom: 10px; } @keyframes slide-in-mobile { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-out-mobile { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } } .notification-slide-in { animation: slide-in-mobile 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .notification-slide-out { animation: slide-out-mobile 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } @media (prefers-color-scheme: dark) { .notification { background: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); } .notification-message { color: #e2e8f0; } .notification-close { color: #94a3b8; } .notification-close:hover { color: #f1f5f9; } .notification-warning { background: #78350f; } .notification-warning .notification-message { color: #fef3c7; } .notification-error { background: #7f1d1d; } .notification-error .notification-message { color: #fecaca; } } #toast-stack, #notification-container { --toast-bg: rgba(255, 255, 255, 0.92); --toast-text: #1d1d1f; --toast-label: #86868b; --toast-radius: 14px; --toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); --toast-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; position: fixed; top: calc(68px + 0.75rem); right: 1rem; left: auto; bottom: auto; z-index: 10001; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; width: min(380px, calc(100vw - 2rem)); max-width: min(380px, calc(100vw - 2rem)); pointer-events: none; } #toast-stack .auth-notification, #notification-container .notification { position: relative; top: auto; right: auto; left: auto; bottom: auto; width: 100%; max-width: 100%; min-width: 0; margin: 0; pointer-events: auto; overflow: hidden; border: none; border-left: none; border-radius: var(--toast-radius); background: var(--toast-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--toast-shadow); opacity: 0; transform: translate3d(110%, 0, 0) scale(0.96); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; } #toast-stack .auth-notification.show, #notification-container .notification.notification-slide-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } #toast-stack .auth-notification:not(.show), #notification-container .notification.notification-slide-out { opacity: 0; transform: translate3d(110%, 0, 0) scale(0.96); transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s ease; } #toast-stack .auth-notification-content, #notification-container .notification-content { display: flex; align-items: center; gap: 0.75rem; padding: 0.8125rem 0.875rem 0.8125rem 0.9375rem; } #toast-stack .auth-notification-icon, #notification-container .notification-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.875rem; line-height: 1; } #toast-stack .auth-notification-content > i:not(.auth-notification-close i) { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.875rem; line-height: 1; } #toast-stack .auth-notification-content p, #notification-container .notification-message { flex: 1; min-width: 0; margin: 0; font-family: var(--toast-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--toast-text); } #toast-stack .auth-notification-close, #notification-container .notification-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: 50%; background: rgba(60, 60, 67, 0.08); color: var(--toast-label); font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } #toast-stack .auth-notification-close:hover, #notification-container .notification-close:hover { background: rgba(60, 60, 67, 0.12); color: var(--toast-text); } #toast-stack .auth-notification-success, #notification-container .notification-success { background: var(--toast-bg); } #toast-stack .auth-notification-success .auth-notification-content > i, #toast-stack .auth-notification-success .auth-notification-icon { background: rgba(52, 199, 89, 0.14); color: #34c759; } #notification-container .notification-success .notification-icon { background: rgba(52, 199, 89, 0.14); color: #34c759; font-style: normal; } #toast-stack .auth-notification-error, #notification-container .notification-error { background: var(--toast-bg); } #toast-stack .auth-notification-error .auth-notification-content > i, #toast-stack .auth-notification-error .auth-notification-icon { background: rgba(255, 59, 48, 0.12); color: #ff3b30; } #notification-container .notification-error .notification-icon { background: rgba(255, 59, 48, 0.12); color: #ff3b30; font-style: normal; } #toast-stack .auth-notification-info, #notification-container .notification-info { background: var(--toast-bg); } #toast-stack .auth-notification-info .auth-notification-content > i, #toast-stack .auth-notification-info .auth-notification-icon { background: rgba(13, 174, 156, 0.12); color: var(--primary); } #notification-container .notification-info .notification-icon { background: rgba(13, 174, 156, 0.12); color: var(--primary); font-style: normal; } #toast-stack .auth-notification-warning, #notification-container .notification-warning { background: var(--toast-bg); } #toast-stack .auth-notification-warning .auth-notification-content > i, #toast-stack .auth-notification-warning .auth-notification-icon { background: rgba(255, 149, 0, 0.14); color: #ff9500; } #notification-container .notification-warning .notification-icon { background: rgba(255, 149, 0, 0.14); color: #ff9500; font-style: normal; } #notification-container .notification-warning .notification-message, #toast-stack .auth-notification-warning .auth-notification-content p { color: var(--toast-text); } #notification-container .notification-icon i { font-size: 0.875rem; line-height: 1; } #notification-container .notification-link { color: var(--primary); font-weight: 600; } #toast-stack .auth-notification .notification-arrow { display: none; } @media (max-width: 768px) { #toast-stack, #notification-container { top: calc(56px + 0.625rem); right: 0.875rem; left: 0.875rem; width: auto; max-width: none; align-items: stretch; } #toast-stack .auth-notification, #notification-container .notification { transform: translate3d(0, -120%, 0) scale(0.98); } #toast-stack .auth-notification.show, #notification-container .notification.notification-slide-in { transform: translate3d(0, 0, 0) scale(1); } #toast-stack .auth-notification:not(.show), #notification-container .notification.notification-slide-out { transform: translate3d(0, -120%, 0) scale(0.98); } } @media (max-width: 480px) { #toast-stack, #notification-container { top: calc(56px + 0.5rem); right: 0.75rem; left: 0.75rem; } #toast-stack .auth-notification-content, #notification-container .notification-content { padding: 0.75rem 0.8125rem 0.75rem 0.875rem; gap: 0.625rem; } #toast-stack .auth-notification-content p, #notification-container .notification-message { font-size: 0.8125rem; } #toast-stack .auth-notification-close, #notification-container .notification-close { width: 28px; height: 28px; min-width: 28px; max-width: 28px; max-height: 28px; aspect-ratio: 1; padding: 0; flex-shrink: 0; } } @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100%; } } @media (max-width: 768px) { .action-btn { padding: 12px 16px; min-height: 44px; min-width: 44px; } .book-btn { padding: 12px 20px; min-height: 44px; font-size: 1rem; } .search-tab { min-height: 48px; padding: 12px 16px; font-size: 1rem; } .airport-option, .city-option { min-height: 52px; padding: 14px 16px; } .nested-airport { min-height: 48px; padding: 12px 16px 12px 32px; } .show-flights-btn { min-height: 48px; padding: 14px 24px; font-size: 1.0625rem; } .reset-btn { min-height: 44px; min-width: 44px; padding: 10px; } .nav-toggle { min-height: 44px; min-width: 44px; padding: 8px; } .auth-notification-close, .notification-close, .popup-close-corner, .auth-modal-close, .questionnaire-modal-close, .policy-modal-close, .cancel-booking-modal-close, .modal-close, .modal-close-btn, .prebook-modal__close, .currency-dropdown-close, .chat-header-btn { box-sizing: border-box; padding: 0; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; min-height: unset; } #toast-stack .auth-notification-close, #notification-container .notification-close { width: 28px; height: 28px; min-width: 28px; max-width: 28px; max-height: 28px; } .popup-close-corner, .auth-modal-close, .questionnaire-modal-close, .policy-modal-close, .cancel-booking-modal-close, .modal-close, .modal-close-btn, .prebook-modal__close { width: 44px; height: 44px; min-width: 44px; max-width: 44px; max-height: 44px; } .currency-dropdown-close, .chat-header-btn { width: 32px; height: 32px; min-width: 32px; max-width: 32px; max-height: 32px; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select { min-height: 44px; padding: 12px 16px; font-size: 16px; } } @media (max-width: 768px) { .nav-container { padding: 0.5rem 1rem; height: auto; min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .nav-tagline { display: none !important; } .logo-full { display: none; } .logo-compact { display: block; } .nav-logo { flex: 0 0 auto; } .nav-menu { position: static !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem; padding: 0; margin-left: auto; flex: 0 0 auto; background: transparent !important; transform: none !important; box-shadow: none; overflow-y: visible; } .nav-item:not(.currency-selector-wrapper, .user-menu, .login-btn-wrapper) { display: none !important; } .nav-item.currency-selector-wrapper, .nav-item.user-menu, .nav-item.login-btn-wrapper { display: flex !important; padding: 0; margin: 0; min-height: auto; border: none; } .nav-toggle { display: none !important; } .currency-selector-btn { padding: 0.4rem 0.6rem; font-size: 0.875rem; min-height: 36px; } .user-avatar { width: 32px !important; height: 32px !important; } .user-name { display: none; } .login-btn { padding: 0.5rem 0.75rem; font-size: 0.875rem; min-height: 36px; } } @media (max-width: 768px) { .contact-container { padding: 0.5rem 1rem; gap: 0.5rem; flex-wrap: wrap; } .contact-label { width: 100%; text-align: center; font-size: 0.8125rem; padding-bottom: 0.25rem; } .contact-phone { font-size: 1rem; margin-right: 0; } } @media (max-width: 480px) { } @media (max-width: 768px) { .search-container { margin: 1rem; } .form-row-single { flex-direction: column; gap: 1rem; } .form-group { width: 100%; } .search-actions { flex-direction: column; width: 100%; gap: 0.75rem; } .show-flights-btn { width: 100%; order: 1; } } @media (max-width: 768px) { .flight-popup-overlay.active { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; } .flight-popup { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; margin: 0 !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important; } .cancel-booking-modal-content { position: fixed; inset: auto 0 0; max-width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; animation: slide-up-mobile 0.3s ease; padding-bottom: max(1.5rem, calc(1.5rem + var(--safe-area-inset-bottom))); } @keyframes slide-up-mobile { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-actions { flex-direction: column; gap: 0.75rem; } .btn-keep, .btn-cancel-confirm { width: 100%; min-height: 48px; } } @media (max-width: 768px) { .city-info, .airport-location { font-size: 14px; } .airport-code { font-size: 15px; } .city-name, .airport-name { font-size: 15px; } .stat-text { font-size: 0.9375rem; } .date, .time, .flight-time, .distance { font-size: 0.9375rem; } } @media (max-width: 768px) { .search-tabs { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .search-tabs::-webkit-scrollbar { display: none; } .search-tab { flex-shrink: 0; white-space: nowrap; } .tab-text-desktop { display: none; } .tab-icon { display: inline-block; } .tab-text-mobile { display: inline-block; font-size: 0.875rem; } } @media (max-width: 480px) { .tab-text-mobile { display: none; } .search-tab { padding: 12px; min-width: 48px; justify-content: center; } .tab-icon { font-size: 1.125rem; } } @media (max-width: 768px) { .top-nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } * { animation-duration: 0.2s !important; transition-duration: 0.2s !important; } .flight-card-compact { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .flight-card-compact:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } } .pull-to-refresh-indicator { position: fixed; top: max(80px, calc(80px + var(--safe-area-inset-top))); left: 50%; transform: translateX(-50%) scale(0); background: white; padding: 12px 24px; border-radius: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--gray-700); z-index: 1001; transition: transform 0.3s ease; } .pull-to-refresh-indicator.active { transform: translateX(-50%) scale(1); } .pull-to-refresh-indicator i { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 768px) { .flight-card-compact { padding: 12px 10px; margin-bottom: 10px; } .flight-card-content { gap: 0.5rem; padding: 0 0.5rem; } .cell-actions { width: 100%; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); } .action-buttons { width: 100%; justify-content: space-between; } .book-btn { flex: 1; } } @media (max-height: 500px) and (orientation: landscape) { html, body { overflow-x: hidden !important; max-width: 100%; } .logo-full { display: none !important; } .logo-compact { display: block !important; } .nav-container { min-height: 48px; padding: 0.25rem 1rem; } .search-container { margin: 0.5rem; } .search-header { padding: 0.5rem; } .cancel-booking-modal-content, .flight-popup, .auth-modal-content, .loading-overlay { max-height: 95vh; } .loading-spinner { padding: 20px; max-width: 90%; } } body { font-family: var(--font-body); background: var(--gray-50); color: var(--gray-800); min-height: 100vh; line-height: 1.6; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .top-nav { background: rgba(255, 255, 255, 0.85); backdrop-filter: var(--backdrop-blur-md); -webkit-backdrop-filter: var(--backdrop-blur-md); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--gray-200); will-change: transform; padding-top: var(--safe-area-inset-top); } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 2rem; height: 72px; } .nav-logo { display: flex; align-items: center; gap: 1.5rem; } .logo-link { text-decoration: none; display: flex; align-items: center; gap: 0.75rem; } .webview-mode .logo-link { pointer-events: none; cursor: default; } .logo-full { display: block; } .logo-compact { display: none; } .nav-tagline { display: flex; align-items: center; padding-left: 2rem; margin-left: 2rem; border-left: 1px solid var(--gray-200); } .nav-tagline-stats { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--gray-700); font-family: var(--font-body); } .nav-tagline .stat-item { display: flex; align-items: center; gap: 0.5rem; } .nav-tagline .stat-icon { font-size: 0.875rem; color: var(--primary); } .nav-tagline .stat-icon.text-success { color: var(--primary-green); } .nav-tagline .stat-text { color: var(--gray-700); font-weight: 400; } .nav-tagline .stat-text strong { font-weight: 600; color: var(--gray-900); } .nav-tagline .stat-text strong.loading { opacity: 0.5; animation: gentle-pulse 1.2s ease-in-out infinite; min-width: 60px; display: inline-block; text-align: center; } @keyframes gentle-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } .stat-item { display: flex; flex-direction: column; align-items: center; } .nav-tagline-stats .stat-item { flex-direction: row; align-items: center; gap: 0.5rem; } .stat-value { font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; } .stat-label { font-size: 0.75rem; color: var(--gray-500); margin-top: 2px; } .user-info { display: flex; flex-direction: column; text-align: right; } .user-name { font-size: 0.875rem; font-weight: 600; color: var(--gray-900); } .user-status { font-size: 0.75rem; color: var(--primary); } .user-avatar { font-size: 2rem; color: var(--gray-400); } .contact-bar { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 0.5rem 0; overflow-x: hidden; } .contact-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: center; align-items: center; gap: 0.75rem; } .contact-label { color: var(--gray-600); font-weight: 500; font-size: 0.875rem; padding-right: 0.5rem; } .contact-phone { color: var(--gray-900); font-weight: 600; font-size: 0.9rem; margin-right: 0.25rem; } .contact-btn { padding: 0.3rem 0.5rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; color: var(--gray-700); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font-family: var(--font-body); line-height: 1.2; text-decoration: none; vertical-align: middle; position: relative; } .contact-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; } .contact-btn i { font-size: 0.875rem; display: inline-flex; align-items: center; } .phone-btn { background: var(--white); color: var(--primary); border: 1px solid var(--primary); } .phone-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } .chat-btn { background: var(--white); color: var(--primary); border: 1px solid var(--primary); } .chat-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } .whatsapp-btn { background: var(--primary-green-whatsapp); border-color: var(--primary-green-whatsapp); color: var(--white); } .whatsapp-btn:hover { background: var(--primary-green-whatsapp-dark); border-color: var(--primary-green-whatsapp-dark); color: var(--white); } .whatsapp-btn i { color: var(--white); } .contact-btn .notification-badge, .chat-btn .notification-badge { position: absolute; top: -6px; right: -6px; background: var(--status-cancelled); color: white; border-radius: 50%; min-width: 18px; height: 18px; font-size: 0.65rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; border: 2px solid white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 1; } @media (max-width: 768px) { .contact-btn .notification-badge, .chat-btn .notification-badge { right: -4px; top: -4px; min-width: 16px; height: 16px; font-size: 0.6rem; border-width: 1.5px; } } @media (max-width: 480px) { .contact-btn .notification-badge, .chat-btn .notification-badge { right: -3px; top: -3px; min-width: 14px; height: 14px; font-size: 0.55rem; border-width: 1px; } } .nav-menu { display: flex; list-style: none; gap: 0.5rem; align-items: center; flex: 1; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; color: var(--gray-700); text-decoration: none; font-weight: 500; font-size: 0.95rem; border-radius: 8px; transition: var(--transition); position: relative; overflow: hidden; } .nav-link:hover { background: var(--gray-50); color: var(--primary); } .nav-link.active { color: var(--primary); font-weight: 600; } .nav-link.active::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 100%; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0; } .nav-toggle { display: none !important; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; border-radius: 8px; transition: all 0.3s ease; position: relative; gap: 5px; } .nav-toggle:hover { background: rgba(13, 174, 156, 0.08); transform: scale(1.05); } .nav-toggle:active { transform: scale(0.98); background: rgba(13, 174, 156, 0.12); } .nav-toggle .bar { width: 24px; height: 4px; background: var(--gray-700); border-radius: 4px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform-origin: center; position: relative; } .nav-toggle:hover .bar { background: var(--primary); } .nav-toggle.active .bar:nth-child(1) { transform: rotate(45deg) translate(0, 9px); } .nav-toggle.active .bar:nth-child(2) { opacity: 0; transform: scale(0); } .nav-toggle.active .bar:nth-child(3) { transform: rotate(-45deg) translate(0, -9px); } .nav-toggle.active:hover { background: rgba(239, 68, 68, 0.08); } .nav-toggle.active:hover .bar { background: var(--status-cancelled); } .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); } .search-header { padding: 1.5rem; background: transparent; } .webview-mode .search-header { display: none; } .search-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--gray-200); margin-bottom: -1px; } .search-tab { padding: 0.75rem 1.5rem; background: transparent; border: none; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: var(--transition); position: relative; white-space: nowrap; margin-bottom: -2px; } .search-tab:hover { background: var(--gray-50); color: var(--gray-800); border-bottom-color: var(--gray-300); } .search-tab.active { background: var(--white); border-bottom: 3px solid var(--primary); color: var(--primary); font-weight: 600; } .search-tab.active:hover { background: var(--white); color: var(--primary); border-bottom-color: var(--primary); } .tab-text-mobile { display: none; } .tab-text-desktop { display: inline; } .tab-text-mobile-only { display: none; } .search-tab .tab-icon { display: none !important; } .search-container { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin: var(--space-lg) 0; overflow: visible; position: relative; border: 1px solid var(--gray-200); } .search-form { padding: 0.75rem; padding-bottom: 0; position: relative; } .form-row { display: flex; gap: var(--space-lg); margin-bottom: 0.75rem; align-items: flex-start; } .form-group { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); } .form-group label { font-size: 12px; font-weight: 600; color: var(--gray-600); letter-spacing: 0.5px; } .input-wrapper { position: relative; } .input-wrapper input { width: 100%; padding: 0.75rem; border: 2px solid var(--gray-200); border-radius: var(--radius); font-size: 15px; transition: var(--transition); background: var(--white); } .input-wrapper input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .input-wrapper input::placeholder { color: var(--gray-400); } .input-wrapper input.invalid { border-color: var(--status-cancelled-dark); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .input-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; } .airport-search-wrapper { position: relative; } .airport-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid rgba(30, 41, 59, 0.15); border-radius: var(--radius); max-height: 320px; overflow-y: auto; display: none; z-index: 1000; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08); margin-top: 4px; width: 100%; } .airport-dropdown::-webkit-scrollbar { width: 6px; } .airport-dropdown::-webkit-scrollbar-track { background: var(--primary-light); border-radius: 3px; } .airport-dropdown::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; opacity: 0.3; } .airport-dropdown::-webkit-scrollbar-thumb:hover { background: var(--primary); opacity: 0.5; } .airport-search-loading { padding: 2rem 1rem; text-align: center; animation: fade-in 0.3s ease-in-out; } .loading-animation { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.75rem; } .plane-loader { position: relative; width: 30px; height: 30px; } .plane-loader i { font-size: 24px; color: var(--primary); animation: plane-float 2s ease-in-out infinite; } @keyframes plane-float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 25% { transform: translateY(-3px) rotate(0deg); } 50% { transform: translateY(-5px) rotate(5deg); } 75% { transform: translateY(-3px) rotate(0deg); } } .loading-dots { display: flex; gap: 4px; } .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: dot-pulse 1.4s ease-in-out infinite; } .loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-pulse { 0%, 60%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.5); opacity: 0.7; } } .loading-text { color: var(--gray-500); font-size: 13px; font-weight: 500; letter-spacing: 0.5px; animation: text-pulse 2s ease-in-out infinite; } @keyframes text-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes fade-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .location-pulse { position: relative; width: 30px; height: 30px; } .location-pulse i { font-size: 24px; color: var(--primary); animation: location-pulse 2s ease-in-out infinite; } @keyframes location-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } .airport-search-loading.location-detect { background: var(--primary-light); border-bottom: 2px solid var(--primary-light); } input.location-loading { background: linear-gradient( 90deg, transparent 0%, var(--primary-light) 50%, transparent 100% ); background-size: 200% 100%; animation: shimmer 2s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .airport-dropdown .no-results { padding: 1rem; text-align: center; color: var(--gray-500); font-size: 13px; font-weight: 500; } .airport-dropdown.active { display: block; } .airport-option { padding: 0.5rem 0.75rem; cursor: pointer; transition: none; border-bottom: 1px solid rgba(30, 41, 59, 0.05); border-left: 2px solid transparent; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 42px; } .airport-option:last-child { border-bottom: none; border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); } .airport-option:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .airport-option:hover { background: var(--primary-light); border-left-color: var(--primary); } .airport-option.selected { background: var(--primary-light); border-left-color: var(--primary); } .airport-option.highlighted { background: var(--primary-light); outline: 1px solid var(--primary); outline-offset: -1px; opacity: 0.8; } .airport-option.exact-match { background: var(--primary-light); border-left-width: 3px; border-left-color: var(--primary); } .airport-option.exact-match:hover { background: var(--primary-light); transform: translateY(-1px); opacity: 0.9; } .dropdown-header { padding: 0.375rem 0.75rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 10px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.375rem; } .dropdown-header i { color: var(--primary); font-size: 10px; } .city-group { border-bottom: 1px solid rgba(30, 41, 59, 0.08); } .city-group:last-child { border-bottom: none; } .city-option { padding: 0.5rem 0.75rem; cursor: pointer; transition: var(--transition); background: var(--gray-50); border-left: 3px solid transparent; display: flex; justify-content: space-between; align-items: center; } .city-option:hover { background: var(--primary-light); border-left-color: var(--primary); } .city-main { display: flex; flex-direction: column; gap: 2px; flex: 1; } .city-name { font-weight: 600; color: var(--gray-800); font-size: 13px; display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-body); } .city-name i { color: var(--primary); font-size: 11px; } .city-info { font-size: 11px; color: var(--gray-500); } .city-distance { display: flex; align-items: center; } .distance-badge { background: var(--primary); color: var(--white); padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; } .nested-airport { padding-left: 2rem; background: rgba(248, 250, 252, 0.5); border-left: 3px solid transparent; min-height: 36px; } .nested-airport:hover { background: var(--primary-light); border-left-color: var(--primary); } .airport-prefix { color: var(--gray-300); font-size: 14px; margin-right: 0.5rem; } .airport-type { font-size: 10px; color: var(--gray-400); text-transform: capitalize; padding: 0.125rem 0.375rem; background: rgba(148, 163, 184, 0.1); border-radius: 4px; } .airport-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; } .airport-name { font-weight: 500; color: var(--gray-800); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding-left: 0.25rem; } .airport-location { font-size: 11px; color: var(--gray-500); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding-left: 0.25rem; } .airport-codes { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--primary-light); border: 1px solid var(--primary); border-radius: 5px; flex-shrink: 0; transition: none; opacity: 0.8; } .airport-option:hover .airport-codes { background: var(--primary-light); border-color: var(--primary); opacity: 1; } .airport-code { font-weight: 600; color: var(--primary); font-size: 13.5px; letter-spacing: 0.4px; font-family: var(--font-body); } .airport-icao { font-weight: 500; color: var(--primary); font-size: 10px; letter-spacing: 0.2px; font-family: var(--font-body); padding-left: 3px; border-left: 1px solid var(--primary); margin-left: 2px; opacity: 0.6; } .form-row-airports { display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); align-items: flex-start; } .form-row-dates { display: flex; justify-content: flex-start; margin-bottom: var(--space-xl); } .form-row-single { display: flex; gap: var(--space-md); margin-bottom: var(--space-xl); align-items: flex-start; } .form-row-single .from-group, .form-row-single .to-group { flex: 1; min-width: 200px; } .form-row-single .date-group { flex: 0 0 280px; min-width: 280px; } .date-group { flex: 0 0 auto; min-width: 300px; max-width: 60%; } .date-inputs-wrapper { display: flex; align-items: center; gap: 0.75rem; } .date-input-group { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; } .date-label { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; } .date-input { padding: 0.625rem 2.25rem 0.625rem 0.75rem !important; font-size: 14px !important; } .date-separator { color: var(--gray-400); font-size: 14px; margin-top: 1.5rem; } .flight-details { background: var(--white); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0; border: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); } .flight-route-details { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .route-detail-row { display: flex; align-items: center; gap: var(--space-md); } .route-label { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; min-width: 45px; } .route-value { display: flex; align-items: center; gap: var(--space-sm); font-size: 15px; font-weight: 500; color: var(--gray-800); } .route-value i { color: var(--primary); font-size: 16px; } .multi-airport-display { display: flex; flex-direction: column; gap: 8px; flex: 1; } .city-header-display { display: flex; align-items: center; gap: 10px; } .city-header-display strong { font-size: 15px; color: var(--gray-800); } .airport-count-badge { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; } .detail-item { display: flex; align-items: center; gap: var(--space-sm); font-size: 13px; color: var(--gray-600); } .detail-item i { color: var(--gray-400); width: 16px; } .search-actions { display: flex; gap: var(--space-md); align-items: center; } .action-btn { padding: 0.875rem 1.5rem; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: var(--space-sm); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .action-btn:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .reset-btn i { color: var(--gray-500); } @media (max-width: 768px) { .reset-btn { display: none; } } .share-btn i { color: var(--primary); } .show-flights-btn { margin-left: auto; } .results-section { margin-top: 1rem; background: transparent; padding: 0; box-shadow: none; animation: fade-in 0.5s ease; } @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .results-header { background: transparent; padding: 1rem 0; margin-bottom: 0.5rem; } .results-header h2 { font-size: 18px; color: var(--gray-800); margin-bottom: 0.5rem; font-weight: 700; } .results-header h3 { font-size: 16px; color: var(--gray-600); font-weight: 500; } .nearby-flights-header { background: linear-gradient(135deg, #0dae9c 0%, #0891b2 100%); color: white; padding: 20px 24px; border-radius: 12px; margin-bottom: 24px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .nearby-flights-header h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; } .nearby-flights-header h2 i { font-size: 22px; } .nearby-flights-header p { margin: 0; font-size: 14px; opacity: 0.9; color: rgba(255, 255, 255, 0.95); } @media (max-width: 768px) { .nearby-flights-header { padding: 16px 20px; } .nearby-flights-header h2 { font-size: 20px; } .nearby-flights-header p { font-size: 13px; } } .results-count { padding: 0.5rem 0; } .results-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .results-title { font-size: 1.25rem; color: var(--gray-800); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; margin: 0; } .share-results-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; margin-left: 0.75rem; background: transparent; border: 1px solid var(--gray-300); border-radius: var(--radius); color: var(--gray-700); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; vertical-align: middle; } .no-results { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; min-height: 300px; background: linear-gradient(135deg, rgba(13, 174, 156, 0.03) 0%, rgba(59, 130, 246, 0.03) 100%); border-radius: 12px; margin: 2rem 0; } .no-results i { font-size: 4rem; color: var(--gray-300); margin-bottom: 1.5rem; opacity: 0.6; } .no-results h3 { font-size: 1.5rem; font-weight: 600; color: var(--gray-700); margin: 0 0 0.75rem; } .no-results p { font-size: 1rem; color: var(--gray-500); margin: 0; max-width: 400px; } .share-results-btn:hover { background: var(--gray-50); border-color: var(--primary); color: var(--primary); } .share-results-btn i { font-size: 0.7rem; } .count-badge { color: var(--primary); font-weight: 700; font-size: 1.125rem; display: inline-block; text-align: center; } .results-subtitle { color: var(--gray-500); font-size: 0.875rem; margin: 0; font-weight: 500; } .stat-item strong { color: var(--gray-800); font-weight: 600; } .flights-list { background: transparent; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .booking-card .booking-status { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .booking-card .booking-status.pending { background: rgba(245, 158, 11, 0.1); color: var(--status-pending); border: 1px solid rgba(245, 158, 11, 0.3); } .booking-card .booking-status.confirmed { background: rgba(34, 197, 94, 0.1); color: var(--status-confirmed); border: 1px solid rgba(34, 197, 94, 0.3); } .booking-card .booking-status.cancelled { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled); border: 1px solid rgba(239, 68, 68, 0.3); } .booking-card .booking-status.completed { background: rgba(59, 130, 246, 0.1); color: var(--status-completed); border: 1px solid rgba(59, 130, 246, 0.3); } .booking-card .booking-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); } .booking-card .booking-actions button { flex: 1; padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: 8px; background: white; color: var(--gray-700); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .booking-card .booking-actions button:hover { background: var(--gray-50); transform: translateY(-1px); } .booking-card .booking-actions .cancel-btn { color: var(--status-cancelled); border-color: rgba(239, 68, 68, 0.3); } .booking-card .booking-actions .cancel-btn:hover { background: rgba(239, 68, 68, 0.05); border-color: var(--status-cancelled); } .booking-card .booking-actions .contact-btn { color: var(--primary); border-color: rgba(13, 174, 156, 0.3); } .booking-card .booking-actions .contact-btn:hover { background: var(--primary-light); border-color: var(--primary); } .flight-departure { flex: 1.5; min-width: 0; } .flight-destination { flex: 1.5; min-width: 0; } .flight-aircraft-container { display: contents; } .flight-datetime { flex: 1.2; min-width: 0; } .flight-duration { flex: 0.8; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .flight-aircraft-image { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; } .flight-ratings { flex: 0 0 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .flight-aircraft { flex: 1.5; min-width: 0; display: flex; align-items: center; } .flight-aircraft .aircraft-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); } .flight-aircraft .aircraft-seats { font-size: 0.85rem; color: var(--gray-500); margin-top: 2px; } .flight-aircraft .aircraft-seats i { font-size: 11px; color: var(--gray-400); margin-right: 4px; } .flight-price { display: none; } .flight-actions { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .actions-price-display { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .price-line { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .current-price { font-size: 16px; font-weight: 700; color: #000; font-family: var(--font-body); } .original-price { font-size: 16px; font-weight: 400; color: var(--gray-500); text-decoration: line-through; font-family: var(--font-body); } .savings-line { font-size: 12px; font-weight: 500; font-family: var(--font-body); text-align: right; } .savings-line.has-savings { color: var(--primary-green-deep); } .savings-line.has-overprice { color: var(--gray-600); } .overprice-badge { display: inline-block; color: var(--status-cancelled-border); padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; } .action-buttons { display: flex; align-items: center; gap: 0; border-radius: var(--radius); border: 1px solid var(--primary); box-shadow: 0 2px 4px rgba(13, 174, 156, 0.1); overflow: hidden; } .flight-aircraft-image .aircraft-image-container { width: 100%; height: 100%; min-height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-muted); border-radius: 6px; overflow: hidden; position: relative; } .aircraft-image { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; } .flight-departure, .flight-destination { display: flex; flex-direction: column; gap: 2px; min-width: 80px; } .flight-departure .airport-code, .flight-destination .airport-code { font-size: 11px; font-weight: 700; color: var(--gray-700); font-family: var(--font-body); letter-spacing: 0.5px; } .flight-departure .airport-city, .flight-destination .airport-city { font-size: 16px; font-weight: 700; color: var(--gray-800); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI", "Roboto", "Inter", "Helvetica Neue", "Arial", sans-serif; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; max-width: 100%; } .flight-departure .airport-district, .flight-destination .airport-district, .flight-departure .airport-name, .flight-destination .airport-name { font-size: 12px; font-weight: normal; color: var(--gray-600); margin-top: 2px; padding-left: 0; font-family: var(--font-body); line-height: 1.2; white-space: normal; overflow: visible; text-overflow: unset; } .flight-date { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); } .flight-date-month { font-size: 13px; font-weight: 600; color: var(--gray-700); line-height: 1.2; font-family: var(--font-body); } .flight-date-year { font-size: 12px; font-weight: 400; color: var(--gray-500); line-height: 1.2; font-family: var(--font-body); } .flight-time { font-size: 12px; color: var(--gray-500); } .flight-duration i { font-size: 11px; color: var(--gray-400); } .duration-time, .duration-distance { display: flex; align-items: center; gap: 4px; font-size: 12px; } .duration-separator { display: flex; align-items: center; color: var(--gray-400); font-size: 10px; } .duration-time { color: var(--gray-750); font-weight: 500; } .duration-distance { color: var(--gray-500); font-size: 11px; } .duration-distance i { font-size: 10px; } .mobile-label { display: none; } .flight-duration.mobile-position { display: none; } .flight-duration.desktop-position { display: flex; } .aircraft-model { font-size: 12px; font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); } .aircraft-category { font-size: 11px; color: var(--gray-500); margin-top: 2px; font-family: var(--font-body); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; } .price-amount { font-size: 18px; font-weight: 700; color: var(--primary-green-deep); font-family: var(--font-body); } .price-amount.price-estimated { color: var(--primary); } .price-amount.price-range { font-size: 16px; color: var(--gray-400); } .price-amount.price-contact { font-size: 15px; color: var(--gray-500); } .price-note { font-size: 11px; color: var(--gray-400); font-style: italic; margin-top: 2px; } .price-ml-container { margin-top: 8px; padding: 6px 10px; background-color: var(--status-warning); color: #000; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .price-ml-label { font-size: 11px; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 0.5px; } .price-ml-value { font-size: 15px; font-weight: 700; color: #000; font-family: var(--font-body); } .price-ml-confidence { font-size: 11px; color: rgba(0, 0, 0, 0.7); font-weight: 500; } @media (max-width: 768px) { .score-badge-container { gap: 2px; } .score-badge { min-width: 28px; height: 28px; font-size: 12px; padding: 2px 6px; } .score-comment { font-size: 9px; max-width: 120px; } .price-ml-container { margin-top: 6px; padding: 4px 8px; font-size: 12px; flex-direction: column; align-items: flex-end; gap: 2px; } .price-ml-value { font-size: 13px; } .price-ml-confidence { font-size: 10px; } } .score-badge-container { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } .score-badges-row { display: inline-flex; align-items: center; gap: 6px; } .score-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 8px; font-weight: 700; font-size: 14px; padding: 4px 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; } .score-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } .score-value { color: white; font-family: "Outfit", sans-serif; } .score-badge-black { background: linear-gradient( 135deg, var(--gray-650) 0%, var(--gray-750) 100% ); border: 1px solid var(--gray-850); } .score-badge-red { background: linear-gradient( 135deg, var(--status-cancelled) 0%, var(--status-cancelled-dark) 100% ); border: 1px solid var(--status-cancelled-border); } .score-badge-yellow { background: linear-gradient( 135deg, var(--status-warning) 0%, var(--status-pending) 100% ); border: 1px solid var(--status-warning-dark); } .score-badge-green { background: linear-gradient( 135deg, var(--primary-green-light) 0%, var(--primary-green) 100% ); border: 1px solid var(--primary-green-deep); } .score-badge-blue { background: linear-gradient( 135deg, #60a5fa 0%, var(--info) 100% ); border: 1px solid #2563eb; } .score-badge-teal { background: linear-gradient( 135deg, #2dd4bf 0%, #0d9488 100% ); border: 1px solid #0f766e; } .score-comment { font-size: 10px; color: var(--gray-500); text-align: center; max-width: 150px; line-height: 1.3; margin-top: 2px; } .price-score { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; background: transparent; border: 1px solid; } .price-label { display: inline-block; font-size: 10px; font-weight: 500; white-space: nowrap; padding: 2px 4px; border-radius: 4px; } .price-score.score-excellent, .price-label.score-excellent { border-color: var(--primary-green-light); color: var(--primary-green-light); } .price-score.score-great, .price-label.score-great { border-color: var(--primary-green); color: var(--primary-green); } .price-score.score-good, .price-label.score-good { border-color: var(--status-warning-light); color: var(--status-warning-light); } .price-score.score-some, .price-label.score-some { border-color: var(--status-pending); color: var(--status-pending); } .price-score.score-close, .price-label.score-close { border-color: var(--status-cancelled); color: var(--status-cancelled); } .price-score.score-like, .price-label.score-like { border-color: var(--gray-450); color: var(--gray-450); } .price-score.score-pricier, .price-label.score-pricier { border-color: var(--gray-500); color: var(--gray-500); } .price-score.score-no-price, .price-label.score-no-price { border-color: var(--gray-450); color: var(--gray-450); background-color: rgba(156, 163, 175, 0.1); font-style: italic; } .price-score-compact { display: inline-block; border: 1px solid; vertical-align: middle; } .price-score-compact.score-excellent { border-color: var(--primary-green-light); color: var(--primary-green-light); } .price-score-compact.score-great { border-color: var(--primary-green); color: var(--primary-green); } .price-score-compact.score-good { border-color: var(--status-warning-light); color: var(--status-warning-light); } .price-score-compact.score-some { border-color: var(--status-pending); color: var(--status-pending); } .price-score-compact.score-close { border-color: var(--status-cancelled); color: var(--status-cancelled); } .price-score-compact.score-like { border-color: var(--gray-450); color: var(--gray-450); } .price-score-compact.score-pricier { border-color: var(--gray-500); color: var(--gray-500); } .flight-ratings .relevance-score { display: inline-block; font-size: 11px; font-weight: 600; color: var(--primary); white-space: nowrap; } .view-btn { background: rgba(13, 174, 156, 0.1); border: 1px solid rgba(13, 174, 156, 0.3); color: var(--primary); padding: 0.625rem 1.25rem; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); display: inline-flex; align-items: center; gap: 6px; } .view-btn:hover { background: linear-gradient( 135deg, rgba(15, 23, 42, 0.95) 0%, var(--background-muted) 100% ); border-color: rgba(13, 174, 156, 0.3); color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); } .book-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .book-btn:hover { z-index: 2; } .popup-footer .book-btn { flex: 0 0 auto; } .popup-footer .favorite-btn { background: var(--primary); color: var(--white); border: 2px solid var(--primary); padding: 10px 20px; border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--font-semibold); min-height: 44px; box-shadow: var(--shadow); } .popup-footer .favorite-btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-md); } .popup-footer .favorite-btn.favorited, .popup-footer .favorite-btn.is-favorite { background: var(--primary); border: 2px solid var(--primary); color: var(--status-cancelled); } .popup-footer .favorite-btn.favorited:hover, .popup-footer .favorite-btn.is-favorite:hover { background: var(--primary-hover); border: 2px solid var(--primary-hover); color: var(--status-cancelled-dark); } .popup-footer .popup-footer-close { padding: 10px 20px; border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--font-semibold); min-height: 44px; } .popup-footer .popup-footer-close:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .popup-footer .chat-btn { padding: 10px 20px; border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--font-semibold); min-height: 44px; } .popup-footer .chat-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .popup-footer .cancel-btn { padding: 10px 20px; border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--font-semibold); min-height: 44px; } .popup-footer .popup-footer-close, .popup-footer .chat-btn, .popup-footer .cancel-btn { min-width: 140px; text-align: center; } .popup-footer .copy-link-btn { padding: 10px 20px; border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--font-semibold); min-height: 44px; } .favorite-btn { background: var(--primary); border: none; color: white; padding: 0.4rem 0.5rem; border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; position: relative; } .favorite-btn:hover { background: var(--primary-hover); color: white; transform: none; box-shadow: none; } .favorite-btn.favorited, .favorite-btn.is-favorite { background: var(--primary); border: 2px solid var(--primary); color: var(--status-cancelled); box-shadow: none; } .favorite-btn.favorited:hover, .favorite-btn.is-favorite:hover { background: var(--primary-hover); color: var(--status-cancelled-dark); } .action-buttons:hover { box-shadow: 0 4px 12px rgba(13, 174, 156, 0.25); border-color: #5b8fc9; } .load-more { display: flex; justify-content: center; margin-top: 1.5rem; } .load-more-button { padding: 0.875rem 1.5rem; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .load-more-button:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .load-more-button:disabled { opacity: 0.5; cursor: not-allowed; } .load-more-button.end-of-results { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-600); opacity: 1; cursor: default; pointer-events: none; } .load-more-button.end-of-results:hover { transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--gray-200); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .date-tooltip { position: absolute; background: linear-gradient( 135deg, var(--gray-600) 0%, var(--gray-500) 100% ); color: white; padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); z-index: 10000; pointer-events: none; animation: tooltip-bounce 0.5s ease; max-width: 280px; line-height: 1.4; } .date-tooltip::before { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #64748b; } .date-tooltip.show { opacity: 1; visibility: visible; } @keyframes tooltip-bounce { 0% { opacity: 0; transform: translateY(-10px); } 50% { transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } .date-range-wrapper { position: relative; } .date-picker-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; backdrop-filter: blur(2px); } .date-range-input { width: 100%; padding: 0.75rem 2.5rem 0.75rem 0.875rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; background: var(--white); cursor: pointer; transition: all 0.2s ease; } .date-range-input:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.1); } .date-range-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13, 174, 156, 0.15); } .date-range-picker-dropdown { position: fixed; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); z-index: 10000; width: 350px; max-width: calc(100% - 20px); display: flex; flex-direction: column; } .date-range-quick-select { padding: 1rem; border-bottom: 1px solid var(--gray-200); display: flex; gap: 0.5rem; flex-wrap: wrap; } .quick-select-btn { padding: 0.4rem 0.75rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px; color: var(--gray-700); cursor: pointer; transition: all 0.2s ease; } .quick-select-btn:hover { background: var(--primary); border-color: var(--primary); color: white; } .date-range-calendars { display: block; padding: 1rem; flex: 1; overflow-y: auto; min-height: 0; } .date-range-calendar-month { flex: 1; } .date-range-calendar-month .calendar-month-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 0 0.5rem; } .date-range-calendar-month .calendar-month-label { font-size: 14px; font-weight: 600; color: var(--gray-800); } .date-range-calendar-month .calendar-nav-btn { background: none; border: none; color: var(--gray-600); cursor: pointer; padding: 0.25rem; border-radius: 4px; transition: all 0.2s ease; } .date-range-calendar-month .calendar-nav-btn:hover { background: var(--gray-100); color: var(--primary); } .date-range-calendar-month .calendar-days-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.5rem; } .date-range-calendar-month .calendar-day-label { text-align: center; font-size: 11px; font-weight: 600; color: var(--gray-500); padding: 0.25rem; } .date-range-calendar-month .calendar-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } .date-range-calendar-month .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; position: relative; } .date-range-calendar-month .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: var(--gray-100); } .date-range-calendar-month .calendar-day-empty { cursor: default; } .date-range-calendar-month .calendar-day-disabled { color: var(--gray-300); cursor: not-allowed; } .date-range-calendar-month .calendar-day-today { font-weight: 600; } .date-range-calendar-month .calendar-day-today::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); } .calendar-day-range-start { background: var(--primary) !important; color: white !important; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .calendar-day-range-end { background: var(--primary) !important; color: white !important; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .calendar-day-in-range { background: rgba(13, 174, 156, 0.1) !important; color: var(--gray-800); border-radius: 0; } .calendar-day-preview { background: rgba(13, 174, 156, 0.05); } .calendar-day-range-start.calendar-day-range-end { border-radius: 6px; } .date-range-footer { padding: 1rem; border-top: 1px solid var(--gray-200); display: flex; justify-content: space-between; gap: 0.5rem; flex-shrink: 0; background: var(--white); border-radius: 0 0 12px 12px; } .date-range-clear-btn, .date-range-apply-btn { padding: 0.5rem 1.25rem; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .date-range-clear-btn { background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-700); } .date-range-clear-btn:hover { background: var(--gray-50); border-color: var(--gray-400); } .date-range-apply-btn { background: var(--primary); border: none; color: white; flex: 1; max-width: 200px; } .date-range-apply-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.3); } @media (max-width: 768px) { .date-range-picker-dropdown { width: calc(100% - 32px) !important; max-width: 400px !important; inset: auto !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; max-height: min(calc(100vh - 32px), 600px) !important; overflow: hidden !important; z-index: 10001; } .date-picker-backdrop { display: block; } .date-range-quick-select { padding: 0.75rem; } .quick-select-btn { font-size: 12px; padding: 0.35rem 0.6rem; } .date-range-calendar-month .calendar-day { font-size: 12px; padding: 0.5rem 0.25rem; } .date-range-calendar-month .calendar-month-label { font-size: 13px; } .date-range-calendar-month .calendar-nav-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .date-range-footer { padding: 0.75rem; gap: 0.75rem; } .date-range-clear-btn, .date-range-apply-btn { padding: 0.625rem 1rem; font-size: 13px; } } @media (max-width: 480px) { .date-range-picker-dropdown { width: calc(100% - 20px) !important; max-height: min(calc(100vh - 20px), 550px) !important; } .date-range-quick-select { padding: 0.5rem; gap: 0.25rem; } .quick-select-btn { font-size: 11px; padding: 0.25rem 0.5rem; } .date-range-calendar-month .calendar-day { font-size: 11px; padding: 0.4rem 0.2rem; } .date-range-calendar-month .calendar-day-label { font-size: 10px; } .date-range-footer { flex-direction: column; } .date-range-clear-btn, .date-range-apply-btn { width: 100%; } } .date-picker-calendar { position: fixed; z-index: 10000; } .single-date-calendar { background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 1rem; min-width: 280px; } .single-date-calendar .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .single-date-calendar .calendar-nav-btn { background: none; border: none; color: var(--gray-600); cursor: pointer; padding: 0.25rem; font-size: 14px; transition: var(--transition); } .single-date-calendar .calendar-nav-btn:hover { color: var(--primary-blue); } .single-date-calendar .calendar-month-label { font-size: 14px; font-weight: 600; color: var(--gray-800); } .single-date-calendar .calendar-days-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.5rem; } .single-date-calendar .calendar-day-label { text-align: center; font-size: 11px; font-weight: 600; color: var(--gray-500); padding: 0.25rem; } .single-date-calendar .calendar-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } .single-date-calendar .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gray-700); cursor: pointer; border-radius: 4px; transition: var(--transition); } .single-date-calendar .calendar-day:hover:not(.calendar-day-disabled, .calendar-day-empty) { background: var(--blue-50); color: var(--primary-blue); } .single-date-calendar .calendar-day-empty { cursor: default; } .single-date-calendar .calendar-day-disabled { color: var(--gray-300); cursor: not-allowed; } .single-date-calendar .calendar-day-selected { background: var(--primary-blue); color: var(--white); } .single-date-calendar .calendar-day-today { font-weight: 600; position: relative; } .single-date-calendar .calendar-day-today::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary-blue); } .single-date-calendar .calendar-day-selected.calendar-day-today::after { background: var(--white); } .flight-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10000; backdrop-filter: blur(4px); animation: fade-in 0.3s ease; } .flight-popup-overlay.active { display: flex; align-items: center; justify-content: center; padding: 20px; } .flight-popup { background: white; border-radius: 16px; max-width: 95%; width: 1400px; max-height: 95vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slide-up 0.3s ease; position: relative; } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .popup-close-corner { position: absolute; top: 16px; right: 16px; background: var(--primary); border: none; color: var(--light-teal); width: 32px; height: 32px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 10; } .popup-close-corner:hover { background: var(--primary); color: white; transform: scale(1.05); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.3); } .popup-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .route-map-container { width: 100%; height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex-shrink: 0; position: relative; z-index: 1; } #flight-route-map { width: 100%; height: 100%; position: relative; z-index: 1; } .leaflet-control-container { z-index: 800 !important; } .leaflet-pane { z-index: 400 !important; } .leaflet-top, .leaflet-bottom { z-index: 800 !important; } .flight-info-grid { display: grid; grid-template-columns: 1.3fr minmax(200px, 1fr) minmax(150px, 0.8fr) minmax( 150px, 0.8fr ); gap: 12px; flex: 1; min-height: 0; } .info-section { background: var(--surface-muted); border-radius: 10px; padding: 10px; border: 1px solid var(--gray-250); overflow: visible; min-width: 0; } .aircraft-image-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 110px; padding: 12px; background: linear-gradient( 135deg, rgba(249, 250, 251, 0.3) 0%, rgba(243, 244, 246, 0.3) 100% ); border-radius: 10px; transition: all 0.3s ease; border: 1px solid rgba(229, 231, 235, 0.5); } .aircraft-image-wrapper:hover { background: linear-gradient( 135deg, rgba(249, 250, 251, 0.5) 0%, rgba(243, 244, 246, 0.5) 100% ); border-color: rgba(13, 174, 156, 0.3); box-shadow: 0 2px 8px rgba(13, 174, 156, 0.1); } .aircraft-image-large { cursor: zoom-in; position: relative; width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; } .aircraft-image-popup { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: auto; height: auto; max-width: min(85vw, 700px); max-height: min(75vh, 500px); background: white; border-radius: 12px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); padding: 20px; z-index: 2147483647 !important; pointer-events: none; opacity: 0; transition: all 0.3s ease; isolation: isolate; } .aircraft-image-popup.active { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .aircraft-image-popup img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(min(75vh, 500px) - 40px); object-fit: contain; border-radius: 8px; } .aircraft-image-large:hover + .aircraft-image-popup, .aircraft-image-popup:hover { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .shared-aircraft-popup { position: fixed !important; top: 0; left: 0; transform: scale(0); transform-origin: top left; width: auto; height: auto; max-width: min(400px, 40vw); max-height: min(300px, 40vh); background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px; z-index: 2147483647 !important; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .shared-aircraft-popup::before { content: ""; position: absolute; width: 12px; height: 12px; background: white; transform: rotate(45deg); box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1); } .shared-aircraft-popup.top-side::before { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .shared-aircraft-popup.bottom-side::before { top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1); } .shared-aircraft-popup.left-side::before { left: auto; right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1); } .shared-aircraft-popup.active { transform: scale(1); opacity: 1; pointer-events: auto; } .shared-aircraft-popup img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(min(300px, 40vh) - 30px); object-fit: contain; border-radius: 8px; } .flight-list-aircraft-image { cursor: zoom-in; transition: transform 0.2s ease; } .flight-list-aircraft-image:hover { transform: scale(1.05); } .section-title { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--gray-750); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .section-title i { color: var(--accent-indigo); font-size: 14px; } .popup-section-title { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--gray-750); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .popup-section-title i { color: var(--accent-indigo); font-size: 14px; } .route-details { display: flex; flex-direction: column; gap: 12px; width: 100%; min-height: 120px; } .airport-detail { width: 100%; text-align: center; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--gray-50); border-radius: 8px; border: 1px solid var(--gray-200); } .airport-label { font-size: 11px; text-transform: uppercase; color: var(--primary); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 4px; } .airport-code-large { font-size: 16px; font-weight: 700; color: #000; letter-spacing: 0.5px; line-height: 1; text-transform: uppercase; margin-bottom: 4px; } .airport-detail .airport-name { font-size: 14px; font-weight: 500; color: var(--gray-700); line-height: 1.3; margin-bottom: 2px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; text-align: center; } .airport-detail .airport-location { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; flex-wrap: wrap; text-align: center; } .flight-path { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 0; position: relative; } .flight-info { font-size: 13px; font-weight: 600; color: var(--gray-700); text-align: center; white-space: nowrap; line-height: 1.4; padding: 8px 0; } .flight-info i { font-size: 11px; color: var(--primary); margin-right: 4px; } .aircraft-details { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; font-family: var(--font-body); } .aircraft-section { position: relative; overflow: visible; min-height: auto; } .aircraft-section .aircraft-details { position: relative; z-index: 2; } .aircraft-info { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; max-width: 100%; } .aircraft-model-large { font-size: 16px; font-weight: 700; color: var(--gray-750); margin-bottom: 4px; line-height: 1.3; } .aircraft-specs { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 8px; } .spec-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--gray-600); line-height: 1.4; white-space: nowrap; } .spec-item i { color: var(--primary); width: 14px; font-size: 10px; text-align: center; flex-shrink: 0; } .spec-item span:first-of-type { font-weight: 500; color: var(--gray-500); } .spec-item span:last-of-type { font-weight: 600; color: var(--gray-700); } .detail-items { display: flex; flex-direction: column; gap: 6px; } .detail-label { font-size: 10px; color: var(--gray-500); font-weight: 500; } .detail-value { font-size: 11px; color: var(--gray-750); font-weight: 600; } .pricing-section { background: var(--surface-muted); border-radius: 10px; padding: 14px; border: 1px solid var(--gray-250); overflow: visible; min-width: 0; } .pricing-section .popup-section-title { color: var(--gray-800); font-size: 12px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .pricing-section .popup-section-title i { color: var(--primary); font-size: 13px; } .route-section .popup-section-title { color: var(--gray-800); font-size: 12px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .route-section .popup-section-title i { color: var(--primary); font-size: 13px; } .aircraft-section .popup-section-title { color: var(--gray-800); font-size: 12px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--gray-250); padding-bottom: 8px; position: relative; } .aircraft-section .popup-section-title i { color: var(--primary); font-size: 15px; } .aircraft-modal-info { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; } .aircraft-modal-model { font-size: 16px; font-weight: 600; color: var(--gray-800); line-height: 1.4; } .aircraft-modal-specs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--gray-600); } .aircraft-modal-specs span { display: flex; align-items: center; gap: 6px; } .aircraft-modal-specs i { font-size: 12px; color: var(--primary); opacity: 0.7; } .pricing-modal-details { padding: 8px 0; } .pricing-modal-details .price-row { display: flex; align-items: baseline; gap: 8px; } .pricing-modal-details .price-value { font-size: 24px; font-weight: 700; color: var(--primary); } .contact-section .contact-details { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; } .contact-section .contact-item { display: flex; gap: 8px; font-size: 14px; } .contact-section .contact-label { font-weight: 500; color: var(--gray-600); min-width: 80px; } .contact-section .contact-item span:last-child { color: var(--gray-800); font-weight: 400; } .details-section .popup-section-title { color: var(--gray-800); font-size: 12px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .details-section .popup-section-title i { color: var(--primary); font-size: 13px; } .operator-section .popup-section-title { color: var(--gray-800); font-size: 12px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .operator-section .popup-section-title i { color: var(--primary); font-size: 13px; } .operator-details { background: white; border-radius: 10px; padding: 16px; border: 1px solid rgba(226, 232, 240, 0.8); } .operator-header { margin-bottom: 12px; } .operator-name { font-size: 16px; font-weight: 600; color: var(--gray-800); margin-bottom: 4px; } .operator-website { font-size: 13px; color: var(--accent-indigo); text-decoration: none; } .operator-website:hover { text-decoration: underline; } .operator-contact { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .operator-contact .contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); } .operator-contact .contact-item i { color: var(--gray-400); width: 16px; text-align: center; } .operator-contact .contact-item a { color: var(--accent-indigo); text-decoration: none; } .operator-contact .contact-item a:hover { text-decoration: underline; } .operator-hours { padding: 10px 12px; background: var(--surface-muted); border-radius: 8px; margin-bottom: 12px; } .working-hours-badge { margin-bottom: 4px; } .working-hours-badge .hours-open { display: inline-block; padding: 3px 10px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 600; border-radius: 9999px; } .working-hours-badge .hours-closed { display: inline-block; padding: 3px 10px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; border-radius: 9999px; } .working-hours-text { font-size: 12px; color: var(--gray-600); } .operator-conditions { padding: 10px 12px; background: var(--surface-muted); border-radius: 8px; } .conditions-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .conditions-text { font-size: 13px; color: var(--gray-700); line-height: 1.5; } .pricing-details { background: white; border-radius: 10px; padding: 20px; border: 1px solid rgba(226, 232, 240, 0.8); } .price-main { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pricing-section .actions-price-display { width: 100%; text-align: center; } .pricing-section .actions-price-display .price-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; } .pricing-section .actions-price-display .current-price { font-size: 32px; font-weight: 800; color: var(--primary); letter-spacing: -1px; text-shadow: 0 2px 4px rgba(13, 174, 156, 0.1); } .pricing-section .actions-price-display .original-price { font-size: 20px; font-weight: 500; color: var(--gray-400); text-decoration: line-through; opacity: 0.7; } .pricing-section .actions-price-display .savings-line { font-size: 14px; font-weight: 600; display: inline-block; letter-spacing: 0.3px; } .pricing-section .actions-price-display .savings-line.has-savings { color: var(--primary-green); background: linear-gradient( 135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100% ); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(34, 197, 94, 0.2); } .pricing-section .actions-price-display .price-contact { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--primary) 0%, #5fd4c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .pricing-section .price-value { font-size: 28px; font-weight: 800; color: var(--primary); letter-spacing: -1px; text-shadow: 0 2px 4px rgba(13, 174, 156, 0.1); font-family: var(--font-body); } .pricing-section .price-label { display: none; } #flight-details-page-container { background: white; border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); margin-top: 20px; } .popup-footer { padding: 10px 20px; border-top: 1px solid var(--gray-250); background: var(--surface-muted); display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-shrink: 0; } .popup-btn { padding: 10px 20px; border: 1px solid rgba(30, 41, 59, 0.15); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base, 14px); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); min-height: 42px; } .btn-favorite { background: rgba(13, 174, 156, 0.1); color: var(--primary); border: 1px solid rgba(13, 174, 156, 0.3); font-family: var(--font-body); } .btn-favorite:hover { background: var(--primary); border-color: transparent; color: var(--gray-800); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.3); } .btn-favorite.favorited { background: linear-gradient( 135deg, rgba(15, 23, 42, 0.95) 0%, var(--background-muted) 100% ); color: var(--primary); border: 1px solid rgba(13, 174, 156, 0.3); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); } .btn-favorite.favorited i::before { content: "\f004"; } .btn-share { background: rgba(30, 41, 59, 0.05); color: var(--gray-600); border: 1px solid rgba(30, 41, 59, 0.15); font-family: var(--font-body); } .btn-share:hover { background: rgba(13, 174, 156, 0.1); border-color: rgba(13, 174, 156, 0.3); color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.15); } .copy-notification { position: fixed; top: 100px; right: 20px; background: var(--primary-green); color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: none; animation: slide-in 0.3s ease; z-index: 10000; font-size: 14px; font-weight: 600; } .copy-notification.show { display: flex; align-items: center; gap: 8px; } @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .currency-selector-wrapper { position: relative; margin-right: 0.5rem; } .nav-menu .currency-selector-wrapper:first-child { margin-left: auto; } .nav-menu > .nav-item:first-child:not(.currency-selector-wrapper) { margin-left: auto; } .currency-selector { position: relative; } .currency-selector-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); color: var(--primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .currency-selector-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(147, 197, 253, 0.5); transform: translateY(-1px); } .currency-selector-btn .currency-symbol { font-weight: 600; font-size: 16px; } .currency-selector-btn .currency-code { font-weight: 500; } .currency-selector-btn i { font-size: 10px; margin-left: 0.25rem; transition: transform 0.3s ease; } .currency-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 320px; max-height: 500px; background: white; border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } .currency-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .currency-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200); } .currency-dropdown-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--gray-800); } .currency-dropdown-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--gray-500); font-size: 20px; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; } .currency-dropdown-close:hover { background: var(--gray-100); color: var(--gray-700); } .currency-search { position: relative; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--gray-200); } .currency-search-input { width: 100%; padding: 0.5rem 2.5rem 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; color: var(--gray-700); background: var(--gray-50); transition: all 0.2s ease; } .currency-search-input:focus { outline: none; border-color: var(--primary-blue); background: white; } .currency-search i { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 14px; } .currency-list { max-height: 350px; overflow-y: auto; padding: 0.5rem 0; } .currency-section { padding: 0.5rem 0; } .currency-section-title { padding: 0.5rem 1.25rem; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; } .currency-separator { height: 1px; background: var(--gray-200); margin: 0.5rem 1.25rem; } .currency-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; cursor: pointer; transition: background 0.2s ease; } .currency-option:hover { background: var(--gray-50); } .currency-option.selected { background: var(--blue-50); } .currency-option-symbol { width: 24px; font-size: 18px; font-weight: 600; color: var(--gray-700); text-align: center; } .currency-option-code { font-weight: 600; color: var(--gray-800); font-size: 14px; min-width: 40px; } .currency-option-name { flex: 1; color: var(--gray-600); font-size: 14px; } .currency-option .fa-check { color: var(--primary-blue); margin-left: auto; } .currency-notification { position: absolute; top: calc(100% + 0.75rem); right: 0; background: white; color: var(--gray-800); padding: 0.875rem 1.25rem; border-radius: var(--radius); border-left: 3px solid var(--primary-green); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); display: flex; align-items: center; gap: 0.625rem; font-size: 14px; font-weight: 500; min-width: 200px; max-width: 320px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 800; white-space: nowrap; } .currency-notification.show { opacity: 1; visibility: visible; transform: translateY(0); } .currency-notification i { color: var(--primary-green); font-size: 16px; } @media (max-width: 1280px) { .container { padding: 0 var(--space-lg); } .flight-card-content { gap: 0.75rem; } .flight-aircraft-image .aircraft-image-container { width: 100%; height: 100%; min-height: 50px; } .flight-aircraft .aircraft-details { margin-left: 0; } .flight-aircraft-image { flex: 1; } .flight-ratings { flex: 0 0 70px; } .route-section { width: 100%; overflow: visible; } } @media (max-width: 1024px) { .flight-card-compact { padding: 10px; } .flight-ratings { flex: 0 0 auto; min-width: 60px; gap: 2px; } .flight-ratings .price-score { font-size: 10px; padding: 1px 6px; } .flight-ratings .price-label { font-size: 9px; padding: 1px 3px; } .pricing-section { padding: 16px; } .pricing-details { padding: 16px; } .popup-footer .action-btn { flex: 0 0 auto; width: auto; } .popup-footer .book-btn { flex: 0 0 auto; width: auto; } .pricing-section .actions-price-display .current-price { font-size: 26px; } .pricing-section .actions-price-display .original-price { font-size: 18px; } .pricing-section .actions-price-display .savings-line { font-size: 12px; padding: 4px 12px; } .popup-footer .action-btn:not(.book-btn) .btn-text { display: none; } .popup-footer .action-btn:not(.book-btn) { padding: 10px 12px; } .popup-footer .popup-footer-close, .popup-footer .chat-btn, .popup-footer .cancel-btn, .popup-footer .copy-link-btn { min-width: 44px; } .flight-card-content { gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 0.75rem; } .flight-card-content > * { flex-shrink: 0; } .flight-actions { width: 100px; } .flight-departure, .flight-destination { min-width: auto; } .flight-datetime, .flight-duration, .flight-aircraft, .flight-aircraft-image, .flight-ratings, .flight-price { grid-column: span 1; min-width: auto; } } @media (max-width: 1024px) { .nav-container { padding: 1rem; justify-content: space-between; } .nav-toggle { display: none !important; } .nav-menu { position: static !important; left: auto !important; top: auto !important; flex-direction: row !important; background: transparent !important; width: auto !important; text-align: left; transition: none; box-shadow: none; padding: 0; gap: 0.5rem; display: flex !important; align-items: center; margin-left: auto; } .nav-item { margin: 0; } .nav-item:not(.currency-selector-wrapper, .user-menu, .login-btn-wrapper) { display: none; } .nav-link { padding: 1rem; font-size: 1rem; } .form-row, .form-row-airports, .form-row-dates, .search-container { margin: 1rem 0; border-radius: 12px; } .search-form { padding: 1rem; } .form-row-single { flex-direction: column; gap: 0; margin-bottom: 1rem; position: relative; } .form-row-single .from-group, .form-row-single .to-group, .form-row-single .date-group { flex: 1 1 100%; min-width: 100%; max-width: 100%; } .form-group label { font-size: 11px; margin-bottom: 0.375rem; } .input-wrapper input { padding: 0.875rem; font-size: 16px; min-height: 48px; } .date-group { width: 100%; min-width: auto; max-width: 100%; } .date-inputs-wrapper { flex-direction: column; gap: var(--space-md); } .date-separator { display: none; } .flight-details { flex-direction: column; gap: var(--space-md); } .search-actions { flex-direction: column; width: 100%; } .action-btn, .show-flights-btn { width: 100%; justify-content: center; } } body.popup-open { overflow: hidden; } @media (max-width: 768px) { html.popup-open, body.popup-open { overflow: hidden; overscroll-behavior: none; } .flight-popup-overlay.active { touch-action: pan-y; } .flight-popup-overlay.active .popup-content { touch-action: pan-y; -webkit-overflow-scrolling: touch; } .search-tab[data-tab="bookings"] .tab-icon, .search-tab[data-tab="bookmarks"] .tab-icon, .search-tab[data-tab="profile"] .tab-icon, .search-tab[data-tab="help"] .tab-icon { display: inline-block !important; margin-right: 0; font-size: 16px; } .search-tab[data-tab="bookings"] .tab-text-desktop, .search-tab[data-tab="bookmarks"] .tab-text-desktop, .search-tab[data-tab="profile"] .tab-text-desktop, .search-tab[data-tab="help"] .tab-text-desktop { display: none; } .action-buttons { gap: 8px; border: none; box-shadow: none; overflow: visible; background: transparent; padding: 0; } .action-buttons .favorite-btn { border: 1px solid var(--primary); border-radius: var(--radius); box-shadow: 0 2px 4px rgba(13, 174, 156, 0.1); height: auto; } .action-buttons .favorite-btn:hover { box-shadow: 0 4px 8px rgba(13, 174, 156, 0.2); } .nav-container { padding: 0.75rem 1rem; height: 60px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { gap: 0.75rem; flex: 0 0 auto; } .logo-full { display: none; } .logo-compact { display: block; } .nav-tagline { display: none; } .nav-menu { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; z-index: auto; padding: 0; overflow-y: visible; -webkit-overflow-scrolling: auto; display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem; margin-left: auto; flex: 0 0 auto; justify-content: flex-end; } .nav-toggle { display: none !important; } .nav-item:not(.currency-selector-wrapper, .user-menu, .login-btn-wrapper) { display: none !important; } .nav-item.currency-selector-wrapper, .nav-item.user-menu, .nav-item.login-btn-wrapper { padding: 0; margin: 0; border: none; } .currency-selector-wrapper { margin-right: 0.5rem; } .nav-menu .currency-selector-wrapper:first-child { margin-left: 0; } .nav-menu > .nav-item:first-child:not(.currency-selector-wrapper) { margin-left: 0; } .multi-airport-display { gap: 6px; } .city-header-display { flex-wrap: wrap; } .currency-selector-btn { padding: 0.4rem 0.6rem; font-size: 0.9rem; min-height: 36px; } .currency-selector-btn .currency-code { display: inline-block; } .user-menu { display: flex !important; } .user-menu-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem; cursor: pointer; } .user-avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; } .user-name { display: none; } .login-btn { padding: 0.4rem 0.8rem !important; font-size: 0.9rem !important; min-height: 36px; } .currency-dropdown { width: 280px; right: -10px; } .flight-popup-overlay { padding: 0; overflow: hidden; align-items: flex-start; justify-content: flex-start; } .flight-popup { width: 100%; max-width: 100%; min-height: 100dvh; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; top: 0; left: 0; transform: none; animation: slide-up 0.3s ease-out; overflow: hidden; display: flex; flex-direction: column; position: relative; box-sizing: border-box; } @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .popup-content { padding: 1rem; padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: 1.25rem; overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; max-height: none; position: relative; touch-action: pan-y; scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: 1rem; } .flight-popup > .popup-footer { position: static; flex-shrink: 0; width: 100%; box-sizing: border-box; z-index: 1; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); } .popup-close-corner { position: fixed; top: 1rem; right: 1rem; width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary); color: var(--white); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 10002; } .flight-info-grid { grid-template-columns: 1fr; gap: 10px; } .route-map-container { height: 200px; min-height: 200px; max-height: 200px; contain: layout size style; } #flight-route-map { height: 200px; min-height: 200px; max-height: 200px; } .popup-content .flight-info-grid { flex: 0 0 auto; min-height: auto; } .flight-card-compact { padding: 12px; margin-bottom: 0.75rem; border-radius: 12px; } .flight-card-content { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 0; } .flight-aircraft-container { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; width: 100%; order: 5; grid-row: 5; padding: 0.75rem; background: var(--gray-50); border-radius: 8px; margin: 0.5rem 0; } .flight-aircraft-container .flight-aircraft { flex: 1; display: flex; flex-direction: column; padding: 0; background: transparent; margin: 0; width: auto; order: unset; } .flight-aircraft-container .flight-aircraft-image { display: flex; width: auto; order: unset; margin: 0; padding: 0; background: transparent; } .flight-card-content > div { width: 100%; text-align: left; padding: 0; min-width: unset; grid-column: 1 / -1; } .mobile-label { display: none; } .flight-duration.mobile-position { display: flex; order: 3; grid-row: 3; flex-direction: row; justify-content: center; align-items: center; gap: 1.5rem; padding: 0.75rem; background: var(--gray-50); border-radius: 8px; margin: 0.5rem 0; } .flight-duration.desktop-position { display: none; } .flight-departure { order: 2; grid-row: 2; } .flight-destination { order: 4; grid-row: 4; } .aircraft-image-container { width: 100%; height: 100px; padding: 0.5rem; background: var(--gray-50); border-radius: 8px; margin-bottom: 0.5rem; } .aircraft-image-wrapper { height: 120px; } .aircraft-image-large { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; cursor: default; } .aircraft-image-large:hover + .aircraft-image-popup, .aircraft-image-popup:hover { transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .flight-list-aircraft-image:hover { transform: none; cursor: default; } .shared-aircraft-popup, .shared-aircraft-popup.active { display: none !important; opacity: 0; pointer-events: none; } .aircraft-image-wrapper:hover { background: inherit; box-shadow: none; } .flight-card-content .aircraft-image-container { width: 100%; height: 80px; } .shared-aircraft-popup { max-width: min(300px, 70vw); max-height: min(250px, 35vh); } .shared-aircraft-popup img { max-height: calc(min(250px, 35vh) - 30px); } .aircraft-image-popup { max-width: min(92vw, 500px); max-height: min(65vh, 400px); } .aircraft-image-popup img { max-height: calc(min(65vh, 400px) - 40px); } .aircraft-section { min-height: auto; overflow: visible; } .aircraft-section .aircraft-details { display: flex; flex-direction: column; gap: 12px; width: 100%; } .aircraft-section .aircraft-image-wrapper { width: 100%; height: 120px; margin-bottom: 8px; } .aircraft-section .aircraft-info { width: 100%; text-align: left; } .aircraft-section .aircraft-specs { display: grid; grid-template-columns: 1fr; gap: 6px; } .aircraft-section .spec-item { font-size: 10px; gap: 6px; } .aircraft-section .spec-item i { font-size: 10px; } .flight-departure, .flight-destination { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-width: auto; text-align: center; } .flight-departure .mobile-label, .flight-destination .mobile-label { width: 100%; text-align: center; } .flight-departure .airport-city, .flight-destination .airport-city { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; text-align: center; } .flight-departure .airport-district, .flight-destination .airport-district, .flight-departure .airport-name, .flight-destination .airport-name { width: 100%; text-align: center; } .flight-departure .airport-code, .flight-destination .airport-code { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); min-width: auto; width: 100%; text-align: center; } .flight-departure .city-name, .flight-destination .city-name { font-size: 0.875rem; color: var(--gray-600); flex: 1; text-align: center; } .flight-datetime { display: flex; justify-content: flex-start; align-items: flex-start; padding: 0; background: transparent; border-radius: 0; width: auto; min-width: auto; grid-column: 1; grid-row: 1; place-self: start start; } .flight-datetime .date { font-weight: 600; color: var(--gray-800); } .flight-datetime .time { color: var(--gray-600); } .flight-duration, .flight-price { width: 100%; text-align: left; min-width: auto; } .flight-ratings { width: auto; text-align: right; min-width: auto; grid-column: 2; grid-row: 1; place-self: start end; align-items: flex-end; } .flight-ratings .score-badge-container { align-items: flex-end; } .flight-ratings .score-comment { text-align: right; } .flight-aircraft .aircraft-details { flex: 1; display: flex; flex-direction: column; gap: 4px; } .flight-aircraft .aircraft-model { font-size: 13px; font-weight: 600; color: var(--gray-800); } .flight-aircraft .aircraft-category { font-size: 11px; color: var(--gray-600); } .flight-aircraft .aircraft-seats { font-size: 11px; color: var(--gray-600); display: flex; align-items: center; gap: 4px; } .flight-aircraft .aircraft-seats i { font-size: 10px; } .flight-aircraft-image { order: 6; width: auto; flex: 1; display: flex; align-items: center; justify-content: center; } .flight-aircraft-image .aircraft-image-container { width: 100%; height: 100%; min-height: 48px; background: white; border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .flight-aircraft-image .aircraft-image { width: 100%; height: 100%; object-fit: contain; } .flight-actions { order: 7; display: flex; width: 100%; gap: 0.5rem; grid-row: 6; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); min-width: auto; } .flight-actions .action-btn { flex: 1; padding: 0.625rem; font-size: 12px; justify-content: center; min-height: 44px; } .results-section { max-width: 100%; margin-top: 1rem; padding: 0 0.5rem; } .results-header { padding: 1rem 0.5rem; margin-bottom: 0.75rem; } .results-title { font-size: 1.125rem; } .results-title-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .share-results-btn { margin-left: 0.5rem; padding: 0.05rem 0.4rem; background: var(--gray-50); border: none; box-shadow: none; outline: none; font-size: inherit; font-weight: inherit; line-height: 1.1; } .count-badge { font-size: 1rem; } .flights-list { padding: 0; gap: 0.75rem; } .loading-overlay { background: rgba(255, 255, 255, 0.95); } .flight-card-compact:active { transform: scale(0.98); transition: transform 0.1s ease; } .action-btn:active, .popup-btn:active, .show-flights-btn:active { transform: scale(0.95); transition: transform 0.1s ease; } .route-details { gap: 12px; } .airport-detail { padding: 10px; } .flight-path { padding: 6px 0; gap: 12px; } .airport-code-large { font-size: 20px; } .airport-detail .airport-name { font-size: 13px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; text-align: center; } .airport-detail .airport-location { font-size: 12px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; text-align: center; flex-wrap: wrap; } .aircraft-details { flex-direction: column; align-items: center; } .detail-items { grid-template-columns: 1fr; } .popup-footer .action-btn { flex: 0 0 auto; min-height: 44px; font-size: var(--text-base); padding: 10px 20px; justify-content: center; width: auto; } } @media (max-width: 768px) { .popup-footer .action-btn { width: auto; flex: 0 0 auto; } } @media (max-width: 640px) { .contact-btn { padding: 0.3rem 0.5rem; min-height: auto; } .popup-footer .action-btn:not(.book-btn) { padding: 10px; min-width: 40px; } .booking-info-section, .price-info-section { border-left: none; border-right: none; border-top: none; } .booking-card .flight-actions { border: none; outline: none; } .container { padding: 0 0.75rem; } .search-container { margin: 0.75rem 0; border-radius: 8px; } .search-form { padding: 0.875rem; } .search-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; } .search-tabs::-webkit-scrollbar { display: none; } .search-tab { padding: 0.625rem 1rem; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 0; } .tab-text-desktop { display: none; } .tab-text-mobile { display: inline; } .flight-details { padding: 1rem; } .flight-route-details { padding: 0.75rem; gap: 0.5rem; } .route-detail-row { font-size: 13px; align-items: flex-start; } .route-value { flex-wrap: wrap; word-break: break-word; line-height: 1.5; } .route-value i { flex-shrink: 0; margin-top: 2px; } .results-header { padding: 0.75rem; } .results-header h2 { font-size: 18px; } .results-title { font-size: 1.1rem; } .share-results-btn { margin-left: 0.4rem; padding: 0.05rem 0.35rem; background: var(--gray-50); border: none; box-shadow: none; outline: none; font-size: inherit; font-weight: inherit; line-height: 1.1; } .count-badge { font-size: 1rem; } } @media (max-width: 640px) { .booking-info-section, .price-info-section { width: 100%; padding: var(--space-sm); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .price-info-section { border-left: none; border-top: 1px solid var(--gray-200); padding-top: var(--space-sm); margin-top: var(--space-sm); } .booking-date-time { width: 100%; justify-content: center; text-align: center; } .booking-price { margin-bottom: 0.25rem; justify-content: center; width: 100%; } .booking-price-label { display: none; } .booking-price-value { font-size: 0.9rem; font-weight: 700; } .booking-status { margin-top: 0; justify-content: center; width: 100%; } .booking-card .action-btn.cancel-btn, .booking-card .action-btn.chat-btn { padding: 0.3rem 0.6rem; } } @media (max-width: 768px) { .contact-container { padding: 0 1rem; gap: 0.5rem; overflow-x: visible; max-width: 100%; } .contact-label { font-size: 0.75rem; padding: 0.2rem 0.5rem; } .contact-phone { display: none; } .contact-btn { padding: 0.3rem 0.5rem; min-height: auto; } } @media (max-width: 480px) { .contact-btn { padding: 0.3rem 0.5rem; min-height: auto; } .action-buttons { gap: 4px; } .bookings-filters { padding: 1rem; flex-direction: column; gap: 1rem; align-items: stretch; } .bookings-filters .filter-dropdown-container, .bookings-filters .sort-dropdown { width: 100%; } .bookings-filters .filter-dropdown, .bookings-filters .sort-dropdown { width: 100%; min-width: unset; } .bookings-filters .filter-dropdown-toggle, .bookings-filters .sort-dropdown-toggle { width: 100%; } .nav-container { padding: 0.625rem 0.75rem; height: 56px; } .search-tab { padding: 0.5rem 0.75rem; font-size: 12px; min-width: auto; } .search-tab:has(.tab-icon-only) { padding: 0.5rem 0.625rem; } .search-container { margin: 0.5rem 0; } .search-form { padding: 0.75rem; } .form-group label { font-size: 10px; margin-bottom: 0.25rem; } .input-wrapper input { padding: 0.75rem; font-size: 16px; } .search-actions { flex-direction: column; gap: 0.5rem; padding: 0 0.25rem; } .action-btn { flex: 1; width: 100%; font-size: 12px; padding: 0.5rem; justify-content: center; min-width: unset; } .popup-footer .book-btn { flex: 0 0 auto; width: auto; } .show-flights-btn { width: 100%; justify-content: center; padding: 0.75rem; font-size: 14px; } .results-section { padding: 0 0.25rem; margin-top: 0.75rem; } .results-header { text-align: left; margin-bottom: 0.75rem; padding: 0.5rem; } .results-title { font-size: 1rem; } .share-results-btn { display: inline-flex; margin-top: 0; margin-left: 0.5rem; width: auto; padding: 0.05rem 0.35rem; background: var(--gray-50); border: none; box-shadow: none; outline: none; font-size: inherit; font-weight: inherit; line-height: 1.1; } .flight-card-compact { padding: 10px; } .flight-departure .airport-code, .flight-destination .airport-code { font-size: 1.1rem; } .flight-departure .city-name, .flight-destination .city-name { font-size: 0.8rem; } .flight-price .price { font-size: 1.1rem; } .popup-content { padding: 0.75rem; padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: 1.25rem; } .info-section { padding: 0.75rem; } .section-title { font-size: 14px; } .popup-section-title { font-size: 14px; } .flights-list { gap: var(--space-md); } .container { padding: var(--space-sm); } } .bookmarks-list { background: transparent; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .remove-btn { background: rgba(30, 41, 59, 0.05); color: var(--gray-600); border: 1px solid rgba(30, 41, 59, 0.15); font-family: var(--font-body); } .remove-btn:hover { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled); border-color: rgba(239, 68, 68, 0.3); transform: translateY(-2px); } .no-bookmarks { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--gray-500); width: 100%; box-sizing: border-box; } .no-bookmarks i { font-size: 3rem; color: var(--gray-300); margin-bottom: 1rem; } .no-bookmarks h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); margin: 0 0 0.5rem; } .no-bookmarks p { max-width: 400px; line-height: 1.6; } .bookmarks-list .loading, .bookmarks-list .error { text-align: center; padding: var(--space-2xl); font-size: 1.1rem; } .bookmarks-list .loading { color: var(--gray-600); } .bookmarks-list .error { color: var(--status-cancelled); } .bookings-section { display: none; } .bookings-list { display: flex; flex-direction: column; gap: 1rem; animation: fade-in 0.3s ease; width: 100%; box-sizing: border-box; } .flight-card-compact.booking-card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); cursor: pointer; transform: none; } .flight-card-compact.booking-card.status-pending:hover { background: rgba(245, 158, 11, 0.06); box-shadow: var(--shadow-lg); border-color: var(--primary); transform: none; } .flight-card-compact.booking-card.status-confirmed:hover { background: rgba(34, 197, 94, 0.06); box-shadow: var(--shadow-lg); border-color: var(--primary); transform: none; } .flight-card-compact.booking-card.status-cancelled:hover { background: rgba(239, 68, 68, 0.06); box-shadow: var(--shadow-lg); border-color: var(--primary); transform: none; } .flight-card-compact.booking-card.status-completed:hover { background: rgba(59, 130, 246, 0.06); box-shadow: var(--shadow-lg); border-color: var(--primary); transform: none; } .booking-status-indicator { position: absolute; top: -3px; right: 0; display: flex; align-items: center; gap: 1rem; padding: 0.25rem 1rem; background: rgba(255, 255, 255, 0.95); border-radius: 0 var(--radius-lg) 0 var(--radius); font-size: 0.75rem; z-index: 1; } .booking-status-indicator .status-badge { padding: 0.25rem 0.5rem; border-radius: 100px; font-weight: 600; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.5px; } .booking-card.status-pending .status-badge { background: rgba(245, 158, 11, 0.1); color: var(--status-warning-dark); } .booking-card.status-confirmed .status-badge { background: rgba(34, 197, 94, 0.1); color: #15803d; } .booking-card.status-cancelled .status-badge { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled-dark); } .booking-status-indicator .booked-price { color: var(--primary); font-weight: 600; font-size: 0.9rem; padding: 0.15rem 0.4rem; background: var(--primary-light); border-radius: var(--radius-sm); } .booking-status-indicator .booking-date { color: var(--gray-500); font-size: 0.7rem; margin-right: 0.5rem; } .booking-card .flight-actions { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .booking-info-section { width: 160px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--space-sm); padding: var(--space-md); } .price-info-section { width: 160px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--space-sm); padding: var(--space-md); border-left: 1px solid var(--gray-200); } .booking-date-time { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; } .booking-value { font-size: 0.85rem; color: var(--gray-750); font-weight: 500; white-space: nowrap; } .booking-price { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; } .booking-price-label { color: var(--gray-600); font-weight: 500; font-size: 0.85rem; } .booking-price-value { color: var(--primary); font-weight: 700; font-size: 1rem; } .booking-status { display: flex; align-items: center; margin-top: 0.25rem; } .booking-status .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 100px; font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; } .booking-status .status-badge.status-pending { background: rgba(245, 158, 11, 0.1); color: var(--status-warning-dark); } .booking-status .status-badge.status-confirmed { background: rgba(34, 197, 94, 0.1); color: #16a34a; } .booking-status .status-badge.status-cancelled { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled-dark); } .booking-status .status-badge.status-processing { background: rgba(59, 130, 246, 0.1); color: #1e40af; } .booking-status .status-badge.status-declined { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled-dark); } .booking-status .status-badge.status-completed { background: rgba(34, 197, 94, 0.1); color: #16a34a; } .status-badge.fp-flight { background: rgba(59, 130, 246, 0.1); color: #2563eb; font-weight: 600; } .booking-card .action-btn.cancel-btn { background: rgba(239, 68, 68, 0.1); color: var(--status-cancelled-dark); border: 1px solid rgba(239, 68, 68, 0.2); font-size: 0.75rem; padding: 0.4rem 0.5rem; margin-top: var(--space-xs); width: 100%; justify-content: center; } .booking-card .action-btn.cancel-btn:hover { background: rgba(239, 68, 68, 0.2); border-color: var(--status-cancelled); transform: translateY(-1px); } .booking-card .action-btn.chat-btn { font-size: 0.75rem; padding: 0.4rem 0.5rem; margin-top: var(--space-xs); width: 100%; justify-content: center; } @media (max-width: 768px) { .booking-card .price-info-section { grid-row: 7; } } @media (max-width: 640px) { .booking-card .flight-actions { flex-direction: row !important; width: 100% !important; gap: 0.5rem !important; } .booking-card .flight-actions .action-btn { flex: 1; margin-top: 0; width: auto !important; } .booking-card .action-btn.cancel-btn, .booking-card .action-btn.chat-btn { margin-top: 0 !important; } } .no-bookings { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--gray-500); width: 100%; box-sizing: border-box; } .no-bookings i { font-size: 3rem; color: var(--gray-300); margin-bottom: 1rem; } .no-bookings h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); margin: 0 0 0.5rem; } .no-bookings p { max-width: 400px; line-height: 1.6; } .bookings-list .loading, .bookings-list .error { text-align: center; padding: 3rem 2rem; } .bookings-list .loading { color: var(--primary); } .bookings-list .error { color: var(--status-cancelled-dark); } .booking-details-popup { max-width: 800px; } .booking-modal-header { padding: 1.5rem; background: linear-gradient( 135deg, rgba(15, 23, 42, 0.02) 0%, rgba(30, 41, 59, 0.02) 100% ); border-bottom: 1px solid rgba(30, 41, 59, 0.1); margin: -1.5rem -1.5rem 1.5rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .booking-modal-status { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.75rem; } .booking-modal-status .booking-status-badge { position: static; display: inline-flex; } .booking-modal-ref { font-size: 0.9rem; color: var(--gray-600); font-family: "Courier New", monospace; } .booking-modal-date { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-500); } .booking-modal-date i { color: var(--primary); } .booking-modal-price { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--primary); font-weight: 600; margin-top: 0.5rem; } .booking-modal-price i { color: var(--primary); } .booking-modal-price span { background: var(--primary-light); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); } .route-details-modal { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; background: linear-gradient(135deg, #f8fafc 0%, #fff 100%); border-radius: var(--radius); gap: 2rem; } .airport-info-modal { flex: 1; text-align: center; } .route-arrow { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--primary); position: relative; } .route-arrow i { font-size: 1.5rem; z-index: 2; } .route-line { position: absolute; width: 100px; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--primary) 50%, transparent 100% ); top: 50%; transform: translateY(-50%); } .price-booking { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(13, 174, 156, 0.2); } @media (max-width: 1024px) { .booking-info-section { width: 140px; padding: var(--space-sm); gap: 0.25rem; align-items: center; } .price-info-section { align-items: center; } .booking-date-time { justify-content: center; } .booking-price { font-size: 0.8rem; justify-content: center; } .booking-status { justify-content: center; } .booking-value { font-size: 0.75rem; } .booking-price-label { font-size: 0.75rem; } .booking-price-value { font-size: 0.85rem; } .booking-status .status-badge { font-size: 0.65rem; padding: 0.2rem 0.5rem; } .booking-card .action-btn.cancel-btn, .booking-card .action-btn.chat-btn { font-size: 0.7rem; padding: 0.35rem 0.45rem; } } .selection-info { padding: 0.75rem; } .selected-city-header, .selected-airport-header { padding: 0.75rem; background: linear-gradient( 135deg, rgba(13, 174, 156, 0.05) 0%, rgba(13, 174, 156, 0.08) 100% ); border-radius: 8px; margin-bottom: 0.5rem; } .selected-indicator { display: flex; align-items: center; gap: 0.5rem; color: #0f172a; font-size: 14px; } .selected-indicator i { color: var(--primary-green); font-size: 16px; } .selected-indicator strong { font-weight: 600; } .location-detail { color: var(--gray-500); font-size: 13px; font-weight: 400; } .selected-airports-list { padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; } .airports-in-selection { display: flex; flex-wrap: wrap; gap: 0.375rem; } .airport-code-badge { display: inline-block; padding: 0.25rem 0.5rem; background: rgba(13, 174, 156, 0.1); color: var(--primary); border: 1px solid rgba(13, 174, 156, 0.2); border-radius: 4px; font-size: 12px; font-weight: 600; font-family: "Outfit", monospace; } .clear-selection-option { padding: 0.75rem; background: rgba(239, 68, 68, 0.03); border: 1px solid rgba(239, 68, 68, 0.1); border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: var(--status-cancelled); font-size: 13px; font-weight: 500; transition: all 0.2s ease; } .clear-selection-option:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); transform: translateY(-1px); } .clear-selection-option i { font-size: 12px; } .site-footer { background: #fff; border-top: 1px solid var(--gray-250); margin-top: 40px; padding: 40px 0 30px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; position: relative; min-height: 300px; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); } .soro-blog-section { background: #fff; padding: 28px 0 44px; } .footer-content { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; } .footer-section { color: var(--gray-500); } .footer-title { color: var(--gray-850); font-size: 16px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.2px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 5px; } .footer-links a { color: var(--gray-500); text-decoration: none; font-size: 14px; transition: color 0.2s ease; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--gray-850); } .footer-app-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-250); } .footer-app-section-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--gray-450); text-transform: uppercase; letter-spacing: 0.04em; } .footer-app-stores { display: flex; align-items: center; gap: 10px; margin-top: 0; } .footer-app-store-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--gray-250); background: var(--gray-50); color: var(--gray-850); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .footer-app-store-btn i { font-size: 20px; line-height: 1; } .footer-app-store-btn:hover { background: #fff; border-color: var(--gray-350); color: var(--gray-900); transform: translateY(-1px); } .footer-app-store-btn--apple:hover { color: #111; } .footer-app-store-btn--google:hover { color: #0f9d58; } .footer-links a[title="Coming Soon"]::after { content: "•"; margin-left: 6px; color: var(--gray-350); font-size: 10px; } .footer-contact { display: flex; flex-direction: column; gap: 12px; } .contact-item { display: flex; align-items: flex-start; gap: 12px; } .contact-item i { color: var(--gray-500); font-size: 14px; margin-top: 3px; } .contact-item div { display: flex; flex-direction: column; gap: 4px; } .footer-contact-label { font-size: 12px; color: var(--gray-450); text-transform: uppercase; letter-spacing: 0.5px; } .contact-value { color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease; } .contact-value:hover { color: var(--gray-850); } .footer-about { grid-column: span 1; } .footer-description { color: var(--gray-500); font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .footer-stats { display: flex; flex-direction: column; gap: 8px; } .footer-stat { color: var(--gray-500); font-size: 13px; display: flex; align-items: center; gap: 8px; } .footer-stat i { color: var(--gray-450); font-size: 12px; } .social-links { list-style: none; padding: 0; margin: 0; } .social-links li { margin-bottom: 5px; } .social-links a { color: var(--gray-500); text-decoration: none; font-size: 14px; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 10px; } .social-links a:hover { color: var(--gray-850); } .social-links i { color: var(--gray-500); font-size: 16px; width: 20px; text-align: center; transition: color 0.2s ease; } .social-links a:hover i { color: var(--gray-850); } .footer-sub-header { font-size: 12px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .footer-sub-header:first-child { margin-top: 0; } .footer-sub-header i { font-size: 14px; color: var(--gray-500); width: 16px; text-align: center; } .top-channels-links li:not(.footer-sub-header) { padding-left: 22px; } .contact-phone-row { display: flex; align-items: center; gap: 6px; } .contact-messenger-icon { color: var(--gray-450); font-size: 15px; transition: color 0.2s ease; text-decoration: none; } .contact-messenger-icon:hover { color: var(--gray-850); } .footer-bottom { border-top: 1px solid var(--gray-250); margin-top: 32px; padding: 16px 0; } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-copyright { color: var(--gray-450); font-size: 13px; } .footer-legal { display: flex; align-items: center; gap: 8px; } .footer-legal a { color: var(--gray-450); text-decoration: none; font-size: 13px; transition: color 0.2s ease; } .footer-legal a:hover { color: var(--gray-700); } .footer-separator { color: var(--gray-350); font-size: 10px; } @media (max-width: 1280px) { .footer-container { padding: 0 var(--space-lg); } } @media (max-width: 768px) { .site-footer { margin-top: 20px; padding: 20px 0 0; } .footer-container { padding: 0 var(--space-md); } .footer-content { display: flex; flex-direction: column; gap: 16px; } .footer-section { padding: 12px 0; border-bottom: 1px solid var(--gray-200); } .footer-section:last-child { border-bottom: none; padding-bottom: 0; } .footer-title { font-size: 15px; margin-bottom: 8px; } .footer-links { display: flex; flex-direction: column; gap: 4px; } .footer-links li { margin-bottom: 0; } .footer-links a { padding: 4px 0; display: block; font-size: 13px; } .footer-about { order: -1; max-width: none; padding-top: 0; } .footer-description { font-size: 13px; line-height: 1.5; margin-bottom: 10px; } .footer-stats { gap: 4px; } .footer-stat { font-size: 12px; } .footer-contact { display: flex; flex-direction: column; gap: 10px; } .contact-item { padding: 6px 0; display: flex; align-items: flex-start; gap: 10px; } .contact-item i { font-size: 14px; margin-top: 2px; } .contact-item div { flex: 1; } .footer-contact-label { font-size: 11px; margin-bottom: 2px; } .contact-value { font-size: 13px; } .footer-bottom { padding: 12px 0; margin-top: 8px; } .footer-bottom-content { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .footer-copyright { font-size: 12px; order: 1; } .footer-legal { flex-wrap: wrap; justify-content: center; gap: 6px 10px; order: 2; } .footer-legal a { font-size: 12px; padding: 4px 6px; } .footer-separator { display: none; } } @media (max-width: 640px) { .footer-container { padding: 0 0.75rem; } } .policy-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 10000; justify-content: center; align-items: center; padding: 20px; } .policy-modal-container { background: white; border-radius: var(--radius-lg); max-width: 900px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); } .policy-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--gray-200); } .policy-modal-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--gray-900); margin: 0; } .policy-modal-close { background: none; border: none; font-size: 1.5rem; color: var(--gray-500); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .policy-modal-close:hover { color: var(--gray-700); } .policy-modal-content { flex: 1; overflow-y: auto; padding: 1.5rem; } .policy-modal-content [name="termly-embed"] { min-height: 500px; max-width: 100%; } .policy-modal-content [name="termly-embed"] iframe { width: 100% !important; max-width: 100% !important; border: none; } .dsar-modal-container { max-width: 800px; } .dsar-modal-content { padding: 0; min-height: 600px; } .dsar-modal-content iframe { width: 100% !important; height: 600px !important; border: none; display: block; } .mobile-terms-content { line-height: 1.6; } .mobile-terms-content h3 { color: var(--gray-900); margin-bottom: 1rem; } .mobile-terms-content p { color: var(--gray-700); margin-bottom: 0.75rem; } .mobile-terms-content a { color: var(--primary); text-decoration: none; } .mobile-terms-content a:hover { text-decoration: underline; } .termly-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; min-height: 200px; } .termly-loading .spinner { width: 40px; height: 40px; border: 4px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: termly-spin 1s linear infinite; } .termly-loading p { margin-top: 1rem; color: var(--gray-600); font-size: 14px; } @keyframes termly-spin { to { transform: rotate(360deg); } } .policy-modal-content .error-message { text-align: center; padding: 2rem; color: var(--danger); font-size: 16px; } .policy-modal-overlay[style*="flex"] { animation: fade-in 0.2s ease-in-out; } .policy-modal-overlay[style*="flex"] .policy-modal-container { animation: slide-up 0.3s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .policy-modal-close:focus, .footer-legal-links a:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .policy-modal-content:has([name="termly-embed"] iframe) .termly-loading, .dsar-modal-content:has(iframe[src]) .termly-loading { display: none; } @media (max-width: 768px) { .policy-modal-overlay { padding: 10px; } .policy-modal-container { max-height: 95vh; } .policy-modal-header { padding: 1rem; } .policy-modal-header h2 { font-size: 1.25rem; } .policy-modal-content { padding: 1rem; } } @media (max-width: 1024px) { .footer-content { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-about { grid-column: span 2; } } @media (min-width: 1025px) { .footer-about { max-width: 300px; } } @media (max-width: 768px) { button:not( .auth-notification-close, .notification-close, .popup-close-corner, .auth-modal-close, .questionnaire-modal-close, .policy-modal-close, .cancel-booking-modal-close, .modal-close, .modal-close-btn, .prebook-modal__close, .currency-dropdown-close, .chat-header-btn ), a, input, select, textarea { min-height: 44px; -webkit-tap-highlight-color: rgba(13, 174, 156, 0.1); } * { -webkit-overflow-scrolling: touch; } body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .container { overflow-x: hidden; } .loading-spinner { width: 40px; height: 40px; } .airport-dropdown { max-height: 50vh; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); } .no-bookmarks, .no-bookings { padding: 2rem 1rem; } .no-bookmarks h3, .no-bookings h3 { font-size: 1.25rem; } .no-bookmarks p, .no-bookings p { font-size: 0.875rem; } .auth-modal-content { width: calc(100% - 2rem); max-width: 400px; margin: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } .booking-details-popup { width: 100%; height: 100vh; border-radius: 0; max-width: 100%; max-height: 100vh; } input:focus, select:focus, textarea:focus { outline-offset: 2px; outline-width: 2px; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea { font-size: 16px; } button:active, a.btn:active, .btn:active { opacity: 0.8; } .nav-container, .container, .footer-container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } .popup-footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } } .currency-loading-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px); z-index: 10000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .currency-loading-overlay.active { opacity: 1; } .currency-loading-content { background: white; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); animation: scale-in 0.3s ease; } .currency-loading-spinner { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; } .currency-loading-spinner i { animation: spin 1s linear infinite; } .currency-loading-text { font-size: 1rem; color: var(--text-secondary); font-weight: 500; } @keyframes scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .profile-warning-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .profile-warning-overlay.show { opacity: 1; pointer-events: auto; } .profile-warning-popup { background: white; border-radius: 12px; padding: 30px; max-width: 450px; width: 90%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); transform: scale(0.9); transition: transform 0.3s ease; text-align: center; } .profile-warning-overlay.show .profile-warning-popup { transform: scale(1); } .popup-warning-icon { font-size: 48px; margin-bottom: 15px; } .profile-warning-popup h3 { color: #333; font-size: 22px; margin-bottom: 15px; font-weight: 600; } .profile-warning-popup p { color: #666; font-size: 16px; line-height: 1.5; margin-bottom: 25px; } .popup-warning-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .popup-warning-buttons button, .popup-warning-buttons a { padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease; border: none; display: inline-block; } .btn-continue { background: rgba(30, 41, 59, 0.05); color: var(--gray-600); border: 1px solid rgba(30, 41, 59, 0.15); padding: 10px 20px; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-medium); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease; text-decoration: none; } .btn-continue:hover { background: rgba(13, 174, 156, 0.1); color: var(--primary); border-color: rgba(13, 174, 156, 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 174, 156, 0.15); } .btn-complete-profile { background: var(--primary); color: white; } .btn-complete-profile:hover { background: var(--primary-hover); color: white; transform: translateY(-1px); } .booking-warning-banner { background: #fef3c7; border: 2px solid var(--status-warning); border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; animation: slide-down 0.3s ease; width: 100%; box-sizing: border-box; } @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .booking-warning-banner .warning-icon { font-size: 24px; flex-shrink: 0; } .booking-warning-banner .warning-text { flex: 1; color: #92400e; font-size: 15px; line-height: 1.4; } .booking-warning-banner .complete-profile-link { color: var(--status-warning-dark); font-weight: 600; text-decoration: underline; margin-left: 5px; white-space: nowrap; } .booking-warning-banner .complete-profile-link:hover { color: #b45309; } @media (max-width: 768px) { .profile-warning-popup { padding: 20px; max-width: 95%; } .popup-warning-buttons { flex-direction: column; } .popup-warning-buttons button, .popup-warning-buttons a { width: 100%; } .booking-warning-banner { flex-direction: column; text-align: center; } } .action-btn.booked.book-btn, .btn-primary.booked.book-btn, .book-btn.booked { cursor: default; opacity: 1; } @media (max-width: 480px) { .nav-container { padding: 0.5rem 0.75rem; height: 52px; } .currency-selector-btn { padding: 0.3rem 0.35rem; font-size: 0.8rem; min-height: 30px; } .login-btn { padding: 0.3rem 0.5rem !important; font-size: 0.8rem !important; min-height: 30px; } } @media (max-width: 400px) { .nav-container { padding: 0.4rem; height: 48px; } .currency-selector-btn { padding: 0.25rem 0.3rem; font-size: 0.75rem; min-height: 28px; } .currency-selector-btn .currency-code { display: none; } .currency-selector-wrapper { margin-right: 0.25rem; } .login-btn { padding: 0.25rem 0.4rem !important; font-size: 0.75rem !important; min-height: 28px; } .nav-menu { gap: 0.25rem; flex-wrap: wrap; } .login-btn i { display: none; } } .top-nav { --sh-bg: #ffffff; --sh-fill: #f5f5f7; --sh-text: #1d1d1f; --sh-label: #86868b; --sh-separator: rgba(60, 60, 67, 0.12); --sh-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; background: var(--sh-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0.5px solid var(--sh-separator); box-shadow: none; } .top-nav .nav-container { max-width: 1400px; height: 68px; padding: 0 1.25rem; gap: 0.75rem; } .top-nav .nav-logo { gap: 0; min-width: 0; flex: 1 1 auto; } .top-nav .logo-link { flex-shrink: 0; gap: 0; align-items: center; } .top-nav .logo-full { display: block; width: auto; height: 40px; } .top-nav .logo-full text { font-family: var(--sh-font); font-weight: 800; letter-spacing: 0.05em; fill: var(--sh-text); } .top-nav .logo-compact { display: none; width: auto; height: 42px; } .top-nav .nav-tagline { min-width: 0; margin-left: 0.875rem; padding-left: 0.875rem; border-left: 1px solid var(--sh-separator); } .top-nav .nav-tagline-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 0.875rem; font-family: var(--sh-font); font-size: 12px; line-height: 1.25; color: var(--sh-label); } .top-nav .nav-tagline .stat-item { flex-direction: row; align-items: center; gap: 0.375rem; } .top-nav .nav-tagline .stat-icon { font-size: 11px; color: var(--sh-label); opacity: 0.85; } .top-nav .nav-tagline .stat-icon.text-success { color: #34c759; opacity: 1; } .top-nav .nav-tagline .stat-text { color: var(--sh-label); font-weight: 400; white-space: nowrap; } .top-nav .nav-tagline .stat-text strong { color: var(--sh-text); font-weight: 600; letter-spacing: -0.01em; } .top-nav .nav-menu { flex: 0 0 auto; gap: 0.375rem; margin-left: auto; } .top-nav .nav-link { padding: 0.4375rem 0.75rem; border-radius: 980px; font-family: var(--sh-font); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--sh-label); } .top-nav .nav-link:hover { background: rgba(60, 60, 67, 0.06); color: var(--sh-text); } .top-nav .nav-link.active { background: var(--sh-fill); color: var(--sh-text); font-weight: 600; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08); } .top-nav .nav-link.active::after { display: none; } .top-nav .currency-selector-wrapper { margin-right: 0; } .top-nav .currency-selector-btn { min-height: 34px; padding: 0.375rem 0.75rem; border: none; border-radius: 980px; background: var(--sh-fill); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); color: var(--sh-text); font-family: var(--sh-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s ease, box-shadow 0.2s ease; } .top-nav .currency-selector-btn:hover { background: #efeff4; border-color: transparent; transform: none; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.14); } .top-nav .currency-selector-btn .currency-symbol { font-size: 14px; } .top-nav .currency-selector-btn i { font-size: 9px; color: var(--sh-label); } .top-nav .login-btn, .top-nav .nav-menu .login-btn { min-height: 34px; padding: 0.4375rem 0.9375rem; border: none; border-radius: 980px; background: var(--sh-text); box-shadow: none; color: #fff; font-family: var(--sh-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .top-nav .login-btn:hover, .top-nav .nav-menu .login-btn:hover { background: #000; border-color: transparent; transform: none; box-shadow: none; opacity: 0.92; } .top-nav .user-menu-toggle { border-radius: 980px; padding: 0.1875rem 0.5rem 0.1875rem 0.1875rem; } .top-nav .user-menu-toggle:hover { background: var(--sh-fill); } .top-nav .user-avatar { width: 32px; height: 32px; border: 2px solid rgba(13, 174, 156, 0.35); } .top-nav .user-dropdown { border: none; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); } .contact-bar { --cb-radius-shell: 10px; --cb-radius-btn: 980px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; padding: 0.625rem 0 0.75rem; } .contact-bar .contact-container { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.5rem; width: fit-content; max-width: calc(1400px - 2.5rem); margin-top: 0; margin-bottom: 0; margin-right: auto; margin-left: max(1.25rem, calc((100% - 1400px) / 2 + 1.25rem)); padding: 0.4375rem 0.75rem 0.4375rem 0.875rem; background: #f5f5f7; border-radius: var(--cb-radius-shell); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); } .contact-bar .contact-label { padding-right: 0; font-family: -apple-system, blinkmacsystemfont, system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: #1d1d1f; white-space: nowrap; } .contact-bar .contact-label-short { display: none; } .contact-bar .contact-phone { font-family: -apple-system, blinkmacsystemfont, system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; font-variant-numeric: tabular-nums; white-space: nowrap; } .contact-bar .contact-phone::before { content: "·"; margin: 0 0.4375rem; color: #86868b; font-weight: 400; } .contact-bar .contact-phone::after, .contact-bar .contact-label::after { content: ""; display: inline-block; width: 1px; height: 16px; margin-left: 0.5rem; margin-right: 0.125rem; background: rgba(60, 60, 67, 0.14); vertical-align: middle; } .contact-bar .contact-label::after { display: none; } .contact-bar .contact-btn { min-height: 32px; padding: 0.375rem 0.75rem; border: none; border-radius: var(--cb-radius-btn); background: #fff; font-family: -apple-system, blinkmacsystemfont, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.12); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .contact-bar .contact-btn:hover { transform: none; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.18); opacity: 1; } .contact-bar .contact-btn i { font-size: 12px; } .contact-bar .phone-btn, .contact-bar .chat-btn { color: var(--primary); } .contact-bar .phone-btn:hover, .contact-bar .chat-btn:hover { background: rgba(13, 174, 156, 0.08); color: var(--primary-hover); box-shadow: inset 0 0 0 0.5px rgba(13, 174, 156, 0.32); } .contact-bar .whatsapp-btn { background: #25d366; color: #fff; box-shadow: none; } .contact-bar .whatsapp-btn:hover { background: #1fa855; color: #fff; } .contact-bar .whatsapp-btn i { color: #fff; } .contact-bar .contact-btn .notification-badge, .contact-bar .chat-btn .notification-badge { border: 2px solid #f5f5f7; } @media (max-width: 1024px) { .contact-bar .contact-label { margin-right: 0.625rem; } .contact-bar .contact-container { gap: 0.375rem 0.4375rem; } .contact-bar .contact-phone { display: none; } .contact-bar .contact-phone::after { display: none; } .contact-bar .contact-label::after { display: inline-block; } } @media (max-width: 1100px) { .top-nav .nav-tagline .stat-text { white-space: normal; } .top-nav .nav-tagline-stats { gap: 0.5rem 0.625rem; } } @media (max-width: 900px) { .top-nav .nav-tagline { display: none; } } @media (max-width: 768px) { .top-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .top-nav .nav-container { height: 60px; padding: 0 0.875rem; } .top-nav .logo-full { display: block; height: 35px; } .top-nav .logo-full text { letter-spacing: 0.04em; } .top-nav .logo-compact { display: none; height: 40px; } .top-nav .currency-selector-btn, .top-nav .login-btn, .top-nav .nav-menu .login-btn { min-height: 32px; padding: 0.3125rem 0.625rem; font-size: 12px; } .contact-bar { padding: 0.4375rem 0.875rem 0.625rem; } .contact-bar .contact-container { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 0.4375rem 0.5rem 0.4375rem 0.625rem; gap: 0.4375rem; border-radius: var(--cb-radius-shell); } .contact-bar .contact-label { flex: 0 1 auto; min-width: 0; width: auto; max-width: none; margin-right: 0.5rem; padding: 0; padding-right: 0.125rem; text-align: left; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.2; color: #1d1d1f; } .contact-bar .contact-label-long { display: none; } .contact-bar .contact-label-short { display: inline; font-weight: 500; } .contact-bar .contact-phone { display: none; } .contact-bar .contact-phone::after { display: none; } .contact-bar .contact-btn { flex-shrink: 0; min-height: 32px; padding: 0.375rem 0.625rem; gap: 0.25rem; } .contact-bar .contact-btn-text { display: inline; font-size: 12px; font-weight: 600; line-height: 1; } .contact-bar .contact-btn i { font-size: 11px; } } @media (max-width: 480px) { .top-nav .nav-container { padding: 0 0.75rem; } .top-nav .logo-full { height: 32px; } .top-nav .logo-full text { letter-spacing: 0.035em; } .contact-bar { padding: 0.375rem 0.75rem 0.5rem; } .contact-bar .contact-container { padding: 0.375rem 0.4375rem 0.375rem 0.5625rem; gap: 0.3125rem; } .contact-bar .contact-label { font-size: 11px; font-weight: 500; } .contact-bar .contact-btn { min-height: 30px; padding: 0.3125rem 0.5rem; } .contact-bar .contact-btn-text { font-size: 11px; } } @media (max-height: 500px) and (orientation: landscape) { .top-nav .logo-full { display: block !important; height: 30px; } .top-nav .logo-compact { display: none !important; } } #footer-container { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 2; clear: both; isolation: isolate; } .container, main:not(.main-content) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .results-section, .bookings-section, .bookings-list { padding-bottom: 0.75rem; } .site-footer { --ft-bg: #f5f5f7; --ft-surface: rgba(255, 255, 255, 0.72); --ft-text: #1d1d1f; --ft-link: #424245; --ft-label: #86868b; --ft-separator: rgba(60, 60, 67, 0.12); --ft-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --ft-body: 0.8125rem; --ft-caption: 0.75rem; --ft-brand: 1.375rem; background: var(--ft-bg); border-top: 0.5px solid var(--ft-separator); margin-top: 0; padding: 3.25rem 0 1.75rem; font-family: var(--ft-font); font-size: var(--ft-body); min-height: auto; -webkit-font-smoothing: antialiased; } .site-footer a { min-height: auto; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); } .footer-content { grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); gap: 2.25rem 2rem; } .footer-section { color: var(--ft-label); } .footer-about .footer-title { font-size: var(--ft-brand); font-weight: 600; letter-spacing: -0.022em; color: var(--ft-text); margin-bottom: 0.75rem; } .footer-title { font-size: var(--ft-body); font-weight: 600; letter-spacing: -0.01em; color: var(--ft-text); margin-bottom: 0.875rem; } .footer-description { font-size: var(--ft-body); line-height: 1.55; letter-spacing: -0.01em; color: var(--ft-label); margin-bottom: 0.875rem; } .footer-stats { gap: 0.375rem; } .footer-stat { font-size: var(--ft-body); letter-spacing: -0.01em; color: var(--ft-label); gap: 0.5rem; } .footer-stat i { font-size: var(--ft-caption); color: var(--ft-label); opacity: 0.85; } .footer-links li { margin-bottom: 0.375rem; } .footer-links a { font-size: var(--ft-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--ft-link); transition: color 0.18s ease; } .footer-links a:hover { color: var(--ft-text); text-decoration: underline; text-underline-offset: 0.2em; } .footer-app-section { margin-top: 1.25rem; padding-top: 0; border-top: none; } .footer-app-section-label { margin: 0 0 0.625rem; font-size: var(--ft-caption); font-weight: 600; letter-spacing: -0.01em; color: var(--ft-label); text-transform: none; } .footer-app-stores { gap: 0.5rem; } .footer-app-store-btn { width: 2.25rem; height: 2.25rem; border-radius: 980px; border: 0.5px solid var(--ft-separator); background: var(--ft-surface); color: var(--ft-text); box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.65); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.18s ease; } .footer-app-store-btn i { font-size: 1.0625rem; } .footer-app-store-btn:hover { background: #fff; border-color: rgba(60, 60, 67, 0.18); color: var(--ft-text); transform: scale(1.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .footer-app-store-btn--apple:hover { color: #111; } .footer-app-store-btn--google:hover { color: #0f9d58; } .footer-app-store-btn:active { transform: scale(0.96); } .social-links a { gap: 0.625rem; } .social-links i { width: 1rem; font-size: 0.8125rem; color: var(--ft-label); opacity: 0.88; transition: color 0.18s ease, opacity 0.18s ease; } .social-links a:hover i { color: var(--ft-text); opacity: 1; } .footer-sub-header { margin-top: 0.875rem; margin-bottom: 0.25rem; font-size: var(--ft-caption); font-weight: 600; letter-spacing: -0.01em; color: var(--ft-text); text-transform: none; gap: 0.375rem; } .footer-sub-header:first-child { margin-top: 0; } .footer-sub-header i { font-size: 0.75rem; color: var(--ft-label); width: 0.875rem; } .top-channels-links li:not(.footer-sub-header) { padding-left: 1.125rem; } .footer-contact { gap: 0.75rem; } .contact-phone-row { gap: 0.375rem; flex-wrap: wrap; } .contact-messenger-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 980px; border: 0.5px solid var(--ft-separator); background: var(--ft-surface); font-size: 0.75rem; color: var(--ft-label); transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .contact-messenger-icon:hover { color: var(--ft-text); background: #fff; border-color: rgba(60, 60, 67, 0.18); } .contact-value { font-size: var(--ft-body); font-weight: 400; letter-spacing: -0.01em; color: var(--ft-text); } .contact-value:hover { color: var(--primary); } .contact-item { gap: 0.625rem; } .contact-item i { font-size: 0.8125rem; color: var(--ft-label); margin-top: 0.125rem; } .footer-contact-label { font-size: var(--ft-caption); font-weight: 600; letter-spacing: -0.01em; color: var(--ft-label); text-transform: none; } .footer-bottom { margin-top: 2.5rem; padding: 1.125rem 0 0.25rem; border-top: 0.5px solid var(--ft-separator); } .footer-copyright { font-size: var(--ft-body); letter-spacing: -0.01em; color: var(--ft-label); } .footer-legal a { font-size: var(--ft-body); color: var(--ft-label); } .footer-legal a:hover { color: var(--ft-text); } .footer-legal-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } @media (max-width: 1180px) { .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem; } .footer-about { grid-column: 1 / -1; max-width: 40rem; } } @media (max-width: 768px) { .site-footer { padding: 2rem 0 1.25rem; } .footer-container { padding: 0 1rem; } .footer-content { display: grid; grid-template-columns: 1fr; gap: 0; } .footer-section { padding: 1rem 0; border-bottom: 0.5px solid var(--ft-separator); } .footer-section:last-child { border-bottom: none; padding-bottom: 0; } .footer-about { order: -1; padding-top: 0; max-width: none; } .footer-about .footer-title { font-size: 1.25rem; } .footer-title { margin-bottom: 0.625rem; } .footer-links li { margin-bottom: 0.25rem; } .footer-links a { display: inline-flex; padding: 0.125rem 0; } .footer-bottom { margin-top: 1.25rem; padding-top: 1rem; } .footer-bottom-content { align-items: flex-start; text-align: left; } .footer-copyright { font-size: var(--ft-caption); } } @media (max-width: 640px) { .footer-container { padding: 0 0.875rem; } } @media (prefers-reduced-motion: reduce) { .footer-app-store-btn, .footer-links a, .contact-messenger-icon, .social-links i { transition: none; } .footer-app-store-btn:hover, .footer-app-store-btn:active { transform: none; } } .header-popover.user-dropdown, .header-popover.currency-dropdown { --hp-bg: rgba(255, 255, 255, 0.94); --hp-fill: #f5f5f7; --hp-fill-hover: rgba(60, 60, 67, 0.06); --hp-text: #1d1d1f; --hp-label: #86868b; --hp-separator: rgba(60, 60, 67, 0.1); --hp-radius: 16px; --hp-shadow: 0 20px 48px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); --hp-font: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -8px, 0) scale(0.97); transform-origin: top right; transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.26s ease; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: var(--hp-bg); border: none; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); overflow: hidden; } .header-popover.user-dropdown.active, .header-popover.currency-dropdown.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); } .header-popover.user-dropdown { top: calc(100% + 0.5rem); right: 0; margin-top: 0; min-width: 240px; max-width: min(280px, calc(100vw - 2rem)); z-index: 1002; } .header-popover.currency-dropdown { top: calc(100% + 0.5rem); right: 0; width: min(320px, calc(100vw - 2rem)); max-height: min(420px, calc(100vh - 6rem)); z-index: 1002; } .user-dropdown-header { padding: 0.875rem 1rem 0.75rem; border-bottom: none; } .user-dropdown-name { margin: 0 0 0.125rem; font-family: var(--hp-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--hp-text); } .user-dropdown-email { margin: 0 0 0.5rem; font-family: var(--hp-font); font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.35; color: var(--hp-label); } .user-provider-badge { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0; padding: 0.25rem 0.5rem; border: none; border-radius: 980px; background: var(--hp-fill); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1); font-family: var(--hp-font); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hp-label); } .user-provider-badge i { font-size: 0.6875rem; color: var(--hp-label); } .user-dropdown-menu { padding: 0.375rem; } .user-dropdown-item { gap: 0.625rem; padding: 0.5625rem 0.625rem; border-radius: 10px; font-family: var(--hp-font); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--hp-text); text-decoration: none; transition: background 0.18s ease; } .user-dropdown-item:hover { background: var(--hp-fill-hover); color: var(--hp-text); } .user-dropdown-item i { width: 1.125rem; font-size: 0.8125rem; color: var(--hp-label); text-align: center; } .user-dropdown-divider { height: 0.5px; margin: 0.25rem 0.625rem; background: var(--hp-separator); } .user-avatar-initial { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #ff6b9d 0%, #c850c0 100%); color: #fff; font-family: var(--hp-font); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.02em; } .top-nav .user-name { font-family: var(--hp-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--hp-text); } .currency-dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem 0.625rem; border-bottom: none; } .currency-dropdown-header h4 { margin: 0; font-family: var(--hp-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--hp-text); } .currency-dropdown-close { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 50%; background: var(--hp-fill); color: var(--hp-label); font-size: 1.125rem; line-height: 1; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .currency-dropdown-close:hover { background: #efeff4; color: var(--hp-text); } .currency-search { padding: 0 0.75rem 0.625rem; border-bottom: none; } .currency-search-input { width: 100%; padding: 0.5625rem 2.25rem 0.5625rem 0.75rem; border: none; border-radius: 10px; background: var(--hp-fill); box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.08); font-family: var(--hp-font); font-size: 0.875rem; font-weight: 400; letter-spacing: -0.01em; color: var(--hp-text); transition: background 0.18s ease, box-shadow 0.18s ease; } .currency-search-input::placeholder { color: var(--hp-label); } .currency-search-input:focus { outline: none; background: #efeff4; box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.12), 0 0 0 3px rgba(13, 174, 156, 0.12); } .currency-search i { right: 1.375rem; font-size: 0.8125rem; color: var(--hp-label); pointer-events: none; } .currency-list { max-height: min(300px, calc(100vh - 12rem)); padding: 0.25rem 0.375rem 0.5rem; scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, 0.22) transparent; } .currency-list::-webkit-scrollbar { width: 4px; } .currency-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(60, 60, 67, 0.22); } .currency-section { padding: 0.125rem 0; } .currency-section-title { padding: 0.375rem 0.625rem 0.25rem; font-family: var(--hp-font); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hp-label); } .currency-separator { height: 0.5px; margin: 0.25rem 0.625rem; background: var(--hp-separator); } .currency-option { gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 10px; transition: background 0.18s ease; } .currency-option:hover { background: var(--hp-fill-hover); } .currency-option.selected { background: rgba(13, 174, 156, 0.08); } .currency-option-symbol { width: 1.375rem; font-family: var(--hp-font); font-size: 0.9375rem; font-weight: 600; color: var(--hp-text); text-align: center; } .currency-option-code { min-width: 2.25rem; font-family: var(--hp-font); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--hp-text); } .currency-option-name { flex: 1; font-family: var(--hp-font); font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.01em; color: var(--hp-label); } .currency-option .fa-check { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: auto; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.5625rem; } .currency-loading, .currency-error { padding: 1rem 0.75rem; font-family: var(--hp-font); font-size: 0.8125rem; color: var(--hp-label); text-align: center; } .top-nav .currency-selector-btn[aria-expanded="true"] i { transform: rotate(180deg); } @media (max-width: 768px) { .header-popover.currency-dropdown { position: fixed; top: calc(56px + 0.5rem); right: 0.875rem; left: 0.875rem; width: auto; max-height: min(420px, calc(100vh - 5rem)); transform-origin: top center; transform: translate3d(0, -12px, 0) scale(0.98); } .header-popover.currency-dropdown.active { transform: translate3d(0, 0, 0) scale(1); } .header-popover.user-dropdown { right: 0; transform-origin: top right; } }