@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

@layer base {
  body {
    @apply text-base leading-normal font-body lg:text-2xl bg-black text-white bg-page flex flex-col h-screen justify-between;
  }

  button,
  a {
   @apply transition-colors transition-shadow duration-300;
  }

  .header {
    @apply w-full absolute w-full z-20 border-b border-gray-700 py-4 2xl:py-6;
  }

  .new .header,
  .home .header {
    @apply border-none;
  }

  .main {
    @apply flex flex-col bg-shadow-img bg-right-top bg-no-repeat pt-9 lg:pt-10 2xl:pt-16 flex-1 relative;
  }

  :disabled {
    @apply pointer-events-none;
  }

  :disabled {
    @apply pointer-events-none;
  }
}

@layer components {
  .logo {
    @apply relative max-w-[173px] 2xl:max-w-none;
  }

  .link {
    @apply before:block before:scale-x-0 before:transition-all before:duration-300 before:absolute before:bg-white before:h-[2px] before:-bottom-3 before:left-0 before:w-full before:shadow-normal relative inline-block hover:before:scale-x-100;
  }

  .link.active {
    @apply before:scale-x-100;
  }

  .selected_tab {
    @apply before:block before:scale-x-0 before:transition-all before:duration-300 before:absolute before:bg-white before:h-[2px] before:-bottom-3 before:left-0 before:w-full before:shadow-normal relative inline-block before:scale-x-100;
  }

  .btn {
    @apply cursor-pointer capitalize text-xl border-2 leading-normal font-medium py-2_5 md:py-3_25 px-8 rounded-xl px-4;
  }

  .btn-block {
    @apply w-full block text-center flex items-center justify-center;
  }

  .btn-md {
    @apply text-md py-0_75 md:py-0_75 rounded-lg px-4_25;
  }

  .btn-primary {
    @apply text-green bg-green border-green text-black hover:text-green hover:bg-transparent hover:shadow-normal;
  }

  .btn-secondary {
    @apply bg-transparent border-white hover:text-gray-500 hover:text-green hover:border-green hover:shadow-normal;
  }

  .btn-burger {
    @apply flex flex-col justify-between w-[32px] h-[32px] py-[7px] px-0_5;
  }

  .btn-burger span {
    @apply h-0_2 w-full block transition-all bg-white;
  }

  .btn-gray {
    @apply bg-gray-700 hover:bg-gray-700 text-gray-300 border-gray-700;
  }

  .show-menu .btn-burger span {
    @apply rotate-45 translate-y-[9px];
  }

  .show-menu .btn-burger span:nth-of-type(2) {
    @apply -rotate-45 translate-y-[-7px];
  }

  .show-menu .btn-burger span:nth-of-type(3) {
    @apply hidden;
  }

  #menu > div {
    @apply mt-[-150%] lg:mt-0;
  }

  .show-menu header {
    @apply bg-page z-50;
  }

  .show-menu #menu > div {
    @apply mt-0;
  }

  .resize-active #menu > div {
    @apply transition-none;
  }

  .card:hover .card-content {
    @apply bg-black z-20
  }

  .card {
    @apply relative border-1_5 border-white block shadow-sm before:block before:absolute before:w-full before:h-full before:transition-all before:duration-300 hover:before:shadow-hover;
  }

  #error_explanation ul {
    @apply list-disc flex flex-col gap-3 ml-4
  }

  #error_explanation h2 {
    @apply mb-3 text-sm
  }

  #error_explanation {
    @apply text-yellow mb-6 text-sm
  }

  [type=checkbox]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  }

  .filter.opened {
    @apply bg-gray-900 md:bg-transparent;
  }

  .filter.opened + div #filterrific_results {
    @apply min-h-[1050px] md:min-h-0
  }

  .stripe-control.StripeElement--focus {
    @apply shadow-green-outline border-green;
  }

  .form-group,
  .stripe-control {
    @apply relative;
  }

  .stripe-control.StripeElement--empty iframe {
    opacity: 0;
  }

  .stripe-control.StripeElement--empty:before {
    content: attr(data-text);
    @apply pointer-events-none absolute text-gray-300 leading-tight;
  }
}
/* line 1, app/assets/stylesheets/components/tooltip.scss */
.tooltip {
  position: relative;
}

/* line 4, app/assets/stylesheets/components/tooltip.scss */
.tooltip:hover:before {
  content: attr(data-tooltip);
  border-radius: 5px;
  bottom: 1.8em;
  background: #000;
  font-size: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em;
  position: absolute;
}
/* Pagination*/
/* line 3, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* line 10, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .current,
.pagination_section a {
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  width: 44px;
  height: 44px;
}

/* line 25, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .current,
.pagination_section a:hover {
  background-color: #FF9D00;
  border-color: #FF9D00;
  color: #000;
}

/* line 34, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .prev a,
.pagination_section .next a {
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-width: 0;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(/%23clip0_6_365)'%3E%3Cpath d='M9 6L15 12L9 18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6_365'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  opacity: 1;
}

/* line 45, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .prev a:hover,
.pagination_section .next a:hover {
  background-color: none !important;
}

/* line 51, app/assets/stylesheets/concerts/concert.scss */
.pagination_section span {
  display: block;
}

/* line 55, app/assets/stylesheets/concerts/concert.scss */
.pagination_section .first, .pagination_section .last {
  display: none;
}
/* line 1, app/assets/stylesheets/orders/order.scss */
select option {
  background: black;
  color: #fff;
}
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
.splide.is-initialized:not(.is-active) .splide__list {
    @apply block;
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
    display: none;
}

.splide__arrow--next svg {
    transform: scaleX(-1)
}

.splide__arrow:hover:not(:disabled) {
    opacity: .8
}

.splide__arrow:disabled {
    opacity: .3
}

.splide.is-focus-in .splide__arrow:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__pagination {
    padding: 0 1em;
}

button.splide__pagination__page {
    width: 40px;
    padding: 15px 0;
    margin: 0 6px;
}

button.splide__pagination__page:before {
    content: '';
    background: #ffffff;
    display: block;
    height: 2px;
    opacity: .4;
}

@media (min-width: 1024px) {
    .splide__pagination__page.is-active {
        width: 80px;
    }
}

.splide__pagination__page.is-active:before {
    background: #fff;
    opacity: 1;
    box-shadow: 0px 0px 11px 2px rgba(255, 255, 255, 0.48);
}

.splide__pagination__page:hover {
    cursor: pointer;
    opacity: .9
}

.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__progress__bar {
    background: #ccc;
    height: 3px
}

.checkout .splide__pagination {
    display: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */