@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Changes to Major version include renaming or deletion of variables. 
   Changes to Minor version include addition of new variables.
   Changes to Revision version include variable value changes. */
  --Version-Number: 2.1;

  /* global styles variables */
  --font-family: "Roboto", sans-serif;
  --lightest: #fff;
  --light: #f6f6f6;
  --medium: #C4C4C4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 600;
  --logo-height: 2.8rem;

  --primary: #003479;
  --primary-hover: #4e5ba6;
  --primary-contrast: #4e5ba6;
  --primary-inverse: var(--lightest);

  --secondary: #747679;
  --secondary-hover: #4e5ba6;
  --secondary-contrast: #4e5ba6;
  --secondary-inverse: var(--lightest);

  --info: #4e5ba6;
  --info-hover: #717bbc;
  --info-contrast: #717bbc;
  --info-inverse: var(--lightest);

  --highlight: hsla(207, 79%, 95%, 1);
  --highlight-hover: hsla(207, 79%, 75%, 1);
  --highlight-contrast: hsla(207, 79%, 25%, 1);
  --highlight-inverse: var(--darkest);

  --success: #4e5ba6;
  --danger: #f63d68;
  --warning: #fb6514;
  --dark: #343a40;
  --white: #fff;

  /* SEAT COLOUR */
  --available-fill: #027a48;
  --available-stroke: #d1fadf;
  --spacious-fill: #002a61;
  --spacious-stroke: #e3eaf4;
  --selected-fill: #0086c9;
  --selected-stroke: #e0f2fe;
  --unavailable-fill: #e9eaeb;
  --unavailable-stroke: #a4a7ae;
}

/* ------- PER CLIENT CUSTOMIZATION ------- */

/* Assign Font to document */
html,
body {
  font-family: var(--font-family) !important;
}

/* Mapping needed when google font does not correspond */
h1,
.h1 {
  font-weight: var(--headings-font-weight) !important;
}

h2,
.h2 {
  font-weight: var(--headings-font-weight) !important;
}

h3,
.h3 {
  font-weight: var(--headings-font-weight) !important;
}

h4,
.h4 {
  font-weight: var(--headings-font-weight) !important;
}

h5,
.h5 {
  font-weight: var(--headings-font-weight) !important;
}

h6,
.h6 {
  font-weight: var(--headings-font-weight) !important;
}

/* Logo sizing specific to brand */
a.navbar-brand img {
  height: var(--logo-height);
}

/* AmeliaRes Logo Style */
.page-footer img.amelia-logo {
  width: 4.75rem;
}

/* SVG Icon Substitution */
.leg--footer .logo {
  background-image: url(./img/airline-icon.svg);
  width: 20px;
  height: 20px;
}


/*--------------------Fare Type Styling----------------- */
/* The fare type identifier is configured in client specific MongoDB Collections. 
Fare type CSS class name is constrcuted using the following rules: 1. Prefix 'fare-type-', 
2. Replace spaces within fare type identifier by '-'. 3. Transform fare type identifier into lowercase. */
/* Example CSS class for fare type identifier Bronze:*/

/* Change style for Fare option item*/
app-journey-fare-options .fare-type-sell-messages [class*='fare-type-']>div {
  align-items: center !important;
}

app-journey-fare-options .fare-type-sell-messages [class*='fare-type-']>div img {
  width: 1.5rem;
}

app-journey-fare-option-header.fare-type-basic,
app-journey-fare-option-summary.fare-type-basic .btn-select {
  background-color: #0BA5EC !important;
}

app-journey-fare-option-header.fare-type-plus,
app-journey-fare-option-summary.fare-type-plus .btn-select {
  background-color: #2e90fa !important;
}

app-journey-fare-option-header.fare-type-elite,
app-journey-fare-option-summary.fare-type-elite .btn-select {
  background-color: #4e5ba6 !important;
}

/* Customer Customization/Overrides */
.search-widget__search-tips.d-flex {
  display: none !important;
}

.starting-from-price-group {
  display: none;
}

app-quick-actions img.img-fluid {
  height: 6rem;
}

app-quick-actions .col.mb-3:first-child img.img-fluid {
  padding-top: 1rem;
}

.seat-container .seat-item {
  stroke: none !important;
  fill: none !important;
}

/* START SEAT MAP LEGEND */
.seat-design.seat~text {
  fill: var(--lightest) !important;
}

.seat-container .legend-available,
.seat-container .available-seat:not(.occupied-seat):not(.selected-seat):not(.disabled-seat) {
  stroke: var(--available-stroke) !important;
  fill: var(--available-fill) !important;
}

.seat-container .legend-selected,
.seat-container .occupied-seat,
.seat-container .selected-seat {
  stroke: var(--selected-stroke) !important;
  fill: var(--selected-fill) !important;
}

.seat-container .legend-spacious,
.seat-container .available-seat.bulkhead-back:not(.occupied-seat):not(.selected-seat):not(.disabled-seat) {
  stroke: var(--spacious-stroke) !important;
  fill: var(--spacious-fill) !important;
}

.seat-container .disabled-seat,
.seat-container .legend-unavailable,
.seat-container .unavailable-seat {
  stroke: var(--unavailable-stroke) !important;
  fill: var(--unavailable-fill) !important;
}

.seat-container.disabled-seat-container.deny-selection-seat {
  opacity: 1 !important;
}

.disabled-seat.seat~text,
.unavailable-seat.seat~text {
  fill: var(--unavailable-fill) !important;
}

/* END SEAT MAP LEGEND */