@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,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: 'Inter', sans-serif;
  --header-font-family: 'Raleway', sans-serif;
  --lightest: #fff;
  --light: #eff5f5;
  --medium: #003755;
  --dark: #003755;
  --darkest: #000;
  --body-background: var(--light);
  --body-color: var(--light);
  --headings-font-weight: 700;
  --logo-height: 2.5rem;

  --primary: #003755;
  --primary-hover: #325e76;
  --primary-contrast: #325e76;
  --primary-inverse: var(--lightest);

  --secondary: #FD5E3A;
  --secondary-hover: #fd8f77;
  --secondary-contrast: #49B2CA;
  --secondary-inverse: var(--lightest);

  --tertiary: #49B2CA;
  --tertiary-hover: #6dc1d4;
  --tertiary-contrast: #6dc1d4;
  --tertiary-inverse: var(--lightest);

  --info: #FD5E3A;
  --info-hover: #fd8f77;
  --info-contrast: #fd8f77;
  --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: #FD5E3A;
  --danger: #FD5E3A;
  --warning: #ffc107;
  --dark: #343a40;
  --white: #eff5f5;

  --bs-body-bg: var(--light) !important;
  --bs-body-color-rgb: var(--light) !important;
  --bs-border-color-translucent: var(--primary) !important;
  --bs-primary-bg-subtle: var(--tertiary) !important;
  --bs-primary-border-subtle: var(--tertiary) !important;
}

.table-primary {
  --bs-table-striped-bg: var(--primary) !important;
  --bs-table-striped-color: var(--lightest) !important
}

/* ------- 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;
  font-family: var(--header-font-family) !important;
  color: var(--primary) !important;
}

h2,
.h2 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--header-font-family) !important;
  color: var(--primary) !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-basic,
app-journey-fare-option-summary.fare-type-basic .btn-select {
  background-color: var(--light) !important;
  color: #003755 !important;
}

app-journey-fare-option-summary.fare-type-basic .btn-select {
  border: 1px solid #003755 !important;
}

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

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

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

app-journey-fare-option-header div.h6>span {
  text-align: center !important;
  width: 100% !important;
  display: inline-block !important;
}

.seat-container .seat-design.emergency-exit-seat {
  stroke: var(--warning) !important;
}

/* Customer Customization/Overrides */

app-home,
app-check-in,
app-flight-search-results,
app-passengers,
app-seats-selection,
app-extras,
app-confirm-and-pay,
app-booking-success,
app-res,
app-agent-login,
app-agency,
.bg-white,
app-agency .agent-content .page-body,
app-agency .agent-content .page-controllers,
app-agency .footer-container {
  background-color: var(--light) !important;
}

/* BUTTONS */
.btn-primary {
  --primary: #FD5E3A;
  --primary-hover: #fd8f77;
}

/* END BUTTONS */

/* FORM CONTROLS */
.form-control {
  background-color: var(--light) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):hover {
  background-color: var(--primary) !important;
}

.form-control:disabled,
.navbar-toggler:disabled {
  background-color: var(--light-disabled) !important;
}

.form-control,
app-phone-control.custom-component-form-control app-typeahead input.form-control,
.border.border-medium {
  border-color: var(--primary) !important;
}

.card-footer--btn-group>button:not([disabled]):hover {
  color: var(--lightest);
}

/* END FORM CONTROLS */

/* SHARED COMPONENTS */
.shadow.bg-white.rounded {
  border: 1px solid var(--primary);
}

.page-steps .step.active .step--container {
  border-bottom-color: var(--tertiary) !important;
}

app-reservation-booking-cost-summary .card-body .h6 {
  font-weight: 400 !important;
}

app-site-header .cart-details--container {
  background-color: var(--lightest);
  color: var(--primary);
}

app-passenger-information-summary .card-text.fs-14 {
  display: none;
}

.calendar .body .not-available {
  opacity: 50%;
}

/* END SHARED COMPONENTS */

/* FARE SELECTION PAGE */
.fare-option--banner-image {
  height: 53%;
  margin-left: .7rem;
}

.fare-messaging--icon {
  width: 9%;
  margin-top: .1rem;
}

.dates-ribbon-item .border-top {
  border-top-color: var(--tertiary) !important;
}

.fare--selection-column .badge {
  color: var(--primary);
}

/* END FARE SELECTION PAGE */


/* SEAT MAP */
.seat-map-svg-container,
.seat-map-canvas {
  --medium: #D6A89D;
  fill: var(--light) !important;
}

.seat-container .seat-item {
  stroke: var(--light) !important;
  fill: var(--light) !important;
}

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

.passenger--row.active {
  background-color: var(--primary) !important;
  color: var(--lightest) !important;
}

[seat-map-name="S20_S20 New"] [data-seat-position^="1_"] {
  transform: translate(20px, 0px);
}

/* END SEAT MAP */

/* EXTRAS */
app-ancillary-category-current-selections .bg-secondary {
  background-color: var(--primary) !important;
}

app-ancillary-category-current-selections .btn-secondary {
  background-color: var(--primary) !important;
  border: none;
}

app-ancillary-category .btn {
  --secondary: #003755;
  --secondary-hover: #325e76;
}

app-ancillary-option .controls {
  border: 1px solid #FD5E3A;
}

/* END EXTRAS */

/* CONFIRM AND PAY */
.charges-total .text-primary>div:first-child,
.charges-journey-total .text-primary>div:first-child {
  color: var(--darkest) !important;
}

.charges-total .text-primary>div:last-child,
.charges-journey-total .text-primary>div:last-child {
  color: var(--secondary) !important;
}

.cart-reminder .ic-lightbulb-on-bf::before {
  display: none;
}

/* END CONFIRM AND PAY */

/* FOOTER */
.site-footer {
  --primary: #fff;
  --secondary: #fff;
  background-color: #003755;
}

.site-footer-quick-access,
.site-footer-contact {
  display: none;
}

.site-footer-container>.site-footer-row {
  display: block;
}

.col-sm-8.site-footer-main,
.col-sm-4.site-footer-logo-section {
  width: 100%;
}

@media (min-width: 992px) {
  .site-footer-content-row .col-md-4 {
    width: 20%;
  }
}

.site-footer-navigation-5 .site-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "instagram   facebook    tiktok      linkedin";
}

.site-footer-navigation-5 .site-footer-nav .site-footer-nav-link-1 {
  grid-area: instagram;
  background-image: url(./assets/images/logos/instagram.svg);
}

.site-footer-navigation-5 .site-footer-nav .site-footer-nav-link-2 {
  grid-area: facebook;
  background-image: url(./assets/images/logos/facebook.svg);
}

.site-footer-navigation-5 .site-footer-nav .site-footer-nav-link-3 {
  grid-area: tiktok;
  background-image: url(./assets/images/logos/tiktok.svg);
}

.site-footer-navigation-5 .site-footer-nav .site-footer-nav-link-4 {
  grid-area: linkedin;
  background-image: url(./assets/images/logos/linkedin.svg);
}

.site-footer-navigation-5 .site-footer-nav-link-1,
.site-footer-navigation-5 .site-footer-nav-link-2,
.site-footer-navigation-5 .site-footer-nav-link-3,
.site-footer-navigation-5 .site-footer-nav-link-4 {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--tertiary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  text-indent: -9999em;
}

.site-footer-navigation-6.col-md-4 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer-navigation-6 .site-footer-navigation-title.mb-3 {
  background-image: url(./assets/images/logo.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 10rem;
  height: 3.5rem;
  background-size: contain;
  text-indent: -9999em;
  margin-bottom: 1.5rem !important;
}

.site-footer-navigation-6 .site-footer-nav {
  display: flex;
  gap: .5rem;
}

.site-footer-navigation-6 .site-footer-nav .site-footer-nav-link:not(:last-child) {
  border-right: 1px solid;
  padding-right: .5rem;
}

/* END FOOTER */

/* AGENCY */
app-agent-left-sidebar .offcanvas-body,
app-agent-left-sidebar .offcanvas-footer {
  --secondary: #003755;
}

app-agent-recent-reservation .btn-secondary {
  --secondary: #003755;
  --secondary-hover: #325e76;
}

.welcome-container .text-white .h2 {
  color: var(--lightest) !important;
}

.welcome-container .d-flex {
  display: block !important;
}

.welcome-container .h2.mb-4 {
  margin-bottom: .5rem !important;
}

.welcome-container .d-flex .flex-column {
  margin-bottom: 2.5rem !important;
}

.welcome-container .d-flex .flex-column .h2,
.terminal-icon {
  display: none;
}

.welcome-container::before {
  content: "";
  position: absolute;
  top: -1rem;
  right: 2rem;
  width: 40%;
  height: 100%;
  background-image: url(./assets/images/logo-no-text.png);
  background-size: cover;
  opacity: 0.1;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 1200px) {
  .welcome-container::before {
    top: -2rem;
    width: 30%;
    right: 4rem;
  }
}

@media (min-width: 1400px) {
  .welcome-container::before {
    width: 25%;
  }
}

.alert-primary.text-primary {
  color: var(--lightest) !important;
}

app-agent-user-registration .form-input-wrapper>.row:not(.registration__agency-name):not(.registration__iataNumber) {
  order: 1;
}

/* END AGENCY */