@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&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: 'Cairo', sans-serif;
  --lightest: #fff;
  --light: #f4f4f4;
  --medium: #C4C4C4;
  --dark: #333333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 500;

  --primary: #048B4C;
  --primary-hover: #36a26f;
  --primary-contrast: #048B4C;
  --primary-inverse: var(--lightest);

  --secondary: #0095ae;
  --secondary-hover: #0b5057;
  --secondary-contrast: #0095ae;
  --secondary-inverse: var(--lightest);

  --info: hsla(166, 62%, 40%, 1);
  --info-hover: hsla(166, 62%, 20%, 1);
  --info-contrast: hsla(166, 62%, 80%, 1);
  --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: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --dark: #343a40;
  --white: #fff;
  --logo-height: 2rem;

  --seat-available: #C7E3F3;
  --seat-selected: #4FAD5B;
  --seat-occupied: #D1D1D1;
  --seat-emergency: #F5C342;
}

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

/* Assign Font to document */
html,
body {
  font-family: var(--font-family) !important;
  color: var(--dark) !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 {
  width: 196px !important;
  height: 28px !important;
}

app-side-header {
  height: 63px !important;
}

/* 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:*/

.fare-type-platinum .card-header {
  background-color: #cab959 !important;
}

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

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

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

app-journey-fare-option-header.fare-type-platinum,
app-journey-fare-option-summary.fare-type-platinum .btn-select {
  background-color: var(--primary-hover) !important;
}

.page-steps .step.active .step--container {
  border-color: var(--secondary-hover);
}

/* Payment Icon */
.payment--method.JC {
  background: url(./assets/images/jcb.svg) center no-repeat !important;
  width: calc(48px + 0.9vw) !important;
  height: calc(32px + 0.9vw) !important;
  text-indent: -9999em !important;
}

.payment--method.MC {
  background: url(./assets/images/mastercard.svg) center no-repeat !important;
  width: calc(48px + 0.9vw) !important;
  height: calc(32px + 0.9vw) !important;
  text-indent: -9999em !important;
}

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

/* SEAT MAP + LEGENDS */

/* AVAILABLE */
.seat-design.available-seat,
.legend-available {
  stroke: var(--seat-available) !important;
}

.seat-design.available-seat:not(.bottom-design),
.legend-available:not(.bottom-design) {
  fill: var(--seat-available) !important;
}

/* SELECTED */
.seat-design.selected-seat,
.seat-design.occupied-seat,
.seat-design.selected-seat.emergency-exit-seat,
.seat-design.occupied-seat.emergency-exit-seat,
.legend-selected {
  stroke: var(--seat-selected) !important;
}

.seat-design.selected-seat:not(.bottom-design),
.seat-design.occupied-seat:not(.bottom-design),
.seat-design.selected-seat.emergency-exit-seat:not(.bottom-design),
.seat-design.occupied-seat.emergency-exit-seat:not(.bottom-design),
.legend-selected:not(.bottom-design) {
  fill: var(--seat-selected) !important;
}

/* OCCUPIED */
.seat-design.unavailable-seat,
.legend-occupied {
  stroke: var(--seat-occupied) !important;
}

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

.seat-design.unavailable-seat:not(.bottom-design),
.legend-occupied:not(.bottom-design) {
  fill:  var(--seat-occupied) !important;
}

/* EMERGENCY */
.seat-design.emergency-exit-seat,
.legend-emergency {
  stroke: var(--seat-emergency) !important;
}

.seat-design.emergency-exit-seat:not(.bottom-design),
.legend-emergency:not(.bottom-design) {
  fill: var(--seat-emergency) !important;
}

app-booking-success .leg-single .h4.mb-0 {
  font-size: 1.25rem !important;
}

app-journey-fare-options .fare-messaging--icon {
  width: 20px !important;
  height: 20px !important;
}


/*Replace Tingg logo with Cards*/
.payment--method.tingg {
  background: url(./assets/images/tingg-payment.png) center no-repeat !important;
  background-size: 4rem !important;
  width: 4rem !important;
}

.payment--method.tingg-cc {
  background: url(./assets/images/tingg-cc.png) center no-repeat !important;
  background-size: 9rem !important;
  width: 9rem !important;
  text-indent: -9999em;
}
.payment--method.tingg-mp {
  background: url(./assets/images/tingg-mp.png) center no-repeat;
  background-size: 100% !important;
  width: 10rem !important;
  text-indent: -9999em;
}

.payment--method.waafipay-mobile {
  background: url(/assets/images/waafipay-mobile.png) center no-repeat;
  background-size: 100% !important;
  width: 13rem !important;
  height: calc(80px + 0.9vw);
  color: transparent;
}

.payment--method.waafipay-bank {
  background: url(/assets/images/waafipay-bank.jpg) center no-repeat;
  background-size: 100% !important;
  width: 2.5rem !important;
  height: calc(80px + 0.9vw);
  text-indent: -9999em;
}

.payment--method--processing .payment--method.waafipay-bank{
  width: 4rem !important;
}

app-seat-map-legends .bg-white.pb-3.collapse.show {
  display: flex !important;
  justify-content: center !important;
}
app-seat-map-legends .row.mx-0.px-4.px-xl-5.pb-3 {
  width: 67% !important;
}

app-payment-method-picker .payment-methods {
  display: flex;
  flex-direction: column;
}
app-payment-method-picker app-payment-methods-group:nth-child(2) {
  order: 1;
}

/* PASSENGER PAGE */

/* ORDER */
app-passenger-information-input .passenger__personal-details,
app-passenger-information-input .passenger__info-instruction {
  order: 0;
}

app-passenger-information-input .passenger__title {
  order: 1;
}

app-passenger-information-input .passenger__first-name,
app-passenger-information-input .passenger__middle-name,
app-passenger-information-input .passenger__last-name,
app-passenger-information-input .passenger__birth-date,
app-passenger-information-input .passenger__nation-country,
app-passenger-information-input .passenger__loyalty-program{
  order: 2;
}

app-passenger-information-input .passenger__gender {
  order: 3;
}

app-passenger-information-input .passenger__contact-details,
app-passenger-information-input .passenger__phone-number,
app-passenger-information-input .passenger__email,
app-passenger-information-input .passenger__associated-adult {
  order: 4;
}
app-passenger-information-input .travel-documents-text,
app-passenger-information-input .passenger__travel-document-info-input {
  order: 5;
}

/* GRID DISPLAY */
@media screen and (min-width: 768px) {
  app-passenger-information-input .passenger__title,
  app-passenger-information-input .passenger__info-instruction,
  app-passenger-information-input .passenger__search-existing-passengers-by-category{
    margin-left: 0;
    width: 100% !important;
  }
  app-passenger-information-input app-person-title-picker {
    width: 33.3% !important;
  }
  app-passenger-information-input .passenger__gender,
  app-passenger-information-input .passenger__first-name,
  app-passenger-information-input .passenger__middle-name,
  app-passenger-information-input .passenger__last-name,
  app-passenger-information-input .passenger__birth-date,
  app-passenger-information-input .passenger__nation-country,
  app-passenger-information-input .passenger__loyalty-program,
  app-passenger-information-input .passenger__email,
  app-passenger-information-input .passenger__phone-number,
  app-passenger-information-input .passenger__associated-adult {
    margin-left: 0;
    width: 33.33333333% !important;
  }
}

/* ITEM */
app-passenger-information-input .passenger__data .col-lg-9.offset-lg-3 .row {
  display: block;
}

app-passenger-information-input .passenger__data .col-lg-9.offset-lg-3 .row .col-md-3,
app-passenger-information-input .passenger__data .col-lg-9.offset-lg-3 .row .col-md-8 {
  width: 100%;
}

app-passenger-information-input .passenger__data .col-lg-9.offset-lg-3 .row .col-md-3 {
  font-weight: 600;
  padding-bottom: 0;
}

app-passenger-information-input .frequent-flyer-text.passenger__frequent-flyer {
  margin-left: 0 !important;
}

app-journey-fare-option-header.fare-type-economy_basic,
app-journey-fare-option-summary.fare-type-economy_basic .btn-select,
app-journey-fare-option-summary.fare-type-economy_basic .btn-select:hover {
  background-color: #32753a !important;
  color: rgb(233,238,237) !important;
}

app-journey-fare-option-header.fare-type-economy_basicplus,
app-journey-fare-option-summary.fare-type-economy_basicplus .btn-select,
app-journey-fare-option-summary.fare-type-economy_basicplus .btn-select:hover {
  background-color: #1f5a2d !important;
  color: rgb(233,238,237) !important;
}

app-journey-fare-option-header.fare-type-economy_flex,
app-journey-fare-option-summary.fare-type-economy_flex .btn-select,
app-journey-fare-option-summary.fare-type-economy_flex .btn-select:hover {
  background-color: #1a3d2b !important;
  color: rgb(233,238,237) !important;
}

app-journey-fare-option-header.fare-type-business_flex,
app-journey-fare-option-summary.fare-type-business_flex .btn-select,
app-journey-fare-option-summary.fare-type-business_flex .btn-select:hover {
  background-color: #213965 !important;
  color: rgb(233,238,237) !important;
}

app-journey-fare-option-header.fare-type-business_basicplus,
app-journey-fare-option-summary.fare-type-business_basicplus .btn-select,
app-journey-fare-option-summary.fare-type-business_basicplus .btn-select:hover {
  background-color: #305291 !important;
  color: rgb(233,238,237) !important;
}