/* Imagitrue Spin Wheel v1.3
   Pixel-matched to the 635 x 743 reference design. Every measurement is expressed in
   "design px" (--u = card width / 635), so the whole widget scales perfectly at any size. */
.imgt-sw {
   --u: calc(100cqw/635);
   --imgt-font: "mendl-sans-dusk", sans-serif !important;
   --imgt-btn-font: "mendl-sans-dusk", sans-serif !important;
   position: relative;
   display: block;
   width: 100%;
   /* never taller than the screen: width is limited so that height (= width / ratio) fits 100vh minus a small gap */
   max-width: max(300px, min(760px, calc((100vh - var(--imgt-gap, 130px)) * var(--imgt-ar, .8546))));
   margin: 0 auto;
   aspect-ratio: var(--imgt-ratio, 635/743);
   overflow: hidden;
   border-radius: 10px;
   background-color: #104574;
   background-image: var(--imgt-bg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   box-shadow: 0 5px 6px -1px rgba(0, 0, 0, .16);
   isolation: isolate;
   container-type: inline-size;
   -webkit-tap-highlight-color: transparent
}

@supports not (width:1cqw) {
   .imgt-sw {
      --u: calc(min(100vw, 760px)/635)
   }
}

.imgt-sw * {
   box-sizing: border-box
}

/* Logo + heading. Heading rules use !important so theme h2 styles (font, size, nowrap, margins) can't break the layout. */
.imgt-sw .imgt-logo {
   position: absolute;
   z-index: 4;
   left: 50%;
   top: calc(var(--u)*79);
   width: calc(var(--u)*141);
   height: calc(var(--u)*42);
   margin: 0;
   transform: translateX(-50%);
   object-fit: contain;
   display: block;
   overflow: visible
}

.imgt-sw .imgt-title {
   position: absolute !important;
   z-index: 4;
   left: 50% !important;
   top: calc(var(--u)*159) !important;
   width: calc(var(--u)*420) !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   transform: translateX(-50%);
   color: #fff !important;
   text-align: center !important;
   font-family: var(--imgt-font) !important;
   font-weight: 800 !important;
   font-size: calc(var(--u)*26) !important;
   line-height: calc(var(--u)*33) !important;
   letter-spacing: 0 !important;
   text-transform: none !important;
   text-shadow: none !important;
   white-space: normal !important;
   background: none !important;
   border: 0 !important
}

.imgt-sw .imgt-title span {
   display: block !important;
   white-space: nowrap !important
}

/* Wheel (390 design px incl. the 12px ring) */
.imgt-sw .imgt-wheel {
   position: absolute;
   left: calc(50.33% - var(--u)*195);
   top: calc(61.9% - var(--u)*195);
   width: calc(var(--u)*390);
   height: calc(var(--u)*390);
   border-radius: 50%
}

.imgt-sw .imgt-rotor {
   position: absolute;
   inset: calc(var(--u)*12);
   z-index: 1;
   border-radius: 50%;
   overflow: hidden;
   transform-origin: 50% 50%;
   backface-visibility: hidden
}

.imgt-sw .imgt-rotor.is-spinning {
   will-change: transform
}

.imgt-sw .imgt-rotor>svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   overflow: visible
}

.imgt-sw .imgt-ring {
   position: absolute;
   inset: 0;
   z-index: 3;
   border: calc(var(--u)*12) solid #282626;
   border-radius: 50%;
   pointer-events: none
}

/* Segment labels: anchor sits on the wheel centre, is rotated to the segment angle, then the block hangs inward from r = 164 */
.imgt-sw .imgt-label {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 0;
   height: 0;
   pointer-events: none
}

.imgt-sw .imgt-label-in {
   position: absolute;
   left: 0;
   top: calc(var(--u)*-164);
   width: calc(var(--u)*124);
   margin-left: calc(var(--u)*-62);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: #fff;
   font: 800 max(6.4px, calc(var(--u)*10.9))/calc(var(--u)*12) var(--imgt-font);
   letter-spacing: 0;
   -webkit-font-smoothing: antialiased
}

.imgt-sw .imgt-label-in img,
.imgt-sw .imgt-label-in .imgt-icon {
   display: block;
   width: max(13px, calc(var(--u)*21.6));
   height: auto;
   aspect-ratio: 1;
   margin: 0 0 calc(var(--u)*8);
   -webkit-user-drag: none;
   user-select: none;
   overflow: visible
}

.imgt-sw .imgt-label-in span {
   display: block;
   white-space: nowrap
}

.imgt-sw .imgt-label-in .imgt-sub {
   margin-top: calc(var(--u)*18.4);
   font-size: max(6px, calc(var(--u)*9.6));
   letter-spacing: .01em
}

/* Fixed pointer, sits just above the button and points at the segment on top */
.imgt-sw .imgt-pointer {
   position: absolute;
   z-index: 3;
   left: calc(50% - var(--u)*7.5);
   top: calc(50% - var(--u)*49);
   width: calc(var(--u)*15);
   height: calc(var(--u)*28);
   background: #282626;
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
   transform-origin: 50% 100%;
   pointer-events: none
}

/* Lamps (artwork from the media library, or CSS fallback) */
.imgt-sw .imgt-lamps {
   position: absolute;
   inset: 0;
   z-index: 4;
   pointer-events: none
}

.imgt-sw .imgt-lamp {
   position: absolute;
   width: 0;
   height: 0
}

.imgt-sw .imgt-lamp>* {
   position: absolute;
   left: 0;
   top: 0;
   transform: translate(-50%, -50%);
   max-width: none;
   display: block
}

.imgt-sw .imgt-lamp-ring {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: none;
   display: block
}

.imgt-sw .imgt-lamp-svg {
   width: calc(var(--u)*68);
   height: calc(var(--u)*68);
   overflow: visible
}

/* Spin button. !important on the look so theme / Elementor button styles can't make it transparent or change its font. */
.imgt-sw .imgt-spin {
   position: absolute !important;
   z-index: 6;
   left: calc(50% - var(--u)*4.1 - var(--u)*65.5) !important;
   top: calc(50% - var(--u)*3.4 - var(--u)*19) !important;
   width: calc(var(--u)*131) !important;
   height: calc(var(--u)*38) !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   border: calc(var(--u)*2.6) solid #33e1fb !important;
   border-radius: calc(var(--u)*13) !important;
   background: #fbfbfb !important;
   background-image: none !important;
   color: #2b2b2b !important;
   font-family: Arial, Helvetica, "Liberation Sans", sans-serif !important;
   font-weight: 400 !important;
   font-size: max(8px, calc(var(--u)*13)) !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
   text-transform: none !important;
   text-shadow: none !important;
   cursor: pointer;
   box-shadow: 0 0 calc(var(--u)*7) calc(var(--u)*1.5) rgba(51, 225, 251, .85), 0 0 0 calc(var(--u)*1) rgba(171, 240, 255, .8) !important;
   transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .3s ease;
   -webkit-appearance: none;
   appearance: none;
   display: flex !important;
   align-items: center;
   justify-content: center
}

.imgt-sw .imgt-spin:hover,
.imgt-sw .imgt-spin:focus {
   background: #fbfbfb !important;
   color: #2b2b2b !important;
   border-color: #33e1fb !important
}

.imgt-sw .imgt-spin:before {
   content: "";
   position: absolute;
   inset: calc(var(--u)*-3);
   border-radius: inherit;
   box-shadow: 0 0 calc(var(--u)*16) calc(var(--u)*5) rgba(51, 225, 251, .95);
   opacity: 0;
   pointer-events: none;
   animation: imgt-pulse 2.4s ease-in-out infinite
}

.imgt-sw .imgt-spin:hover {
   transform: scale(1.05)
}

.imgt-sw .imgt-spin:active {
   transform: scale(.96);
   transition-duration: .12s
}

.imgt-sw .imgt-spin:focus-visible {
   outline: calc(var(--u)*3) solid #fff;
   outline-offset: calc(var(--u)*3)
}

.imgt-sw .imgt-spin[disabled] {
   cursor: progress;
   transform: scale(.98)
}

.imgt-sw .imgt-spin[disabled]:before {
   animation: none;
   opacity: .35
}

.imgt-sw .imgt-spin-label {
   display: block;
   white-space: nowrap
}

/* Entrance (classes are added by JS only, so nothing is ever hidden if JS fails) */
.imgt-sw.imgt-pre .imgt-wheel {
   opacity: 0;
   scale: .88
}

.imgt-sw.imgt-pre .imgt-spin {
   opacity: 0;
   scale: .7
}

.imgt-sw.imgt-pre .imgt-pointer {
   opacity: 0;
   translate: 0 calc(var(--u)*8)
}

.imgt-sw.imgt-pre .imgt-lamp,
.imgt-sw.imgt-pre .imgt-lamp-ring {
   opacity: 0;
   scale: .6
}

.imgt-sw.imgt-pre .imgt-logo,
.imgt-sw.imgt-pre .imgt-title {
   opacity: 0;
   translate: 0 calc(var(--u)*12)
}

.imgt-sw.imgt-in .imgt-wheel {
   transition: opacity .7s ease, scale 1.1s cubic-bezier(.2, .9, .25, 1)
}

.imgt-sw.imgt-in .imgt-spin {
   transition: opacity .5s ease .55s, scale .8s cubic-bezier(.34, 1.56, .64, 1) .55s, transform .35s cubic-bezier(.22, 1, .36, 1), background .3s ease
}

.imgt-sw.imgt-in .imgt-pointer {
   transition: opacity .5s ease .45s, translate .6s cubic-bezier(.2, .9, .25, 1) .45s
}

.imgt-sw.imgt-in .imgt-lamp {
   transition: opacity .5s ease var(--d, 0s), scale .8s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s)
}

.imgt-sw.imgt-in .imgt-lamp-ring {
   transition: opacity .9s ease .25s, scale 1.1s cubic-bezier(.2, .9, .25, 1) .25s
}

.imgt-sw.imgt-in .imgt-logo,
.imgt-sw.imgt-in .imgt-title {
   transition: opacity .7s ease .15s, translate .8s cubic-bezier(.2, .9, .25, 1) .15s
}

/* Idle: lamps breathe */
.imgt-sw.imgt-in .imgt-lamp>img,
.imgt-sw.imgt-in .imgt-lamp-svg {
   animation: imgt-flicker var(--f, 3s) ease-in-out var(--d, 0s) infinite alternate
}

.imgt-sw.imgt-in .imgt-lamp-ring {
   animation: imgt-flicker 3.4s ease-in-out 1.2s infinite alternate
}

@keyframes imgt-flicker {
   0% {
      opacity: .88
   }

   100% {
      opacity: 1
   }
}

@keyframes imgt-pulse {

   0%,
   100% {
      opacity: 0
   }

   50% {
      opacity: .8
   }
}

/* Confetti burst */
.imgt-sw .imgt-burst {
   position: absolute;
   z-index: 9;
   left: 50.33%;
   top: 61.9%;
   width: 0;
   height: 0;
   pointer-events: none
}

.imgt-sw .imgt-burst i {
   position: absolute;
   left: 0;
   top: 0;
   width: calc(var(--u)*7);
   height: calc(var(--u)*11);
   margin: calc(var(--u)*-5.5) 0 0 calc(var(--u)*-3.5);
   border-radius: 2px;
   will-change: transform, opacity
}

/* Result + error */
.imgt-sw .imgt-result {
   position: absolute;
   z-index: 20;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5%;
   background: rgba(7, 28, 58, .74);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   animation: imgt-fade .35s ease both
}

.imgt-sw .imgt-result.is-out {
   animation: imgt-fade-out .22s ease both
}

.imgt-sw .imgt-result-card {
   position: relative;
   width: min(100%, 360px);
   padding: 28px 22px 22px;
   border-radius: 20px;
   background: #fff;
   color: #1d2260;
   text-align: center;
   box-shadow: 0 22px 56px rgba(0, 0, 0, .38);
   font: 700 15px/1.45 var(--imgt-font);
   overflow: hidden;
   animation: imgt-pop .6s cubic-bezier(.2, 1.15, .3, 1) both
}

.imgt-sw .imgt-result.is-out .imgt-result-card {
   animation: imgt-pop-out .22s ease both
}

.imgt-sw .imgt-result-card:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 6px;
   background: linear-gradient(90deg, #5a5cf6, #faaf02 50%, #33349b)
}

.imgt-sw .imgt-result-card h3 {
   margin: 0 0 6px;
   font: 800 clamp(20px, calc(var(--u)*30), 26px)/1.15 var(--imgt-font);
   color: #33349b
}

.imgt-sw .imgt-result-card p {
   margin: 6px 0;
   color: #2b3270
}

.imgt-sw .imgt-result-card .imgt-prize {
   font-size: 17px;
   font-weight: 800;
   color: #1d2260
}

.imgt-sw .imgt-code {
   display: inline-block;
   margin: 10px 0 4px;
   padding: 9px 18px;
   border: 2px dashed #5a5cf6;
   border-radius: 10px;
   background: #f1f1ff;
   color: #33349b;
   font: 800 20px/1.2 var(--imgt-font);
   letter-spacing: 2px;
   user-select: all
}

.imgt-sw .imgt-result-actions {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px
}

.imgt-sw .imgt-result-actions a,
.imgt-sw .imgt-result-actions button {
   display: inline-block;
   border: 0;
   border-radius: 10px;
   padding: 11px 16px;
   background: #5a5cf6;
   color: #fff;
   text-decoration: none;
   font: 800 14px/1.2 var(--imgt-font);
   cursor: pointer;
   transition: transform .2s cubic-bezier(.22, 1, .36, 1), filter .2s ease
}

.imgt-sw .imgt-result-actions a {
   background: #faaf02;
   color: #1d2260
}

.imgt-sw .imgt-result-actions .imgt-close {
   background: #edf0f8;
   color: #26345c
}

.imgt-sw .imgt-result-actions a:hover,
.imgt-sw .imgt-result-actions button:hover {
   transform: translateY(-1px);
   filter: brightness(1.06)
}

.imgt-sw .imgt-result-actions a:active,
.imgt-sw .imgt-result-actions button:active {
   transform: translateY(0) scale(.97)
}

.imgt-sw .imgt-error {
   position: absolute;
   z-index: 8;
   left: 50%;
   bottom: 3.5%;
   width: 86%;
   padding: 10px 12px;
   border-radius: 10px;
   background: #fff;
   color: #9b1c1c;
   text-align: center;
   font: 700 13px/1.35 var(--imgt-font);
   box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
   transform: translateX(-50%);
   animation: imgt-rise .4s cubic-bezier(.2, .9, .25, 1) both
}

.imgt-sw .imgt-live {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap
}

@keyframes imgt-fade {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes imgt-fade-out {
   from {
      opacity: 1
   }

   to {
      opacity: 0
   }
}

@keyframes imgt-pop {
   from {
      opacity: 0;
      transform: translateY(18px) scale(.86)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes imgt-pop-out {
   from {
      opacity: 1;
      transform: none
   }

   to {
      opacity: 0;
      transform: translateY(10px) scale(.94)
   }
}

@keyframes imgt-rise {
   from {
      opacity: 0;
      transform: translate(-50%, 12px)
   }

   to {
      opacity: 1;
      transform: translate(-50%, 0)
   }
}

@media(prefers-reduced-motion:reduce) {

   .imgt-sw *,
   .imgt-sw *:before {
      animation: none !important;
      transition: none !important
   }

   .imgt-sw.imgt-pre .imgt-wheel,
   .imgt-sw.imgt-pre .imgt-spin,
   .imgt-sw.imgt-pre .imgt-pointer,
   .imgt-sw.imgt-pre .imgt-lamp,
   .imgt-sw.imgt-pre .imgt-lamp-ring {
      opacity: 1;
      scale: 1;
      translate: none
   }
}

/* Conditions / small print */
.imgt-terms {
   box-sizing: border-box;
   max-width: max(300px, min(760px, calc((100vh - var(--imgt-gap, 130px)) * var(--imgt-ar, .8546))));
   margin: 10px auto 0;
   padding: 0 8px;
   text-align: center;
   font: 400 10px/1.5 "mendl-sans-dusk", Poppins, system-ui, sans-serif;
   letter-spacing: .01em;
   color: var(--imgt-terms-color, #6b6f85)
}

.imgt-sw .imgt-result-card p.imgt-terms-in {
   margin: 14px 0 0;
   font: 500 9px/1.45 var(--imgt-font);
   color: #6b7090
}

@media (max-width: 480px) {
   .imgt-terms {
      font-size: 9px
   }
}

/* Browsers with dynamic viewport units (mobile address bars) */
@supports (height: 100dvh) {
   .imgt-sw {
      max-width: max(300px, min(760px, calc((100dvh - var(--imgt-gap, 130px)) * var(--imgt-ar, .8546))))
   }

   .imgt-terms {
      max-width: max(300px, min(760px, calc((100dvh - var(--imgt-gap, 130px)) * var(--imgt-ar, .8546))))
   }
}