// out: ../style-css/style.css, compress: true, sourceMap: true
//* Fonts
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');
@import 'mixins';

//* Colors
$cWhite: #ffffff;
$cGreen: #72b81b;
$cYellow: #ffc937;
$cBlue: #138fcb;
$cRed: #e31e4b;
$cOrange: #eb5024;
$cViolet: #8900be;
$base-font-color: #333;
$backgroundColor: #f3f0cf;
$cFooter: #34327c;
$cGray: #95a5a6;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: $base-font-color;
  font-family: 'Lato', sans-serif;
  background-color: $backgroundColor;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

//* mixins
@mixin btn($cTxt, $hTxt, $cBG, $hBG) {
  border: none;
  background-color: transparent;
  color: $cTxt;
  padding: 10px 30px;
  border-radius: 10px;
  font-weight: 800;
  background-color: lighten($color: $cBG, $amount: 20%);
  text-decoration: none;

  &:disabled {
    background-color: rgba($cGray, 0.5);
    cursor: not-allowed;
  }
}

//* Buttons
.btn-t1 {
  @include btn($base-font-color, '', $cGreen, '');
}

.btn-t2 {
  @include btn($cWhite, '', #000, '');
}

.btn {
  padding: 9px 30px;
}

.flex-buttons-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

//* text colors
.c_green {
  color: $cGreen;
}

.c_red {
  color: $cRed;
}

.top {
  position: relative;
  background: $cGreen;
  color: #fff;
  height: 70px;

  .a_menu {
    .logo {
      position: absolute;
      margin: 10px 0 !important;
    }

    #nav-menu {
      &.active {
        display: block;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        background: $cWhite;
        z-index: 999;
      }
    }

    #menu-hamburger {
      position: relative;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 9999;

      i {
        font-size: 28px;
      }

      &.active {
        #btn-hamburger {
          position: relative;
          height: 30px;
          width: 30px;

          span {
            position: absolute;
            width: 100%;
            height: 2px;
            background: $base-font-color;
            border-radius: 5px;
            top: 50%;
            transform: translateY(-50%);

            &:nth-child(1) {
              top: 50%;
              transform: rotate(45deg) translateY(-50%);
            }

            &:nth-child(2) {
              transform: translateX(-100%) translateY(-50%);
            }

            &:nth-child(3) {
              top: 50%;
              transform: rotate(-45deg) translateY(-50%);
            }
          }
        }
      }

      #btn-hamburger {
        position: relative;
        height: 30px;
        width: 30px;
        overflow: hidden;

        span {
          position: absolute;
          width: 100%;
          height: 2px;
          background: $cWhite;
          border-radius: 5px;
          top: 50%;
          transform: translateY(-50%);
          transition: all 250ms ease;

          &:nth-child(1) {
            top: 20%;
          }

          &:nth-child(2) {}

          &:nth-child(3) {
            top: 80%;
          }
        }
      }
    }

    @media (min-width: 768px) {
      #menu-hamburger {
        display: none;
      }
    }

    @media (max-width: 767px) {
      #nav-menu {
        position: fixed;
        display: none;

        ul {
          width: 100%;
          max-width: 300px;
          padding: 0 15px;
          margin: 0 auto;
          flex-direction: column;
          justify-content: center;

          li {
            a {
              color: $base-font-color;
            }
          }
        }
      }
    }
  }

  .logo {
    background: $cGreen;
    display: block;
    margin: 0 auto 10px;
    width: 150px;
    border-radius: 0 0 50% 50%;
    padding: 10px 25px 25px;

    img {
      width: 100%;
    }

    @media (max-width: 600px) {
      margin: 10px 0;
    }
  }

  nav {
    height: 70px;

    ul {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        a {
          color: $cWhite;
          font-size: 18px;
          font-weight: 600;
          text-decoration: none;
        }
      }
    }
  }
}

.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .tickets_calendar {
    margin-top: 100px;
    width: 100%;
    margin-bottom: 50px;
  }

  .tickets {
    // margin-top: 100px;
    // margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 80px;

    //rodzaj biletow
    .ticket-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 40px;
      align-items: center;

      .title-container {
        text-align: center;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          border-bottom: 2px dotted black;
        }

        .title {
          font-weight: 800;
          font-size: 46px;

          @include respond-below(md) {
            font-size: 36px;
            font-size: 22px;
          }
        }

        .description {
          font-size: 28px;
        }
      }
    }

    //bilet
    .ticket {
      display: flex;
      flex-direction: row;
      align-items: center;

      .ticket-description {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 500px;
        text-align: center;
        color: white;
        border-radius: 10px;
        padding: 20px 0;

        &--yellow {
          background-color: $cYellow;
        }

        &--red {
          background-color: $cRed;
        }

        &--blue {
          background-color: $cBlue;
        }

        &--orange {
          background-color: $cOrange;
        }

        &--green {
          background-color: $cGreen;
        }

        &--violet {
          background-color: $cViolet;
        }

        .ticket__name {
          font-size: 46px;
          font-weight: 800;

          @include respond-below(md) {
            font-size: 32px;
          }

          @include respond-below(sm) {
            font-size: 28px;
          }
        }

        .description {
          font-size: 13px;
          font-style: italic;
          line-height: 0.75;
          margin-bottom: 0;
        }

        .ticket-alert {
          font-size: 20px;
          margin: 20px 0 0 0;
          font-weight: 800;
          text-transform: uppercase;
          text-decoration: underline;

          @include respond-below(md) {
            font-size: 16px;
          }
        }

        @include respond-below(md) {
          padding-left: 10px;
          padding-right: 10px;
          width: 400px;
        }

        @include respond-below(xs) {
          width: 100%;
        }
      }

      //price
      .price {
        font-size: 46px;
        margin-left: 40px;
        font-weight: 800;
        min-width: 138px;

        @include respond-below(md) {
          font-size: 36px;
          min-width: 130px;
        }

        @include respond-below(sm) {
          margin-left: 0;
          min-width: unset;
          margin-bottom: 0;
        }
      }

      //przyciski
      .ticket-quantity {
        margin-left: auto;

        @include respond-below(sm) {
          margin-left: 0;
        }

        .button {
          padding: 10px 20px;
          border-radius: 8px;
          border: none;
          background-color: $cGreen;
          color: #fff;
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
          white-space: nowrap;

          &:hover {
            background-color: darken($cGreen, 8%);
          }

          &.added {
            background-color: darken($cGreen, 12%);
            transform: scale(1.05);
          }
        }
      }

      @include respond-below(sm) {
        flex-direction: column;
        row-gap: 15px;
      }

      @include respond-below(xs) {
        width: 100%;
      }
    }
  }

  //bottom
  .bottom-info__description {
    text-align: center;
    font-size: 16px;
    line-height: 29px;
    padding: 20px 0;
    position: relative;

    &::after,
    &::before {
      position: absolute;
      content: '';
      border-bottom: 2px dotted $base-font-color;
      left: 50%;
      transform: translateX(-50%);
      width: 10%;
    }

    &::after {
      top: 0;
    }

    &::before {
      bottom: 0;
    }

    p:nth-child(2) {
      margin-bottom: 0;
    }
  }

  .bottom-info__background {
    margin-top: 40px;
    background-image: url('https://brzezovka.pl/css/../img/bgcity.png');
    background-position: bottom center;
    background-repeat: repeat-x;
    width: 100%;
    height: 300px;
  }
}

.footer {
  background-color: $cFooter;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: white;

  a {
    text-decoration: none;
    color: $cOrange;
  }

  .footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;

    .location {
      padding: 20px 0;
      text-align: center;

      .title {
        font-size: 22px;
        font-weight: 800;
      }
    }

    .logo {
      height: 100px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .footer__bottom {
    width: 100%;

    p {
      text-align: center;
      margin: 0;
      padding: 30px 0;
    }
  }

  @media (max-width: 767px) {
    .footer__top {
      padding-top: 30px;
      grid-template-columns: 1fr;

      .opening-hours {
        grid-row-start: 2;
      }

      .logo {
        grid-row-start: 1;
      }

      .location {
        grid-row-start: 3;
      }
    }
  }
}

.shopping-cart-container {
  &--active {
    .shopping-cart {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

//shoping cart
.shopping-cart {
  opacity: 0;
  position: fixed;
  top: 80px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: $cGreen;
  color: white;
  gap: 20px;
  width: 230px;
  padding: 20px 0;
  transition: opacity 0.2s;
  transform: translateX(100%);

  // border: 1px solid $base-font-color;
  // &--active {
  // 	opacity: 1;
  // 	transform: translateX(0);
  // }
  &.hide {
    display: none;
  }

  .basket {
    font-size: 30px;
  }

  .quantity {
    font-size: 18px;
    font-weight: 800;
  }

  .tickets__list {
    width: 100%;
    list-style: none;
    padding: 0 5px;
    background-color: white;
    color: $base-font-color;
    border-right: 1px solid $base-font-color;
    border-left: 1px solid $base-font-color;
    // border: 1px solid $base-font-color;
    max-height: calc(90svh - 400px);
    overflow: auto;

    p {
      margin-bottom: 0;
    }

    .ticket {
      border: 1px solid $base-font-color;
      border-radius: 5px;
      margin: 5px 0;
      padding: 5px 0 5px 5px;
      display: grid;
      grid-template-columns: 1fr 20px;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        'name btn'
        'price btn';
      font-size: 12px;
      align-items: center;

      &__description {
        grid-area: name;
        font-weight: 800;
        font-size: 13px;
      }

      &__price {
        grid-area: price;
        font-weight: 800;
        font-size: 13px;

        span {
          font-weight: 400;
        }
      }

      .ticket__button {
        grid-area: btn;
        border: none;
        background-color: transparent;
        color: $base-font-color;
        font-size: 14px;
        font-weight: 800;
      }
    }
  }

  .sum-section {
    text-align: center;

    p {
      margin-bottom: 0;
    }

    font-weight: 800;
    font-size: 18px;
  }

  .off-btn {
    border: none;
    background-color: transparent;
    color: white;
    font-size: 18px;
    font-weight: 800;
    position: absolute;
    top: 5px;
    right: 15px;
  }

  .buy-btn {
    border: none;
    background-color: transparent;
    color: $base-font-color;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 800;
    background-color: lighten($color: $cGreen, $amount: 20%);
    text-decoration: none;
  }
}

.mobile-cart-btn {
  &.cart-bounce {
    animation: cartBounce 0.5s ease;
  }

  position: fixed;
  bottom: 50px;
  right: 0;
  opacity: 1;
  z-index: 10;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #72b81b;
  padding: 20px 15px 15px 15px;
  transition: all 250ms ease-in-out;
  cursor: pointer;

  // @media (min-width: 1300px) {
  // 	display: none;
  // }

  &.hide {
    transform: translateX(100%);
  }

  span {
    position: absolute;
    top: 8px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 12px;
  }

  .mobile-cart-btn--img {
    img {
      width: 100%;
      max-width: 40px;
    }
  }
}

//* Basket - "page"
#basket_page {
  .basket_content {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .box_01 {
    margin-bottom: 24px;

    table {
      width: 100%;
      background: $cWhite;
      border-collapse: collapse;

      tr {
        text-align: center;
        border-top: 1px solid rgba(0, 0, 0, 0.1);

        th {
          padding: 8px;

          h3 {
            font-size: 1.25rem;
            font-weight: 800;

            @include respond-below(md) {
              font-size: 0.85rem;
            }
          }
        }

        td {
          padding: 8px;

          @include respond-below(md) {
            font-size: 14px;
          }

          .ticket-date {
            color: #888;
            font-size: 12px;
          }

          .btn_t1 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            transition: 150ms ease-in-out;
            background: rgb(240, 240, 240);
            display: inline-block;
            color: #000;

            i {
              color: #000;
            }
          }

          .btn_t1.add {
            &:hover {
              color: $cGreen;
              border-color: $cGreen;
            }
          }

          .btn_t1.subtract {
            &:hover {
              color: $cOrange;
              border-color: $cOrange;
            }
          }

          .btn_t1.delete {
            border: none;

            &:hover {
              color: $cRed;
            }
          }
        }
      }

      @include respond-below(sm) {
        background: transparent;

        thead,
        tbody,
        th,
        td,
        tr {
          display: block;
        }

        tbody {
          >tr {
            &:first-child {
              display: none;
            }
          }
        }

        thead {
          display: none;
          /* Приховуємо заголовки */
        }

        tr {
          margin-bottom: 15px;
          border: 1px solid #ddd;
          padding: 10px;
          border-radius: 10px;
          background: #fff;
        }

        td {
          position: relative;
          padding-left: 50%;
          text-align: right;
          border: none;
          min-height: 38px;
          padding-left: 140px !important;

          &:not(:last-child) {
            border-bottom: 1px solid #eee;
          }
        }

        td::before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          top: 50%;
          font-weight: bold;
          color: #555;
          transform: translateY(-50%);

          @include respond-below(xs) {
            font-size: 12px;
          }
        }
      }
    }
  }

  .box_02 {
    .basket_user_data {
      .basket_user_data__wrapper {
        background: $cWhite;
        padding: 30px;

        h2 {
          font-size: 1.5rem;
          margin-bottom: 20px;
        }

        .form-vat-box {
          display: none;
        }

        .form-group {
          .col-form-label {
            font-weight: 600;

            .form-vat-option {
              opacity: 0;
              transition: 400ms ease;
            }
          }

          .form-check {
            a {
              color: $cGreen;
              text-decoration: none;
            }
          }
        }
      }
    }

    .basket_summary {
      .basket_summary__wrapper {
        text-align: center;
        background: $cWhite;
        padding: 30px;
        height: 100%;

        h2 {
          font-size: 1.5rem;
        }

        p {
          font-size: 1.5rem;
          font-weight: 800;
        }

        .buy-btn {
          display: inline-block;
          border: none;
          background-color: transparent;
          color: $base-font-color;
          padding: 10px 30px;
          border-radius: 10px;
          font-weight: 800;
          background-color: lighten($color: $cGreen, $amount: 40%);
          text-decoration: none;
        }
      }
    }
  }
}

//* Spinner position
.spinner_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 0;
}

//* Spinner
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;

  div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;

    &:after {
      content: ' ';
      display: block;
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: $cGreen;
      margin: -4px 0 0 -4px;
    }

    &:nth-child(1) {
      animation-delay: -0.036s;

      &:after {
        top: 63px;
        left: 63px;
      }
    }

    &:nth-child(2) {
      animation-delay: -0.072s;

      &:after {
        top: 68px;
        left: 56px;
      }
    }

    &:nth-child(3) {
      animation-delay: -0.108s;

      &:after {
        top: 71px;
        left: 48px;
      }
    }

    &:nth-child(4) {
      animation-delay: -0.144s;

      &:after {
        top: 72px;
        left: 40px;
      }
    }

    &:nth-child(5) {
      animation-delay: -0.18s;

      &:after {
        top: 71px;
        left: 32px;
      }
    }

    &:nth-child(6) {
      animation-delay: -0.216s;

      &:after {
        top: 68px;
        left: 24px;
      }
    }

    &:nth-child(7) {
      animation-delay: -0.252s;

      &:after {
        top: 63px;
        left: 17px;
      }
    }

    &:nth-child(8) {
      animation-delay: -0.288s;

      &:after {
        top: 56px;
        left: 12px;
      }
    }
  }
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

//* Scanner page
#scanner {
  // width: 100vw;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;

  @include respond-above(sm) {
    margin-top: 50px;
  }
}

//* aPanel
.alogin-page {
  .panel-login {
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }
}

//* Tickets orders
#tickets-orders {
  padding-top: 100px;
  padding-bottom: 100px;

  h1 {
    margin-bottom: 20px;
  }

  table {
    margin-bottom: 10px;
    background: $cWhite;
    border-bottom: none;

    thead {
      tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        th {
          padding: 15px 10px;
          font-size: 16px;
          font-weight: 600;
          border-bottom: none;
        }
      }
    }

    tbody {
      tr {
        td {
          font-size: 14px;

          &.edit-btn {
            a {
              margin-left: 20px;
            }

            i {
              color: $base-font-color;
              font-size: 20px;
              transition: color 200ms ease;

              &:hover {
                color: $cGreen;
              }
            }
          }
        }
      }
    }

    tr {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      td {
        padding: 15px 10px;
        border-bottom: none;
      }
    }
  }

  #myTable_wrapper {
    .row {
      &:nth-child(1) {
        margin-bottom: 10px;
      }

      &:nth-child(3) {}
    }

    #myTable_length {
      label {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;

        select {
          min-width: 70px;
          background-color: $cWhite;
        }
      }
    }

    #myTable_filter {
      label {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;

        input {
          margin-left: 0;
          background: $cWhite;
        }
      }
    }

    #myTable_paginate {
      .pagination {
        display: flex;
        align-items: center;
        column-gap: 5px;

        margin-bottom: 0;

        .paginate_button {
          padding: 0;
          border: none;

          &.active {
            a {
              color: $cWhite;
              background: $cGreen;
            }
          }

          &:hover {
            border: none;
            background: none;
          }

          &.disabled>.page-link {
            color: $cGray;
          }

          .page-link {
            color: #000;
          }

          a {
            border: none;
          }
        }
      }
    }
  }
}

//* Order data
#order-data {
  padding: 100px 0;

  .order-data {
    .mini-nav-menu {
      margin-bottom: 30px;

      a {
        &:hover {
          color: $base-font-color;
        }
      }
    }

    .box_01 {
      margin-bottom: 24px;

      table {
        width: 100%;
        background: $cWhite;

        tr {
          text-align: center;
          border-top: 1px solid rgba(0, 0, 0, 0.1);

          th {
            padding: 8px;

            h3 {
              font-size: 1.25rem;
              font-weight: 800;
            }
          }

          td {
            padding: 8px;

            .btn_t1 {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: none;
              transition: 150ms ease-in-out;
            }

            .btn_t1.add {
              &:hover {
                color: $cGreen;
                border-color: $cGreen;
              }
            }

            .btn_t1.subtract {
              &:hover {
                color: $cOrange;
                border-color: $cOrange;
              }
            }

            .btn_t1.delete {
              border: none;

              &:hover {
                color: $cRed;
              }
            }
          }
        }
      }

      .btn-save-new-list {
        display: block;
        margin: 30px auto 0;
      }
    }

    .box_02 {
      .order-detale-info {
        .order-detale-info__wrapper {
          background: $cWhite;
          padding: 30px;

          h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
          }

          .form-group {
            .col-form-label {
              font-weight: 600;
            }
          }
        }
      }

      .order-summary {
        .order-summary__wrapper {
          text-align: center;
          background: #fff;
          padding: 30px;
          height: 100%;

          h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
          }

          p {
            font-size: 1.5rem;
            font-weight: 800;
          }
        }
      }
    }
  }
}

//* Regulamin
#regulamin_box {
  margin-top: 80px;
  margin-bottom: 50px;

  .regulamin_box__wrapper {
    h5 {
      font-size: 26px;
      margin: 0;
      color: #333;
      text-align: center;
      margin-bottom: 20px;
    }

    h6 {
      font-size: 22px;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-family: 'Lato', sans-serif;
      font-weight: 800;
      letter-spacing: 0.8px;
      color: #333;
      text-align: center;
    }

    .regulamin__box {
      margin-bottom: 50px;

      h5 {
        text-align: center;
      }
    }
  }
}

.sale-box {
  h2 {
    text-align: center;
    font-size: 48px;
    line-height: 43px;

    span {
      color: #74aa32;
      font-weight: 700;
    }
  }
}

#dateForm {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;

  ._title {
    width: 100%;
    font-weight: 600;
    font-size: 30px;
    text-align: center;
  }
}

.basket_protection {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-end;
  margin: 10px auto;
  text-align: right;

  p {
    margin-bottom: 0;
    font-style: italic;
  }
}

@keyframes cartBounce {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-8px) scale(1.1);
  }

  50% {
    transform: translateX(4px) scale(1.05);
  }

  75% {
    transform: translateX(-2px);
  }
}

/* Tickets main view redesign */
#tickets-main-view {
  .tickets_calendar {
    margin-top: 48px;
    margin-bottom: 30px;
  }

  #dateForm {
    max-width: 1040px;
    margin: 0 auto;
    background: linear-gradient(160deg, #ffffff 0%, #f6faef 100%);
    border: 1px solid rgba(114, 184, 27, 0.2);
    border-radius: 20px;
    padding: 26px 24px;
    box-shadow: 0 12px 28px rgba(36, 58, 11, 0.08);
  }

  #dateForm ._title {
    width: 100%;
    text-align: left;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
  }

  .flatpickr-calendar.inline {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(51, 51, 51, 0.08);
    border: 1px solid #e8eed6;
  }

  .tickets {
    width: min(1120px, calc(100% - 30px));
    margin: 0 auto 60px;
    gap: 42px;
  }

  .tickets .ticket-container {
    gap: 18px;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(51, 51, 51, 0.08);
    border-radius: 20px;
    padding: 26px 22px 18px;
    box-shadow: 0 8px 26px rgba(21, 39, 5, 0.05);
    backdrop-filter: blur(2px);
  }

  .tickets .ticket-container .title-container {
    padding-bottom: 14px;
    margin-bottom: 6px;
  }

  .tickets .ticket-container .title-container::after {
    width: 140px;
    border-bottom: 2px dashed rgba(51, 51, 51, 0.35);
  }

  .tickets .ticket-container .title-container .title {
    font-size: clamp(30px, 4vw, 44px);
  }

  .tickets .ticket-container .title-container .description {
    font-size: clamp(14px, 2.5vw, 20px);
    line-height: 1.3;
    margin-bottom: 0;
    color: #4f5d48;
  }

  .tickets .ticket {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px 20px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #edf1e5;
  }

  .tickets .ticket .ticket-description {
    width: 100%;
    min-height: 86px;
    padding: 16px 14px;
    border-radius: 12px;
  }

  .tickets .ticket .ticket-description .ticket__name {
    font-size: clamp(22px, 3.2vw, 31px);
    line-height: 1.05;
  }

  .tickets .ticket .ticket-description .description {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
  }

  .tickets .ticket .ticket-description .ticket-alert {
    font-size: 13px;
    margin-top: 10px;
    text-decoration: none;
  }

  .tickets .ticket .price {
    margin-left: 0;
    min-width: 105px;
    text-align: right;
    font-size: clamp(31px, 3.5vw, 40px);
    line-height: 1;
  }

  .tickets .ticket .ticket-quantity {
    margin-left: 0;
  }

  .tickets .ticket .ticket-quantity .button {
    border-radius: 999px;
    padding: 11px 16px;
    min-width: 170px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    box-shadow: 0 6px 14px rgba(114, 184, 27, 0.22);
  }

  .tickets .ticket .ticket-quantity .button:disabled {
    background: #d6dccd;
    color: #5d6658;
    box-shadow: none;
  }

  .bottom-info__description {
    max-width: 1120px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.8;
  }

  @include respond-below(md) {
    #dateForm ._title {
      text-align: center;
      font-size: 24px;
    }

    .tickets .ticket {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "desc desc"
        "price button";
      gap: 12px;
    }

    .tickets .ticket .ticket-description {
      grid-area: desc;
    }

    .tickets .ticket .price {
      grid-area: price;
      text-align: left;
      min-width: unset;
    }

    .tickets .ticket .ticket-quantity {
      grid-area: button;
      justify-self: end;
    }
  }

  @include respond-below(sm) {
    .tickets_calendar {
      margin-top: 32px;
    }

    #dateForm {
      border-radius: 16px;
      padding: 18px 14px;
    }

    .tickets {
      width: calc(100% - 20px);
      gap: 22px;
    }

    .tickets .ticket-container {
      border-radius: 14px;
      padding: 16px 10px 10px;
    }

    .tickets .ticket {
      padding: 8px;
      border-radius: 12px;
    }

    .tickets .ticket .ticket-description {
      min-height: 76px;
      padding: 12px 10px;
    }

    .tickets .ticket .ticket-quantity .button {
      min-width: 132px;
      padding: 10px 12px;
      font-size: 12px;
    }
  }
}

/* Basket view redesign */
#basket_page {
  .basket_content {
    width: min(1120px, calc(100% - 30px));
    margin: 42px auto 70px;
  }

  .box_01 table {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #dfe8cd;
    box-shadow: 0 10px 26px rgba(30, 43, 18, 0.08);
  }

  .box_01 table tr th {
    background: #f4f9ea;
    border-top: 0;
  }

  .box_01 table tr th h3 {
    font-size: 1rem;
    letter-spacing: 0.3px;
  }

  .box_01 table tr td {
    font-size: 15px;
    background: #fff;
  }

  .box_01 table tr td .ticket-date {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f2f7e8;
    color: #5a6650;
    font-size: 11px;
  }

  .box_01 table tr td .btn_t1 {
    background: #f6faef;
    border: 1px solid #dce8c5;
  }

  .box_01 .basket_protection {
    margin-top: 12px;
    background: #f7fbe9;
    border: 1px solid #dce8c5;
    border-radius: 12px;
    padding: 10px 12px;
  }

  .box_01 .basket_protection .ticket_protection {
    color: #4f6f1f;
    font-weight: 700;
    text-decoration: none;
  }

  .box_01 .basket_protection .ticket_protection:hover {
    text-decoration: underline;
  }

  .box_01 .basket_protection__text p {
    color: #5a6650;
    font-size: 13px;
  }

  .box_02 .basket_user_data .basket_user_data__wrapper {
    border-radius: 16px;
    border: 1px solid #dfe8cd;
    box-shadow: 0 10px 26px rgba(30, 43, 18, 0.08);
    padding: 24px;
  }

  .box_02 .basket_user_data .basket_user_data__wrapper h2 {
    font-weight: 900;
    margin-bottom: 16px;
  }

  .box_02 .basket_user_data .basket_user_data__wrapper .form-control {
    border-radius: 10px;
    border-color: #d6dfc6;
    min-height: 42px;
  }

  .box_02 .basket_user_data .basket_user_data__wrapper .form-control:focus {
    border-color: #72b81b;
    box-shadow: 0 0 0 0.2rem rgba(114, 184, 27, 0.2);
  }

  .box_02 .basket_summary .basket_summary__wrapper {
    border-radius: 16px;
    border: 1px solid #dfe8cd;
    box-shadow: 0 10px 26px rgba(30, 43, 18, 0.08);
    background: linear-gradient(165deg, #ffffff 0%, #f5faea 100%);
    padding: 28px 18px;
  }

  .box_02 .basket_summary .basket_summary__wrapper h2 {
    font-weight: 800;
  }

  .box_02 .basket_summary .basket_summary__wrapper p {
    font-size: 2rem;
    line-height: 1.1;
  }

  .box_02 .basket_summary .basket_summary__wrapper .buy-btn {
    border-radius: 999px;
    background: #72b81b;
    color: #fff;
    min-width: 150px;
    padding: 10px 16px;
  }

  .box_02 .basket_summary .basket_summary__wrapper .buy-btn:hover {
    background: #5e9c15;
  }

  @include respond-below(md) {
    .basket_content {
      width: calc(100% - 20px);
      margin-top: 26px;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper,
    .box_02 .basket_summary .basket_summary__wrapper {
      padding: 16px 12px;
      border-radius: 12px;
    }
  }

  @include respond-below(sm) {
    .basket_content {
      margin-top: 14px;
      margin-bottom: 26px;
      width: calc(100% - 14px);
    }

    .box_01 {
      margin-bottom: 10px;
    }

    .box_01 table tr {
      margin-bottom: 8px;
      padding: 8px;
    }

    .box_01 table td {
      min-height: 34px;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      font-size: 13px;
    }

    .box_01 table tr td .btn_t1 {
      width: 26px;
      height: 26px;
    }

    .box_01 .basket_protection {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
    }

    .box_01 .basket_protection .ticket_protection {
      font-size: 13px;
    }

    .box_01 .basket_protection__text p {
      font-size: 12px;
      line-height: 1.35;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper {
      padding: 12px 10px;
      border-radius: 10px;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper h2 {
      font-size: 1.15rem;
      margin-bottom: 10px;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper .form-group {
      margin-bottom: 0.35rem !important;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper .form-control {
      min-height: 36px;
      font-size: 14px;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper .col-form-label,
    .box_02 .basket_user_data .basket_user_data__wrapper .form-check-label {
      font-size: 14px;
      line-height: 1.25;
    }

    .box_02 .basket_user_data .basket_user_data__wrapper textarea.form-control {
      min-height: 74px;
    }

    .box_02 .basket_summary .basket_summary__wrapper {
      margin-top: 10px;
      padding: 14px 10px;
      border-radius: 10px;
    }

    .box_02 .basket_summary .basket_summary__wrapper h2 {
      font-size: 1.1rem;
      margin-bottom: 6px;
    }

    .box_02 .basket_summary .basket_summary__wrapper p {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

    .box_02 .basket_summary .basket_summary__wrapper .buy-btn {
      width: 100%;
      min-width: 0;
      padding: 9px 12px;
      font-size: 14px;
    }
  }
}

/* Tickets main view final fixes */
#tickets-main-view {
  --tickets-main-width: min(1120px, calc(100% - 30px));

  .tickets_calendar {
    width: var(--tickets-main-width);
    margin-left: auto;
    margin-right: auto;
  }

  #dateForm {
    width: 100%;
    max-width: none;
  }

  .tickets {
    width: var(--tickets-main-width);
  }

  .shopping-cart-container--active .shopping-cart {
    opacity: 1;
    transform: translateX(0);
  }

  .shopping-cart {
    opacity: 0;
    transform: translateX(120%);
  }

  @include respond-below(sm) {
    --tickets-main-width: calc(100% - 20px);
  }
}

/* Tickets main view refinements */
#tickets-main-view {
  #dateForm {
    max-width: none;
    width: min(1120px, calc(100% - 30px));
  }

  .tickets .ticket .price {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: 78px;
    color: #2b3721;
  }

  .shopping-cart {
    width: 320px;
    right: 18px;
    top: 84px;
    border-radius: 16px;
    padding: 12px;
    gap: 10px;
    color: #24311c;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dfe9cf;
    box-shadow: 0 18px 34px rgba(28, 43, 14, 0.22);
    transform: translateX(120%);
  }

  .shopping-cart .basket {
    font-size: 22px;
    color: #72b81b;
  }

  .shopping-cart .quantity {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
  }

  .shopping-cart .tickets__list {
    width: 100%;
    padding: 0;
    border: 0;
    max-height: 44svh;
    background: transparent;
  }

  .shopping-cart .tickets__list .ticket {
    margin: 0 0 8px;
    border: 1px solid #dde6ce;
    border-radius: 10px;
    padding: 8px;
    font-size: 13px;
    background: #f9fcf4;
    grid-template-columns: 1fr 18px;
  }

  .shopping-cart .tickets__list .ticket__description {
    font-size: 14px;
    line-height: 1.2;
  }

  .shopping-cart .tickets__list .ticket__price {
    font-size: 12px;
    color: #566149;
  }

  .shopping-cart .tickets__list .ticket .ticket__button {
    color: #b53b30;
  }

  .shopping-cart .sum-section {
    width: 100%;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f3f8e7;
    border: 1px solid #dce8c5;
    font-size: 20px;
    line-height: 1.1;
  }

  .shopping-cart .buy-btn {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 11px 14px;
    background: #72b81b;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
  }

  .shopping-cart .off-btn {
    top: 8px;
    right: 10px;
    color: #72815f;
    font-size: 16px;
  }

  @include respond-below(sm) {
    #dateForm {
      width: calc(100% - 20px);
    }

    .tickets .ticket .price {
      min-width: 0;
    }

    .shopping-cart {
      width: calc(100vw - 20px);
      right: 10px;
      top: 74px;
      max-height: calc(100svh - 90px);
      overflow: hidden;
    }
  }
}

/* Tickets cards v2 - more compact, bolder look */
#tickets-main-view {
  .tickets {
    gap: 28px;
  }

  .tickets .ticket-container {
    padding: 18px 16px 12px;
    gap: 12px;
    border-radius: 18px;
  }

  .tickets .ticket {
    gap: 12px 14px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid #e7eddc;
    box-shadow: 0 6px 16px rgba(25, 33, 19, 0.06);
    position: relative;
    overflow: hidden;
  }

  .tickets .ticket::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(114, 184, 27, 0.6), rgba(19, 143, 203, 0.2));
  }

  .tickets .ticket .ticket-description {
    min-height: 64px;
    padding: 10px 10px;
    border-radius: 10px;
  }

  .tickets .ticket .ticket-description .ticket__name {
    font-size: clamp(17px, 2.2vw, 23px);
    line-height: 1.08;
    letter-spacing: 0.1px;
  }

  .tickets .ticket .ticket-description .description {
    font-size: 11px;
    margin-top: 2px;
  }

  .tickets .ticket .ticket-description .ticket-alert {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.95;
  }

  .tickets .ticket .price {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    min-width: 88px;
    text-align: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f5f9ed;
    border: 1px solid #dfeac9;
    color: #2f3a24;
  }

  .tickets .ticket .ticket-quantity .button {
    min-width: 146px;
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 800;
  }

  @include respond-below(md) {
    .tickets .ticket {
      grid-template-columns: 1fr auto auto;
      grid-template-areas: "desc price button";
      align-items: center;
    }

    .tickets .ticket .ticket-description {
      grid-area: desc;
    }

    .tickets .ticket .price {
      grid-area: price;
      text-align: center;
      min-width: 82px;
      padding: 7px 8px;
    }

    .tickets .ticket .ticket-quantity {
      grid-area: button;
      justify-self: end;
    }
  }

  @include respond-below(sm) {
    .tickets .ticket {
      grid-template-columns: 1fr;
      grid-template-areas:
        "desc"
        "price"
        "button";
      justify-items: stretch;
    }

    .tickets .ticket .price {
      justify-self: start;
      font-size: 24px;
      min-width: 0;
    }

    .tickets .ticket .ticket-quantity {
      justify-self: stretch;
    }

    .tickets .ticket .ticket-quantity .button {
      width: 100%;
      min-width: 0;
    }
  }
}