@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&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: 'Roboto', Helvetica, Arial, sans-serif;
  --font-family-display: 'Roboto', Arial, Helvetica, sans-serif;
  --lightest: #fff;
  --light: #f4f4f4;
  --medium: #999696;
  --dark: #444;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;
  --logo-height: 1.7rem;

  --primary: #ff0000;
  --primary-hover: #ff0000;
  --primary-contrast: #ff0000;
  --primary-inverse: var(--lightest);

  --secondary: #ff7900;
  --secondary-hover: #fc8d2c;
  --secondary-contrast: #e76c00;
  --secondary-inverse: var(--lightest);

  --info: #ff7900;
  --info-hover: #fc8d2c;
  --info-contrast: #e76c00;
  --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 {
  height: var(--logo-height);
}

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

/* Client Customizations */

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

/* Align form controls on home to branding */

.form-control,
app-passengers-count-picker .passenger-detail div[role="option"],
app-trip-type-picker div[role="radiogroup"] label.btn {
  border-radius: 0 !important;
}

app-trip-type-picker label.btn-outline-primary,
app-person-title-picker label.btn-outline-primary {
  background-color: var(--lightest);
  border-color: #ced4da !important;
  color: #495057 !important;
}

app-trip-type-picker label.btn-outline-primary.active,
app-person-title-picker label.btn-outline-primary.active {
  color: var(--lightest) !important;
}

/* Give them a light background header */
app-site-header.bg-primary {
  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 .row-seat .seat.selected .data-set {
  color: var(--lightest) !important;
  border-color: var(--darkest) !important;
}

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

/* Hide loyalty registration modal header*/
app-loyalty-registration .alert.alert-info.mb-5 {
  display: none !important;
}

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

app-agent-reservation-detail .d-flex.mb-2.text-primary.dropdown {
  display: none !important;
}