/* Load customer font here */
@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: Verdana, Geneva, sans-serif !important;
  --lightest: #fff;
  --light: #f3f3f3;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;

  --primary: #0653a3;
  --primary-hover: #0864c7;
  --primary-contrast: #053f7c;
  --primary-inverse: var(--lightest);

  --secondary: #8ec641;
  --secondary-hover: #acd86f;
  --secondary-contrast: #71ad1d;
  --secondary-inverse: var(--lightest);

  --info: #f4ba44;
  --info-hover: #f3c872;
  --info-contrast: #e69e10;
  --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;
}

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

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

/* LAO */
:lang(lo) body {
  --font-family: Noto Sans Lao, Verdana, Geneva, 'Phetsarath_OT', sans-serif !important;
}

/* CHINESE */
:lang(zh) body {
  --font-family: Noto Sans SC, Verdana, Geneva, sans-serif !important;
}

/* KOREAN */
:lang(ko) body {
  --font-family: Verdana, Geneva, 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
    'Gulim', '돋움', 'Dotum', sans-serif !important;
}

/* THAI */
:lang(th) body {
  --font-family: Verdana, Geneva, 'Sukhumvit Set', sans-serif !important;
}

/* ENGLISH */
:lang(en) body {
  --font-family: Open Sans, Arial, Helvetica, sans-serif !important;
}

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

.airport--code:before {
  content: '(' !important;
}

.airport--code::after {
  content: ')';
}

.calendar .days {
  white-space: nowrap;
}

.payment--method.bcel {
  background: url(./assets/images/Accept-Payment-Cards-All.png) no-repeat center !important;
  background-size: contain !important;
  width: 300px !important;
}

.payment--method.bcel.payment-transaction-icon {
  max-width: 225px !important;
}

.payment--method.twoc2p {
  background: url(./assets/images/2C2P-logo.png) no-repeat center !important;
  background-size: contain !important;
  width: 250px !important;
}

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

/* ANCILLARY STYLING */
app-ancillary-category
  .baggage
  .ancillary-option-card:not(
    .adv-bag-05-kg,
    .adv-bag-10-kg,
    .adv-bag-15-kg,
    .adv-bag-20-kg,
    .adv-bag-25-kg,
    .adv-bag-30-kg,
    .adv-bag-35-kg,
    .adv-bag-40-kg,
    .adv-bag-45-kg,
    .adv-bag-50-kg
  )
  .card-header
  button {
  background-color: var(--primary);
  border-color: var(--primary);
}

app-ancillary-category
  .baggage
  .ancillary-option-card:not(
    .adv-bag-05-kg,
    .adv-bag-10-kg,
    .adv-bag-15-kg,
    .adv-bag-20-kg,
    .adv-bag-25-kg,
    .adv-bag-30-kg,
    .adv-bag-35-kg,
    .adv-bag-40-kg,
    .adv-bag-45-kg,
    .adv-bag-50-kg
  )
  .card-header
  button.btn-secondary:hover,
app-ancillary-category
  .baggage
  .ancillary-option-card:not(
    .adv-bag-05-kg,
    .adv-bag-10-kg,
    .adv-bag-15-kg,
    .adv-bag-20-kg,
    .adv-bag-25-kg,
    .adv-bag-30-kg,
    .adv-bag-35-kg,
    .adv-bag-40-kg,
    .adv-bag-45-kg,
    .adv-bag-50-kg
  )
  .card-header
  button.btn-secondary:focus {
  opacity: 80%;
}

app-ancillary-category
  .baggage
  .ancillary-option-card:not(
    .adv-bag-05-kg,
    .adv-bag-10-kg,
    .adv-bag-15-kg,
    .adv-bag-20-kg,
    .adv-bag-25-kg,
    .adv-bag-30-kg,
    .adv-bag-35-kg,
    .adv-bag-40-kg,
    .adv-bag-45-kg,
    .adv-bag-50-kg
  )
  .card-header
  button.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

app-ancillary-category
  .baggage
  .ancillary-option-card:not(
    .adv-bag-05-kg,
    .adv-bag-10-kg,
    .adv-bag-15-kg,
    .adv-bag-20-kg,
    .adv-bag-25-kg,
    .adv-bag-30-kg,
    .adv-bag-35-kg,
    .adv-bag-40-kg,
    .adv-bag-45-kg,
    .adv-bag-50-kg
  )
  .card-header
  button.btn-outline-secondary:hover {
  background-color: var(--primary);
  color: white;
}

.ancillary-option-card .text-muted.fs-14 {
  display: none;
}

app-journey-fare-options .fare-type-sell-messages [class*='fare-type-'] > div img {
  width: 1.5rem;
}

.fare-type-sell-messages .fs-14 {
  font-size: 12px !important;
}

.standard-seat-legend .main-seat-part,
.available-seat .main-seat-part {
  fill: #a6ff00 !important;
  cursor: pointer;
}

.selected-seat-legend .main-seat-part,
.available-seat.selected-seat.occupied-seat .main-seat-part,
.selected-seat .main-seat-part {
  fill: #e6002e !important;
  cursor: pointer;
}

.priority-seat-legend .main-seat-part,
.bulkhead-back.available-seat .main-seat-part {
  fill: #001adb !important;
}

.first-exit-seat-legend .main-seat-part,
.emergency-exit-seat.available-seat .main-seat-part,
.available-seat.bulkhead-front .main-seat-part {
  fill: #ffb300 !important;
}

.other-seats-legend .main-seat-part,
.available-seat.occupied-seat .main-seat-part,
.custom-seat-icons-top .occupied-seat .main-seat-part,
.unavailable-seat .main-seat-part {
  fill: #d3d3d3 !important;
  cursor: not-allowed;
}
.seat-name {
  pointer-events: none !important;
}

.available-balance-message {
  width: 100% !important;
}