openfoodfoundation/openfoodnetwork

.order-summary {
  background-color: #e1f0f5;
  padding: 1em;
  width: 100%;
  border: none;
  color: inherit;
}

checkout {
  display: block;

  @include breakpoint(phablet) {
    &.row .row {
      margin-left: 0;
      margin-right: 0;
    }
  }

  orderdetails {
    .button, table {
      width: 100%;
    }
    @include breakpoint(phablet) {
      form.edit_order {
        border: 1px solid $disabled-bright;
        margin-bottom: 2rem;
      }
    }
  }

  #details, #billing, #shipping, #payment {
    border: 0;
    margin: 1em 0;
    padding: 0;
    .content {
      border: 1px solid #efefef;
    }
  }

  h5 {
    margin: 0;
    padding-top: 0.65em;
    padding-bottom: 0.65em;
    padding-left: 0.65em;
    background: $grey-050;

    .label {
      font-size: 1em;
      padding: 0.3rem 0.35rem 0.275rem;
    }

    // Logic to turn on & off the alerts for success against each fieldset

    label, label.alert, label.success, &.valid label.alert, &.dirty label.success {
      display: none;
    }

    &.dirty label.alert {
      display: inline;
    }
    &.dirty.valid label.alert {
      display: none;
    }
    &.valid label.success {
      display: inline;
    }
  }

  h5.dirty {
    background: #f7ccc5;
  }

  h5.valid, h5.dirty.valid {
    background: #bfefd1;
  }

  orderdetails table tr th {
    text-align: left;
  }


  // Logic to swap out up / down accordion icons
  //Foundation overrides
  dd > a {
    @include csstrans;
    background: $disabled-light !important;
  }

  dd > a:hover {
    background: $disabled-v-dark !important;
    color: white;
  }

  dd {
    span.accordion-up {
      display: none;
    }
    span.accordion-down {
      display: inline;
    }
    &.open {
      span.accordion-up {
        display: inline;
      }
      span.accordion-down {
        display: none;
      }
    }
  }
}

.not-paid {
  color: #f40f0f;
  font-weight: 700;
}

.paid {
  color: black;
  font-weight: 400;
}