/* ============================================================ OMMRI Flight Console — design system Urbanist + Material Symbols · 3 directions × light/dark ============================================================ */ /* Urbanist (Google Fonts hosted) */ @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap'); /* Material Symbols Rounded */ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* Disable double-tap-to-zoom (and the legacy 300ms tap delay) system-wide on touch devices. A gesture is only allowed if every ancestor up to the root permits it, so setting this on covers the whole document. `manipulation` keeps scrolling/panning and pinch-to-zoom (accessibility) — it removes only the non-standard double-tap-zoom gesture. */ html { touch-action: manipulation; } :root { --accent: #E23A3A; --radius: 18px; --r-sm: calc(var(--radius) * 0.5); --r-lg: calc(var(--radius) * 1.35); --font: 'Urbanist', ui-sans-serif, system-ui, sans-serif; /* derived accent ramp */ --accent-deep: color-mix(in srgb, var(--accent) 78%, #000); --accent-press: color-mix(in srgb, var(--accent) 65%, #000); --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface-2)); --accent-tint: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); --on-accent: #fff; /* status */ --ok: #1f9d6b; --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--surface-2)); --warn: #d98a16; --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface-2)); --danger: #d83b3b; --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--surface-2)); --info: #3b6fd8; --gold: #c79a3e; } /* ---------- DIRECTION: AIRY (clean & light) ---------- */ [data-direction="airy"] { --surface: #fbfdff; --surface-2: #FFFFFF; --surface-3: #FAFBFC; --ink: #161A20; --ink-soft: #5E6671; --ink-faint: #98A0AB; --line: #E7EBF0; --line-soft: #F0F3F6; --header-bg: rgba(255,255,255,0.82); --shadow-sm: 0 1px 2px rgba(20,30,50,.05), 0 2px 6px rgba(20,30,50,.04); --shadow-md: 0 4px 14px rgba(20,30,50,.07), 0 12px 32px rgba(20,30,50,.06); --shadow-lg: 0 18px 50px rgba(20,30,50,.12); --canvas-bg: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%), var(--surface); --h-weight: 700; --display-weight: 800; --logo-filter: none; } /* ---------- DIRECTION: BOLD (high-contrast, big type) ---------- */ [data-direction="bold"] { --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F6F6F7; --ink: #0E0E11; --ink-soft: #585860; --ink-faint: #9A9AA2; --line: #E4E4E8; --line-soft: #EFEFF1; --header-bg: rgba(255,255,255,0.9); --radius: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 6px 22px rgba(0,0,0,.09); --shadow-lg: 0 24px 60px rgba(0,0,0,.16); --canvas-bg: var(--surface); --h-weight: 800; --display-weight: 900; --logo-filter: none; } /* ---------- DIRECTION: SPIRITUAL (warm, serene) ---------- */ [data-direction="spiritual"] { --surface: #F4EDE1; --surface-2: #FFFCF6; --surface-3: #FBF5EA; --ink: #2C2114; --ink-soft: #7C6A52; --ink-faint: #AC9C84; --line: #E7DAC4; --line-soft: #F0E7D6; --header-bg: rgba(255,252,246,0.84); --radius: 22px; --shadow-sm: 0 1px 2px rgba(80,60,30,.05), 0 2px 8px rgba(80,60,30,.05); --shadow-md: 0 6px 22px rgba(90,65,30,.09), 0 14px 36px rgba(90,65,30,.07); --shadow-lg: 0 22px 56px rgba(90,65,30,.16); --gold: #BF9233; --canvas-bg: radial-gradient(1000px 520px at 88% -8%, color-mix(in srgb,var(--gold) 16%, transparent), transparent 58%), radial-gradient(900px 480px at -5% 8%, color-mix(in srgb,var(--accent) 8%, transparent), transparent 55%), var(--surface); --h-weight: 700; --display-weight: 800; --logo-filter: none; } /* ---------- DARK MODE overlays ---------- */ [data-mode="dark"][data-direction="airy"] { --surface: #0D1117; --surface-2: #161B23; --surface-3: #11161D; --ink: #EAEEF4; --ink-soft: #9AA4B2; --ink-faint: #69737F; --line: #232B36; --line-soft: #1B222C; --header-bg: rgba(13,17,23,0.78); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 26px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); --canvas-bg: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%), var(--surface); --logo-filter: invert(0); } [data-mode="dark"][data-direction="bold"] { --surface: #08080A; --surface-2: #141417; --surface-3: #0E0E11; --ink: #F4F4F6; --ink-soft: #9C9CA6; --ink-faint: #66666F; --line: #232327; --line-soft: #1A1A1E; --header-bg: rgba(8,8,10,0.86); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 8px 26px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px rgba(0,0,0,.7); --canvas-bg: var(--surface); } [data-mode="dark"][data-direction="spiritual"] { --surface: #15110A; --surface-2: #201A11; --surface-3: #1A150D; --ink: #F1E8D8; --ink-soft: #B6A487; --ink-faint: #837258; --line: #322817; --line-soft: #271F12; --header-bg: rgba(21,17,10,0.82); --gold: #D8AC4C; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 8px 26px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px rgba(0,0,0,.65); --canvas-bg: radial-gradient(1000px 520px at 88% -8%, color-mix(in srgb,var(--gold) 18%, transparent), transparent 58%), radial-gradient(900px 480px at -5% 8%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 55%), var(--surface); } [data-mode="dark"] { --on-accent: #fff; } [data-mode="dark"] .logo-img { content: none; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #root { min-height: 100%; } .app-canvas { background: var(--canvas-bg); min-height: 100vh; } ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); } /* Spiritual pattern overlay (subtle geometric) */ .pattern-fade { position: relative; } [data-direction="spiritual"] .pattern-fade::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23bf9233' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 60px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .font-display { font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.02; } .font-h { font-weight: var(--h-weight); letter-spacing: -0.01em; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .tracking-label { letter-spacing: 0.12em; text-transform: uppercase; } /* ============================================================ SURFACES & CARDS ============================================================ */ .surface { background: var(--surface-2); } .card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-flat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); } .card-hover { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } [data-direction="bold"] .card { border-width: 1.5px; } .divider { height: 1px; background: var(--line); border: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font); font-weight: 700; font-size: .95rem; padding: .72rem 1.25rem; border-radius: calc(var(--radius) * 0.7); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-primary:hover { background: var(--accent-deep); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-3); border-color: color-mix(in srgb,var(--accent) 40%, var(--line)); } .btn-soft { background: var(--accent-soft); color: var(--accent-deep); } .btn-soft:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); } [data-mode="dark"] .btn-soft { color: color-mix(in srgb, var(--accent) 55%, #fff); } .btn-dark { background: var(--ink); color: var(--surface-2); } .btn-dark:hover { opacity: .9; } .btn-lg { padding: .95rem 1.6rem; font-size: 1.02rem; } .btn-sm { padding: .5rem .85rem; font-size: .85rem; } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn-block { width: 100%; } /* icon button */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: calc(var(--radius) * 0.55); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; transition: all .18s ease; } .iconbtn:hover { color: var(--ink); border-color: color-mix(in srgb,var(--accent) 40%, var(--line)); background: var(--surface-3); } /* ============================================================ CHIPS / BADGES / PILLS ============================================================ */ .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px; font-weight: 600; font-size: .85rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; transition: all .16s ease; } .chip:hover { border-color: color-mix(in srgb,var(--accent) 45%, var(--line)); color: var(--ink); } .chip-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chip-active:hover { color: var(--on-accent); } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .62rem; border-radius: 999px; font-weight: 700; font-size: .72rem; letter-spacing: .02em; line-height: 1; } .badge .material-symbols-rounded { font-size: 14px; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: color-mix(in srgb,var(--info) 14%, var(--surface-2)); color: var(--info); } .badge-stripe { background: color-mix(in srgb, #4d0191 14%, var(--surface-2)); color: #793bd8; } .badge-billplz { background: #0247ff; color: #fff; } .badge-pending { background: #ffe6b6; color: #946f3a; } .badge-neutral { background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line); } .badge-accent { background: var(--accent-soft); color: var(--accent-deep); } [data-mode="dark"] .badge-accent { color: color-mix(in srgb, var(--accent) 55%, #fff); } .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } /* ============================================================ FORM CONTROLS ============================================================ */ .field-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; } .input, .select { width: 100%; font-family: var(--font); font-size: .95rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: calc(var(--radius) * 0.6); padding: .72rem .9rem; transition: border-color .16s ease, box-shadow .16s ease; outline: none; } .input::placeholder { color: var(--ink-faint); font-weight: 500; } /* Urbanist lacks the password mask glyph (renders as tofu boxes) — use a system font for masked input so the dots render; the placeholder stays in the UI font. */ input[type="password"] { font-family: Verdana, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } input[type="password"]::placeholder { font-family: var(--font); } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 16%, transparent); } .input-lg { padding: .9rem 1rem; font-size: 1rem; } select.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem; } /* iOS Safari gives input[type=date] a native intrinsic size + centered value, so it ignores width:100% and renders narrower/centered vs text inputs. Strip the native appearance ONLY on iOS (the @supports query is iOS-only) so it fills the container like every other .input — desktop Chrome keeps its calendar-picker icon untouched. */ @supports (-webkit-touch-callout: none) { .input[type="date"], .input[type="time"], .input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 100%; } /* With appearance:none and NO value, iOS gives the value pseudo zero height, collapsing the box. Reserve a normal text line so an empty date field stays the same height as text inputs. */ .input[type="date"]::-webkit-date-and-time-value, .input[type="time"]::-webkit-date-and-time-value, .input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; line-height: 1.2; } } /* ============================================================ SEAT MAP ============================================================ */ .seat { width: 30px; height: 30px; border-radius: 8px 8px 5px 5px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ink-faint); cursor: pointer; position: relative; background: var(--surface-3); transition: all .12s ease; user-select: none; } .seat:hover:not(.seat-occupied):not(.seat-blocked) { border-color: var(--accent); transform: translateY(-1px); } .seat-available { background: var(--surface-2); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ink-soft); } .seat-selected { background: var(--accent); border-color: var(--accent-deep); color: var(--on-accent); box-shadow: 0 3px 8px color-mix(in srgb,var(--accent) 40%, transparent); } .seat-occupied { background: var(--surface); border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; opacity: .55; } .seat-occupied::after { content: ""; position: absolute; width: 14px; height: 1.5px; background: var(--ink-faint); transform: rotate(-45deg); } .seat-pending { background: var(--warn-soft); border: 1.5px dashed var(--warn); color: var(--warn); cursor: not-allowed; } .seat-blocked { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 3px, var(--line) 3px, var(--line) 5px); border-color: var(--line); cursor: not-allowed; color: transparent; } .seat-biz { border-radius: 9px; } /* seat style variant: rounded pods */ [data-seatstyle="pod"] .seat { border-radius: 999px 999px 9px 9px; } [data-seatstyle="pod"] .seat-biz { border-radius: 999px; } /* seat style variant: minimal squares */ [data-seatstyle="square"] .seat { border-radius: 4px; } /* ============================================================ MISC ============================================================ */ .scroll-thin::-webkit-scrollbar { width: 9px; height: 9px; } .scroll-thin::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; border: 2px solid var(--surface-2); } .scroll-thin::-webkit-scrollbar-track { background: transparent; } .fade-in { animation: fadeIn .4s ease both; } .rise-in { animation: riseIn .45s cubic-bezier(.2,.7,.2,1) both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .stagger > * { animation: riseIn .5s cubic-bezier(.2,.7,.2,1) both; } .stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s} .stagger > *:nth-child(3){animation-delay:.1s}.stagger > *:nth-child(4){animation-delay:.14s} .stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s} @media (prefers-reduced-motion: reduce){ .fade-in,.rise-in,.stagger>*{animation:none!important} } .logo-img { height: 30px; width: auto; display: block; filter: var(--logo-filter); } .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .ms-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } /* progress rail */ .rail { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .rail > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.2,1); } /* skeleton shimmer for flight search */ .shimmer { background: linear-gradient(90deg, var(--surface-3) 25%, var(--line-soft) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: sh 1.4s ease infinite; } @keyframes sh { 0%{background-position:100% 0} 100%{background-position:0 0} } /* ============================================================ APP SHELL (server-rendered layout) ============================================================ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 252px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; z-index: 50; overflow-y: auto; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: calc(var(--radius)*0.55); border: none; cursor: pointer; background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 14px; text-align: left; transition: all .16s; text-decoration: none; width: 100%; } .sidebar-link:hover { background: var(--surface-3); color: var(--ink); } .sidebar-link.active { background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: 0 6px 16px color-mix(in srgb,var(--accent) 28%, transparent); } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .content { padding: 26px; max-width: 1200px; width: 100%; margin: 0 auto; } .nav-group-label { font-size: 10px; color: var(--ink-faint); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 16px 12px 8px; } /* mobile drawer */ .sidebar-overlay { display: none; } @media (max-width: 1024px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; } } .menu-btn { display: none; } @media (max-width: 1024px) { .menu-btn { display: inline-flex; } } /* ============================================================ AUTH SCREEN ============================================================ */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .auth-aside { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-aside::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 999px; border: 60px solid rgba(255,255,255,.08); } .auth-form-col { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--surface); } @media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } } /* ============================================================ TABLES ============================================================ */ .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 800; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .table th.text-right { text-align: right; } .table th.text-center { text-align: center; } /* Travel Companies — responsive: table on desktop, stacked cards on mobile */ .companies-mobile { display: none; flex-direction: column; gap: 12px; } .company-card { display: block; padding: 16px; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .company-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .company-card .company-card-grid { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-size: 12.5px; } .company-card .kv-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 800; margin-bottom: 3px; } @media (max-width: 768px) { .companies-desktop { display: none; } .companies-mobile { display: flex; } } @media (max-width: 360px) { .company-card .company-card-grid { grid-template-columns: 1fr; } } /* flight card perks: inline chips on desktop, "What's included" button on mobile */ .flight-perks { display: flex; align-items: center; flex-wrap: wrap; } .flight-perks-btn { display: none; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 12px 14px; text-align: left; color: var(--ink); cursor: pointer; background: var(--surface-3); border: 1px solid var(--line); border-radius: calc(var(--radius) * .55); transition: border-color .15s ease; } .flight-perks-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .flight-perks-btn > .material-symbols-rounded { color: var(--ink-faint); flex-shrink: 0; } .flight-perks-btn.is-always { display: flex; } /* show on every screen (booking confirm) */ /* booking terms & conditions (rendered in the modal) */ .terms-body { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .terms-body .terms-h3 { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--ink); margin: 0 0 6px; } .terms-body .terms-h4 { font-family: var(--font); font-weight: 800; font-size: .92rem; color: var(--ink); margin: 16px 0 6px; } .terms-body .terms-p { margin: 0 0 8px; } .terms-body .terms-ul { margin: 0 0 10px; padding-left: 18px; } .terms-body .terms-ul li { margin: 3px 0; } .terms-body strong { color: var(--ink); font-weight: 800; } /* payment gateway webhook URL rows */ .webhook-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .webhook-url { display: flex; align-items: center; gap: 8px; max-width: 100%; background: var(--surface-3); border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); padding: 7px 7px 7px 12px; } .webhook-url code { font-size: 12px; word-break: break-all; color: var(--ink); font-weight: 600; } .webhook-url .btn { flex-shrink: 0; } /* booking detail layout: wider itinerary column, payment rail; stacks on mobile */ .book-detail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; } @media (max-width: 900px) { .book-detail { grid-template-columns: 1fr; } } .perks-list { display: flex; flex-direction: column; } .perks-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; } .perks-row:last-child { border-bottom: none; } .perks-row > span { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-weight: 600; } .perks-row b { font-weight: 800; white-space: nowrap; } @media (max-width: 640px) { .flight-perks { display: none; } .flight-perks-btn { display: flex; } } .table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-weight: 600; } .table tr:hover td { background: var(--surface-3); } .table-wrap { overflow-x: auto; } /* grids */ .grid-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-2 { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; } .grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* flash toasts */ .flash { padding: 12px 16px; border-radius: calc(var(--radius)*0.6); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; border: 1px solid; } .flash-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb,var(--ok) 30%, transparent); } .flash-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb,var(--warn) 30%, transparent); } .flash-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb,var(--danger) 30%, transparent); } .flash-info { background: color-mix(in srgb,var(--info) 12%, var(--surface-2)); color: var(--info); border-color: color-mix(in srgb,var(--info) 30%, transparent); } /* helpers */ .p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px} .mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px} .mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px} .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px} .flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1} .items-center{align-items:center}.items-start{align-items:flex-start} .justify-between{justify-content:space-between}.justify-center{justify-content:center} .flex-wrap{flex-wrap:wrap}.text-center{text-align:center}.text-right{text-align:right} .w-full{width:100%}.hidden{display:none} @media(min-width:768px){.md\:inline{display:inline}.md\:flex{display:flex}.md\:block{display:block}.md\:hidden{display:none}} @media(min-width:640px){.sm\:inline-flex{display:inline-flex}} /* seat-map container */ .seat-row { display: flex; align-items: center; gap: 6px; justify-content: center; } .aisle { width: 22px; } .cabin-block { padding: 16px; border-radius: var(--radius); background: var(--surface-3); border: 1px solid var(--line); } /* logo light/dark switch */ .logo-dark{display:none} [data-mode="dark"] .logo-light{display:none} [data-mode="dark"] .logo-dark{display:block} /* booking two-column layout — collapses + un-sticks on mobile */ .book-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start} .book-rail{position:sticky;top:90px} @media (max-width:880px){ .book-grid{grid-template-columns:minmax(0,1fr)} .book-rail{position:static} } /* booking stepper + detail rows on mobile */ .meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media (max-width:600px){ .meta-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .step-label{display:none} } .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:600px){ .info-grid{grid-template-columns:repeat(2,1fr)} } /* ===== LOPA seat map ===== */ .lopa{max-width:760px;margin:0 auto} .lopa-cockpit{max-width:300px;margin:0 auto;background:var(--surface-2);border:1px solid var(--line);border-bottom:none;border-radius:24px 24px 0 0;padding:18px;text-align:center} .lopa-cockpit-seats{display:flex;gap:22px;justify-content:center;margin-bottom:8px} .lopa-cockpit-seats span{width:46px;height:30px;background:var(--surface-3);border-radius:10px 10px 4px 4px} .lopa-cockpit-label{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--ink-faint)} .lopa-divider{display:flex;align-items:center;gap:10px;text-align:center;font-size:11px;letter-spacing:.14em;font-weight:800;margin:14px 0} .lopa-divider span{padding:0 10px;white-space:nowrap} .lopa-divider::before,.lopa-divider::after{content:'';height:1px;flex:1;background:var(--line)} .lopa-divider-exit{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);padding:11px 0;border-radius:10px;justify-content:center} .lopa-divider-exit::before,.lopa-divider-exit::after{display:none} .lopa-divider-galley{color:var(--ink-faint)} .lopa-classlabel{display:block;width:max-content;margin:10px auto 14px;padding:.4rem 1.1rem;border-radius:999px;background:var(--surface-3);color:var(--ink-faint);font-size:12px;font-weight:800;letter-spacing:.12em} .lopa-cabin{display:flex;justify-content:center;margin-bottom:6px} .lopa-grid{display:grid;gap:6px;justify-content:center;justify-items:center;align-items:center} .lopa-col{text-align:center;font-size:11px;font-weight:700;color:var(--accent);opacity:.55;height:16px} .lopa-rownum{text-align:center;font-size:10px;font-weight:700;color:var(--ink-faint)} .lopa-gap{width:40px;height:30px} /* LOPA group-based rows (centers partial rows) */ .lopa-rows{display:flex;flex-direction:column;gap:6px;align-items:center} .lopa-rowline{display:flex;align-items:center;gap:6px;justify-content:center} .lopa-group{display:flex;gap:6px;justify-content:center;align-items:center;flex-shrink:0} .lopa-colh{width:40px;text-align:center;font-size:11px;font-weight:700;color:var(--accent);opacity:.55} .lopa .seat{width:40px;height:36px;font-size:10px} /* prevent wide LOPA from blowing out the mobile layout */ .book-grid>*{min-width:0} #seat-grid{overflow:hidden;max-width:100%} /* fixed-width row-number columns so seat columns line up perfectly */ .lopa-rownum{width:26px;flex:0 0 26px;text-align:center;font-variant-numeric:tabular-nums} /* full-width Quick block / Seat map toggle on mobile */ @media (max-width:600px){ .mode-toggle{width:100%} .mode-toggle .mode-btn{flex:1;justify-content:center} } /* onboard amenity chips */ .amenity-chips{display:flex;flex-wrap:wrap;gap:8px} .amenity-chip{display:inline-flex;align-items:center;gap:5px;padding:.34rem .7rem;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-soft)} .amenity-chip .material-symbols-rounded{font-size:15px;color:var(--accent)} /* aircraft config form layout */ .cfg-hint{font-size:11.5px;color:var(--ink-faint);font-weight:600;line-height:1.45} .cfg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cfg-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .cfg-sub{background:var(--surface-3);border:1px solid var(--line);border-radius:calc(var(--radius)*.6);padding:14px 16px} .cfg-mini{font-size:11px;color:var(--ink-faint);font-weight:700} .cfg-x{font-weight:800;color:var(--ink-faint);padding-bottom:10px} @media (max-width:860px){ .cfg-grid4{grid-template-columns:repeat(2,1fr)} .cfg-grid2{grid-template-columns:1fr} } /* aircraft builder section controls — move (neutral) vs remove (danger) */ .sec-mv{color:var(--ink-soft)} .sec-mv:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .sec-rm{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line));font-size:16px} .sec-rm:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)} /* compact amenity icons on flight cards */ .amenity-icons{display:inline-flex;align-items:center;gap:9px;color:var(--ink-faint)} .amenity-icons .material-symbols-rounded{font-size:18px} /* segmented control (trip type) */ .seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:4px;gap:4px} .seg-opt{position:relative;cursor:pointer;display:block} .seg-opt input{position:absolute;opacity:0;width:0;height:0} .seg-opt span{display:flex;align-items:center;gap:6px;padding:9px 20px;border-radius:10px;font-weight:700;font-size:13px;color:var(--ink-soft);transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap} .seg-opt span .material-symbols-rounded{font-size:16px} .seg-opt input:checked+span{background:var(--accent);color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.14)} .seg-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:640px){.seg{display:flex;width:100%}.seg-opt{flex:1}.seg-opt span{justify-content:center;padding:10px 8px}} /* trip-type: force selected icon white (icon() helper sets its own color) */ .seg-opt input:checked+span, .seg-opt input:checked+span .material-symbols-rounded, .seg-opt input:checked+span [class*='material-symbols']{color:#fff !important;fill:#fff !important} /* 24-hour popup time picker */ .tp-pop{position:absolute;z-index:1200;background:var(--surface);border:1px solid var(--surface-3);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:flex;gap:4px} .tp-pop:before{content:'';position:absolute;top:-6px;left:22px;width:11px;height:11px;background:var(--surface);border-left:1px solid var(--surface-3);border-top:1px solid var(--surface-3);transform:rotate(45deg);border-radius:2px 0 0 0} .tp-col{display:flex;flex-direction:column;width:74px} .tp-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:2px 0 6px} .tp-scroll{overflow-y:auto;max-height:198px;display:flex;flex-direction:column;gap:3px;padding:0 3px;scrollbar-width:thin} .tp-scroll::-webkit-scrollbar{width:6px} .tp-scroll::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px} .tp-opt{border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;color:var(--ink-soft);padding:8px 0;border-radius:9px;cursor:pointer;text-align:center;font-variant-numeric:tabular-nums;transition:background .1s,color .1s} .tp-opt:hover{background:var(--surface-3);color:var(--ink)} .tp-opt.sel{background:var(--accent);color:var(--on-accent)} /* keep badges on one line (mobile was breaking 'A330-300' / 'Round trip') */ .badge{white-space:nowrap;flex-shrink:0} /* booking cabin row — give the stepper breathing room, stack on mobile */ .cabin-row .qty-stepper{flex-shrink:0} @media (max-width:560px){ .cabin-row{flex-direction:column;align-items:stretch !important} .cabin-row .qty-stepper{align-self:flex-start} } /* full-width stepper when stacked on mobile */ @media (max-width:560px){ .cabin-row .qty-stepper{align-self:stretch;width:100%;justify-content:space-between} } /* ============================================================ Confirm modal + toasts + danger button (AJAX UI) Added to replace native confirm()/alert() dialogs. ============================================================ */ .btn-danger { background: var(--danger); color:#fff; border-color: var(--danger); box-shadow: 0 6px 16px color-mix(in srgb, var(--danger) 30%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 38%, transparent); } .modal-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(120% 120% at 50% 0%, rgba(20,26,40,.42), rgba(10,13,22,.6)); backdrop-filter: blur(7px) saturate(1.08); -webkit-backdrop-filter: blur(7px) saturate(1.08); opacity: 0; transition: opacity .22s ease; } .modal-backdrop.show { opacity: 1; } .modal { width: 100%; max-width: 400px; text-align: center; background: var(--surface-2); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 7%, var(--line)); border-radius: calc(var(--radius) * 1.6); box-shadow: 0 28px 70px -24px rgba(12,16,26,.5), 0 10px 28px -16px rgba(12,16,26,.32), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); padding: 28px 26px 24px; transform: translateY(14px) scale(.95); transition: transform .28s cubic-bezier(.2,.95,.3,1.25); } .modal-backdrop.show .modal { transform: none; } .modal-icn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 2px auto 16px; } .modal-icn .material-symbols-rounded { font-size: 30px; } .modal-icn.is-accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); color: var(--accent); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 45%, transparent); } .modal-icn.is-danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 24%, transparent), color-mix(in srgb, var(--danger) 7%, transparent)); color: var(--danger); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--danger) 45%, transparent); } /* header icon badge for content modals (What's included, terms, aircraft, …) */ .modal-hicn { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .modal-hicn .material-symbols-rounded { font-size: 23px; } .modal-hicn.is-accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); color: var(--accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 50%, transparent); } .modal-hicn.is-danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 24%, transparent), color-mix(in srgb, var(--danger) 7%, transparent)); color: var(--danger); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--danger) 50%, transparent); } .modal-title { font-family: var(--font); font-weight: 800; font-size: 1.18rem; margin: 0 0 6px; } .modal-msg { color: var(--ink-soft); font-weight: 600; font-size: .95rem; line-height: 1.5; margin: 0 0 20px; } .modal-input { width: 100%; margin: 0 0 18px; padding: 11px 14px; font-family: var(--font); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-align: center; color: var(--ink); background: var(--surface-3); border: 1.5px solid var(--line); border-radius: calc(var(--radius) * .55); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .modal-input::placeholder { letter-spacing: normal; font-weight: 600; color: var(--ink-faint); } .modal-input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); } .modal-actions { display: flex; gap: 10px; justify-content: center; } .modal-actions .btn { min-width: 108px; } .modal-actions .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } body.modal-open { overflow: hidden; } .toast-host { position: fixed; z-index: 140; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; pointer-events: auto; min-width: 240px; max-width: 380px; padding: 13px 16px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ink-faint); border-radius: calc(var(--radius) * .6); box-shadow: var(--shadow-lg); font-weight: 700; font-size: .9rem; opacity: 0; transform: translateX(16px); transition: opacity .25s ease, transform .25s ease; } .toast.show { opacity: 1; transform: none; } .toast-ok { border-left-color: var(--ok); } .toast-ok .material-symbols-rounded { color: var(--ok); } .toast-warn { border-left-color: var(--warn); } .toast-warn .material-symbols-rounded { color: var(--warn); } .toast-danger { border-left-color: var(--danger); } .toast-danger .material-symbols-rounded { color: var(--danger); } .toast-info { border-left-color: var(--info); } .toast-info .material-symbols-rounded { color: var(--info); } [data-confirm].is-busy { opacity: .55; pointer-events: none; } /* archived (soft-deleted) table rows: dimmed, with archive/restore toggle */ tr.row-archived > td { opacity: .5; transition: opacity .2s ease; } tr.row-archived:hover > td { opacity: 1; } .act-restore { display: none; } tr.row-archived .act-archive { display: none; } tr.row-archived .act-restore { display: inline-flex; } .iconbtn.is-disabled { opacity: .38; cursor: not-allowed; } .iconbtn.is-disabled:hover { background: transparent; border-color: var(--line); } /* number stepper (− / +) — hide the browser's native spin arrows */ .num-stepper input::-webkit-outer-spin-button, .num-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .num-stepper input { -moz-appearance: textfield; appearance: textfield; } .num-stepper .iconbtn { cursor: pointer; transition: filter .12s ease; } .num-stepper .iconbtn:hover { filter: brightness(.94); } /* baggage steppers match the adjacent kg/piece .input height */ .cfg-sub .num-stepper { height: 46px; } .cfg-sub .input { height: 46px; } @media (max-width: 560px) { .toast-host { left: 14px; right: 14px; bottom: 14px; } .toast { max-width: none; } }