/** * MoMo 3PPs Design System * ----------------------- * Design tokens + component classes implementing the MTN MoMo "3PPs Design * Guidelines" (July 2025) brand guide on top of the existing template_v3 * legacy stylesheets (theme_style.css / media.css). * * Loaded LAST (after theme_style.css, media.css, uicons, bootstrap-icons) so * it can cleanly override/extend without editing those files directly. * * Naming rule: every new class here is `momo-`-prefixed to avoid colliding * with the many bare `.card` / `.btn` / `.header` / `.footer` etc. classes * already defined across the legacy stylesheets. Do not add new bare class * names to this file. */ /* --------------------------------------------------------------------- Legacy full-screen background slideshow ("supersized" plugin, driven by the banner_images admin table, appended to by backslider.js). It sits position:fixed behind the whole page — normally invisible behind opaque content, but it bleeds through any gap in the page background. The new hero section (.searcharea) replaces its role, so hide it. -------------------------------------------------------------------*/ #supersized-loader, #supersized { display: none !important; } /* --------------------------------------------------------------------- Font -------------------------------------------------------------------*/ /* Brand font, provided by the brand team -- files live alongside the legacy uicons/GT Walsheim fonts in ../fonts/. Only .woff was supplied (no woff2), which is fine: every browser this site targets supports .woff, so there's no compatibility gap from skipping that format. Regular file mapped to every weight, deliberately -- this file loads after fonts/stylesheet.css, which already does exactly this with the same reasoning (its own comment: "these two still match the bold/800 weight requests scattered through the CSS ... but point at the Regular file so text actually renders as regular weight instead of a bold face"). This file used to instead point 700/800 at the real Bold/ ExtraBold files, which -- since @font-face resolution follows document order for the same family+weight, and this file loads LAST -- silently overrode that earlier fix everywhere bold/800 text appears. Matched here instead of just deleting the block so this stays the definitive, last-loaded source of truth for the font-family regardless of what order these two CSS files end up in later. */ @font-face { font-family: 'MTNBrighterSans'; src: url('../fonts/MTNBrighterSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'MTNBrighterSans'; src: url('../fonts/MTNBrighterSans-Regular.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'MTNBrighterSans'; src: url('../fonts/MTNBrighterSans-Regular.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- Design tokens -------------------------------------------------------------------*/ :root { /* Primary (MoMo Blue family) */ --momo-blue: #004F71; --momo-blue-dark: #003654; --momo-blue-light: #4D849C; --momo-blue-xlight: #CCDCE3; --momo-gradient: linear-gradient(180deg, #003654 0%, #004F71 100%); --momo-gradient-dark: linear-gradient(180deg, #004F71 0%, #003654 100%); /* Secondary accent */ --momo-yellow: #FFCB05; /* Tertiary / neutrals */ --momo-black: #000000; --momo-grey-1: #5F5F5F; /* body/secondary text */ --momo-grey-2: #AFAFAF; /* disabled state */ --momo-grey-3: #E8E8E8; /* borders */ --momo-grey-4: #F2F2F2; /* background shading */ --momo-shadow: rgba(0, 0, 0, 0.10); --shadow-card: 0 2px 12px rgba(0, 20, 30, .06); --momo-white: #FFFFFF; /* Semantic: success */ --momo-green-100: #0FAF4B; --momo-green-90: #27BA5E; --momo-green-80: #3FBF6F; --momo-green-70: #55CB82; --momo-green-60: #6FCF93; --momo-green-50: #87E8AB; --momo-green-40: #9FDFB7; --momo-green-30: #CAF0D8; /* Semantic: error */ --momo-red-100: #ED3434; --momo-red-90: #F74949; --momo-red-80: #F15D5D; --momo-red-70: #FA7070; --momo-red-60: #F48585; --momo-red-50: #FFA9A9; --momo-red-40: #F8AEAE; --momo-red-30: #F8AEAE; /* Semantic: warning */ --momo-orange-100: #FF9400; --momo-orange-90: #FD9D1A; --momo-orange-80: #FFA933; --momo-orange-70: #FFB248; --momo-orange-60: #FFBF66; --momo-orange-50: #FFC87A; --momo-orange-40: #FFD499; --momo-orange-30: #FFE2BB; /* Spacing */ --space-1: 4px; --space-2: 6px; --space-3: 10px; --space-4: 16px; --space-5: 20px; --space-6: 40px; /* Radii */ --radius-card: 16px; --radius-card-lg: 20px; /* Type scale */ --fs-h1: 20px; --fs-h1-sm: 18px; --fs-body: 16px; --fs-caption-lg: 14px; --fs-caption: 12px; --fs-caption-sm: 10px; --fs-caption-xs: 9px; --fw-regular: 400; --fw-medium: 500; --font-family-base: 'MTNBrighterSans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* App shell */ --app-header-height: 56px; --bottom-actionbar-height: 96px; } /* --------------------------------------------------------------------- App header (fixed top bar: back / title / close / menu) -------------------------------------------------------------------*/ .momo-app-header { position: sticky; top: 0; z-index: 1050; display: flex; align-items: center; min-height: var(--app-header-height); padding: var(--space-2) var(--space-4); background: var(--momo-blue); color: var(--momo-white); font-family: var(--font-family-base); } .momo-header-wrapper { display: flex; align-items: center; justify-content: space-between; } .momo-app-header__side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); } .momo-app-header__side--right { justify-content: flex-end; } .momo-app-header__logo img { height: 45px; display: block; } .momo-app-header__title { flex: 1 1 auto; text-align: center; font-size: var(--fs-h1-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--space-2); } .momo-app-header__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--momo-white); background: transparent; border: 0; font-size: 18px; cursor: pointer; text-decoration: none; } .momo-app-header__icon-btn:hover, .momo-app-header__icon-btn:focus { background: rgba(255, 255, 255, 0.12); color: var(--momo-white); text-decoration: none; } /* --------------------------------------------------------------------- Header utility bar (logo, contact, social, currency, login) — sits above the back/title/close app-header row. -------------------------------------------------------------------*/ .momo-header-utility { background: var(--momo-blue-dark); color: var(--momo-white); font-family: var(--font-family-base); } .momo-header-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-4); flex-wrap: wrap; } .momo-header-utility__contact { display: flex; align-items: center; gap: var(--space-4); } .momo-header-utility__contact a { color: var(--momo-blue-xlight); font-size: var(--fs-caption); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); } .momo-header-utility__contact a:hover { color: var(--momo-white); text-decoration: none; } .momo-header-utility__social { display: flex; gap: var(--space-2); } .momo-header-utility__social a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--momo-white); font-size: 13px; } .momo-header-utility__social a:hover { background: var(--momo-yellow); color: var(--momo-blue-dark); } .momo-header-utility__currency>a { color: var(--momo-white); font-size: var(--fs-caption); text-decoration: none; cursor: pointer; } @media (max-width: 767px) { .momo-header-utility__contact-text { display: none; } } /* --------------------------------------------------------------------- Cards -------------------------------------------------------------------*/ .momo-card { background: var(--momo-white); border-radius: var(--radius-card); box-shadow: 0 2px 8px var(--momo-shadow); padding: var(--space-4); font-family: var(--font-family-base); } .momo-card--lg { border-radius: var(--radius-card-lg); } /* --------------------------------------------------------------------- Amadeus fare calendar (above the sort bar) -- flat divider-strip design matching the airline-price strip below the results. -------------------------------------------------------------------*/ .amadeus-fare-calendar { margin-top: var(--space-4); padding: 0; overflow: hidden; } #amadeus_fare_calendar_list { display: flex; overflow-x: auto; } .amadeus-calendar-day { flex: 1 0 auto; min-width: 84px; text-align: center; padding: var(--space-3) var(--space-2); border-right: 1px solid var(--momo-grey-3); } .amadeus-calendar-day:last-child { border-right: none; } .amadeus-calendar-day.selected { background: var(--momo-blue-xlight); } .amadeus-calendar-day.clickable { cursor: pointer; transition: background-color .15s ease; } .amadeus-calendar-day.clickable:hover { background: var(--momo-grey-4); } .amadeus-calendar-day.clickable.selected:hover { background: var(--momo-blue-xlight); } .amadeus-calendar-day.unavailable { color: var(--momo-grey-2); } .amadeus-calendar-date { font-size: 12px; color: var(--momo-grey-1); margin-bottom: var(--space-1); } .amadeus-calendar-price { font-size: 15px; font-weight: 700; color: var(--momo-blue-dark); } .amadeus-calendar-day.unavailable .amadeus-calendar-price { color: var(--momo-grey-2); font-weight: 400; } /* --------------------------------------------------------------------- Amadeus direct-search result cards (separate from the Provab/TBO flight-result markup generated by generate_flight_list()). Layout: airline + price banner up top (price is the first thing scanned, not buried at the bottom past a wall of segment rows), each itinerary as a big departure->arrival timeline with duration/stops on the connecting line, per-segment flight-number detail underneath in small type for anyone who wants it, single Book Now CTA in the footer (Seat map button removed per request). -------------------------------------------------------------------*/ .amadeus-offer-card { background: var(--momo-white); border-radius: var(--radius-card-lg); box-shadow: 0 1px 4px var(--momo-shadow); padding: var(--space-4); margin-bottom: var(--space-4); transition: box-shadow .15s ease, transform .15s ease; } .amadeus-offer-card:hover { box-shadow: 0 8px 24px var(--momo-shadow); transform: translateY(-1px); } .amadeus-offer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--momo-grey-3); } .amadeus-offer-airline { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: var(--fw-medium); color: var(--momo-grey-1); } .amadeus-offer-top-price { display: flex; /* flex-direction: column; */ align-items: flex-end; gap: 2px; font-size: 20px; font-weight: 700; color: var(--momo-blue-dark); text-align: right; } .amadeus-offer-top-price .amadeus-currency { font-size: 12px; font-weight: 400; color: var(--momo-grey-1); margin-right: var(--space-1); } .amadeus-price-sub { font-size: 11px; font-weight: var(--fw-medium); color: var(--momo-grey-1); } .amadeus-itinerary-label { font-size: 11px; font-weight: var(--fw-medium); color: var(--momo-grey-2); text-transform: uppercase; letter-spacing: .04em; margin: var(--space-3) 0 var(--space-2); } .amadeus-itinerary-label:first-of-type { margin-top: 0; } /* Segment-level flight card -- one flight leg. Multi-segment itineraries stack several of these (see the adjacent-sibling margin below), which is what visually shows a connection: each subsequent card's stopbadge reports the layover before it. */ .amadeus-flight-card { border: 1px solid var(--momo-grey-3); border-radius: var(--radius-card); padding: var(--space-3); background: var(--momo-white); } .amadeus-flight-card+.amadeus-flight-card { margin-top: var(--space-2); } .amadeus-flight-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .amadeus-airline-badge { position: relative; overflow: hidden; box-sizing: border-box; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; } /* Layered on top of the code text already rendered by .amadeus-airline- badge itself -- logo loads, it covers the code; logo 404s, its onerror handler removes it and the code underneath is already there. */ .amadeus-airline-badge-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: var(--momo-white); padding: 5px; box-sizing: border-box; border-radius: inherit; } /* Deterministic per-carrier colour (see _amadeus_airline_badge_class), picked from the existing palette so connecting segments operated by different airlines read apart from each other at a glance. */ .amadeus-airline-badge--0 { background: var(--momo-blue-xlight); color: var(--momo-blue-dark); } .amadeus-airline-badge--1 { background: var(--momo-orange-30); color: var(--momo-blue-dark); } .amadeus-airline-badge--2 { background: var(--momo-green-30); color: var(--momo-blue-dark); } .amadeus-flight-top-info { flex: 1; min-width: 0; } .amadeus-flight-top-name { font-weight: 700; font-size: 13px; color: var(--momo-blue-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amadeus-flight-top-flightno { font-size: 11px; color: var(--momo-grey-1); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Small overlapping badge stack for an itinerary-summary card that spans more than one operating carrier (e.g. ET then EK via a connection). */ .amadeus-airline-badge-group { display: flex; flex-shrink: 0; } .amadeus-airline-badge-group .amadeus-airline-badge { width: 26px; height: 26px; font-size: 9px; border: 2px solid var(--momo-white); } .amadeus-airline-badge-group .amadeus-airline-badge+.amadeus-airline-badge { margin-left: -10px; } .amadeus-stopbadge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--momo-blue-dark); background: var(--momo-grey-4); padding: 4px var(--space-3); border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .amadeus-route-row { display: flex; align-items: center; gap: var(--space-3); } .amadeus-route-pt { flex: 0 0 auto; } .amadeus-route-pt--end { text-align: right; } .amadeus-route-time { font-size: 18px; font-weight: 700; color: var(--momo-blue-dark); line-height: 1.2; } .amadeus-route-code { font-size: 12px; color: var(--momo-grey-1); font-weight: var(--fw-medium); } .amadeus-route-mid { flex: 1; text-align: center; position: relative; padding: 0 var(--space-1); min-width: 0; } .amadeus-route-dur { font-size: 11px; color: var(--momo-grey-1); font-weight: 700; margin-bottom: 4px; } .amadeus-route-line { height: 2px; background: var(--momo-blue-light); position: relative; border-radius: 2px; } .amadeus-route-line::before, .amadeus-route-line::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; background: var(--momo-blue); border-radius: 50%; transform: translateY(-50%); } .amadeus-route-line::before { left: 0; } .amadeus-route-line::after { right: 0; } .amadeus-route-plane { position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(0deg); color: var(--momo-blue); background: var(--momo-white); font-size: 11px; line-height: 1; padding: 0px 10px; } .amadeus-airline-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* Shown between stacked segment cards in the expand panel -- the segment card's own stopbadge already states the layover length, this just names which airport it's in. */ .amadeus-layover { margin: var(--space-1) 0 var(--space-2); padding: 3px var(--space-2); background: var(--momo-grey-4); border-radius: var(--radius-card); display: inline-block; font-size: 11px; color: var(--momo-grey-1); } .amadeus-fare-details { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--momo-grey-3); } .amadeus-fare-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px var(--space-3); background: var(--momo-grey-4); border-radius: 999px; font-size: 11px; font-weight: var(--fw-medium); color: var(--momo-grey-1); } .amadeus-fare-chip i { color: var(--momo-blue); font-size: 11px; } /* Refundable / non-refundable variants on the meta chip -- only ever rendered when _amadeus_offer_refundable() actually knows the answer. */ .amadeus-fare-chip--positive { background: var(--momo-green-30); color: var(--momo-green-100); } .amadeus-fare-chip--positive i { color: var(--momo-green-100); } .amadeus-fare-chip--neutral { background: var(--momo-grey-4); color: var(--momo-grey-1); } .amadeus-fare-chip--neutral i { color: var(--momo-grey-1); } .amadeus-price-breakdown { padding: var(--space-2) 0; margin-top: var(--space-1); } .amadeus-price-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--momo-grey-2); padding: 1px 0; } .amadeus-price-row--total { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--momo-grey-3); font-size: 13px; font-weight: 700; color: var(--momo-blue-dark); } .amadeus-offer-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--momo-grey-3); } .amadeus-btn { border: 1px solid var(--momo-blue); background: var(--momo-white); color: var(--momo-blue); border-radius: var(--radius-card); padding: var(--space-2) var(--space-4); font-size: 13px; font-weight: 600; cursor: pointer; } .amadeus-btn:hover { background: var(--momo-blue-xlight); } .amadeus-btn:disabled { opacity: 0.6; cursor: default; } .amadeus-btn-book { background: var(--momo-yellow); border-color: var(--momo-yellow); color: var(--momo-blue-dark); padding: var(--space-2) var(--space-6); } .amadeus-btn-book:hover { background: var(--momo-orange-70); border-color: var(--momo-orange-70); } /* Ghost-style toggle for the "Flight details" expand button -- sits next to Book Now in the (always-visible) action bar. */ .amadeus-btn-expand { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; background: transparent; color: var(--momo-blue); padding: var(--space-2) var(--space-2); } .amadeus-btn-expand:hover { background: var(--momo-blue-xlight); } .amadeus-btn-expand i { font-size: 11px; transition: transform .2s ease; } .amadeus-offer-card--expanded .amadeus-btn-expand i { transform: rotate(180deg); } /* Expand panel: collapsed to zero height by default, revealed by toggling .amadeus-offer-card--expanded on the card (see the click handler in _amadeus_render_offer_list). Sits below the action bar so Book Now never shifts position when someone opens the details. */ .amadeus-offer-expand { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease; } .amadeus-offer-card--expanded .amadeus-offer-expand { max-height: 2400px; opacity: 1; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--momo-grey-3); } /* Amadeus modal (price-confirm / seat map) */ .amadeus-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; } .amadeus-modal { background: var(--momo-white); border-radius: var(--radius-card-lg); max-width: 480px; width: 92%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .amadeus-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--momo-grey-3); font-weight: 700; color: var(--momo-blue-dark); } .amadeus-modal-close { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--momo-grey-1); } .amadeus-modal-body { padding: var(--space-4); } .amadeus-seatmap-segment h5 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--momo-blue-dark); } .amadeus-seatmap-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-4); } .amadeus-seat-row { display: flex; align-items: center; gap: 4px; } .amadeus-seat-row-num { width: 24px; font-size: 11px; color: var(--momo-grey-2); } .amadeus-seat { width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .amadeus-seat.available { background: var(--momo-green-30); color: var(--momo-green-100); } .amadeus-seat.taken { background: var(--momo-grey-3); color: var(--momo-grey-2); } .amadeus-seatmap-legend { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--momo-grey-1); } .momo-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); } /* --------------------------------------------------------------------- Buttons -------------------------------------------------------------------*/ .momo-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 var(--space-5); border-radius: 20px; font-family: var(--font-family-base); font-size: var(--fs-caption-lg); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .02em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .momo-btn--primary { background: var(--momo-blue); color: var(--momo-white); } .momo-btn--primary:hover, .momo-btn--primary:focus { background: var(--momo-blue-dark); color: var(--momo-white); } .momo-btn--primary:disabled, .momo-btn--primary.momo-disabled { background: var(--momo-grey-2); color: var(--momo-white); cursor: not-allowed; } .momo-btn--secondary { background: transparent; color: var(--momo-blue); border-color: var(--momo-blue); } .momo-btn--secondary:hover, .momo-btn--secondary:focus { background: var(--momo-blue-xlight); color: var(--momo-blue-dark); } .momo-btn--secondary.momo-disabled { color: var(--momo-grey-2); border-color: var(--momo-grey-2); } .momo-btn--tertiary { background: transparent; color: var(--momo-blue); border: 0; height: auto; padding: var(--space-2) var(--space-3); text-transform: none; } .momo-btn--tertiary.momo-btn--danger { color: var(--momo-red-100); } .momo-btn--tertiary.momo-disabled { color: var(--momo-grey-2); } .momo-btn--block { width: 100%; display: flex; } /* --------------------------------------------------------------------- Bottom action bar -------------------------------------------------------------------*/ .momo-bottom-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--momo-white); box-shadow: 0 -2px 10px var(--momo-shadow); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* --------------------------------------------------------------------- Bottom-sheet modal (BS3 .modal override — no new JS modal library) -------------------------------------------------------------------*/ .modal.momo-sheet .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: 100%; transform: translateY(100%); transition: transform .25s ease; } .modal.momo-sheet.in .modal-dialog { transform: translateY(0); } .modal.momo-sheet .modal-content { border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0; border: 0; font-family: var(--font-family-base); } .modal.momo-sheet .modal-header { border-bottom: 0; padding: var(--space-4) var(--space-4) 0; } .modal.momo-sheet .modal-body { padding: var(--space-4); } /* --------------------------------------------------------------------- Plugin wrapper overrides (select2 / jQuery UI datepicker & autocomplete / passenger-count widget) — restyle plugin-rendered DOM without replacing the plugins themselves. -------------------------------------------------------------------*/ .momo-select2 .select2-container--default .select2-selection--single { height: 40px; border: 1px solid var(--momo-grey-3); border-radius: var(--space-2); font-family: var(--font-family-base); } .momo-select2 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--momo-black); } .momo-select2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; } /* select2's open dropdown list appends to document.body by default (not nested inside .momo-select2), so these are intentionally unscoped. */ .select2-dropdown { border-radius: var(--space-2); border-color: var(--momo-grey-3); font-family: var(--font-family-base); } .select2-results__option--highlighted[aria-selected] { background-color: var(--momo-blue); } /* NOTE: jQuery UI datepicker/autocomplete widgets are initialized here without an `appendTo` option, so they render into document.body rather than nested inside .momo-datepicker/.momo-autocomplete wrapper divs. These rules are intentionally global (this flight search form is the only place in scope using these plugins). */ .ui-datepicker { border-radius: var(--radius-card); border: 1px solid var(--momo-grey-3); box-shadow: 0 4px 16px var(--momo-shadow); font-family: var(--font-family-base); padding: var(--space-3); } .ui-datepicker .ui-datepicker-header { background: var(--momo-blue); color: var(--momo-white); border-radius: var(--space-2); } .ui-datepicker td .ui-state-active { background: var(--momo-blue) !important; border-color: var(--momo-blue) !important; color: var(--momo-white) !important; } .ui-autocomplete { border-radius: var(--space-2); border: 1px solid var(--momo-grey-3); box-shadow: 0 4px 16px var(--momo-shadow); font-family: var(--font-family-base); padding: var(--space-2) 0; } .ui-autocomplete .ui-menu-item:hover, .ui-autocomplete .ui-state-focus { background: var(--momo-blue-xlight) !important; border: 0 !important; color: var(--momo-blue-dark) !important; } .momo-pax-count .input-group .btn-number { border-color: var(--momo-grey-3); color: var(--momo-blue); } .momo-pax-count .input-group .form-control { border-color: var(--momo-grey-3); font-family: var(--font-family-base); } /* --------------------------------------------------------------------- Segmented pill control (trip-type radios) -------------------------------------------------------------------*/ .momo-pill-group { display: inline-flex; background: var(--momo-grey-4); border-radius: 20px; padding: var(--space-1); gap: var(--space-1); } .momo-pill-group label { margin: 0; padding: var(--space-2) var(--space-4); border-radius: 16px; font-size: var(--fs-caption-lg); font-weight: var(--fw-medium); color: var(--momo-grey-1); cursor: pointer; } .momo-pill-group input:checked+label, .momo-pill-group label.active { background: var(--momo-blue); color: var(--momo-white); } /* --------------------------------------------------------------------- Homepage card overrides Legacy card classes (.top-hotel-dest-card, .top-rated-hotel-card, .top-flight-route-card, .why-book-card, .secndblak) already carry their own background/shadow/radius rules in theme_style.css/media.css with compound selectors — pairing .momo-card with the legacy class here keeps equal-or-higher specificity so our radius/shadow tokens reliably win, without touching those legacy files. -------------------------------------------------------------------*/ /* .top-hotel-dest-card.momo-card, .top-rated-hotel-card.momo-card, .top-flight-route-card.momo-card, .why-book-card.momo-card { border-radius: var(--radius-card) !important; box-shadow: 0 2px 8px var(--momo-shadow) !important; } */ .secndblak.momo-card { border-radius: var(--radius-card-lg) !important; box-shadow: 0 4px 20px var(--momo-shadow) !important; background: var(--momo-white); } .searchsbmt.momo-btn { background: var(--momo-blue) !important; border-radius: 20px !important; height: 40px !important; } .searchsbmt.momo-btn:hover { background: var(--momo-blue-dark) !important; } /* --------------------------------------------------------------------- Flight search widget clean-up Selectors are prefixed with .searcharea .secndblak to match (and beat) theme_style.css's own scoping for this exact widget, so these reliably win without needing to touch that file. -------------------------------------------------------------------*/ /* Module tab bar (Flights/Hotels/Bus) above the search widget -- theme_style.css:32919-32951 already has the right structure (flex pills, active/hover states) but uses hardcoded #014A6B/#f1c40f, which are close to but not exactly the brand tokens (--momo-blue-dark is #003654, --momo-yellow is #FFCB05) -- a visible off-by-a-shade mismatch against every other blue/yellow on the page. Same selectors, correct values. */ .searcharea .commonNavTabCls .search-tabs-new>li>a { color: var(--momo-blue-dark) !important; } .searcharea .commonNavTabCls .search-tabs-new>li.active>a, .searcharea .commonNavTabCls .search-tabs-new>li>a:hover { background: var(--momo-yellow) !important; color: var(--momo-blue-dark) !important; } .searcharea .commonNavTabCls .search-tabs-new>li.active>a .tab-icon, .searcharea .commonNavTabCls .search-tabs-new>li.active>a .tab-label { color: var(--momo-blue-dark) !important; } /* Trip-type pills: solid filled pill instead of the legacy radio-dot style (its dark-navy active text color read as invisible against a blue fill — that mismatch, not a missing rule, was why "Round Trip" looked blank). */ .searcharea .secndblak .trip-pills.momo-pill-group { background: var(--momo-grey-4); border-radius: 20px; padding: var(--space-1); gap: 0; } .searcharea .secndblak .trip-pills.momo-pill-group .wament { padding: var(--space-2) var(--space-4) !important; border-radius: 16px !important; color: var(--momo-grey-1) !important; background: transparent !important; border: 1px solid transparent !important; } .searcharea .secndblak .trip-pills.momo-pill-group .wament::before, .searcharea .secndblak .trip-pills.momo-pill-group .wament::after { content: none !important; } /* Selected state matches the "Pay Now" / "MTN MoMo" pattern from the payment-flow reference: light-blue fill + blue border + bold navy text, rather than a solid filled chip. */ .searcharea .secndblak .trip-pills.momo-pill-group .wament.active { background: var(--momo-blue-xlight) !important; border: 1px solid var(--momo-blue) !important; color: var(--momo-blue-dark) !important; font-weight: var(--fw-medium) !important; } /* Cabin class dropdown next to the pills */ .searcharea .secndblak .classes_Select .remngwd { color: var(--momo-blue); font-weight: var(--fw-medium); } /* Redundant "Economy" caption under Traveler/Class — the cabin class is already shown/selectable in the pill row above, so this duplicate is just visual noise. */ .searcharea .secndblak .flight-class-caption { display: none !important; } /* Top row: give the badge / pills / class selector breathing room */ .searcharea .secndblak .flightSearchNavigation-f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--momo-grey-3); } /* Field cards: From / To / Dates / Traveler — consistent height, radius, spacing so the row reads as one unified control instead of mismatched boxes. */ .searcharea .secndblak .plcetogo, .searcharea .secndblak .totlall { border-radius: var(--space-3) !important; background: var(--momo-grey-4) !important; border: 1px solid var(--momo-blue-xlight) !important; min-height: 64px; display: flex; flex-direction: column; justify-content: center; } .searcharea .secndblak .plcetogo:focus-within { border-color: var(--momo-blue) !important; } .searcharea .secndblak .lablform, .searcharea .secndblak .lablform2 { color: var(--momo-grey-1); font-size: var(--fs-caption); font-weight: var(--fw-medium); } .searcharea .secndblak .normalinput { color: var(--momo-black); font-weight: var(--fw-medium); background: transparent !important; } /* Swap (from/to) button: a small circular control centered on the seam between the two fields instead of floating oddly. */ .searcharea .secndblak .flight-swap-wrap { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 5; width: 28px; height: 28px; } /* Date fields: the generic .normalinput{font-size:18px!important} rule (theme_style.css) clips "DD-MM-YYYY" to "DD-MM-2..." inside these narrow boxes -- same bug already fixed once for .mdf-search (see its comment above), never applied to this homepage search bar. The smaller font alone isn't enough room; col-md-7/col-md-5 (from/to vs. dates) also gives the date pair less width than it needs, so rebalance that split for this row specifically. */ .searcharea .secndblak .plcetogo.datemark input.normalinput { font-size: 15px !important; } /* Bootstrap's col-md-7/col-md-5 already collapse to 100% width below the md breakpoint on their own -- only rebalance the split once they're actually side by side, so this doesn't fight that native mobile stacking. Excludes .momo-multicity-fields: that class also carries .secndates on the multi-city date box, whose row is display:flex + flex-wrap -- widening it there pushes the pair over 100% combined and wraps the row instead of sizing it. */ @media (min-width: 992px) { .searcharea .secndblak .flight-search-fields { width: 50% !important; } .searcharea .secndblak .secndates:not(.momo-multicity-fields) { width: 50% !important; } } /* Giving dates half the row (above) leaves less room on the From/To side, so the "International Airport" placeholder subtext needs to truncate gracefully instead of getting hard-cut mid-word. */ .searcharea .secndblak .airport_value { text-overflow: ellipsis; } /* theme_style.css also declares position/top/right for the bare .flight_chnge class -- reset them here so this wrapper's centering (above) is what actually determines where the button lands, instead of the two absolute positions fighting each other. */ .searcharea .secndblak .flight_chnge { position: static; top: auto; right: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--momo-white); border: 1px solid var(--momo-grey-3); box-shadow: 0 2px 6px var(--momo-shadow); display: flex; align-items: center; justify-content: center; color: var(--momo-blue); } .searcharea .secndblak .flight-from-col { position: relative; } /* Breathing room between From / To / Dates / Traveler / Search — each bootstrap column gets consistent gutter + the field boxes inside get their own margin so backgrounds don't visually touch. */ .searcharea .secndblak .flight-search-inner-box { gap: var(--space-4); } .searcharea .secndblak .flight-from-col, .searcharea .secndblak .flight-to-col, .searcharea .secndblak .secndates .col-xs-6, .searcharea .secndblak .thrdtraveller, .searcharea .secndblak .col-md-2.col-xs-12.nopad { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; } .searcharea .secndblak .plcetogo, .searcharea .secndblak .totlall { margin: 0 var(--space-1) var(--space-1); padding: var(--space-2) var(--space-3) !important; } /* --------------------------------------------------------------------- Multi-City rows: bring the same field-box treatment used by the Round Trip / One Way row (icons, spacing, min-height) to each city segment, instead of the old bordered-grid look. -------------------------------------------------------------------*/ .searcharea .secndblak #multi_way_fieldset { width: 100%; } .searcharea .secndblak .momo-multicity-row { display: flex; flex-wrap: wrap; align-items: flex-start; } .searcharea .secndblak .momo-multicity-row+.momo-multicity-row { border-top: 1px solid var(--momo-grey-3); margin-top: var(--space-3); padding-top: var(--space-3); } .searcharea .secndblak #multi_way_fieldset .momo-multicity-field { height: auto !important; position: relative; } .searcharea .secndblak .momo-multicity-fields { display: flex; } .searcharea .secndblak .momo-multicity-fields .momo-multicity-field { flex: 1 1 0; } /* Below md, the From/To pair (col-xs-9) and Departure (col-xs-3) still sit at their fixed Bootstrap widths instead of collapsing the way the Round Trip row's un-classed (no col-xs-*) wrapper does -- and `flex: 1 1 0` on the fields inside has no minimum, so they never wrap on their own. Force the same full-width stack explicitly instead of relying on that difference. */ @media (max-width: 767px) { .searcharea .secndblak .momo-multicity-fields { width: 100% !important; flex-wrap: wrap; } .searcharea .secndblak .momo-multicity-fields .momo-multicity-field { flex: 1 1 100%; } } .searcharea .secndblak .momo-multicity-remove { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--momo-white); border: 1px solid var(--momo-grey-3); box-shadow: 0 2px 6px var(--momo-shadow); color: var(--momo-red-100); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; font-size: 11px; } /* --------------------------------------------------------------------- Cabin class dropdown ("Economy") — trigger button + panel -------------------------------------------------------------------*/ .searcharea .secndblak .momo-class-select .alladvnce { display: flex; align-items: center; gap: var(--space-2); background: var(--momo-grey-4); border-radius: 20px; padding: var(--space-2) var(--space-4) !important; cursor: pointer; } .searcharea .secndblak .momo-class-select__icon { color: var(--momo-blue); font-size: 13px; } .searcharea .secndblak .momo-class-select .remngwd { color: var(--momo-black); font-weight: var(--fw-medium); font-size: var(--fs-caption-lg); } .searcharea .secndblak .momo-class-select__caret { color: var(--momo-grey-1); font-size: 11px; } .searcharea .secndblak .momo-class-dropdown.advncedown { background: var(--momo-white) !important; border: 1px solid var(--momo-grey-3) !important; border-radius: var(--radius-card) !important; box-shadow: 0 8px 24px var(--momo-shadow) !important; width: 190px !important; padding: var(--space-2) !important; overflow: hidden; } .searcharea .secndblak .momo-class-dropdown .scroladvc { background: transparent; padding: 0; border-radius: 0; } .searcharea .secndblak .momo-class-dropdown .adscrla { border-radius: var(--space-2); padding: var(--space-3) var(--space-3) !important; color: var(--momo-black); font-size: var(--fs-caption-lg); } .searcharea .secndblak .momo-class-dropdown .adscrla:hover { background: var(--momo-grey-4); } .searcharea .secndblak .momo-class-dropdown .adscrla.active { background: var(--momo-blue-xlight); color: var(--momo-blue-dark); font-weight: var(--fw-medium); } /* --------------------------------------------------------------------- Section bar — solid navy label strip used to head off a content block (matches the "Price Details" bar from the booking/payment reference). -------------------------------------------------------------------*/ .momo-section-bar { background: var(--momo-blue-dark); color: var(--momo-white); font-family: var(--font-family-base); font-weight: var(--fw-medium); font-size: var(--fs-caption-lg); padding: var(--space-3) var(--space-4); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2); border-radius: var(--radius-card) var(--radius-card) 0 0; } /* --------------------------------------------------------------------- Homepage: "How to Book a Flight" -- 5-step walkthrough, deliberately minimal (numbered icon circles + a connecting line, not boxed cards) since this is explanatory content, not another row of clickable cards competing with the destination/hotel/route grids above and below it. -------------------------------------------------------------------*/ .how-to-book-sec { background: var(--momo-white); padding: 50px 0 60px; } .how-to-book-header { text-align: center; margin-bottom: 40px; } .how-to-book-title { font-size: 36px; font-weight: 700; color: var(--momo-blue-dark); margin: 0 0 var(--space-2); } .how-to-book-subtitle { font-size: 16px; color: var(--momo-grey-1); margin: 0; } .how-to-book-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); position: relative; } .how-to-book-grid::before { content: ''; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px; background: var(--momo-grey-3); z-index: 0; } .how-to-book-step { position: relative; z-index: 1; text-align: center; padding: 0 var(--space-2); } .how-to-book-step-num { display: none; } .how-to-book-step-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--momo-blue-xlight); color: var(--momo-blue-dark); font-size: 24px; border: 3px solid var(--momo-white); box-shadow: 0 0 0 2px var(--momo-blue-xlight); } .how-to-book-step-title { font-size: 16px; font-weight: 700; color: var(--momo-blue-dark); margin: 0 0 6px; } .how-to-book-step-desc { font-size: 13px; color: var(--momo-grey-1); line-height: 1.5; margin: 0; } @media (max-width: 991px) { .how-to-book-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); } .how-to-book-grid::before { display: none; } } @media (max-width: 575px) { .how-to-book-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- Homepage: light-grey page background so white cards visibly float, matching the booking/payment reference design. -------------------------------------------------------------------*/ .momo-home-bg { background: var(--momo-grey-4); } /* These sections carry their own `background: #fff` in theme_style.css, which otherwise paints over .momo-home-bg and breaks the continuous grey canvas the reference design relies on for its card contrast. */ .momo-home-bg .top-flight-routes-sec, .momo-home-bg .why-book-sec { background: transparent; } /* .top-flight-route-card.momo-card, .why-book-card.momo-card { border: 1px solid var(--momo-grey-3); } */ /* Section titles/CTAs/badges across Top Searched Destinations, Top Rated Hotels, Popular Flight Routes, and Why Book all use the same hand-picked #014A6B/#f1c40f/#000 in theme_style.css -- close to, but not exactly, the brand tokens (--momo-blue-dark is #003654, --momo-yellow is #FFCB05), so every heading/button on the page reads as a slightly different blue/yellow from the search widget and results page next to it. Same selectors, exact token values. */ .top-hotel-dest-title, .top-rated-hotels-title, .top-flight-routes-title, .why-book-title, .why-book-stat-num { color: var(--momo-blue-dark) !important; } .top-hotel-dest-subtitle, .top-rated-hotels-subtitle, .top-flight-routes-subtitle, .why-book-desc { color: var(--momo-grey-1) !important; } .top-rated-hotels-viewmore, .top-rated-hotel-btn { background: var(--momo-blue-dark) !important; } .top-rated-hotels-viewmore:hover, .top-rated-hotel-card-link:hover .top-rated-hotel-btn { background: var(--momo-blue) !important; } .top-flight-routes-viewmore { color: var(--momo-blue-dark) !important; } .top-flight-routes-viewmore:hover { color: var(--momo-blue) !important; } .top-rated-hotel-rating-badge i { color: var(--momo-yellow) !important; } .why-book-badge { background: var(--momo-yellow) !important; color: var(--momo-blue-dark) !important; } /* "Book with confidence" promo section had zero momo-design-system.css coverage at all (unlike the other homepage sections above, which at least had .momo-card applied to their cards) -- same off-token colors as everywhere else on the page. */ .hotel-promo-sec { background: var(--momo-grey-4) !important; } .hotel-promo-title { color: var(--momo-blue-dark) !important; } .hotel-promo-desc { color: var(--momo-grey-1) !important; } .hotel-promo-payment-badge { background: var(--momo-blue-xlight) !important; color: var(--momo-blue-dark) !important; } /* --------------------------------------------------------------------- Results page: filters panel as a bottom sheet, sort strip, skeleton cards The existing .filter_tab click handler already toggles a `.resultalls.open` class and slideToggle()s `.coleft` (flight_search.js) — that JS is left untouched; this only repositions the same show/hide element on mobile so it *looks* like a bottom sheet instead of an inline sidebar. -------------------------------------------------------------------*/ @media (max-width: 767px) { .coleft .fltrboxin.momo-filters-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0 !important; box-shadow: 0 -4px 20px var(--momo-shadow) !important; z-index: 1200; background: var(--momo-white); } } .flight-sort-filter.momo-card { border-radius: var(--radius-card) !important; box-shadow: 0 2px 8px var(--momo-shadow) !important; } .card.momo-card.marginTB10 { border-radius: var(--radius-card) !important; box-shadow: 0 2px 8px var(--momo-shadow) !important; } /* Individual flight result cards (built client-side in flight_search.js) */ .rowresult.momo-card { border-radius: var(--radius-card) !important; box-shadow: 0 2px 8px var(--momo-shadow) !important; margin-bottom: var(--space-3) !important; } /* Results list wrapper (class="allresult momo-card") -- light grey instead of .momo-card's default white, so individual .rowresult.momo-card cards read as distinct cards sitting on a surface rather than blending into one flat white block. */ .allresult.momo-card { background: #F5F5F5; } .b-btn.momo-btn--primary, .bookallbtn.mfb-btn.momo-btn--secondary { border-radius: 20px !important; height: 40px !important; } .b-btn.momo-btn--primary { background: var(--momo-blue) !important; color: var(--momo-white) !important; } .bookallbtn.mfb-btn.momo-btn--secondary { background: transparent !important; color: var(--momo-blue) !important; border: 1px solid var(--momo-blue) !important; } /* --------------------------------------------------------------------- Flight results page — modernization pass. The legacy page used a saturated yellow modify-search bar and a cream (#fffaf1) accent for the sort bar + result-card price panel; this swaps both for the MoMo blue/white palette used everywhere else, and quiets the mismatched weather-icon sprite used for the time-of-day filters. -------------------------------------------------------------------*/ /* Modify-search bar: yellow -> deep blue, white search card floats on it */ .flight-modify-search-wrapper { background: var(--momo-blue-dark) !important; padding: var(--space-4) 0 !important; } .mdf-search { background: var(--momo-white); border-radius: var(--radius-card) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } .mdf-search .flight_search_btn, .mdf-search #flight-form-submit { background: var(--momo-blue) !important; border-radius: 20px !important; } .mdf-search .flight_search_btn:hover, .mdf-search #flight-form-submit:hover { background: var(--momo-blue-dark) !important; } .mdf-search .mdf-trip-dropdown select { border-radius: 20px 0 0 20px !important; } .mdf-search .totlall { border-radius: 0 20px 20px 0 !important; } /* Bigger, more prominent bar overall */ .mdf-search .plcetogo, .mdf-search .totlall, .mdf-search .mdf-trip-dropdown select { min-height: 60px !important; padding-top: 14px !important; padding-bottom: 14px !important; } .mdf-search .plcetogo input.normalinput, .mdf-search .plcetogo input.form-control, .mdf-search .totlall .remngwd, .mdf-search .mdf-trip-dropdown select { font-size: 15px !important; } .mdf-search .flight_search_btn, .mdf-search #flight-form-submit { height: 60px !important; padding: 0 32px !important; font-size: 15px !important; } /* Trip-type dropdown (One Way/Round Trip/Multi-City) sits in a completely separate DOM branch from the From/To/Dates/Traveler/Modify row (it's the homepage widget's "top row" vs. the rest of the fields' "main row") -- both branches are direct children of form#flight_form itself, and *that* element's own gap:0 (flight_modify_search.css) is what left zero space between the dropdown and "Entebbe (EBB)" while every other field-to-field gap in the row is ~8-10px. (An earlier attempt at this fix targeted .flightSearchNavigation-f, one level too deep -- that container only wraps the dropdown alone, so its gap had nothing to space out.) */ .mdf-search form#flight_form { gap: 10px !important; } /* Date fields: the old 46px-tall / narrow-flex boxes clipped the full "DD-MM-YYYY" value to "31-07-2..." — claim more of the row for the date pair, and shrink the icon's reserved space so the full date fits. */ .mdf-search .secndates { flex: 1.5 1 0% !important; } /* From/To fields: same #flight_form-scoped fsw-field padding:0/min-height:unset !important (theme_style.css inline block) collapses flight_modify_search.css's own `padding: 9px 14px 9px 30px` on .plcetogo down to 0 -- that 30px was the space reserved for the ::before plane-icon glyph (flight_modify_search.css, left:14px), so with it gone the icon renders directly on top of the input's own text ("En[✈]ebbe") instead of beside it. #flight_form prefix needed (not just !important): that competing rule is ID-scoped, which outranks any number of plain classes regardless of !important tier. min-height/top/bottom padding set explicitly to match the sibling fields (.mdf-search .plcetogo/.totlall/.mdf-trip-dropdown select, both below and above this block) rather than reusing flight_modify_search.css's original 9px/46px figures -- this selector's higher specificity (needed to beat the ID rule) was *also* beating that sibling rule's own 60px/14px, so the first version of this fix fixed the icon overlap but left these two fields visibly shorter (39px) than every other field in the bar (60px). */ #flight_form .plcetogo.deprtures, #flight_form .plcetogo.destinatios { min-height: 60px !important; min-width: 140px !important; padding: 14px 14px 14px 30px !important; } /* !important needed on both: this compact bar's markup is nested inside the SAME #flight_form as the homepage widget (shared DOM structure), so #flight_form .fsw-dates .col-xs-6 (ID-scoped, theme_style.css inline block) was winning on specificity alone and collapsing this back to flex:1 1 0px -- which is exactly the narrow-box behavior this whole block exists to fix, so it was silently a no-op without !important. */ .mdf-search .secndates .padfive { min-width: 150px !important; flex: 1 1 150px !important; } /* #flight_form prefix needed, not just !important -- same ID-scoped #flight_form .fsw-field{padding:0 !important} inline rule that forced the From/To fix above to be ID-scoped also collapses this to 0 (this field carries .fsw-field too), and a plain-class selector can't outrank an ID regardless of !important tier. */ #flight_form .plcetogo.datemark { padding-left: 30px !important; } /* The markup's own