/* modal trigger */

	.modal-wheel-trigger {position: fixed; bottom: 140px; transition: opacity .3s 0s; left: 50px; width: 140px; height: 140px; z-index: 999;}

	.modal-wheel-trigger.hidden {display: none }

	.modal-wheel-trigger img {object-fit: contain; object-position: center; width: 100%; height: 100%;}

	.modal-wheel-trigger:hover {opacity: .7 }

	.modal-wheel-trigger__rings {border: 1px solid #ff0000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; width: auto; border-radius: 50%; animation-duration: 4.0s; animation-name: pulse_1; animation-iteration-count: infinite; z-index: -1;}

	.modal-wheel-trigger__rings:nth-child(2) {animation-name: pulse_2;}

	.modal-wheel-trigger__rings:nth-child(3) {animation-name: pulse_3;}

	@keyframes pulse_1 {
		from {opacity: 1; transform: scale(0.3, 0.3);}
		to {opacity: 0; transform: scale(1.3, 1.3);}
	}

	@keyframes pulse_2 {
		from {opacity: 1; transform: scale(0.3, 0.3);}
		to {opacity: 0; transform: scale(1.7, 1.7);}
	}

	@keyframes pulse_3 {
		from {opacity: 1; transform: scale(0.3, 0.3);}
		to {opacity: 0; transform: scale(2, 2);}
	}

	/* modal */

	.modal-wheel {
		--c-background:  #f3feff;
		--c-secondary:   #a7a7a7;
		--c-primary:     #008996;
		--c-accent:      #f77b55;
		--c-border:      rgba(55, 58, 68, .1);
		--c-text:        #373a44;
		--fixPosition:   0;

		display:         flex;
		justify-content: center;
		align-items:     center;
		position:        fixed;
		left:            0;
		top:             0;
		right:           0;
		bottom:          0;
		width:           100%;
		height:          100%;
		z-index:         99999;
		color:           var(--c-text);
	}

	.modal-wheel__overlay {
		position:         absolute;
		left:             inherit;
		top:              inherit;
		right:            inherit;
		bottom:           inherit;
		width:            inherit;
		height:           inherit;
		background-color: rgba(0, 0, 0, .95);
		transition:       .3s ease opacity;
	}

	.modal-wheel__window {
		margin:     20px;
		width:      720px;
		max-width:  100%;
		max-height: 100%;
		transition: .6s ease transform;
		position:   relative;
		right:      var(--fixPosition, 0);
	}

	.modal-wheel[data-show="false"] {
		pointer-events: none;
		z-index:        -99999;
	}

	.modal-wheel[data-show="true"] {
		pointer-events: all;
	}

	.modal-wheel[data-show="false"] .modal-wheel__overlay {
		opacity: 0;
	}

	.modal-wheel[data-show="true"] .modal-wheel__overlay {
		opacity: 1;
	}

	.modal-wheel[data-show="false"] .modal-wheel__window {
		opacity:   0;
		transform: translateY(5px);
	}

	.modal-wheel[data-show="true"] .modal-wheel__window {
		opacity:   1;
		transform: translateY(0);
	}

	/* fortune wheel deviations */

	.fortune-wheel {
		position: relative;
		background-size:     cover;
		background-position: center;
		background-repeat:   no-repeat;
		border-radius: 20px;
	}

	.fortune-wheel__content-wrapper {
		padding-right: calc(25% - 20px);
	}

	.fortune-wheel__wheel {
		position:  absolute;
		right:     0;
		top:       0;
		bottom:    0;
		width:     calc(50% + 20px);
		transform: translateX(calc(50% - 20px));
	}

	.fortune-wheel__disk {
		position:     absolute;
		left:         clamp(25%, 15vw, 50%);
		top:          50%;
		transform:    translate(-50%, -50%);
		height:       clamp(400px, 50vw, 100%);
		aspect-ratio: 1;
	}

	/* fortune wheel resets */

	.fortune-wheel * {
		box-sizing: border-box;
	}

	.fortune-wheel img {
		user-select:    none;
		pointer-events: none;
	}

	.fortune-wheel h1, h2, h3, h4, h5 {
		color:  var(--c-text);
		margin: 0;
	}

	/* fortune wheel styles */

	.fortune-wheel__content-wrapper {
		background-color:    var(--c-background);
		border-radius:       20px;
	}

	.fortune-wheel__content {
		position: relative;
		padding:  20px 30px;
		z-index:  2;
	}

	.fortune-wheel__success {
		position:    absolute;
		left:        0;
		right:       0;
		top:         0;
		bottom:      0;
		padding:     inherit;
		padding-top: 70px;
		transition:  .6s ease opacity;
	}

	.fortune-wheel__common {
		transition: .3s ease opacity;
	}

	.fortune-wheel__common[data-show="true"] {
		opacity:        1;
		pointer-events: all;
	}

	.fortune-wheel__common[data-show="true"] ~ .fortune-wheel__success {
		opacity:        0;
		pointer-events: none;
	}

	.fortune-wheel__common[data-show="false"] {
		opacity:        0;
		pointer-events: none;
	}

	.fortune-wheel__common[data-show="false"] ~ .fortune-wheel__success {
		opacity:          1;
		pointer-events:   all;
		transition-delay: .3s;
	}

	.fortune-wheel__real-prize {
		position:   absolute;
		left:       20px;
		bottom:     -14px;
		max-height: 170px;
		z-index:    -1;
	}

	.fortune-wheel-top {
		display:       flex;
		align-items:   center;
		flex-wrap:     wrap;
		margin-bottom: 20px;
	}

	.fortune-wheel-top__text {
		font-size:   22px;
		font-weight: 500;
	}

	.fortune-wheel-top__badge {
		align-self:      stretch;
		padding:         6px 24px;
		border-radius:   9999px;
		display:         inline-flex;
		justify-content: center;
		align-items:     center;
	}

	.fortune-wheel-top__badge--filled {
		margin-left:      10px;
		background-color: var(--c-primary);
		color:            #fff;
		font-weight:      700;
		font-size:        22px;
	}

	.fortune-wheel-top__badge--outline {
		margin-left:      20px;
		background-color: #fff;
		color:            var(--c-primary);
		border:           1px solid var(--c-primary);
		display: none;
	}

	.fortune-wheel-title {
		font-size:     26px;
		font-weight:   800;
		margin-bottom: 20px;
	}

	.fortune-wheel-title__highlight {
		color: var(--c-primary);
	}

	.fortune-wheel-title--lg {
		font-size: 33px;
	}

	.fortune-wheel__subtitle {
		font-size:     24px;
		font-weight:   700;
		margin-bottom: 20px;
	}

	.fortune-wheel__subtitle--small {
		font-weight: 500;
	}

	.fortune-wheel-text {
		font-size: 16px;
		margin-bottom: 10px;
		color: #000;
	}

	.fortune-wheel__form {
		max-width: 360px;
		display:   grid;
		gap:       10px;
	}

	.fortune-wheel__error {
		color:      #ff0000;
		font-size:  11px;
		overflow:   hidden;
		transition: max-height .3s ease;
	}

	.fortune-wheel__error[data-show="false"] {
		max-height: 0;
		margin-top: -10px;
	}

	.fortune-wheel__error[data-show="true"] {
		max-height: 17px;
	}

	.fortune-wheel__label {
		font-size:     14px;
		font-weight:   600;
		display:       inline-block;
		margin-bottom: 10px;
	}

	.fortune-wheel__input {
		width:         100%;
		padding:       10px 20px;
		border:        1px solid var(--c-border);
		border-radius: 12px;
		font-size:     16px;
	}

	.fortune-wheel__input::placeholder {
		color: var(--c-secondary);
	}

	.fortune-wheel__button {
		background-color: var(--c-accent);
		border-radius:    12px;
		color:            #fff;
		border:           none;
		padding:          24px;
		font-size:        22px;
		font-weight:      700;
		display:          flex;
		justify-content:  center;
		align-items:      center;
		gap:              20px;
		cursor:           pointer;
		transition:       .3s ease opacity;
	}

	.fortune-wheel__button:hover {
		opacity: .8;
	}

	.fortune-wheel__button[data-loading="false"] {
		opacity: 1;
	}

	.fortune-wheel__button[data-loading="true"] {
		opacity: .4;
		cursor:  default;
	}

	.fortune-wheel-agreement {
		display:     flex;
		align-items: center;
		gap:         5px;
	}

	.fortune-wheel-agreement__text {
		font-size: 10px;
	}

	.fortune-wheel-agreement__link {
		color:           inherit;
		text-decoration: underline;
		transition:      .3s ease opacity;
	}

	.fortune-wheel-agreement__link:hover {
		opacity: .7;
	}

	.fortune-wheel-checkbox input {
		display: none;
	}

	.fortune-wheel-checkbox input:checked ~ .fortune-wheel-checkbox__box {
		background-color: var(--c-secondary);
	}

	.fortune-wheel-checkbox input:checked ~ .fortune-wheel-checkbox__box svg {
		opacity: 1;
	}

	.fortune-wheel-checkbox__box {
		background-color: transparent;
		border:           1px solid var(--c-secondary);
		color:            #fff;
		width:            9px;
		height:           9px;
		border-radius:    2px;
		display:          flex;
		justify-content:  center;
		align-items:      center;
		transition:       .3s ease background-color;
	}

	.fortune-wheel-checkbox__box svg {
		opacity:    0;
		transition: .3s ease opacity;
	}

	.fortune-wheel__prize {
		max-width: 170px;
		position:  absolute;
		bottom:    0;
		right:     20%;
		z-index:   1;
	}

	/* wheel styles */

	.fortune-wheel__wheel {
		z-index: 1;
	}

	.fortune-wheel__disk {
		background-color: var(--c-primary);
		border-radius:    50%;
	}

	.fortune-wheel__wheel-border,
	.fortune-wheel__wheel-content {
		position: absolute;
		left:     0;
		top:      0;
		right:    0;
		bottom:   0;
		width:    100%;
		height:   100%;
	}

	.fortune-wheel__wheel[data-locked="true"] .fortune-wheel__wheel-border {
		animation-duration: 0s !important;
	}

	.fortune-wheel__wheel[data-animate="true"] .fortune-wheel__wheel-border {
		animation: fortune-wheel-border-spin 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards 1;
	}

	@keyframes fortune-wheel-border-spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(1410deg);
		}
	}

	.fortune-wheel__close {
		display: none;
		cursor:  pointer;
		z-index: 3;
	}

	.fortune-wheel__close * {
		pointer-events: none;
	}

	/* media queries */

	@media (min-width: 1200px) {
		.fortune-wheel__close--desktop {
			display:    block;
			position:   absolute;
			right:      0;
			top:        0;
			transition: .3s ease opacity;
		}

		.fortune-wheel__close--desktop:hover {
			opacity: .7;
		}
	}

	@media (max-width: 1200px) {
		.modal-wheel {
			--fixPosition: 0 !important;
		}

		.fortune-wheel__close--mobile {
			display:  block;
			position: absolute;
			right:    15px;
			top:      15px;
		}

		.fortune-wheel__content-wrapper {
			padding-right:    inherit;
			background-color: transparent;
			border-radius:    0;
		}

		.fortune-wheel__wheel {
			position:  relative;
			transform: none;
			width:     auto;
			z-index:   2;
		}

		.fortune-wheel__disk {
			position:     relative;
			left:         0;
			top:          0;
			transform:    none;
			aspect-ratio: unset;
			width:        345px;
			height:       345px;
			margin:       0 auto;
		}

		.modal-wheel__window {
			background-color: var(--c-background);
			border-radius:    20px;
			width:            375px;
			max-height:       calc(100% - 40px);
			overflow-x:       hidden;
			overflow-y:       scroll;
		}

		.fortune-wheel__content {
			padding: 15px 15px 50px;
		}

		.fortune-wheel-top {
			padding-right: 25px;
		}

		.fortune-wheel-top__text {
			font-size: 16px;
		}

		.fortune-wheel-top__badge {
			font-size: 16px;
			padding:   6px 12px;
		}

		.fortune-wheel-top__badge--outline {
			margin-left: 10px;
			font-size:   12px;
		}

		.fortune-wheel-title {
			font-size: 21px;
		}

		.fortune-wheel-title br {
			display: none;
		}

		.fortune-wheel__subtitle br {
			display: none;
		}

		.fortune-wheel__form {
			gap: 5px;
		}

		.fortune-wheel__input {
			padding: 10px 20px;
		}

		.fortune-wheel__button {
			padding:   16px;
			font-size: 20px;
		}

		.fortune-wheel__button img {
			width: 26px;
		}

		.fortune-wheel__prize {
			right:     unset;
			left:      15px;
			top:       50%;
			max-width: 125px;
			z-index:   0;
		}

		/* success form screen shows on mobile (i know it's terrible) */
		.fortune-wheel__common[data-show="false"] .fortune-wheel__form {
			max-height: 70px;
		}

		.fortune-wheel__common[data-show="false"] ~ .fortune-wheel__success {
			height: 100%;
		}

		.fortune-wheel__common[data-show="false"] ~ .fortune-wheel__success .fortune-wheel__real-prize {
			max-width: 150px;
			left:      unset;
			bottom:    0;
			right:     0;
			transform: translate(-130%, 35%) rotate(-17.5deg);
		}

		.fortune-wheel__common .fortune-wheel__subtitle {
			font-size: 16px;
			margin-bottom: 15px;
		}

		.fortune-wheel__success .fortune-wheel__subtitle {
			font-size: 16px;
			margin-bottom: 60px !important;
		}

		.fortune-wheel__common .fortune-wheel-top__badge--outline {
			display: block;
		}

		.fortune-wheel__label {
			font-size: 12px;
			font-weight: 400;
		}
	}

	@media (max-width: 576px) {
		.modal-wheel-trigger {
			left:   20px;
			bottom: 80px;
			width:  100px;
			height: 100px;
		}

		.fortune-wheel-top {
			gap: 5px;
		}

		.fortune-wheel-top .fortune-wheel-top__badge {
			margin: 0;
		}

		.fortune-wheel__prize {
			top:  57.5%;
			left: 35px;
		}

		.fortune-wheel__disk {
			width:  330px;
			height: 330px;
		}
	}