/*
 * Base styles for the QatarWheels website.
 *
 * Colours and sizes come from tokens.css, which is generated from the
 * Flutter app's app_theme.dart. Nothing here hard-codes a brand colour: if
 * a value is worth naming it belongs in the Dart theme, so the site and the
 * apps cannot disagree about it.
 *
 * Written mobile-first. The Flutter app was designed against 402px iPhone
 * frames and the desktop layout was a later widening at 900px; this keeps
 * the same breakpoint so the two read as one product.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--brand-background);
  color: var(--brand-text-dark);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Arabic content is set right to left; the layout mirrors from the html
   dir attribute rather than from a separate stylesheet. */
[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", Inter, system-ui, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-link-blue);
}

.wrap {
  /*
    The desktop view uses the screen. Every card grid on the site is an
    auto-fill grid, so the width a monitor actually has becomes more cards
    per row rather than wider cards - which is the point of a desktop
    layout, and what the 1100px cap was preventing.

    The cap that remains is for readability at the extreme: past 1760px a
    row of body text stops being a line and starts being a ruler.
  */
  max-width: 1760px;
  margin-inline: auto;
  /* Published as a variable so the few things that bleed to the screen's
     edges can pull out by exactly this much. One of them had -20px
     written into it, which is neither of these numbers. */
  --qw-wrap-pad: 24px;
  padding-inline: var(--qw-wrap-pad);
}

@media (max-width: 720px) {
  .wrap { --qw-wrap-pad: 16px; }
}

/*
  Prose stays narrow inside the wide shell. A policy page, an article or a
  form is read left to right, so it keeps a measure a person can follow
  even when the window is 2560px across.
*/
.page--prose,
article.wrap.page {
  /* The prose pages are the wrap themselves, not a child of it. */
  max-width: 900px;
}

.muted {
  color: var(--brand-label-gray);
  font-size: 13px;
}

/* Visible only when focused; a keyboard user should not have to tab through
   the whole nav on every page. */
.skip-link {
  position: absolute;
  /* Logical, not `left`: on the Arabic pages the whole layout is mirrored,
     and a skip link that appears on the left of a right-to-left page is
     the one control on the site that jumps to the wrong side. */
  inset-inline-start: -9999px;
}

.skip-link:focus {
  inset-inline-start: 8px;
  top: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--brand-surface);
  border-radius: 6px;
}

/* ---------------------------------------------------------------- header */

/* The header follows the page. It used to scroll away, which on a long
   results list left search and the account actions a whole page behind. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--brand-chrome-navy);
  color: #fff;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--qw-header-h, 68px);
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  /* One row: the field, then the buttons, both at the right end. */
  .header-inner { flex-wrap: nowrap; }
}

.brand img {
  display: block;
}

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: #fff;
}

/* ---------------------------------------------------------------- content */

.page {
  padding-block: 24px 48px;
}

.breadcrumbs {
  font-size: 13px;
  color: var(--brand-label-gray);
  margin-bottom: 12px;
}

.breadcrumbs a {
  color: var(--brand-label-gray);
}

h1,
h2 {
  /* AppTheme.fontLg: the size the browse headings already used, for a
     page title and a section title alike. */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.56;
  color: var(--brand-heading-gray);
}

h1 { margin: 0 0 4px; }

h2 { margin: 32px 0 12px; }

.price {
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-button-blue);
  margin: 0 0 8px;
}

.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  padding: 16px;
}

/*
  What just happened, in the colour of what happened. Every screen says
  it the same way - a card with role="status" after a save, role="alert"
  after a failure - and both were the same grey box, so "Saved." and
  "That did not save" looked identical at a glance.
*/
p.card[role="status"] {
  background: #E8F7EE;
  border-color: #A9DCBB;
  color: #1B5E32;
}

p.card[role="alert"] {
  background: #FDECEC;
  border-color: #F0B4B4;
  color: #8C2020;
}

.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-surface-tint);
  color: var(--brand-text-secondary);
}

.badge--urgent {
  background: var(--brand-status-closed);
  color: #fff;
}

.badge--certified {
  background: var(--brand-status-open-text);
  color: #fff;
}

/* Key facts. auto-fit rather than a fixed column count so it reflows
   without a media query at every step. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.facts li {
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.facts .label {
  display: block;
  font-size: 12px;
  color: var(--brand-label-gray);
}

.facts .value {
  display: block;
  font-weight: 600;
  margin-top: 2px;
}

.spec {
  width: 100%;
  border-collapse: collapse;
}

.spec th,
.spec td {
  text-align: start;
  padding: 10px 8px;
  border-bottom: 1px solid var(--brand-hairline);
  vertical-align: top;
}

.spec th {
  width: 40%;
  font-weight: 600;
  color: var(--brand-label-gray);
}

/* A wide table must scroll inside itself; the page body must never scroll
   sideways. */
.table-scroll {
  overflow-x: auto;
}

.cta {
  display: inline-block;
  background: var(--brand-chrome-navy);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 8px;
  min-height: 44px; /* comfortably tappable */
}

.cta:hover,
.cta:focus-visible {
  background: var(--brand-action-blue);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: 48px;
  padding-block: 40px 28px;
  background: #030130;                  /* AppTheme.brandChromeNavy */
  color: #FFFFFF;
}

.qw-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.qw-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;                      /* AppTheme.fontBody */
}

.qw-footer__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.qw-footer__col a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.qw-footer__col a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Named but not yet built, as the More sheet marks them. */
.qw-footer__soon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.45);
}

.qw-footer__soon em {
  padding: 1px 8px;
  border-radius: 999px;                 /* AppTheme.radiusPill */
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;                      /* AppTheme.fontXs */
  font-style: normal;
  font-weight: 600;
}

/* The Elite tile, which the sheet ends its grid with. */
.qw-footer__elite {
  display: block;
  text-decoration: none;               /* outside the column, it lost the column's rule */
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.5);   /* AppTheme.eliteGold */
  border-radius: 8px;                   /* AppTheme.radiusMd */
}

.qw-footer__elite strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #D4AF37;
}

.qw-footer__elite span {
  font-size: 12px;                      /* AppTheme.fontSm */
  color: rgba(255, 255, 255, 0.7);
}

.qw-footer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.qw-footer__foot p { margin: 0; }

/* One logo file, drawn white here. */
.qw-footer__logo { filter: brightness(0) invert(1); opacity: 0.9; }

@media (max-width: 1000px) {
  .qw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .qw-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .qw-footer__help { margin-inline-start: 0; }
}

@media (min-width: 900px) {
  body {
    font-size: 16px;
  }

  h1,
  h2 {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------- listings */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
  /* This list is drawn as pills, so it carries no markers - without
     these every chip rendered with a bullet beside it. */
  padding: 0;
  list-style: none;
}

.chip {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-text-secondary);
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: 999px;
  padding: 7px 14px;
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--brand-button-blue);
  color: var(--brand-button-blue);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.car-card__link {
  text-decoration: none;
}

.car-card__title {
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--brand-heading-gray);
}

.car-card .price {
  font-size: 20px;
  margin: 0 0 4px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* The side navigation: fixed to the left of every page, carrying what  */
/* the hamburger used to lead to.                                       */
/* ------------------------------------------------------------------ */

/* The page is a grid: header across the top, the bar beside the page,
   footer across the bottom - so nothing has to be pushed out of the way. */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "nav"
    "header"
    "main"
    "footer"
    "powered";
  align-items: start;
}

.skip-link { grid-area: header; }
.site-header { grid-area: header; }
main { grid-area: main; min-width: 0; }
.qw-poweredblock {
  grid-area: powered;
  background: var(--brand-chrome-navy, #030130);
  color: rgba(255, 255, 255, 0.65);
}
.site-footer { grid-area: footer; }

.qw-sidenav {
  grid-area: nav;
  background: #030130;                   /* AppTheme.brandChromeNavy */
  color: #FFFFFF;
}

.qw-sidenav__body { padding: 0 24px 24px; }

.qw-sidenav__brand {
  display: block;
  padding: 24px 24px 0;                  /* _GuestHeader's own padding */
}

@media (min-width: 900px) {
  body {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "nav header"
      "nav main"
      "nav footer"
      "nav powered";
  }

  .qw-sidenav {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  /* The brand keeps still in a band the height of the top bar, and the
     list below it is what scrolls - so the scrollbar starts at the top
     bar's lower edge, not at the top of the screen. */
  .qw-sidenav__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--qw-header-h, 68px);
    padding: 0 12px;
  }

  .qw-sidenav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .qw-sidenav__body { padding: 16px 12px 32px; }

  /* The bar is already open, so the hamburger has nothing to open. */
  .site-nav .qw-hamburger { display: none; }

  /* Header, page and footer share the column beside the bar, so the
     ordinary wrap - capped and centred - keeps the three aligned with
     each other at any width. */
}

@media (min-width: 1200px) {
  body { grid-template-columns: 260px minmax(0, 1fr); }
}

/* The checkbox is only ever a switch; it is never seen or tabbed to. */
.qw-navtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Above 900px the bar is always there, so the hamburger is not. */
.qw-burger,
.qw-navscrim { display: none; }

/*
  Below 900px the bar becomes a drawer.

  It used to run across the top of the page - forty links above the
  content, pushing the page itself off the first screen and still not
  showing the whole list. This is what the app does with the same menu.
*/
@media (max-width: 899px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "footer"
      "powered";
  }

  .qw-burger {
    /* The search sets order:-1 so it precedes the buttons; the menu has
       to precede the search, which is where a thumb reaches for it. */
    order: -2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-inline-end: 8px;
    border-radius: 8px;                  /* AppTheme.radiusMd */
    color: #FFFFFF;
    cursor: pointer;
  }

  .qw-burger:hover { background: rgba(255, 255, 255, 0.12); }

  .qw-sidenav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: min(320px, 86vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Off canvas until asked for. translateX rather than display, so it
       slides rather than appearing. */
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }

  [dir="rtl"] .qw-sidenav { transform: translateX(100%); }

  .qw-navtoggle:checked ~ .qw-sidenav { transform: none; }

  .qw-navscrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(3, 1, 48, 0.5);     /* AppTheme.brandChromeNavy */
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms;
  }

  .qw-navtoggle:checked ~ .qw-navscrim {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  /* One column inside the drawer: it is 320 wide, not a page. */
  .qw-sidenav__body {
    display: block;
    max-height: none;
  }
}

/* Someone who asked for less motion gets the drawer without the slide. */
@media (prefers-reduced-motion: reduce) {
  .qw-sidenav,
  .qw-navscrim { transition: none; }
}

/* Everything inside it is drawn for a dark ground. */
.qw-sidenav .qw-moretile {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.qw-sidenav .qw-moretile > a,
.qw-sidenav .qw-morerow > a,
.qw-sidenav .qw-morerow > span,
.qw-sidenav .qw-morelist > li > a { color: #FFFFFF; }

.qw-sidenav .qw-morelist {
  background: transparent;
  border: 0;
}

.qw-sidenav .qw-morelist > li { border-color: rgba(255, 255, 255, 0.12); }

.qw-sidenav .qw-morerow,
.qw-sidenav .qw-morelist > li {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.qw-sidenav .qw-morerow > a:hover,
.qw-sidenav .qw-morelist > li > a:hover { background: rgba(255, 255, 255, 0.07); }

.qw-sidenav .qw-morerow__chevron { border-color: rgba(255, 255, 255, 0.55); }

.qw-sidenav .qw-morerow.is-soon .qw-morerow__label,
.qw-sidenav .qw-morerow__soon { color: rgba(255, 255, 255, 0.5); }

/* _GuestHeader's own measurements: full width, 52 tall, 16 under the
   logo, inside 24 of padding. */
/* The same button as Continue, because they are the same button:
   brandActionButtonHeight is 48 app-wide and the theme sets fontMd at
   w600. The More Menu's own 52 was the exception this borrowed. */
.qw-sidenav__signin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 16px 0 16px;
  padding: 0 16px;
  text-align: center;
}

/* The logo's own box is 3:2 and its lower third is empty ground, so the
   band is measured to the mark rather than to the file. */
.qw-sidenav .qw-logo { margin-inline: 0; }

.qw-sidenav__title {
  margin: 18px 0 8px;
  font-size: 12px;                       /* AppTheme.fontSm */
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.qw-sidenav .qw-morelist { margin: 0; }

.qw-sidenav__help {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.qw-sidenav__help a { color: #FFFFFF; }

/* Both languages behind the one you are reading. */
.qw-langpick { position: relative; }

.qw-langpick > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.qw-langpick > summary::-webkit-details-marker { display: none; }

.qw-langpick__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 70;
  min-width: 150px;
  padding: 6px;
  border-radius: 8px;
  background: var(--brand-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.qw-langpick__is,
.qw-langpick__to {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
}

.qw-langpick__is {
  background: var(--brand-surface-tint, #F2F6FD);
  color: var(--brand-heading-gray);
  font-weight: 600;
}

.qw-langpick__to { color: var(--brand-action-blue); }
.qw-langpick__to:hover { background: var(--brand-surface-tint, #F2F6FD); }