/* ========================================================= Neway Flight Ops · Quote Wizard styles.css (Light + Dark mode, big fields, readable buttons) - Auto theme via prefers-color-scheme - Optional manual override: / "light" - Autocomplete: Option A (inline, per input) — NO radius ========================================================= */ /* ========================= THEME TOKENS ========================= */ :root { color-scheme: light dark; /* Background image + overlay */ --bg-img: url("./bg.webp"); --bg-dim: rgba(255, 255, 255, .62); /* Light (default) */ --bg: #ffffff; --surface: #ffffff; --surface2: #f6f7f9; --ink: #0b1220; --muted: #5b6678; --line: #e5e7eb; --line2: #d7dce3; --brand: #0f5b3e; --brand2: #0b3f2b; --danger: #b42318; --shadow: 0 10px 30px rgba(16, 24, 40, .08); --shadow2: 0 6px 18px rgba(16, 24, 40, .08); --radius: 0px; /* NO radius */ --focus: 0 0 0 3px rgba(15, 91, 62, .18); --maxw: 1080px; --pad: 18px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; /* sizing */ --field-h: 48px; --field-font: 16px; /* 16px avoids iOS zoom */ --field-pad-x: 14px; --field-pad-y: 12px; /* derived */ --topbar-bg: rgba(255, 255, 255, .92); --hero-g1: rgba(15, 91, 62, .06); --hero-g2: rgba(15, 91, 62, .10); --hero-g3: rgba(11, 63, 43, .08); --overlay-bg: rgba(255, 255, 255, .72); --modal-backdrop: rgba(16, 24, 40, .45); --hover: rgba(15, 91, 62, .06); --green: #295d4e } #resultAnchor { scroll-margin-top: 80px; } @media (prefers-color-scheme: dark) { :root { --bg-dim: rgba(0, 0, 0, .48); --bg: #0b0f14; --surface: #121923; --surface2: #0f1620; --ink: #e8eef7; --muted: #a7b3c6; --line: #263142; --line2: #303c4f; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow2: 0 6px 18px rgba(0, 0, 0, .35); --topbar-bg: rgba(18, 25, 35, .88); --hero-g1: rgba(15, 91, 62, .12); --hero-g2: rgba(15, 91, 62, .20); --hero-g3: rgba(11, 63, 43, .16); --overlay-bg: rgba(0, 0, 0, .45); --modal-backdrop: rgba(0, 0, 0, .55); --hover: rgba(15, 91, 62, .18); --green:#4fd1a5; } } :root[data-theme="dark"] { color-scheme: dark; --bg-dim: rgba(0, 0, 0, .48); --bg: #0b0f14; --surface: #121923; --surface2: #0f1620; --ink: #e8eef7; --muted: #a7b3c6; --line: #263142; --line2: #303c4f; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow2: 0 6px 18px rgba(0, 0, 0, .35); --topbar-bg: rgba(18, 25, 35, .88); --hero-g1: rgba(15, 91, 62, .12); --hero-g2: rgba(15, 91, 62, .20); --hero-g3: rgba(11, 63, 43, .16); --overlay-bg: rgba(0, 0, 0, .45); --modal-backdrop: rgba(0, 0, 0, .55); --hover: rgba(15, 91, 62, .18); } /* ========================= BASE ========================= */ * { box-sizing: border-box; min-width: 0; } html, body { height: 100%; overflow-x: hidden; } body { margin: 0; font-family: var(--font); color: var(--ink); background-color: var(--bg); background-image: var(--bg-img); background-size: cover; background-position: center; background-repeat: no-repeat; } #resultAnchor { scroll-margin-top: 80px; } @supports (-webkit-touch-callout: none) { body { background-attachment: scroll; } } /* Reliable full-page dim overlay (behind content, above bg) */ body::before { content: ""; position: fixed; inset: 0; background: var(--bg-dim); pointer-events: none; z-index: 0; } /* Ensure all page content sits above the overlay */ body > * { position: relative; z-index: 1; } /* ========================= TOPBAR ========================= */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar .inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; } .brand .logo { width: 34px; height: 34px; background: var(--surface); display: grid; place-items: center; font-weight: 800; letter-spacing: .5px; color: var(--brand); flex: 0 0 auto; } .brand .logo.logo-wide { width: auto; height: 44px; padding: 2px 2px; } .brand .txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand .txt strong { font-size: 13px; letter-spacing: .3px; } .brand .txt span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; } @media (max-width: 511px) { .brand .txt small { display: none; } } .chip { border: 1px solid var(--line); padding: 7px 10px; font-size: 12px; color: var(--muted); background: var(--surface); white-space: nowrap; flex: 0 0 auto; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 520px) { .topbar .inner { padding: 12px 14px; } .chip { max-width: 100%; } .brand .txt span { max-width: 70vw; } } /* TOP BAR OP SWITCH */ .opseg { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } .opseg .btn.sm { height: 34px; padding: 0 12px; } /* ========================= HERO / WRAP / PANEL ========================= */ .hero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--hero-g1), rgba(255, 255, 255, 0) 75%), radial-gradient(900px 300px at 20% 0%, var(--hero-g2), transparent 60%), radial-gradient(900px 300px at 80% 0%, var(--hero-g3), transparent 60%); } .hero .inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hero h1 { margin: 0; font-size: 22px; letter-spacing: .6px; text-transform: uppercase; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 34px; display: grid; grid-template-columns: 1fr; gap: 18px; } .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow2); border-radius: var(--radius); position: relative; } .panel .hd { padding: 14px var(--pad); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .panel .hd .title strong { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .panel .hd .title span { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; } .panel .bd { padding: 14px var(--pad) 16px; } /* ========================= STEPPER ========================= */ .stepper { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding-bottom: 6px; max-width: 100%; } .step { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 8px 10px; background: var(--surface); } .step .dot { width: 18px; height: 18px; border: 1px solid var(--line2); display: grid; place-items: center; font-weight: 700; color: var(--muted); background: var(--surface); } .step.active { border-color: rgba(15, 91, 62, .35); color: var(--ink); } .step.active .dot { border-color: rgba(15, 91, 62, .35); color: var(--brand); } .step.done { border-color: rgba(15, 91, 62, .35); color: var(--ink); } .step.done .dot { background: rgba(15, 91, 62, .10); border-color: rgba(15, 91, 62, .35); color: var(--brand); } /* HIDE Stepper + panel header text (per request) */ #stepper { display: none !important; } #panelTitle, #panelSub { display: none !important; } /* ========================= GRID ========================= */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px; } .col-12 { grid-column: span 12; } .col-6 { grid-column: span 6; } @media (max-width: 760px) { .col-6 { grid-column: span 12; } } /* ========================= FORMS (BIGGER + READABLE) ========================= */ label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; } input, button, select, textarea { font-family: var(--font); } input, select, textarea { width: 100%; border: 1px solid var(--line2); border-radius: 0; outline: none; background: var(--surface); color: var(--ink); caret-color: var(--ink); font-size: var(--field-font); line-height: 1.25; -webkit-text-fill-color: var(--ink); } input, select { height: var(--field-h); padding: 0 var(--field-pad-x); } textarea { min-height: 160px; padding: var(--field-pad-y) var(--field-pad-x); resize: vertical; } /* Placeholder / preview text = gray (robust across browsers) */ input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; /* Safari/iOS often ignores low opacity */ -webkit-text-fill-color: var(--muted); } /* Vendor fallbacks (older Safari/Firefox) */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); } input::-moz-placeholder, textarea::-moz-placeholder { color: var(--muted); opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { border-color: rgba(15, 91, 62, .45); box-shadow: var(--focus); } input:disabled, select:disabled, textarea:disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; } /* iOS date compact display helper */ input[type="date"] { font-variant-numeric: tabular-nums; } /* ========================= BUTTONS ========================= */ .btn { height: var(--field-h); padding: 0 16px; border: 1px solid var(--line2); background: var(--surface); border-radius: 0; cursor: pointer; font-size: 14px; color: var(--ink); -webkit-text-fill-color: var(--ink); } .btn:hover { background: var(--surface2); } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; -webkit-text-fill-color: #fff; } .btn.primary:hover { background: var(--brand2); border-color: var(--brand2); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn.sm { height: 34px; padding: 0 12px; font-size: 12px; } /* OP toggle active */ .opseg .btn.sm.active { background: rgba(15, 91, 62, .16); border-color: rgba(15, 91, 62, .55); color: var(--ink); -webkit-text-fill-color: var(--ink); box-shadow: var(--focus); } /* Navigation emphasis */ .actions .btn { font-weight: 600; letter-spacing: .2px; } .actions .btn.primary { box-shadow: 0 10px 24px rgba(0, 0, 0, .14); transform: translateY(-1px); } .actions .btn.primary:hover { transform: translateY(-2px); } .actions .btn:not(.primary) { border-color: rgba(15, 91, 62, .35); background: linear-gradient(180deg, var(--surface), var(--surface2)); } .actions .btn:not(.primary):hover { border-color: rgba(15, 91, 62, .55); } .mini { font-size: 12px; color: var(--muted); } /* ========================= SEGMENT BUTTONS / ACTIONS ========================= */ /* Toggle-group look for existing .seg markup (NO HTML changes) */ .seg { display: inline-flex; align-items: stretch; border: 1px solid var(--line2); background: var(--surface); flex-wrap: nowrap; /* important: keep as one grouped control */ gap: 0; /* important: no gaps between segments */ } .seg button { appearance: none; -webkit-appearance: none; height: var(--field-h); padding: 0 18px; border: 0; border-right: 1px solid var(--line2); background: transparent; border-radius: 0; /* keep NO radius */ font-size: 14px; font-weight: 700; letter-spacing: .25px; cursor: pointer; color: var(--muted); -webkit-text-fill-color: var(--muted); white-space: nowrap; line-height: 1; } .seg button:last-child { border-right: 0; } .seg button:hover { background: var(--surface2); color: var(--ink); -webkit-text-fill-color: var(--ink); } .seg button.active { background: linear-gradient( 180deg, rgba(15, 91, 62, .18), rgba(15, 91, 62, .12) ); color: var(--brand); -webkit-text-fill-color: var(--brand); /* “selected” ring inside without radius */ box-shadow: inset 0 0 0 1px rgba(15, 91, 62, .55); z-index: 1; } .seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(15, 91, 62, .55), var(--focus); } /* Mobile: let the toggle group fill width and buttons share space */ @media (max-width: 760px) { .seg { width: 100%; } .seg button { flex: 1 1 0; text-align: center; padding: 0 10px; } } /* keep actions unchanged */ .actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } /* ========================= LEGS ========================= */ .leg { border: 1px solid var(--line2); background: var(--surface); } .leg + .leg { margin-top: 12px; } .leg .leghd { padding: 12px var(--pad); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .leg .leghd strong { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); } .leg .legbd { padding: 12px var(--pad) 14px; } .leggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Needed for inline dropdown overlap (Option A) */ .leggrid > div { position: relative; } @media (max-width: 760px) { .leggrid { grid-template-columns: 1fr; } } .link { color: var(--brand); text-decoration: underline; cursor: pointer; background: transparent; border: none; padding: 0; font-size: 12px; } /* ========================= AUTOCOMPLETE (Option A, inline, per input) ========================= */ /* AUTOCOMPLETE (Floating / portal-to-body) */ .ac-menu { position: fixed; /* JS setzt left/top */ margin-top: 0; z-index: 999999; /* über sticky topbar */ background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); border-radius: 0; overflow: auto; max-height: min(320px, 45vh); /* iOS stability */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: top,left; -webkit-overflow-scrolling: touch; } .ac-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.25; } .ac-item:last-child { border-bottom: none; } .ac-item:hover { background: var(--hover); } .ac-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; } .ac-sub { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; } /* ========================= SUMMARY / RESULT ========================= */ .summary { border: 1px solid var(--line2); padding: 12px var(--pad); background: var(--surface); margin-top: 12px; } .summary .ttl { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 800; margin-bottom: 8px; } .summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; } .summary .k { color: var(--muted); } .summary .v { font-weight: 700; text-align: right; } .summary ul { margin: 8px 0 0 18px; padding: 0; font-size: 13px; } .summary li { margin: 4px 0; } .result { margin-top: 14px; border: 1px solid var(--line2); background: var(--surface); padding: 12px var(--pad); } .result .rt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .result .sub { font-size: 12px; color: var(--muted); margin: 0 0 10px; } /* ========================= REVIEW SUMMARY · FLIGHTS (bigger + nicer) ========================= */ .flightList { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; } .flightRow { border: 1px solid var(--line2); background: linear-gradient(180deg, var(--surface), var(--surface2)); padding: 14px 14px; } .flightRow .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .flightRow .num { font-weight: 600; font-size: 16px; letter-spacing: .2px; color: var(--ink); } .flightRow .kind { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--brand); background: rgba(15, 91, 62, .10); border: 1px solid rgba(15, 91, 62, .25); padding: 4px 10px; } .flightRow .route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .flightRow .ap { border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; min-width: 0; } .flightRow .ap .code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 20px; font-weight: 950; letter-spacing: .6px; line-height: 1.05; } .flightRow .ap .name { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.25; word-break: break-word; } .flightRow .arrow { font-size: 20px; font-weight: 600; color: var(--brand); opacity: .9; } /* mobile */ @media (max-width: 720px) { .flightRow { padding: 12px 12px; } .flightRow .route { grid-template-columns: 1fr; } .flightRow .arrow { text-align: center; padding: 6px 0; } .flightRow .ap .code { font-size: 22px; } } /* ========================= QUOTES (LIST + INLINE PREVIEW) ========================= */ @media (min-width: 721px) { /* make the row have a deterministic height */ .result .qgrid { height: min(72vh, 900px); /* tune: 72vh / 900px */ align-items: stretch; } /* both columns stretch */ .qbox, .embedWrap { height: 100%; min-height: 0; } /* left: list consumes remaining height */ .qbox { display: flex; flex-direction: column; } .qlist { flex: 1 1 auto; min-height: 0; overflow: auto; max-height: none; /* you already do this */ } /* right: header + iframe + footer column */ .embedWrap { display: flex; flex-direction: column; } .embedHd { flex: 0 0 auto; } .embedFt { flex: 0 0 auto; } /* IMPORTANT: remove clamp height, let it flex */ iframe.embedFrame { flex: 1 1 auto; min-height: 0; height: auto; /* overrides clamp */ width: 100%; } /* if you show errBox instead of iframe, make it fill too */ .embedWrap .errBox { flex: 1 1 auto; min-height: 0; overflow: auto; } } @media (min-width: 721px) { .embedFt { position: static; backdrop-filter: none; } } .qgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; margin-top: 10px; } .qbox { border: 1px solid var(--line2); background: var(--surface); padding: 10px 12px; min-width: 0; width: 220px; max-width: 220px; } @media (max-width: 720px) { .qbox { width: 100%; max-width: none; } } .qlist { margin-top: 10px; max-height: clamp(520px, 70vh, 900px); overflow: auto; padding-right: 4px; } @media (max-width: 980px) { .qlist { max-height: clamp(420px, 60vh, 780px); } } .qitem { border: 1px solid var(--line); padding: 10px 10px; margin-bottom: 10px; cursor: pointer; background: var(--surface); } .qitem:hover { background: var(--surface2); } .qitem.active { border-color: rgba(15, 91, 62, .55); box-shadow: var(--focus); } .qtop { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; align-items: center; } .qitem .qreg { font-weight: 500; } .qitem .qmodel { font-size: 13px; opacity: .75; font-weight: 600; } .tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); white-space: nowrap; } .tag.ok { border-color: rgba(15, 91, 62, .35); color: var(--brand); background: rgba(15, 91, 62, .12); } .tag.err { border-color: rgba(180, 35, 24, .35); color: var(--danger); background: rgba(180, 35, 24, .10); } .qright { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; } .qprice { font-size: 12px; color: var(--muted); line-height: 1.1; } .qprice .qpriceVal { display: inline-block; margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--green); } #quoteModal .qmodal__hd { position: relative; } /* BIG close X */ #quoteModal .qmodal__x { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink, #111); cursor: pointer; width: 56px; height: 56px; line-height: 56px; font-size: 40px; /* slightly smaller */ font-weight: 400; /* << lighter */ opacity: .78; /* << less heavy */ letter-spacing: -0.02em; display: grid; place-items: center; margin-left: auto; padding: 0; } #quoteModal .qmodal__x:hover { opacity: 1; background: rgba(0,0,0,.06); } @media (prefers-color-scheme: dark) { #quoteModal .qmodal__x:hover { background: rgba(255,255,255,.10); } } #quoteModal .qmodal__x:active { transform: scale(0.97); } /* optional: always keep it on the far right even when wrapping */ #quoteModal .qmodal__hd { flex-wrap: nowrap; } #quoteModal .qmodal__ttl { flex: 1 1 auto; min-width: 0; } .embedWrap { border: 1px solid var(--line2); background: var(--surface); min-width: 0; } .embedHd { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .embedHd .ttl { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; } .embedHd .right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } iframe.embedFrame { width: 100%; height: clamp(560px, 70vh, 980px); border: 0; background: var(--surface); display: block; } .embedFt { position: sticky; bottom: 0; z-index: 5; border-top: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(10px); padding: 10px 12px; display: flex; justify-content: flex-end; gap: 10px; } .errBox { border: 1px solid rgba(180, 35, 24, .35); background: rgba(180, 35, 24, .10); padding: 14px 12px; margin: 0; } .errBox .hdr { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--danger); margin-bottom: 8px; } .errBox .msg { font-size: 13px; white-space: pre-wrap; word-break: break-word; line-height: 1.35; } #quotePreview { scroll-margin-top: 14px; } /* make both columns equal height */ .qgrid { align-items: stretch; /* important: stretch grid items */ } /* left column should fill height and allow inner scrolling */ .qbox { height: 100%; display: flex; flex-direction: column; min-height: 0; /* important for flex children to scroll */ } /* make the list take the remaining height inside qbox */ .qlist { flex: 1 1 auto; min-height: 0; /* important: allows overflow container to shrink */ overflow: auto; margin-top: 10px; max-height: none; /* disable the clamp, we want it to fill */ } @media (max-width: 720px) { .qgrid { grid-template-columns: 1fr; gap: 12px; } iframe.embedFrame { height: auto; min-height: 520px; } .embedFt { position: static; } } /* ========================= OVERLAY ========================= */ .pageOverlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: var(--overlay-bg); backdrop-filter: blur(6px); } .pageOverlay.show { display: flex; } .loader { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); background: var(--surface); padding: 10px 12px; box-shadow: var(--shadow2); } .spinner { width: 18px; height: 18px; border: 2px solid var(--line2); border-top-color: var(--brand); border-radius: 50%; animation: spin .85s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loaderTxt { font-size: 12px; color: var(--muted); white-space: nowrap; } .fadeOut { opacity: 0; transform: translateY(3px); } .fadeIn { opacity: 1; transform: translateY(0); transition: opacity 160ms ease, transform 160ms ease; } /* ========================= JOIN MODAL ========================= */ .jmodal { position: fixed; inset: 0; z-index: 999999; background: var(--modal-backdrop); display: none; padding: 14px; } .jmodal.open { display: block; } .jmodal .card { max-width: 640px; margin: 0 auto; height: 100%; background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); display: flex; flex-direction: column; } .jmodal .hd { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .jmodal .hd .t { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; } .jmodal .bd { padding: 12px; overflow: auto; } .jmodal .ft { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .jmodal .ft .btn { min-width: 120px; } .jerr { border: 1px solid rgba(180, 35, 24, .35); background: rgba(180, 35, 24, .10); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; } .jsuccess { border: 1px solid rgba(15, 91, 62, .35); background: rgba(15, 91, 62, .12); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; } .noQuotes { text-align: center; padding: 34px 12px; font-size: 18px; font-weight: 600; color: var(--ink); } .noQuotes .sub { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); } /* Nicer, bigger flight summary rows */ .flightList { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; } .flightRow { border: 1px solid var(--line2); background: var(--surface2); padding: 12px 12px; } .flightRow .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .flightRow .num { font-size: 13px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); } .flightRow .kind { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .flightRow .route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; } .flightRow .ap { min-width: 0; } .flightRow .ap .code { font-size: 18px; font-weight: 900; letter-spacing: .6px; } .flightRow .ap .name { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flightRow .arrow { font-size: 18px; font-weight: 900; opacity: .75; } @media (max-width: 760px) { .flightRow .route { grid-template-columns: 1fr; gap: 6px; } .flightRow .arrow { display: none; } .flightRow .ap .code { font-size: 16px; } } .qrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .qleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .qtxt { min-width: 0; } .qtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qright { flex: 0 0 auto; text-align: right !important; white-space: nowrap; } .qlogo { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; border: 1px solid rgba(0,0,0,.12); background: #fff; } .qlogo--ph { background: rgba(0,0,0,.04); } @media (min-width: 720px) { .qrow { flex-direction: column; align-items: stretch; } .qright { width: 100%; text-align: right !important; margin-right: 4px; } /* auf mobile 2 Zeilen zulassen statt 1 */ .qtitle { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* optional: "from" kleiner, Wert prominent */ .qprice { font-size: 12px; } .qpriceVal { font-size: 14px; font-weight: 800; } } /* Desktop: Separator zwischen Reg und Model */ @media (min-width: 721px) { .qtitle .qmodel::before { content: " "; margin-left:2px; } } /* Mobile: Reg und Model untereinander */ @media (max-width: 720px) { .qtitle { display: flex; flex-direction: column; min-width: 0; } .qtitle .qreg, .qtitle .qmodel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } }