@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&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: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-family-display: 'Open Sans', Arial, Helvetica, sans-serif;
  --lightest: #fff;
  --light: #f3f3f3;
  --medium: #c4c4c4;
  --dark: #444;
  --darkest: #000;
  --body-background: var(--lightest);
  --header-with-logo-background: #EFF3F7;
  --body-color: var(--light);
  --headings-font-weight: 600;
  --seat-color: #FAA954;

  --primary: #002663;
  --primary-hover: #003d9e;
  --primary-contrast: #021a41;
  --primary-inverse: var(--lightest);

  --secondary: #ec7a08;
  --secondary-hover: #fc9229;
  --secondary-contrast: #da6f05;
  --secondary-inverse: var(--lightest);

  --info: var(--secondary);
  --info-hover: var(--secondary-hover);
  --info-contrast: var(--secondary-inverse);
  --info-inverse: var(--darkest);

  --highlight: #ffffff;
  --highlight-hover: #ececec;
  --highlight-contrast: #ececec;
  --highlight-inverse: var(--darkest);

  --success: #28a745;
  --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;
  font-family: var(--font-family-display) !important;
}

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

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

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

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

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

/* Logo sizing specific to brand */
a.navbar-brand img {
  width: 13rem;
}

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

/* Client Customizations */

/* Give them a light background header */
app-site-header.bg-primary,
app-site-header .breadcrumb-item .text-white,
app-site-header .breadcrumb-item::after {
  background-color: var(--lightest) !important;
  color: var(--darkest) !important;
}

.navbar-dark .navbar-text a {
  color: var(--darkest) !important;
}

#cartVisibilityController {
  border-color: var(--darkest) !important;
}

/* Change the seat selection colors for better brand cosntrating colors */
app-seats-selection .passenger--row .bg-info.btn,
app-seats-selection .leg-action button.btn.btn-info {
  color: var(--lightest) !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

app-seats-selection .row-seat .seat.selected .data-set {
  color: var(--lightest) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

app-seats-selection .row-seat .seat:not(.inexistent) .data-set,
app-seats-selection .row-seat .seat:not(.inexistent) .cell:before {
  border-color: var(--primary) !important;
}

/* 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-search .check-in-constrain {
  color: black !important;
}
app-search .page-body {
  margin-top: 0rem;
  padding-top: 4rem;
}

app-passenger-information-input .passenger--data .fs-14:nth-child(1) {
  color: var(--secondary) !important;
  font-size: 1rem !important;
}

app-flight-journey-detail .card:nth-child(2) .card-body-button:first-child {
  border-top-left-radius: 0.5rem;
}

app-res .card-body-button:first-child:enabled,
.check-in-ticket-card .card-body-button:first-child:enabled {
  background-color: var(--primary);
  color: var(--lightest);
  font-weight: var(--headings-font-weight);
  border-bottom-left-radius: 0.5rem;
}

.check-in-ticket-card .card-body-button {
  border-bottom-right-radius: 0.5rem;
}

app-check-in .check-in-constrain .title {
  font-weight: var(--headings-font-weight)
}

app-thanks app-page-header-message {
  top: 15rem;
  position: absolute;
  width: 100%;
}

app-thanks .page-body > .container-lg > .row > .col-12 > .row > .col-md-12 {
  display: flex;
  flex-direction: column;
}

app-thanks .page-body > .container-lg > .row > .col-12 > .row > .col-md-12 > .row:nth-child(1) {
  padding-bottom: 6rem;
}

app-thanks .page-body > .container-lg > .row > .col-12 > .row > .col-md-12 > .row:nth-child(2) {
  order: 2!important;
}

app-thanks .page-body > .container-lg > .row > .col-12 > .row > .col-md-12 > .row:nth-child(3) {
  order: 1!important;
}

@media screen and (max-width: 600px) {
  app-thanks .page-header--pnr {
    font-size: 2.3vh;
  }
}

.agent-login-header.bg-primary {
  background-color: var(--header-with-logo-background)!important;
  color: var(--primary) !important;
}

app-outstanding-balance-message .alert-danger{
  background-color: #cfe2ff!important;
  color: #084298!important;
  border-color:  #b6d4fe!important;
}
app-outstanding-balance-message .btn-outline-danger{
  color: #084298!important;
  border-color:  #073256!important;
}

app-outstanding-balance-message .btn-outline-danger:hover{
  background-color: #073256!important;
  color: #ffffff!important;
}

.no-selectable-seat-message {
  display: none !important;
}

.payment-methods--option .card-body .offset-1 .h5 .text-muted::after {
  display: block;
  margin-top: 1rem;
  content: 'Please note that we do not accept debit cards for online bookings.'
}

/* START CUSTOM SEAT MAP */
.selected-seat .seat {
  fill: var(--seat-color) !important;
}

.custom-seat-icon:has(g.selected-seat) + .seat-name,
.custom-seat-icon:has(g.selected-seat) + .seat-name + .seat-price {
  fill: var(--lightest);
}

.custom-seat-icon:has(g.unavailable-seat) + .seat-name,
.custom-seat-icon:has(g.unavailable-seat) + .seat-name + .seat-price {
  fill: var(--medium);
  cursor: not-allowed !important;
}

.emergency-exit-seat .seat-design {
  stroke: #fbba76 !important;
}

.unavailable-seat .seat-design {
  stroke: var(--medium) !important;
  cursor: not-allowed !important;
}

.seat-price.seat-text {
  transform: translate(0px, -5px);
}
.seat-name.seat-text {
  transform: translate(0px, -1px);
}

.custom-seat-icon {
  overflow: auto;
}

.custom-window-icon-start,
.custom-window-icon-end {
  display: none;
  stroke: var(--secondary) !important;
  stroke-width: 0.2;
}

.custom-no-window-text {
  display: none;
}

[data-seat-position*="_A"] .custom-seat-icon > g:not(.window-seat) .custom-window-icon-start {
  display: block;
}
[data-seat-position*="_F"] .custom-seat-icon > g:not(.window-seat) .custom-window-icon-end {
  display: block;
}

[data-seat-position*="_A"] .custom-seat-icon > g:not(.window-seat) .custom-no-window-text {
  display: block;
  font-size: 15% !important;
  font-weight: 400 !important;
  fill: var(--secondary) !important;
}

/* END CUSTOM SEAT MAP */

app-agent-user-registration .agent-registration-welcome .alert.alert-info {
  display: none;
}

.text-delay-status {
  color: var(--danger) !important;
}

.text-early-status,
.text-custom-early-status {
  color: var(--warning) !important;
}

.text-custom-ontime-or-others,
.text-ontime-or-others {
  color: var(--success) !important;
}

.bg-delay-status {
  background-color: var(--danger) !important;
}

.bg-early-status,
.bg-custom-early-status {
  background-color: var(--warning) !important;
  border: 0 !important;
}

.bg-custom-ontime-or-others,
.bg-ontime-or-others {
  background-color: var(--success) !important;
  border: 0 !important;
}

app-flight-status-list .text-secondary {
  color: unset !important;
}