/* =====================================================================
   RwandAir – UX / UI enhancement layer (loaded last, overrides safely)
   Scope: responsive polish, accessibility, notifications, motion.
   ===================================================================== */
:root {
  --rw-blue: #0068bd;
  --rw-blue-dark: #00457e;
  --rw-yellow: #fad201;
  --rw-green: #20603d;
  --rw-ink: #1c2530;
  --rw-muted: #5b6776;
  --rw-surface: #ffffff;
  --rw-radius: 12px;
  --rw-shadow: 0 10px 30px rgba(16, 36, 64, .16), 0 2px 6px rgba(16, 36, 64, .08);
  --rw-focus: 0 0 0 3px rgba(0, 104, 189, .45);
  --rw-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
/* (no overflow clipping on html/body: it disables page scrolling in this layout) */
img, video, iframe, svg { max-width: 100%; }
img { font-style: italic; }                 /* readable alt text if an image fails */
::selection { background: rgba(0, 104, 189, .18); }

/* ---------- Accessibility: visible keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rw-blue) !important;
  outline-offset: 2px;
  box-shadow: var(--rw-focus);
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.rwx-skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 2147483647;
  background: var(--rw-blue); color: #fff !important; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .2s ease;
}
.rwx-skip-link:focus { top: 12px; }

/* ---------- Header polish ---------- */
.header-wrapper { transition: box-shadow .25s ease; }
.rwx-scrolled .header-wrapper { box-shadow: 0 4px 18px rgba(16, 36, 64, .10); }
/* "LOG IN" must never break onto two lines */
.desktop-login-visible .question-link, .desktop-login-visible a { white-space: nowrap; }
@media (max-width: 991.98px) {
  .desktop-login-visible { width: auto !important; }
  .desktop-login-visible .question-link { width: auto !important; min-width: 40px; padding: 5px 12px !important; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Forms ---------- */
input, select, textarea, button { font-family: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rw-blue); }
.rwx-invalid { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198, 40, 40, .18) !important; }
@media (max-width: 767.98px) {
  /* 16px stops iOS Safari from zooming into fields */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* ---------- Touch devices: comfortable tap targets ---------- */
@media (pointer: coarse) {
  .btn-close, .close, .menu-close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .rwx-toast__close { width: 44px; height: 44px; }
}

/* ---------- Legacy bootstrap toast container (notification.js) ---------- */
.toast-container { z-index: 1055 !important; pointer-events: none; max-width: 100vw; }
.toast-container .toast { pointer-events: auto; }

/* ---------- Modern notification centre (RWNotify) ---------- */
.rwx-toasts {
  position: fixed; z-index: 2147483000; right: 20px; bottom: calc(20px + var(--rw-safe-bottom));
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(380px, calc(100vw - 24px)); pointer-events: none;
}
.rwx-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  background: var(--rw-surface); color: var(--rw-ink);
  border-radius: var(--rw-radius); box-shadow: var(--rw-shadow);
  border-left: 4px solid var(--rw-blue); padding: 14px 8px 14px 14px;
  font-size: 14px; line-height: 1.45;
  animation: rwx-in .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.rwx-toast.rwx-out { animation: rwx-out .22s ease-in both; }
.rwx-toast__icon {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rw-blue); color: #fff; font-weight: 700; font-size: 15px; flex: none;
}
.rwx-toast__icon img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rwx-toast__title { font-weight: 700; margin: 0 0 2px; font-size: 14.5px; }
.rwx-toast__body p { margin: 0 0 4px; }
.rwx-toast__body a { color: var(--rw-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rwx-toast__body img { max-height: 34px; width: auto; }
.rwx-toast__actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.rwx-toast__btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px;
  background: var(--rw-blue); color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 13px; border: 0; cursor: pointer;
}
.rwx-toast__close {
  width: 32px; height: 32px; border: 0; background: transparent; color: var(--rw-muted);
  border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.rwx-toast__close:hover { background: #eef3f8; color: var(--rw-ink); }
.rwx-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: currentColor; opacity: .35; transform-origin: left; color: var(--rw-blue);
  animation: rwx-bar linear forwards; animation-duration: var(--rwx-duration, 6s);
}
.rwx-toast:hover .rwx-toast__bar, .rwx-toast:focus-within .rwx-toast__bar { animation-play-state: paused; }
.rwx-toast--success { border-left-color: #2e7d32; } .rwx-toast--success .rwx-toast__icon { background: #2e7d32; } .rwx-toast--success .rwx-toast__bar { color: #2e7d32; }
.rwx-toast--warning { border-left-color: #e0a100; } .rwx-toast--warning .rwx-toast__icon { background: #e0a100; color: #1c2530; } .rwx-toast--warning .rwx-toast__bar { color: #e0a100; }
.rwx-toast--error   { border-left-color: #c62828; } .rwx-toast--error .rwx-toast__icon { background: #c62828; } .rwx-toast--error .rwx-toast__bar { color: #c62828; }

@keyframes rwx-in  { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rwx-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes rwx-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575.98px) {
  .rwx-toasts { left: 12px; right: 12px; width: auto; bottom: calc(12px + var(--rw-safe-bottom)); }
  .rwx-toast { font-size: 13.5px; padding: 12px 6px 12px 12px; }
}

/* ---------- Connectivity banner ---------- */
.rwx-offline {
  position: fixed; left: 50%; top: 12px; transform: translate(-50%, -150%);
  z-index: 2147483001; background: #1c2530; color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--rw-shadow); transition: transform .3s ease; pointer-events: none;
}
.rwx-offline.is-visible { transform: translate(-50%, 0); }

/* ---------- Back to top ---------- */
.rwx-top {
  position: fixed; left: 20px; bottom: calc(20px + var(--rw-safe-bottom)); z-index: 1040;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rw-blue); color: #fff; box-shadow: var(--rw-shadow);
  display: grid; place-items: center; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s;
}
.rwx-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.rwx-top:hover { background: var(--rw-blue-dark); }
.rwx-top svg { width: 20px; height: 20px; }

/* ---------- Floating widgets must not cover content on phones ---------- */
@media (max-width: 767.98px) {
  button#popup.feedback-button { font-size: 12px !important; opacity: .9; }
  button#popup.feedback-button:hover, button#popup.feedback-button:focus-visible { opacity: 1; }
  .rwx-top { width: 42px; height: 42px; left: 12px; bottom: calc(12px + var(--rw-safe-bottom)); }
}

/* ---------- Cookie bar ---------- */
#cookies { z-index: 1050; }
#cookies .cookies { gap: 12px; }
#cookies-btn { min-height: 40px; padding: 8px 22px; border-radius: 999px; cursor: pointer; }

/* ---------- Media / layout-shift guards ---------- */
table { max-width: 100%; }
@media (max-width: 767.98px) {
  .table-responsive-auto { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  h1 { overflow-wrap: anywhere; }
}

/* ---------- Motion preferences ---------- */
/* note: no global scroll-behavior:smooth - it breaks the site's jQuery scroll animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
  .rwx-toasts, .rwx-top, .rwx-offline, #cookies, .toast-container, .skeleton-container { display: none !important; }
}

/* =====================================================================
   Booking form UX (2026-09-25)
   ===================================================================== */
/* Inline errors under the fields */
.field-validation-error {
  display: flex !important; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: 13px !important; line-height: 1.35; font-weight: 600;
  color: #c62828 !important; animation: rwx-in .2s ease both;
}
.field-validation-error::before {
  content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: #c62828; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; margin-top: 1px;
}
input.rwx-invalid, input[aria-invalid="true"] { border-color: #c62828 !important; background-color: #fff8f8 !important; }

/* "What happens next" guidance */
.rwx-next {
  clear: both; width: 100%; margin: 14px 0 2px; padding: 12px 14px;
  background: #f3f8fd; border: 1px solid #dbe8f5; border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: #33414f;
}
.rwx-next__title { font-weight: 800; color: var(--rw-blue-dark); white-space: nowrap; }
.rwx-next__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; counter-reset: none; }
.rwx-next__steps li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; line-height: 1.3; }
.rwx-next__steps li + li::before { content: "›"; color: #8aa3bb; margin-right: 10px; font-weight: 700; }
.rwx-next__n {
  width: 20px; height: 20px; border-radius: 50%; background: var(--rw-blue); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; flex: none;
}
@media (max-width: 767.98px) {
  .rwx-next { flex-direction: column; align-items: flex-start; }
  .rwx-next__steps { flex-direction: column; gap: 6px; }
  .rwx-next__steps li + li::before { display: none; }
}

/* Hand-over progress overlay */
.rwx-overlay {
  position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; padding: 20px;
  background: rgba(8, 28, 52, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: rwx-in .2s ease both;
}
.rwx-overlay__card {
  width: min(440px, 100%); background: #fff; border-radius: 18px; padding: 28px 24px 24px;
  text-align: center; box-shadow: var(--rw-shadow); color: var(--rw-ink);
}
.rwx-overlay__title { font-size: 19px; font-weight: 800; margin: 14px 0 6px; color: var(--rw-blue-dark); }
.rwx-overlay__trip { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.rwx-overlay__hint, .rwx-overlay__slow { font-size: 13.5px; color: var(--rw-muted); margin: 0 0 6px; line-height: 1.45; }
.rwx-overlay__slow { color: #8a5a00; }
.rwx-overlay__cancel {
  margin-top: 12px; min-height: 40px; padding: 8px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid #c9d6e3; background: #fff; color: var(--rw-ink); font-weight: 700;
}
.rwx-overlay__plane { position: relative; height: 6px; border-radius: 999px; background: #e6eef6; overflow: hidden; margin: 0 auto; width: 80%; }
.rwx-overlay__plane span {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rw-blue), #3aa0ff); animation: rwx-progress 1.2s ease-in-out infinite;
}
@keyframes rwx-progress { from { left: -40%; } to { left: 100%; } }

/* Cart always reachable on small screens (next to LOG IN) */
.rwx-mobile-cart { display: none; }
@media (max-width: 991.98px) {
  .rwx-mobile-cart {
    display: flex !important; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; position: relative;
  }
  .rwx-mobile-cart #cart-widget { display: flex !important; align-items: center; }
}
html.rwx-cart-open .header-wrapper { z-index: 2147482000 !important; }
html.rwx-cart-open .rwx-toasts, html.rwx-cart-open .rwx-top { display: none !important; }

/* =====================================================================
   Date picker modals (2026-09-25)
   ===================================================================== */
body.modal-open #popup.feedback-button, body.modal-open #chat-open-button,
body.modal-open .rwx-top, body.modal-open .rwx-toasts { display: none !important; }

.modal.rwx-cal .modal-dialog { max-height: none !important; overflow: visible !important; }
.modal.rwx-cal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); }
.modal.rwx-cal .modal-header, .modal.rwx-cal .modal-footer { flex: none; }
.modal.rwx-cal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal.rwx-cal .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.rwx-cal-hint { margin: 0 auto 0 0 !important; font-size: 14px; font-weight: 600; color: var(--rw-blue-dark); line-height: 1.35; }
.modal.rwx-cal .modal-footer .btn[disabled], .modal.rwx-cal .modal-footer button:disabled { opacity: .45; cursor: not-allowed; }

/* before a date is picked, don't paint today's cell as "selected" */
.modal.rwx-cal.rwx-pristine .daterangepicker td.active:not(.off),
.modal.rwx-cal.rwx-pristine .daterangepicker td.in-range:not(.off) { background: transparent !important; color: inherit !important; }
.modal.rwx-cal .daterangepicker td.today:not(.active) { box-shadow: inset 0 0 0 2px var(--rw-blue); font-weight: 800; }
.modal.rwx-cal.rwx-pristine .daterangepicker td.today { box-shadow: inset 0 0 0 2px var(--rw-blue) !important; font-weight: 800; }
.modal.rwx-cal .daterangepicker td.available:hover { background: #e8f1fb; }

@media (max-width: 767.98px) {
  .modal.rwx-cal { padding: 0 !important; }
  .modal.rwx-cal .modal-dialog { margin: 0 !important; width: 100% !important; max-width: 100% !important; height: 100%; }
  .modal.rwx-cal .modal-content { height: 100%; max-height: 100% !important; border-radius: 0 !important; border: 0; }
  .modal.rwx-cal .modal-header { padding: 12px 16px !important; box-shadow: 0 2px 8px rgba(16, 36, 64, .08); }
  .modal.rwx-cal .modal-header h4 { font-size: 17px !important; margin: 0 0 6px !important; }
  .modal.rwx-cal .modal-header hr, .modal.rwx-cal .modal-header .rwx-hr { display: none; }
  .modal.rwx-cal .modal-body { padding: 8px 12px !important; }
  .modal.rwx-cal .modal-footer {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -2px 10px rgba(16, 36, 64, .10); background: #fff;
  }
  .modal.rwx-cal .modal-footer .btn, .modal.rwx-cal .modal-footer button { min-height: 46px; min-width: 120px; flex: none; }
  .rwx-cal-hint { font-size: 13px; }
  .modal.rwx-cal .daterangepicker .drp-calendar { max-width: 100% !important; width: 100% !important; }
  .modal.rwx-cal .daterangepicker td, .modal.rwx-cal .daterangepicker th { min-width: 40px; height: 42px; }
  .modal.rwx-cal .close { position: absolute; top: 6px; right: 8px; z-index: 2; }
}

/* =====================================================================
   Small screens: booking first (2026-09-25)
   ===================================================================== */
@media (max-width: 575.98px) {
  /* shorter hero so "Book Flight" is visible without scrolling */
  .home-slider-wrapper, .home-slider-wrapper .bx-wrapper, .home-slider-wrapper .bx-viewport {
    height: min(60vh, 440px) !important; max-height: min(60vh, 440px) !important;
  }
  .home-slider-wrapper .bxslider > li, .home-slider-wrapper .bxslider > li figure { height: min(60vh, 440px) !important; }
  .home-slider-wrapper .bxslider > li > figure img, .home-slider-wrapper .bxslider > li > img { height: min(60vh, 440px) !important; width: 100% !important; object-fit: cover; object-position: center 30%; }

  /* notifications drop in under the header, never over the booking form */
  .rwx-toasts { top: calc(var(--rwx-header, 96px) + 8px); bottom: auto; flex-direction: column; }
  @keyframes rwx-in-top { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .rwx-toasts .rwx-toast { animation-name: rwx-in-top; }

  /* booking tabs: comfortable touch rows */
  h2.resp-accordion { min-height: 52px; display: flex; align-items: center; scroll-margin-top: calc(var(--rwx-header, 96px) + 8px); }
  #booking-form { scroll-margin-top: calc(var(--rwx-header, 96px) + 8px); }
  .findFlights { min-height: 50px; font-size: 16px !important; }
}
@media (max-width: 374.98px) {
  .home-slider-wrapper h1, .home-slider-wrapper h2, .bx-caption h1, .bx-caption h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .bx-caption p { font-size: 13px !important; }
  .rwx-next { padding: 10px; font-size: 12.5px; }
}

/* floating "Book a flight" shortcut (phones only) */
.rwx-book-fab {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--rw-blue); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 28px rgba(0, 70, 140, .35); cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.1), opacity .2s ease;
}
.rwx-book-fab svg { width: 18px; height: 18px; transform: rotate(45deg); }
.rwx-book-fab.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.rwx-book-fab:active { transform: translate(-50%, 0) scale(.97); }
html.rwx-fab-on .rwx-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.modal-open .rwx-book-fab { display: none; }
@media (min-width: 768px) { .rwx-book-fab { display: none !important; } }
@media print { .rwx-book-fab { display: none !important; } }
.rwx-top { box-shadow: 0 0 0 2px #fff, var(--rw-shadow); }

/* =====================================================================
   Booking form: Upgrade tab + recent searches (2026-09-25)
   ===================================================================== */
.rwx-upg-ico { display: grid !important; place-items: center; background: none !important; color: #00457e; }
.rwx-upg-ico svg { width: 22px; height: 22px; }
.resp-tab-active .rwx-upg-ico, h2.resp-tab-active .rwx-upg-ico { color: var(--rw-blue); }
h2.resp-tab-active .rwx-upg-ico { color: #fff; }

.rwx-upgrade-tab { padding: 22px 24px 18px; }
.rwx-upg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.rwx-upg-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fdf3d0; color: #7a5a00; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.rwx-upg-intro h3 { margin: 10px 0 6px !important; font-size: 20px !important; line-height: 1.3; color: #0f1923; font-weight: 800; }
.rwx-upg-intro > p { margin: 0 0 14px; color: #3b4957; font-size: 14px; line-height: 1.5; }
.rwx-upg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: upg; }
.rwx-upg-steps li { position: relative; padding-left: 38px; font-size: 13.5px; color: #3b4957; line-height: 1.45; counter-increment: upg; }
.rwx-upg-steps li::before { content: counter(upg); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--rw-blue); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.rwx-upg-steps b { display: block; color: #0f1923; }
.rwx-upg-note { margin: 12px 0 0; font-size: 12px; color: #6b7785; }
.rwx-upg-widget { background: #f6f9fc; border: 1px solid #e1e9f2; border-radius: 14px; padding: 16px; min-height: 180px; }
.rwx-upg-mount.is-loading { min-height: 150px; display: grid; place-items: center; color: #6b7785; font-size: 13px; }
.rwx-upg-mount.is-loading::after { content: attr(data-loading); }
.rwx-upg-fallback { text-align: center; padding: 18px 8px; color: #3b4957; font-size: 14px; }
.rwx-upg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; margin-top: 8px; border-radius: 999px; background: var(--rw-blue); color: #fff !important; font-weight: 800; text-decoration: none !important; }
.rwx-upg-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0 !important; font-size: 13px; }
.rwx-upg-links a { color: var(--rw-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991.98px) {
  .rwx-upg { grid-template-columns: 1fr; gap: 18px; }
  .rwx-upgrade-tab { padding: 16px 14px; }
  .rwx-upg-intro h3 { font-size: 18px !important; }
}

.rwx-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.rwx-recent__label { font-size: 12.5px; font-weight: 700; color: #6b7785; margin-right: 2px; }
.rwx-recent__chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid #cfdcea; background: #fff; color: #00457e; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rwx-recent__chip:hover, .rwx-recent__chip:focus-visible { background: #eef5fc; border-color: var(--rw-blue); }
@media (pointer: coarse) { .rwx-recent__chip { min-height: 40px; } }

/* =====================================================================
   Visual consistency layer (2026-09-25)
   One typeface, one set of interaction states, balanced headings.
   ===================================================================== */
:root { --rw-font: "Lato", "Helvetica Neue", Arial, sans-serif; }

/* several inner pages still set Helvetica / Roboto / Arial on titles and buttons */
body, h1, h2, h3, h4, h5, h6, button, input, select, textarea, .btn, .tooltip, .popover {
  font-family: var(--rw-font) !important;
}
h1, h2, h3 { text-wrap: balance; letter-spacing: normal; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { -webkit-font-smoothing: antialiased; }

/* consistent, responsive page titles on inner-page banners */
.slider-vertical h1, [class*="banner-title"] h1 { font-size: clamp(24px, 3.2vw, 34px) !important; line-height: 1.2 !important; font-weight: 800 !important; }

/* buttons: same feel everywhere */
button, .btn, a.btn, [class*="-btn"], [class*="button"] > a {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .08s ease;
}
button:not(:disabled):active, .btn:not(:disabled):active { transform: translateY(1px); }
button:disabled, .btn.disabled, .btn:disabled { cursor: not-allowed; }
.btn-primary { background-color: #00509e !important; border-color: #00509e !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background-color: #00457e !important; border-color: #00457e !important; }
.btn-outline-primary { color: #00509e !important; border-color: #00509e !important; }
.btn-outline-primary:hover { background-color: #00509e !important; color: #fff !important; }

/* inline text links inside content */
main p a:not([class]), main li p a:not([class]), main td a:not([class]), .rwx-toast__body a {
  color: #00509e; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
main p a:not([class]):hover, main td a:not([class]):hover { color: #00457e; text-decoration-thickness: 2px; }

/* form controls outside the booking engine: one radius + one focus colour */
.form-control, .custom-select { border-radius: 8px; }
.form-control:focus, .custom-select:focus { border-color: #0068bd !important; box-shadow: 0 0 0 3px rgba(0, 104, 189, .18) !important; }
input::placeholder, textarea::placeholder { color: #8391a1; opacity: 1; }

/* Bootstrap components in brand colours */
.page-link { color: #00509e; }
.page-item.active .page-link { background-color: #00509e; border-color: #00509e; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #00509e; }
.badge-primary { background-color: #00509e; }
.alert { border-radius: 10px; }
.modal-content { border-radius: 14px; border: 0; box-shadow: 0 24px 60px rgba(16, 36, 64, .22); }
.dropdown-menu { border-radius: 10px; border-color: #e1e9f2; box-shadow: 0 12px 30px rgba(16, 36, 64, .14); }

/* quiet, branded scrollbars */
html { scrollbar-color: #a9bccf transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b7c7d8; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #8fa6bf; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* Upgrade tab: form only (2026-09-25) */
.rwx-upgrade-tab { padding: 20px 24px 22px !important; }
.rwx-upg { display: block !important; max-width: 760px; margin: 0 auto; }
.rwx-upg-widget { background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; }
.rwx-upg-mount { width: 100%; }
.rwx-upg-mount > * { margin: 0 auto !important; max-width: 100% !important; }
.rwx-upg-mount .MuiPaper-root { box-shadow: 0 6px 24px rgba(16, 36, 64, .10) !important; border-radius: 14px !important; border: 1px solid #e1e9f2; }
.rwx-upg-mount.is-loading { min-height: 220px; border-radius: 14px; background: linear-gradient(90deg, #f3f7fb 25%, #e9f0f7 50%, #f3f7fb 75%); background-size: 200% 100%; animation: rwx-upg-shimmer 1.2s linear infinite; }
@keyframes rwx-upg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rwx-upg-fallback { background: #f6f9fc; border: 1px solid #e1e9f2; border-radius: 14px; }
@media (max-width: 991.98px) {
  .rwx-upgrade-tab { padding: 12px 10px 16px !important; }
}

/* Upgrade tab: fields + button only (2026-09-25) */
#pg-ew-booking form > .MuiGrid-container > .MuiGrid-root:has(> [data-testid="eligibility-widget.form.title"]),
#pg-ew-booking form > .MuiGrid-container > .MuiGrid-root:has([data-testid="eligibility-widget.form.disclaimer"]),
#pg-ew-booking [data-testid="eligibility-widget.form.title"],
#pg-ew-booking [data-testid="eligibility-widget.form.disclaimer"] { display: none !important; }
#pg-ew-booking .MuiCardContent-root { padding: 18px 20px !important; }
#pg-ew-booking [data-testid="loading-button"] { min-height: 48px; border-radius: 10px !important; font-weight: 800 !important; text-transform: none !important; width: 100%; }
@media (min-width: 768px) {
  #pg-ew-booking form > .MuiGrid-container { flex-wrap: nowrap !important; align-items: flex-end; }
  #pg-ew-booking form > .MuiGrid-container > .MuiGrid-root:has([data-testid="loading-button"]) { flex: 0 0 auto !important; max-width: none !important; width: auto !important; }
  #pg-ew-booking [data-testid="loading-button"] { min-height: 46px; min-width: 190px; white-space: nowrap; }
}
@media (max-width: 767.98px) {
  #pg-ew-booking .MuiCardContent-root { padding: 14px !important; }
}


/* =====================================================================
   Account pop-up: close button, caret, full-profile link (2026-09-28)
   ===================================================================== */
.desktop-login-visible .question-link { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
.rwx-caret { display: inline-grid; place-items: center; width: 16px; height: 16px; transition: transform .25s ease; }
.rwx-caret svg { display: block; }
.question-link.rwx-open .rwx-caret { transform: rotate(180deg); }
@media (max-width: 991.98px) { .rwx-caret { width: 14px; height: 14px; } }

.desktop-login-invisible .desktop-login-row, .desktop-login-invisible .dreammiles-profile-popup { position: relative; }
.desktop-login-invisible .menu-close-btn.rwx-close {
  display: grid !important; place-items: center; position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; color: #33414f;
  font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s, color .15s;
}
.desktop-login-invisible .menu-close-btn.rwx-close:hover, .desktop-login-invisible .menu-close-btn.rwx-close:focus-visible { background: #e2eaf3; color: #0f1923; }

.rwx-profile-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin: 14px 0 6px; padding: 12px 16px; border-radius: 12px; background: #00509e; color: #fff !important;
  font-weight: 800; font-size: 14.5px; text-decoration: none !important; transition: background .18s;
}
.rwx-profile-link:hover, .rwx-profile-link:focus-visible { background: #00457e; }
.dreammiles-member-header.rwx-clickable { cursor: pointer; border-radius: 10px; transition: background .15s; }
.dreammiles-member-header.rwx-clickable:hover { background: #f3f7fb; }

/* DreamMiles page header (logged-in state) */
.rwx-dm-profile { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 700; }
.rwx-dm-avatar { width: 30px; height: 30px; border-radius: 50%; background: #00509e; color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; }
.rwx-dm-miles { color: #5b6776; font-weight: 600; font-size: 13px; }
.rwx-dm-logout { border: 1px solid #c9d6e3; background: #fff; color: #0f1923; border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.rwx-dm-logout:hover { background: #f3f7fb; }

/* chat bubble + notifications never overlap on desktop */
@media (min-width: 576px) { .rwx-toasts { bottom: calc(96px + var(--rw-safe-bottom)); } }

/* ==========================================================================
   Recent searches v2 (2026-09-28): full-width row, route chips, remove / clear,
   swipeable single row on phones
   ========================================================================== */
.rwx-recent {
  clear: both; display: block !important; width: 100% !important; box-sizing: border-box;
  margin: 14px 0 0 !important; padding: 0;
}
.rwx-recent__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.rwx-recent__label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #5b6776; text-transform: uppercase;
}
.rwx-recent__label svg { color: #0068bd; flex: none; }
.rwx-recent__clear {
  border: 0; background: none; padding: 4px 2px; font-size: 12.5px; font-weight: 700; color: #0068bd; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.rwx-recent__clear:hover, .rwx-recent__clear:focus-visible { color: #00457e; }
.rwx-recent__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rwx-recent__item {
  display: inline-flex; align-items: stretch; flex: none; max-width: 100%;
  border: 1px solid #cfdcea; border-radius: 999px; background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.rwx-recent__item:hover { border-color: #0068bd; box-shadow: 0 2px 8px rgba(0, 69, 126, .10); }
.rwx-recent__chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 6px 0 14px; margin: 0;
  border: 0; background: transparent; color: #00457e; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; cursor: pointer; min-width: 0;
}
.rwx-recent__code {
  font-size: 11px; font-weight: 700; color: #6b7785; background: #f1f5f9; border-radius: 4px; padding: 1px 4px;
}
.rwx-recent__arrow { color: #0068bd; font-weight: 800; margin: 0 2px; }
.rwx-recent__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 36px; margin: 0; padding: 0;
  border: 0; border-left: 1px solid #e3ebf3; background: transparent; color: #8a97a6; font-size: 18px; line-height: 1; cursor: pointer;
}
.rwx-recent__remove:hover, .rwx-recent__remove:focus-visible { color: #c62828; background: #fdf1f1; }
.rwx-recent__item:has(.is-active) { border-color: #0068bd; background: #eef5fc; }
.rwx-recent__chip.is-active { background: #eef5fc; }
.rwx-recent__chip:focus-visible, .rwx-recent__remove:focus-visible, .rwx-recent__clear:focus-visible {
  outline: 2px solid #0068bd; outline-offset: -2px;
}
@media (pointer: coarse) {
  .rwx-recent__chip, .rwx-recent__remove { min-height: 42px; }
  .rwx-recent__remove { width: 40px; }
}
/* phones: one swipeable row, no overflow of the form */
@media (max-width: 767.98px) {
  .rwx-recent { margin: 12px 0 4px !important; }
  .rwx-recent__row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    padding: 2px 16px 6px 1px; margin-right: -16px; scrollbar-width: none;
  }
  .rwx-recent__row::-webkit-scrollbar { display: none; }
  .rwx-recent__item { scroll-snap-align: start; }
  .rwx-recent__chip { font-size: 13px; padding-left: 12px; }
}

.rwx-recent.rwx-recent--top { margin: 2px 0 14px !important; }

/* ==========================================================================
   UX fixes (2026-09-29)
   ========================================================================== */
/* Cart: the widget needs 44px (icon + count badge); style3.css squeezed it to 25px */
.desktop-account-signup .signup-cart,
.signup-cart,
#signup-cart-mobile-bar .signup-cart { width: auto !important; min-width: 44px; overflow: visible !important; }
#cart-widget { min-width: 44px; overflow: visible !important; }
#cart-iframe {
  max-width: none !important; min-width: 44px; flex: none !important;
  height: 38px !important; overflow: visible; display: block;
}

/* Account pop-up: scrolls inside itself (the page is locked while it is open) */
.desktop-login-invisible.rwx-fit {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* =====================================================================
   DreamMiles login + e-mail code (2026-09-25)
   ===================================================================== */
.loginForm input.rwx-invalid { border-color: #c62828 !important; background: #fff8f8 !important; }
.dm-error {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; padding: 10px 12px;
  border-radius: 10px; background: #fdecea; color: #8a1c14; font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.dm-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #c62828; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

.dm-otp { text-align: center; padding: 4px 4px 8px; animation: rwx-in .25s ease both; }
.dm-otp h3 { margin: 10px 0 4px !important; font-size: 20px !important; font-weight: 800 !important; color: var(--rw-blue-dark) !important; }
.dm-otp-icon { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; background: #e8f1fb; color: var(--rw-blue); display: grid; place-items: center; }
.dm-otp-sub { margin: 0 0 16px !important; font-size: 14px; color: #33414f; line-height: 1.45; }
.dm-otp-sub b { color: #0f1923; word-break: break-all; }
.dm-otp-label { display: block; font-size: 13px; font-weight: 700; color: #5b6776; margin-bottom: 8px; }
.dm-otp-boxes { display: flex; justify-content: center; gap: 8px; margin: 0 auto 10px; }
.dm-otp .dm-otp-digit {
  width: 46px !important; height: 56px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 1.5px solid #c9d6e3 !important; border-radius: 12px !important; background: #fff !important;
  text-align: center; font-size: 24px !important; font-weight: 800; color: #0f1923; caret-color: var(--rw-blue);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dm-otp .dm-otp-digit:focus { outline: none; border-color: var(--rw-blue) !important; box-shadow: 0 0 0 4px rgba(0, 104, 189, .15); transform: translateY(-1px); }
.dm-otp .dm-otp-digit.rwx-invalid { border-color: #c62828 !important; background: #fff8f8 !important; }
.dm-shake { animation: dm-shake .4s ease; }
@keyframes dm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dm-otp-timer { font-size: 13px; color: #5b6776; margin: 0 0 8px !important; font-variant-numeric: tabular-nums; }
.dm-otp-timer.is-expired { color: #b42318; font-weight: 700; }
.dm-otp-msg { margin: 0 auto 10px; max-width: 320px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #fdecea; color: #8a1c14; }
.dm-otp-msg[data-kind="ok"] { background: #e7f7ee; color: #1a7f43; }
.dm-otp .dm-otp-verify { width: 100%; max-width: 320px; margin: 4px auto 8px !important; display: block; }
.dm-otp-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.dm-link { border: 0; background: transparent; padding: 6px 2px; color: var(--rw-blue); font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dm-link:disabled { color: #8a97a6; cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; }
.dm-otp-hint { font-size: 12px; color: #8a97a6; margin: 0 !important; }
.dm-otp.is-success .dm-otp-icon { background: #e7f7ee; color: #2e7d32; }
@media (max-width: 400px) {
  .dm-otp-boxes { gap: 6px; }
  .dm-otp .dm-otp-digit { width: 40px !important; height: 50px !important; font-size: 21px !important; }
}

/* "My DreamMiles profile" shortcut in the member pop-up */
.dreammiles-profile-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin: 12px 0 4px; padding: 11px 16px; border-radius: 999px; background: var(--rw-blue); color: #fff !important;
  font-weight: 700; font-size: 14px; text-decoration: none !important; transition: background .2s;
}
.dreammiles-profile-link:hover, .dreammiles-profile-link:focus-visible { background: var(--rw-blue-dark); }
.dreammiles-profile-link svg { width: 16px; height: 16px; }


/* the cart opens as a full-height panel: the widget sets position:fixed inline when it opens (2026-10-02) */
#cart-iframe[style*="position: fixed"],
#cart-iframe[style*="position:fixed"] {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
}

/* ==========================================================================
   QA fixes (2026-09-30): header localisation, travel-alert bar, hero, focus
   ========================================================================== */

/* Travel-alert bar: use the free width and never break a single alert */
@media (min-width:992px){
  .checkin-time-wrapper .left-top-desktop-links{flex:1 1 auto;min-width:0;max-width:calc(100% - 160px)!important}
  .left-top-desktop-links .bx-viewport li p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Header: keep nav + language/currency on one row for longer (FR/ZH) labels */
@media (min-width:992px){
  .bottom-desktop-links>.display-align{flex:1 1 auto;min-width:0}
  .bottom-desktop-links>.desktop-account-signup{flex:0 0 auto}
  .bottom-desktop-links .desktop-logo-wrapper{flex:0 0 auto}
  .bottom-desktop-links .desktop-main-links{flex:1 1 auto;min-width:0;padding:0 8px 0 16px!important}
  .bottom-desktop-links .desktop-main-links>ul{display:flex!important;flex-wrap:nowrap;float:none!important;width:auto!important;margin:0!important;padding:0!important;white-space:nowrap}
  .bottom-desktop-links .desktop-main-links>ul>li{flex:0 0 auto;float:none}
  .bottom-desktop-links .desktop-main-links>ul>li>a{white-space:nowrap;font-size:clamp(13px,1.12vw,15px)!important;padding-left:clamp(4px,.5vw,10px)!important;padding-right:clamp(4px,.5vw,10px)!important}
  #menu-options{flex:0 0 auto}
  #menu-options>li.country-visible{padding-left:8px!important;padding-right:8px!important}
  #menu-options>li.country-visible>a,#menu-options>li.country-visible>a *{white-space:nowrap}
}
@media (min-width:992px) and (max-width:1199.98px){
  .bottom-desktop-links .desktop-logo-wrapper img{max-width:120px;height:auto}
  .bottom-desktop-links .desktop-main-links{padding-left:8px!important;padding-right:4px!important}
  #menu-options>li.country-visible{padding-left:4px!important;padding-right:4px!important}
  #menu-options>li.country-visible>a{gap:4px!important;padding-left:8px!important;padding-right:8px!important}
  .desktop-login-visible .question-link{padding-left:8px!important;padding-right:8px!important}
}

/* Home hero: keep caption in the clear left area of the artwork, and stop the
   booking widget from covering the bottom of the image (DreamMiles artwork) */
@media (min-width:992px){
  .home-slider-wrapper .hm-bx-caption .slider-vertical h1,
  .home-slider-wrapper .hm-bx-caption .slider-vertical p{max-width:min(520px,calc(40vw - (100vw - min(100vw,1140px))/2 - 40px))!important;text-shadow:0 2px 10px rgba(0,0,0,.45)}
  .home-slider-wrapper .hm-bx-caption .slider-vertical h1{font-size:clamp(26px,2.6vw,40px)!important;line-height:1.15!important}
  .home-slider-wrapper .hm-bx-caption .slider-vertical p{font-size:clamp(15px,1.3vw,20px)!important}
  .home-slider-form-wrapper>.home-form-wrapper{margin-top:-24px!important}
}

/* MUI text fields (Upgrade tab etc.): one focus ring on the field, not a
   second outline around the inner <input> */
.MuiInputBase-root .MuiInputBase-input:focus,
.MuiInputBase-root .MuiInputBase-input:focus-visible{outline:none!important;box-shadow:none!important}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#0068bd!important;border-width:2px!important}
.MuiOutlinedInput-root.Mui-focused{box-shadow:0 0 0 3px rgba(0,104,189,.2)}



/* 2026-10-05: newsletter pop-up ("Tailor Your Trip") fits any screen and scrolls inside */
.subscribe-modal-wrapper.active{display:flex !important;align-items:center;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.subscribe-modal-wrapper .subscribe-modal{margin:auto !important;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);width:100%}
.subscribe-modal-wrapper .subscribe-modal .modal-content{overflow-y:auto;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);-webkit-overflow-scrolling:touch}
.subscribe-modal-wrapper .subscribe-modal img{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);height:auto;align-self:stretch}
.subscribe-modal-wrapper .subscribe-modal .close-btn{z-index:2;background:#fff;border-radius:50%;width:34px;height:34px;line-height:1}
@media (max-width:767px),(max-height:640px){
 .subscribe-modal-wrapper .subscribe-modal{max-width:480px}
 .subscribe-modal-wrapper .subscribe-modal img{display:none}
 .subscribe-modal-wrapper .subscribe-modal .modal-content{padding:22px 18px}
 .subscribe-modal-wrapper .subscribe-modal h2{font-size:20px;padding-right:36px}
}