@import url('assets/fonts/webfonts.css');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;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: 'Avenir', 'Helvetica', sans-serif;
  --headings-font-family: 'Merriweather', serif;
  --lightest: #fff;
  --light: #f4f5f5;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 900;
  --btn-font-weight: 800;
  --logo-height: 1.7rem;
  --text-color: #16282f;

  --primary: #69a3b9;
  --primary-hover: #8cb8c9;
  --primary-contrast: rgba(22, 40, 46, 0.7);
  --primary-inverse: var(--lightest);

  --secondary: #ee7f1e;
  --secondary-hover: #f29a4d;
  --secondary-contrast: rgba(22, 40, 46, 0.7);
  --secondary-inverse: var(--lightest);

  --info: var(--primary);
  --info-hover: var(--primary-hover);
  --info-contrast: var(--primary);
  --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;
}

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

/* Assign Font to document */
html,
body {
  font-family: var(--font-family) !important;
  color: var(--text-color) !important;
}

/* Mapping needed when google font does not correspond */
h1,
.h1 {
  font-family: var(--headings-font-family) !important;
  font-weight: var(--headings-font-weight) !important;
}

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

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

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

h5,
.h5 {
  font-family: var(--headings-font-family) !important;
  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;
}

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

/* Remove Rounded Cornders */
body .card,
body .rounded,
body .rounded-pill,
body .btn,
body .card-header:first-child,
body .nav-pills .nav-link,
body .form-control,
body .stv-radio-buttons-wrapper label:first-of-type,
body .modal-footer,
body .modal-header,
body .dropdown-menu,
body app-passengers-count-picker .navbar-toggler,
body .custom-select {
  border-radius: 0 !important;
}

.btn {
  font-weight: var(--btn-font-weight) !important;
}

.btn-primary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-primary:hover {
  background-color: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
}

app-site-header.bg-primary,
.navbar-dark .navbar-text,
.navbar-dark .navbar-text a {
  background-color: var(--lightest) !important;
  color: var(--secondary-contrast) !important;
}

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

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

/*Fare type*/

.fare-type-premium .card-header {
  background-color: var(--secondary) !important;
}

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

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

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

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

@media screen and (max-width: 1200px) and (min-width:767px) {
  app-passenger-information-input .col-md-3 {
    max-width: 32%;
    flex: 0 0 100%;
  }

  app-passenger-information-input .col-md-9 {
    flex: 0 0 90%;
    max-width: 100%;
  }

  app-passenger-information-input .offset-md-3 {
    margin-left: 8%;
  }
}

.fare-type-sell-messages .fare-type-flylight,
.fare-type-sell-messages .fare-type-fly,
.fare-type-flyplus .align-items-start:nth-child(6),
.fare-type-flyplus .align-items-start:nth-child(7) {
  color: var(--medium);
}

.fare-type-flylight .align-items-start:first-child,
.fare-type-fly .align-items-start:first-child,
.fare-type-fly .align-items-start:nth-child(2),
.fare-type-fly .align-items-start:nth-child(3) {
  color: var(--text-color);
}

app-reservations-search-criteria .col-xl-3 {
  max-width: 50%;
  flex: 0 0 50%;
}

app-reservation-booking-cost-summary .card-body {
  display: none
}

app-agent-login .navbar-dark .navbar-text,
app-agent-login .navbar-dark .navbar-text a {
  background-color: var(--light) !important;
  color: var(--secondary-contrast) !important;
}

app-site-header .text-white,
app-site-header li::after {
  color: var(--darkest) !important;
}

/*Replace Reepay logo with Cards*/
.payment--method.reepay {
  background: url(./assets/images/Accept-Payment-Cards.png) center no-repeat !important;
  background-size: 65% !important;
  width: 20vw !important;
  text-indent: -9999em !important;
  max-width: 8rem !important;
}

.payment--method.billwerk {
  background:
    url(./assets/images/VISA_card.svg) 2px 5px no-repeat,
    url(./assets/images/MASTERCARD_card.svg) 60px 5px no-repeat,
    url(./assets/images/DANKORT_card.svg) 110px 5px no-repeat,
    url(./assets/images/MobilePay.svg) 170px 8px no-repeat !important;
  width: 12.3rem !important;
  height: 39px !important;
  text-indent: -9999em !important;
  background-color: #F8F9FA !important;
  border-radius: 5px;
  background-size: 60px, 60px, 60px, 22px !important;
}

app-journey-fare-options .col-auto.fare-selection--header-info {
  display: none !important;
}

app-confirm-and-pay small.d-block.fs-12.lh-10.fw-normal {
  display: none !important;
}

/*Remove Gender and DOB on Passenger's reservation card*/
app-passenger-information-summary .card-text:last-child {
  display: none !important;
}

app-booking-success .payment--method.reepay.payment-transaction-icon,
app-reservation-billing-summary .payment--method.reepay.payment-transaction-icon {
  max-height: 32px;
  margin: 0 0 0.25em 0.5em;
}

app-booking-success .payment--method.billwerk.payment-transaction-icon,
app-reservation-billing-summary .payment--method.billwerk.payment-transaction-icon {
  max-width: unset !important;
  max-height: 32px;
  margin: 0 0 0.25em 0.5em;
}

app-booking-success .payment-method--container.reepay .payment-method--name,
app-reservation-billing-summary .payment-method--container.reepay .payment-method--name,
app-booking-success .payment-method--container.billwerk .payment-method--name,
app-reservation-billing-summary .payment-method--container.billwerk .payment-method--name {
  display: none !important;
}

app-loyalty-registration div.col-12.alert.alert-info:nth-child(1) {
  display: none !important;
}

app-passenger-information-input>div.passenger--data.row.shadow.rounded.bg-white.p-3>div:nth-child(10)>div>div {
  margin-top: 2rem;
}

app-journey-fare-option-header.bg-primary.fare-type-klippekort {
  background-color: var(--secondary) !important;
}
app-boarding-pass-card .card .card-body .col-6.gap-1.px-0.d-flex.align-items-end {
  padding-right: 22px !important; 
  justify-content: flex-end; 
}
app-boarding-pass-card .card{
  background-color: #0c2340!important;
}