@charset "UTF-8";

/*
Theme Name: Quad
Theme URI:
Author: Peppermint
Author URI: https://events.quad.eu/
Description: Custom WordPress theme designed for <code>Quad Events</code>.
Version: 1.0
Tags: quad, company, custom, events, agency
*/

@font-face {
   font-family: 'Quad Graphik Cond';
   src: url('./assets/fonts/QuadGraphikCond-Bold.woff2');
   font-weight: 700;
}

@font-face {
   font-family: 'Quad Graphik';
   src: url('./assets/fonts/Quad Graphik-Regular.woff2');
   font-weight: 400;
}

body {
   font-family: 'Quad Graphik';
}

.wheel-slice {
   /* position: absolute;
    width: 50%;
    height: 50%;
    left: 0%;
    top: 0%;
    transform-origin: 0% 0%;
    transform: rotate(0deg); */
}

.rotate-270 {
   transform: rotate(270deg);
}

#spin-btn:disabled {
   opacity: .5;
   pointer-events: none;
   cursor: not-allowed;
}

#form.loading {
   pointer-events: none;
}

#form.disabled {
   pointer-events: none;
}

#form.disabled #form-btn {
   opacity: .5;
   pointer-events: none;
   cursor: not-allowed;
}

.input-error {
   display: none;
}

.input-error.invalid {
   content: '';
   position: absolute;
   height: 80%;
   width: auto;
   aspect-ratio: 1/1;
   right: 5px;
   top: 0;
   bottom: 0;
   margin: auto 0;
   background-image: url('./assets/img/invalid.svg');
   background-position: center;
   background-size: contain;
   display: block;
}

#form.loading #form-btn {
   opacity: .5;
   pointer-events: none;
}

#form #form-btn .loader {
   display: none;
}

#form.loading #form-btn .text {
   display: none;
}

#form.loading #form-btn .loader {
   width: 30px;
   height: 30px;
   border: 5px solid #000000;
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   0% {
      transform: rotate(0deg);
   }

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


.wheel-container {
   position: relative;
   width: 100%;
   height: auto;
   max-width: 900px;
   aspect-ratio: 1/1;
   margin: 0 auto;
}

.wheel {
   --_items: 8;
   all: unset;
   aspect-ratio: 1 / 1;
   background: crimson;
   container-type: inline-size;
   direction: ltr;
   display: grid;
   place-content: center start;
   clip-path: inset(0 0 0 0 round 50%);
   position: relative;
   overflow: hidden;
   transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
}

.wheel-prize {
   align-content: center;
   background: deepskyblue;
   display: grid;
   font-size: 5cqi;
   grid-area: 1 / -1;
   list-style: none;
   padding-left: 1ch;
   transform-origin: center right;
   width: 50cqi;
   transform: rotate(22.5deg);
}

.wheel-prize:nth-of-type(1) {
   --_idx: 1;
   background-color: #FFD350;
}

.wheel-prize:nth-of-type(2) {
   --_idx: 2;
   background-color: #00A1E6;
}

.wheel-prize:nth-of-type(3) {
   --_idx: 3;
   background-color: #72F07F;
}

.wheel-prize:nth-of-type(4) {
   --_idx: 4;
   background-color: #FE8B48;
}

.wheel-prize:nth-of-type(5) {
   --_idx: 5;
   background-color: #00A1E6;
}

.wheel-prize:nth-of-type(6) {
   --_idx: 6;
   background-color: #FFD350;
}

.wheel-prize:nth-of-type(7) {
   --_idx: 7;
   background-color: #FF6E61;
}

.wheel-prize:nth-of-type(8) {
   --_idx: 8;
   background-color: #FFAFD6;
}

.wheel-prize:nth-of-type(1) img,
.wheel-prize:nth-of-type(5) img {
   width: 35%;
   transform: rotate(-22deg);
   translate: -10px;
}

.wheel-prize:nth-of-type(2) img,
.wheel-prize:nth-of-type(6) img {
   width: 44%;
   transform: rotate(-72deg);
   translate: -24px;
}

.wheel-prize:nth-of-type(3) img,
.wheel-prize:nth-of-type(7) img {
   width: 50%;
   transform: rotate(-113deg);
   translate: -36px;
}

.wheel-prize:nth-of-type(4) img,
.wheel-prize:nth-of-type(8) img {
   width: 27%;
   transform: rotate(-155deg);
   translate: -7px;
}

@media (max-width: 525px) {
   .wheel-prize:nth-of-type(2) img,
   .wheel-prize:nth-of-type(6) img {
      translate: -16px;
   }

   .wheel-prize:nth-of-type(3) img,
   .wheel-prize:nth-of-type(7) img {
      width: 50%;
      transform: rotate(-113deg);
      translate: -20px;
   }
}

.wheel-prize {
   rotate: calc(360deg / var(--_items) * calc(var(--_idx) - 1));
   height: calc((2 * pi * 50cqi) / var(--_items));

   clip-path: polygon(0% -2%, 100% 50%, 0% 104%);
}

.arrow {
   position: absolute;
   top: 50%;
   right: -60px;
   transform: translateY(-50%);
   width: 78px;
   height: auto;
   z-index: 10;
}

@media (max-width: 1023px) {
   .arrow {
      top: -40px;
      right: 50%;
      width: 60px;
      height: auto;
      transform: translateX(50%) rotate(-90deg);
   }
}

#lottery {
   max-width: 1475px;
   margin: 0 auto;
   padding: 0 30px;
}

#lottery-info {
   width: 100%;
}

@media (min-width: 992px) {
   #lottery {
      max-width: 1475px;
      margin: 0 auto;
      padding: 0 30px;
   }

   /* .lottery-done {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 70px;
        justify-items: center;
        align-items: center;
    } */
}

@media (max-width: 1023px) {
   #lottery-info {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;

      overflow: hidden;
   }

   #lottery-info .info-content {
      max-width: 512px;
      width: 100%;
   }

   #lottery-info.hidden {
      display: none;
   }
}