// Checkout Block
// ==========================================================================

.checkout-block
  +grid-padding($top: 1)

  // Checkout Rows
  // ==========================================================================

  .checkout-row
    position: relative

    &::after
      display: block
      +position(absolute, null null 0 0)
      +dashed-border(bottom)
      height: 0
      width: 100%
      content: ''

    .inner
      position: relative
      z-index: 5
      +grid-margin($left: 1)
      +grid-padding(.4, .8, 1, 1)
      border-left: 2px solid $blue
      @extend %clearfix

      .number
        display: block
        +grid-position($top: .4, $left: 0)
        margin-left: -17px
        width: 32px
        height: 32px
        border: 2px solid $blue
        border-radius: 16px
        background: #fff

        color: $blue
        +semibold
        font-size: 1.3em
        line-height: 28px
        text-align: center

      h2
        +type-h2
        margin-top: 0
        +grid-margin-s($bottom: 1)
        padding-top: 4px

    // User Data
    // ==========================================================================

    &.user-data
      position: relative
      z-index: 10

      .inner
        padding-top: 0

        .number
          top: 0

      label
        white-space: nowrap

    // Order info
    // ==========================================================================

    &.order-info

      table.order-info-table
        width: 100%
        font-size: 1.5em

        tr
          border-bottom: 1px solid #e7e4e1

          &.heading
            +grid-height-s(.75)
            +semibold
            text-transform: capitalize

            td,td.square
              padding-top: 0
              padding-bottom: 0

        td
          padding: 16px 16px 16px 0
          vertical-align: top

          &.product-info
            width: 45%

          &.square
            padding: 16px
            +dashed-border(left)
            text-align: right

          &.last
            padding-right: 0

      .discount
        display: block
        position: relative

        .small
          font-size: .75em

        &::before
          display: block
          position: absolute
          top: 0
          left: 0
          z-index: 10
          @extend %icon-sprite
          +icon-sprite(0,2,16px,16px)
          content: ''

      .summary
        +grid-margin-s($top: .5)
        +grid-width-s(6)
        float: right

        .summary-row
          +grid-height-s(.75)
          +grid-line-height-s(.75)

          .title
            +bold
            font-size: 1.3em
            .extra
              font-size: 0.7em
              margin-left: 5px
              //color: $light-grey
          .price
            font-size: 1.5em
            float: right

          &.total
            +grid-margin-s($top: .5, $bottom: .5)
            color: $dark-grey
 
            .title
              font-size: 1.8em // 1px
            .price
              font-size: 1.8em // 18px
              +semibold

          &.vat
            .price, .title
              font-size: 1.3em // 12px
              color: $light-grey


      table.composition
        margin-top: 10px

      table.composition, table.composition-inner-table
        font-size: 1em

        .composition-header
          display: none

        tr
          border: none

        tr:nth-child(2n + 1)
          background: none

        td
          padding: 0
          color: #B3B3B3

          &.composition-note
            padding-left: 0





    // Terms and payment
    // ==========================================================================

    &.payment

      &::after
        border-bottom: none

      .inner
        border-left: 2px solid transparent
        +grid-padding($bottom: 2)

        .top-border
          +position(absolute, 0 null null -2px)
          +grid-height-s
          width: 10px
          border-left: 2px solid $blue

        input[type="checkbox"]
          display: inline-block
          margin-right: 8px
          vertical-align: top

        .description
          display: inline-block
          position: relative
          top: -2px
          width: 60%
          font-size: 1.3em // 13px
          text-transform: none
          letter-spacing: 0
          +regular

        .pay-holder
          margin-top: 56px
          width: 100%
          text-align: center

          .pay
            float: none
            display: inline-block
            +transform(scale(1.2))

            .btn
              min-width: 200px
#map-canvas
  width: 100%
  height: 450px
  border: 1px solid #d6cfc9
  border-radius: 4px

form .hidden-box
  &#shipping-box
    margin-top: 0
    &.open
      margin-top: 32px
  &#dpd-parcel-shop-box
    margin-top: 0
    &.open
      //margin-top: 32px
    #pac-input
      border: 1px solid #d6cfc9
      border-radius: 4px
      font-family: "Proxima N W01 Reg",sans-serif
      font-size: 1.5em
      line-height: 1.33333
      padding: 0 8px
      width: 60%
      margin-top: 10px
      margin-left: 10px
    #pac-submit
      +icon-sprite-two(-285px -20px, 16px, 16px)
      display: block
      position: absolute
      left: 57.5% !important
      top: 18px !important
      &:focus
        outline: none
        box-shadow: none
.checkout-block .checkout-row .inner
  .shopInfoContainer
    h1
      margin-bottom: 0
    p
      font-size: 1em
      line-height: inherit
    .openingHours
      table tr td
        padding-right: 10px

      h2
        margin: 0
        padding: 0
        font-size: 1.2em

    .btn
      margin-top: 5px
      font-size: 1em
      height: 30px
      line-height: 30px
      cursor: pointer
    .centerText
      input
        cursor: pointer


#chosenShop
  border: 1px solid #e7e4e1
  display: inline-block
  font-size: 1.2em
  padding: 20px
  h1
    margin: 0
  .openingHours
    table tr td
      padding: 2px 10px 1px 0