@import '../constansts'
@import '../parts/main-block'

.prices
  font-family: 'Museo Regular', sans-serif
  padding-top: 30px
  h1
    color: $main-color
    font-size: 24px
    font-weight: bold
    margin-bottom: 25px
    text-align: center
  &_sections__title
    align-items: center
    border-radius: 8px
    box-shadow: 0 2px 12px 0 rgba(56,72,95,.49)
    cursor: pointer
    display: flex
    flex-direction: column
    font-size: 18px
    justify-content: center
    max-width: 100px
    width: 100px
    padding: 5px 10px
    &:hover
      background-color: rgba(0,0,0,.05)
    &.active
      background-color: $main-color
      color: #fff
    i
      font-size: 30px
  &_sections__titles
    padding: 15px 0
    .col-4
      display: flex
      justify-content: center
  &_sections__content
    display: none
    padding-top: 18px
    h2
      color: #4c4c4c
      font-size: 21px
      font-weight: bold
      margin: 20px 0
      text-align: center
    &>span
      color: $main-color
      font-size: 18px
    //&[data-price-section="rooms"]
    //  .row .price_section .price span
    //    font-size: 14px
    //  &>p
    //    font-size: 18px
    //    span
    //      color: $main-color
    //&[data-price-section="tables"]
    //  &>p
    //    font-size: 18px
    //    span
    //      color: $main-color
    .row
      padding: 15px
      .price_section
        max-width: 575px
        padding: 15px 15px 30px 15px
        margin-bottom: 20px
        &:nth-child(odd)
          background-color: #fdebf3
        &:nth-child(even)
          background-color: #eaf6fc
        h3
          color: #2fabe1
          font-size: 18px
          font-weight: bold
          margin: 15px 0
          text-align: left
        .price
          display: flex
          justify-content: space-between
          margin: 18px 0
          span
            color: #605e5e
            font-size: 18px
            max-width: 70%
            &:last-child
              color: $main-color
          &:last-child
            margin-bottom: 0
  &__adding
    padding-bottom: 20px !important
    padding-left: 0 !important
    padding-right: 0 !important
    padding-top: 0 !important
    margin: 0

    hr
      width: 100%

    h2
      color: #4c4c4c
      font-size: 21px
      font-weight: bold
      margin: 20px 0
      text-align: center
    p
      font-size: 18px
      color: #605e5e
      span
        color: $main-color


@media screen and (max-width: 576px)
  .prices
    padding-top: 20px
    h1
      font-size: 24px
      font-family: 'Museo Bold',sans-serif;
      margin: 0
    h2
      margin-top: 0
      font-size: 16px !important
    &_sections
      &__title
        font-size: 12px !important
        width: 70px
      &__content
        padding-top: 0
        &>span
          font-size: 14px
        .row
          .price_section
            h3
              font-size: 16px
            span
              font-size: 14px
      &__titles
        padding: 20px 0

    &_section
      margin-bottom: 10px
      &:last-child
        margin-bottom: 0

    &__adding
      p
        font-size: 14px