@import "framework/media.less";

.loader-wrapper {
  position: fixed;
  top: 50%;
  left: 10%;
  right: 10%;
  text-align: center;
  margin-top: -128px;
  opacity: 0.1;
  z-index: 999999;
}

#header {
  display: flex;
  margin: 0 auto;
  align-items: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  .logotype {
    img {
      max-width: 200px;
      max-height: 40px;
      @media (min-width: @media-breakpoint-sm) {
        max-width: 250px;
        max-height: 80px;
      }
    }
    @media (min-width: @media-breakpoint-sm) {
      width: 320px;
    }
  }
  .middle {
    flex-grow: 1;
  }
  .customer-service {
    align-self: center;
    text-align: end;
    line-height: 150%;
    flex-grow: 1;
    @media(min-width: @media-breakpoint-sm) {
      flex-grow: 0;
      width: 320px;
      font-size: 1.25em;
    }
    .title {
      font-weight: bold;
      margin: 0;
    }
  }
}

#box-checkout-cart {
  margin-top: 0;

  .row {
    margin-bottom: 0;
  }
  [class*="col-"] {
    align-self: center;
  }
  .headings {
    font-weight: 600;
    padding: .5em var(--gutter-x);
    border-bottom: 1px solid var(--default-border-color);
  }
  .item {
    padding: var(--gutter-y) var(--gutter-x);
    border-top: 1px solid #e0e0e0;
    &:nth-child(odd) {
      background: var(--table-striped-row-background-odd);
    }
    &:nth-child(even) {
      background: var(--table-striped-row-background-even);
    }
  }
  .name {
    font-weight: 600;
  }
  .btn {
    padding-left: 1em;
    padding-right: 1em;
  }
  .error {
    color: #f00;
  }
  .unit-price, .total-price {
    font-size: 1.1em;
  }
  .unit-price::before {
    //content: 'à';
  }
  .subtotal {
    font-size: 1.5em;
  }
}

#box-checkout-customer {
  fieldset {
    border: none;
    padding: 0;
  }
  button[type=submit]:not([disabled]) {
    font-weight: bold;
    color: rgba(255, 0, 0, 1);
    animation: flasher 1s linear infinite;
  }
}

#box-checkout-shipping, #box-checkout-payment {

  .thumbnail {
    padding: .5em;
    overflow: hidden;
  }
  .option {
    position: relative;
    background: var(--card-background-color);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
    transition: all 250ms ease;
    &.btn {
      padding: 1em;
      white-space: normal;
      &:first-child {
        border-start-start-radius: var(--border-radius);
        border-start-end-radius: var(--border-radius);
      }
      &:last-child {
        border-end-start-radius: var(--border-radius);
        border-end-end-radius: var(--border-radius);
      }
    }
    &.active {
      background: #eaebef;
    }
    &.disabled {
      cursor: not-allowed;
    }
    &:not(.active) {
      .content {
        max-height: 0;
        overflow-y: hidden;
      }
    }
    .thumbnail {
      padding: 0 !important;
    }
    .error {
      color: #c00;
    }
    .content {
      max-height: 200px;
      overflow-x: hidden;
      overflow-y: auto;
      text-align: start;
      transition: all 0.25s ease;
    }
    .description {
      margin-bottom: 1em;
    }
    hr {
      margin: 1em 0;
      border-color: #ddd;
    }
  }
  @media(min-width: @media-breakpoint-sm) {
    .price {
      position: absolute;
      display: inline-block;
      top: var(--gutter-y);
      right: var(--gutter-x);
    }
  }
}

@media(min-width: @media-breakpoint-sm) {
  [dir="rtl"] .price {
    right: auto;
    left: var(--gutter-x);
  }
}

#box-checkout-summary {
  table {
    margin-bottom: 0;
  }
  .error {
    align-self: center;
    font-size: 1.25em;
    color: #ff0000;
    text-align: center;
  }
  input[type=checkbox][required]:not(:checked) {
    animation: flasher 1s linear infinite;
  }
}
