/**
 * Place for all CSS directives which are overwriting pattern-library.css.
 * Order loading and applying css styles is as follows:
 * 1. pre-style.css
 * 2. pattern-library/v1.x.x/css/styles.css (External file which is a base)
 * 3.post-style.css (Place for overwriting css directives from  pattern-library/v1.x.x/css/styles.css
 */

 :root{
  --warning-custom-color: #FFF3CD;
 }

/**
 * Page: base
 * Context: Header cart icon
*/
.cart-dot {
  height: 10px;
  width: 10px;
  background-color: #FBBA00;
  border-radius: 50%;
  position: absolute;
  right: -4px;
  top: -3px;
}

/**
 * Page: venueInfo
 * Context: Weather Conditions box
*/
.weather-info-btn {
  cursor: pointer !important;
}

.weather-info-btn.active {
  font-weight: 700;
}

.weather-info-btn.active .fal {
  color: #139DF4 !important;
}

.weather-icon svg {
  width: 35px;
  height: 35px;
}

.weather-icon svg .st0 {
  fill: #139DF4 !important;
}

.weather-icon svg {
  width: 35px;
  height: 35px;
}

.weather-icon svg * {
  fill: #139DF4 !important;
}

/**
 * Page: SKIP venueInfo
 * Context: Weather Conditions box
*/
.weather .card-body {
  padding-bottom: 0;
}

/**
 * Page: venueTickets
 * Context: Price trend
*/
.pricetrend-date {
  color: #808080;
}

/**
 * Page: venueTickets
*/
.ticket-disabled {
  opacity: 0.5;
}
.ticket-disabled .total {
  display: none;
}
.ticket-disabled .skip-tickets-content-card-increaser {
  visibility: hidden;
}

/**
 * Page: Standalone price trend
*/
body.standalone-price-trend {
  padding-top: 0;
  background: none;
  background-color: white;
}

/**
 * Page: Orders
 * Context: Venue row
*/
.bookings-content-resort-heading img {
  max-height: 40px;
  max-width: 100px;
  height: auto;
  width: auto;
}

/**
 * Page: Home and Search
 * Context: Autocomplete search
*/
#autoCompleteWindow {
  width: 95%;
}

.twitter-typeahead {
  width: 100%;
}

.tt-menu {
  width: 95%;
}

.tt-cursor {
  background: #F2F2F2;
  cursor: pointer;
}

.tt-hint {
  opacity: 0.6 !important;
}

.autocomplete-title.not-on-top {
  margin-top: 20px !important;
}

.image-checkbox
{
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: 100%;
  outline: 0;
}

.image-checkbox input[type="checkbox"]
{
  display: none;
}

.image-checkbox-checked
{
  border-color: #1bb3ff;
}

/**
 * Page: Login
*/
.hide-body {
  display: none;
}

/**
 * Page: My account / addresses
 * Context: Addresses list
*/
.no-addresses {
  display: none;
}
.no-addresses:only-child {
  display: block;
}

/**
 * Page: My account / orders / Ski tickets assign skicard modal
*/
.modal-footer-skiCards {
     display: flex !important;
     justify-content: end !important;
     margin: 2.5rem -2.5rem -2.5rem -2.5rem !important;
}

.warning-box {
     padding: 10px;
     background: var( --warning-custom-color);
}

/**
 * Page: My account / skicards
 * Context: Loyalty points
*/
.loyalty-points {
  position: relative;
  font-size: 0;
  background-color: #EDEDED;
  width: fit-content;
}
.loyalty-points .blue-background {
  position: absolute;
  height: 32px;
  background-color: #41C0FF;
}

/**
 * Page: SKIP search page
*/
.no-results {
  display: none;
}
.no-results:only-child {
  display: block;
}



/**
 * Page: All ticket pages
 * Context: Coverage name multi-line truncation on mobile
 * Override pattern library's .card-header .card-title single-line truncation
 */
@media (max-width: 767px) {
  /* Truncate to 2 lines when card is collapsed */
  .card-header .card-title.coverage-name {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Show full text when card is expanded */
  .card-header[aria-expanded="true"] .card-title.coverage-name {
    -webkit-line-clamp: unset !important;
    display: block !important;
  }
}