@import url('/assets/fonts/webfonts.css');

: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: 'Nexa', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --lightest: #fff;
  --light: #ffffff;
  --medium: #C4C4C4;
  --dark: #333;
  --darkest: #000;
  --light-inverse: #16678a;
  --white-inverse: #16678a;
  --bs-heading-color: #16678a !important;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;
  --logo-height: 2.5rem;

  --primary: #16678a;
  --primary-hover: #029acb;
  --primary-contrast: #029acb;
  --primary-inverse: var(--lightest);

  --secondary: #55c0a2;
  --secondary-hover: #a2d39c;
  --secondary-contrast: #a2d39c;
  --secondary-inverse: var(--lightest);

  --info: #029acb;
  --info-hover: #34aed5;
  --info-contrast: #34aed5;
  --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: #55c0a2;
  --danger: #dc3545;
  --warning: #ffc107;
  --dark: #343a40;
  --white: #fff;
}

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

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

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

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


/* Customer Customization/Overrides */
app-journey-fare-option-header .h6 {
  color: var(--lightest);
}

.confirmation--shoulder .page--action {
  border: 1px solid;
  padding: .75rem 2rem;
  border-radius: .5rem;
}

.confirmation--shoulder .page--action:hover {
  background-color: var(--primary);
  color: var(--lightest);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Footers */
app-root:not(:has(app-agency)) .page-controllers.container-fluid {
  position: fixed;
  bottom: 0;
  box-shadow: 0 -7px 21px -4px #0000003b;
  z-index: 1030 !important;
}

app-root:not(:has(app-agency)) .page-controllers.container-fluid .container-lg,
app-root:not(:has(app-agency)) .page-controllers.container-fluid .container-lg.mt-5 {
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
  margin-top: 0 !important;
}

app-root:not(:has(app-agency)) .page-controllers.container-fluid .container-lg .col-sm-8 {
  width: 100%;
  justify-content: end !important;
  gap: 1rem;
}

app-root:not(:has(app-agency)) div.site-footer,
app-root:not(:has(app-agency)) footer.site-footer,
app-root:not(:has(app-agency)) section.site-footer,
app-root:not(:has(app-agency)) .section.site-footer,
app-root:not(:has(app-agency)) .section[aria-label="site footer"],
app-root:not(:has(app-agency)) .section[aria-label="site -footer"] {
  margin-bottom: 1.5rem;
}

/* End Footers */