@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&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: "IBM Plex Sans", sans-serif;
  --lightest: #fff;
  --light: #F3F3F3;
  --medium: #C4C4C4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;
  --logo-height: 3.25rem;

  --primary: #a65523;
  --primary-hover: #CB744E;
  --primary-contrast: #CB744E;
  --primary-inverse: var(--lightest);

  --secondary: #2774ae;
  --secondary-hover: #269;
  --secondary-contrast: #269;
  --secondary-inverse: var(--lightest);

  --info: #778899;
  --info-hover: #657483;
  --info-contrast: #657483;
  --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;

  --available-seat:#FFB347;
  --selected-seat:#5DADE2;
  --occupied-seat:#808080;
  --emergency-seat:#28A745;
}

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

.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;
}

/* Customer Customization/Overrides */

app-site-header.bg-primary,
app-agent-login .agent-login-header {
  background-color: var(--lightest) !important;
  color: var(--primary) !important;
}

app-site-header .text-white,
app-site-header li::after,
app-site-header .iasi::after,
#language-picker {
  color: var(--primary) !important;
}


/* CUSTOMIZED SEATS */

/* Selected Seat */
.seat.available-seat.selected-seat {
  stroke: var(--selected-seat) !important;
}

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

/* Emergency Seat */
.seat.available-seat.emergency-exit-seat {
  stroke: var(--emergency-seat) !important;
}

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

.seat.available-seat.emergency-exit-seat~text {
  fill: var(--lightest) !important;
}

/* Selected Seat */
.seat.available-seat {
  stroke: var(--available-seat) !important;
}

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

/* Occupied seats */
.seat.occupied-seat:not(.selected-seat) {
  stroke: var(--occupied-seat) !important;
  cursor: not-allowed;
}

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

.seat.occupied-seat:not(.selected-seat)~text {
  cursor: not-allowed;
}

.passenger--selection .bg-info {
  background-color: var(--selected-seat) !important;
}

.passenger--selection .bg-secondary {
  background-color: var(--occupied-seat) !important;
}

/* END CUSTOMIZED SEATS */

/* FOOTER */
.site-footer {
  background-color: var(--secondary) !important;
  color: var(--lightest) !important;
}

app-site-footer a {
  color: var(--lightest);
}

app-site-footer a:hover {
  color: var(--lightest);
  text-decoration: underline!important;
}

@media (min-width: 1200px) {
  app-site-footer .col-sm-8 .col-md-4 {
    width: 20%;
  }
}
@media (max-width:1200px) {
  app-site-footer .col-sm-8 .col-md-4 {
    width: 25%;
  }
}
@media (max-width: 992px) {
  app-site-footer .col-sm-8 .col-md-4 {
    width: 33%;
  }
}
@media (max-width: 768px) {
  app-site-footer .col-sm-8 .col-md-4 {
    width: 50%;
  }
  app-site-footer .col-sm-8 {
    width: 100%;
  }
  app-site-footer .col-sm-4 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  app-site-footer .col-sm-8 {
    width: 85%;
  }
  app-site-footer .col-sm-4 {
    width: 15%;
  }
}


/* END FOOTER */