// Styles for tab-purchase-route-pass.html
.purchase-route-pass {
  // Spinner div for async loading of information
  .spinner {
    padding: 20px;
  }

  // Styles for checkboxes. Legacy name because copy pasted from bookingSummary
  .booking-checkbox {
    padding-top: $padding-base-vertical;
    padding-bottom: $padding-base-vertical;

    .checkbox-text {
      padding-left: 40px;
      .checkbox {
        padding-left: 0px;
        padding-right: 0px;
        left: 0px;
      }
    }
  }

  .payment {
    .price-calc {
      display: flex;
      justify-content: space-between;
    }

    .total {
      border-top: 1px solid lightgray;
      padding-top: 16px;
      padding-bottom: 16px;
      margin-top: $padding-base-vertical;

      .total-text {
        font-size: 20px;
        font-weight: $font-weight-medium;
        text-transform: uppercase;
      }

      .total-price {
        font-size: 30px;
        font-weight: $font-weight-bold;
      }
    }

  }

  .radios {
    padding-bottom: $padding-base-vertical;

    .item-radio{
      padding: 0px;

      .radio-icon {
        color: $royal;
        font-size: $radio-font-size;
        left: 0px;
        padding: 0px;
      }
      .not-selected {
        color: $hint-color;
        font-size: $radio-font-size;
        left: 0px;
        padding: 0px; /*follow radio-icon padding*/
      }

      // Remove selection background colour
      input:checked + .radio-content > .item-content {
        background: transparent;
      }

      .item-content {
        background: transparent;
        display: flex;
        justify-content: space-between;
        padding-left: 44px;
        padding-right: 0px;
        /* extend content space, override ionic default since the checkmark is no longer on the right */
        padding-top: 5px;
        padding-bottom: 5px;

        .left {
          display: flex;

          .schedule-info {
            font-weight: 600;
            margin-top: auto;
            margin-bottom: auto;
          }
        }

        .right {
          display: flex;
          .original-price {
            .price {
              color: darkgray;
              background-color: transparent;

              // Diagonal strikethrough for the original price
              background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.47, #fff), color-stop(.47, darkgray), color-stop(.53, darkgray), color-stop(.53, #fff), color-stop(1, #fff));
              background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47%, darkgray 47%, darkgray 53%, #fff 53%, #fff 100%);
              background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47%, darkgray 47%, darkgray 53%, #fff 53%, #fff 100%);
              background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47%, darkgray 47%, darkgray 53%, #fff 53%, #fff 100%); 
            }
          }
          .schedule-price {
            margin-left: $padding-base-horizontal;
            .price {
              display: flex;
              font-weight: $font-weight-bold;

              #dollar {
                margin-top: auto;
                margin-bottom: auto;
              }
              #number {
                font-size: 28px;
                line-height: 1;
              }
            }
            #trip {
              font-size: $font-size-x-small;
              float: right;
            }
          }
        }
      }
    }
  }

  .check-terms {
    margin-top: 0px;
    margin-bottom: $padding-base-vertical;
    padding: 0;
    .tnc {
      ol {
        list-style-type: disc;
        padding-left: $padding-large-horizontal;
      }
    }
  }
}