.deal-finder-wrapper {
  color: @deal-finder-main-text-color;

  .deal-finder-header {
    background-color: @deal-finder-header-background;
    color: @color-white;
    padding: @deal-finder-header-pt @deal-finder-header-pr @deal-finder-header-pb @deal-finder-header-pl;
    position: relative;
    padding-right: 50px;
    border-radius: @deal-finder-modal-radius @deal-finder-modal-radius 0 0;

    .btn-close {
      position: absolute;
      width: 32px;
      height: 32px;
      background-color: transparent;
      opacity: 1;
      top: @deal-finder-header-pt;
      right: @deal-finder-header-pr;
      transition: opacity ease-in-out @deal-finder-main-transition-duration;

      &:before, &:after {
        position: absolute;
        content: '';
        height: 18px;
        width: 2px;
        top: 8px;
        left: 15px;
        background-color: @color-white;
        border-radius: 1px;
      }
      
      &:before {
        transform: rotate(45deg);
      }

      &:after {
        transform: rotate(-45deg);
      }

      &:hover {
        opacity: .8;
      }
    }
  }

  .header-heading {
    font-family: 'Cera-Pro-Black', 'Noto Sans', Arial, 'Arial Unicode MS', sans-serif;
    font-size: @deal-finder-header-heading-font-size;
    line-height: @deal-finder-header-heading-line-height;
  }

  .header-subheading {
    font-family: 'Cera-Pro-Bold', 'Noto Sans', Arial, 'Arial Unicode MS', sans-serif;
    font-size: @deal-finder-header-subheading-font-size;
    line-height: @deal-finder-header-subheading-line-height;
  }

  .deal-finder-body {
    background-color: @deal-finder-main-background-color;
  }

  .deal-finder-navigation {
    font-size: @deal-finder-navigation-font-size;
    line-height: @deal-finder-navigation-line-height;
    background-color: @deal-finder-main-background-color;
    padding: @deal-finder-main-padding;

    .deal-finder-navigation-text {
      // may need to be adjusted for other brands but without fixed with nav arros are shifting
      width: @deal-finder-navigation-width;
      text-align: center;
    }
  }

  .btn-nav-prev,
  .btn-nav-next {
    height: @deal-finder-navigation-line-height;
    width: @deal-finder-navigation-line-height;
    position: relative;
    background-color: transparent;

    &::before,
    &:after {
      position: absolute;
      content: '';
      width: 11px;
      height: 2px;
      border-radius: 1px;
      background-color: @deal-finder-navigation-text-color;
      left: 50%;
      transform-origin: center left;
      transition: background-color ease-in-out @deal-finder-main-transition-duration;
    }

    &:before {
      top: calc(50% + 1px);
      transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    }

    &:after {
      top: 50%;
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
    }

    &:hover {
      &::before,
      &::after {
        background-color: @deal-finder-navigation-text-color-hover;
      }
    }

    &[disabled] {
      &:before,
      &:after {
        pointer-events: none;
        background-color: @gray-light;
      }
    }
  }

  .btn-nav-next {
    transform: rotate(180deg);

    &:before {
      top: 50%;
    }
    
    &:after {
      top: calc(50% - 1px);
    }
  }

  .tiny {
    font-size: @deal-finder-tiny-font-size;
    line-height: @deal-finder-tiny-line-height;
  }

  .deal-finder-weekdays {
    padding: 0 @deal-finder-calendar-padding-y 20px @deal-finder-calendar-padding-y;
    display: grid;
    background-color: @deal-finder-main-background-color;
    grid-template-columns: repeat(7, 1fr);
    column-gap: @deal-finder-calendar-column-gap;
  }

  .deal-finder-main-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    column-gap: @deal-finder-calendar-column-gap;
    row-gap: @deal-finder-calendar-row-gap;
    padding: 10px @deal-finder-calendar-padding-y @deal-finder-calendar-padding-y;
    background-color: @deal-finder-main-background-color;
  }

  .deal-finder-day-wrapper {
    position: relative;
    height: @deal-finder-day-height;
    width: 100%;
    background-color: @deal-finder-main-background-color;
    border: @deal-finder-day-border;
    border-radius: @deal-finder-day-border-radius;
    color: @deal-finder-day-text-color;
    transition: color ease-in-out @deal-finder-main-transition-duration, border-color ease-in-out @deal-finder-main-transition-duration, background-color ease-in-out @deal-finder-main-transition-duration;

    &:hover,
      &:focus,
      &:active {
        background-color: @deal-finder-day-background-color-hover;
        border-color: @deal-finder-day-background-color-hover;
        color: @deal-finder-day-text-color-hover;
      }
  }

  .deal-finder-day-event-icon {
    position: absolute;
    right: 6px;
    top: 6px;
  }

  .deal-finder-day-date {
    position: absolute;
    font-size: @deal-finder-day-date-font-size;
    line-height: @deal-finder-day-date-line-height;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  .deal-finder-day-price {
    position: absolute;
    font-size: @deal-finder-day-price-font-size;
    line-height: @deal-finder-day-price-line-height;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .deal-finder-day-disabled {
    border: @deal-finder-day-border-disabled;
    color: @deal-finder-day-text-color-disabled;
    pointer-events: none;
  }

  .deal-finder-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: @deal-finder-footer-background-colour;
    border-radius: 0 0 @deal-finder-modal-radius @deal-finder-modal-radius;
    padding: 18px 21px 19px 24px;
  }

  .calendar-events {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;              
    gap: 5px; 
  }

  .calendar-event-name {
    line-height: @deal-finder-footer-event-name-line-height;
    font-size: @deal-finder-footer-event-name-font-size;
    font-weight: 500;
    margin-left: 12px;
  }

  .calendar-event-names {
    display: flex;
    height: 15px;
    margin-right: 10px;
    align-items: center;

    .event-marker-triangle {
      margin-left: -2px;
    }

    .event-marker-square {
      margin-left: -1px;
    }

    .event-marker-diamond {
      margin-top: -11px;
      margin-left: -2px;
    }

    .event-marker-crescent {
      margin-left: -6px;
      margin-top: -1px;
    }

    .event-marker-heart {
      margin-top: -8px;
      margin-left: 7px;
    }
    
    .event-marker-drop {
      margin-top: 2px;
    }
  }
  
  .footnote {
    color: @deal-finder-footer-footnote-colour;
    font-weight: 500;
    margin-left: auto;
  }
  
  .event-marker-circle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: orange;
  }

  .event-marker-default {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: grey;
  }
  
  .event-marker-triangle {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid red;
  }
  
  .event-marker-star {
    position: absolute;
    display: inline-block;
    margin-right: 2px;
    width: 0;
    height: 0;
    margin-bottom: 0.6em;
    margin-top: -2px;
    border-right:  2px solid transparent;
    border-bottom: 4px  solid #FC0;
    border-left:   .4em solid transparent;
    font-size: 6px;
    &:before, &:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: .5em;
      left: -1em;
      border-right:  1em solid transparent;
      border-bottom: .7em  solid #FC0;
      border-left:   1em solid transparent;
      transform: rotate(-35deg);
    }
    &:after {  
      transform: rotate(35deg);
    }
  }
  
  .event-marker-square {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: rgb(10, 233, 22);
  }
  
  .event-marker-diamond {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: rgb(0, 204, 255);
    position: absolute;
    margin-top: -6px;
    &:after {
      content: '';
      position: absolute;
      left: -5px;
      top: 5px;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-top-color: rgb(0, 204, 255);;
    }
  }
  
  .event-marker-crescent {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 3px 0 0 0 red;
    position: absolute;
    margin-right: 2px;
  }
  
  .event-marker-heart {
    position: absolute;
    width: 0;
    height: 0;
    &:before, &:after {
      position: absolute;
      content: "";
      width: 5px;
      height: 8px;
      left: -3px;
      background: #f53beb;
      border-radius: 5px 5px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    &:after {
      left: -8px;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
  }
  
  .event-marker-drop {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #4f4bdd;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
  }
  
  .event-marker-half-circle {
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: #7b00ef;
    border-radius: 50% 50% 0 0;
  }

  @media (max-width: @screen-xs-max) {
    .deal-finder-header {
      padding-left: @deal-finder-header-pl-mobile;
    }

    .header-heading {
      font-size: @deal-finder-header-heading-font-size-mobile;
      line-height: @deal-finder-header-heading-line-height-mobile;
    }

    .header-subheading {
      font-size: @deal-finder-header-subheading-font-size-mobile;
    }

    .deal-finder-navigation {
      padding-top: 22px;
      padding-bottom: 12px;
    }

    .deal-finder-weekdays {
      font-size: @deal-finder-weekdays-font-size-mobile;
      line-height: @deal-finder-weekdays-line-height-mobile;
      padding: 0 @deal-finder-calendar-padding-y-mobile 5px @deal-finder-calendar-padding-y-mobile;
    }

    .deal-finder-main-view {
      column-gap: @deal-finder-calendar-column-gap-mobile;
      row-gap: @deal-finder-calendar-row-gap-mobile;
      padding: 5px @deal-finder-calendar-padding-y-mobile @deal-finder-calendar-padding-y-mobile;
    }

    .deal-finder-day-wrapper {
      height: @deal-finder-day-height-mobile;
    }

    .deal-finder-day-date {
      font-size: @deal-finder-day-date-font-size-mobile;
      line-height: @deal-finder-day-date-line-height-mobile;
      top: 12px;
    }
  
    .deal-finder-day-price {
      font-size: @deal-finder-day-price-font-size-mobile;
      line-height: @deal-finder-day-price-line-height-mobile;
      bottom: 8px;
    }
  }
}


.deal-finder-modal {
  .modal-content {
    border-radius: @deal-finder-modal-radius;
    box-shadow: 0px 10px 36px 8px rgba(0, 0, 0, 0.5);
    background: none;
    border: none;
  }
}

.deal-finder-button {
  color: @deal-finder-button-color;
  border: @deal-finder-button-border;
  background-color: @deal-finder-background-color;

  &:hover,
  &:focus,
  &:active {
    border-width: 2px;
    color: @deal-finder-button-color;
    background-color: @deal-finder-background-color-hover;
  }

  &:disabled {
    pointer-events: none;
  }
}