.spinWheel *{box-sizing:border-box}.spinWheel{position:relative;transition:opacity .2s ease;--panel-bg-color: #16a085;--spin-btn-color: #fff;--spin-btn-bg: #16a085;--spin-btn-hover: #139cb2;--spin-btn-font-size: 16px;--form-title-color: #fff;--form-title-size: 24px;--form-title-weight: normal;--form-submit-color: #0a0a0a;--form-submit-bg: #fff;--form-submit-hover: #f0f0f0;--form-submit-size: 16px;--form-submit-radius: 5px;--input-border: #ccc;--input-focus: #16a085;--privacy-color: #fff;--privacy-size: 14px;--prize-title-color: #fff;--prize-title-size: 24px;--prize-msg-color: #fff;--prize-msg-size: 28px;--lost-title-color: #fff;--lost-title-size: 24px;--coupon-btn-color: #fff;--coupon-btn-bg: #16a085;--coupon-btn-hover: #139cb2;--coupon-btn-radius: 5px;--wheel-lost-color: #ccc;--wheel-border-color: #fff;--wheel-border-width: 12px}.spinWheel.visible{opacity:1}.spinWheel .wheelWrap{display:inline-block;width:clamp(300px,25em,90vw);height:clamp(300px,25em,90vw);position:relative}.spinWheel .wheelWrap .wheel{position:absolute;top:0;left:0;width:100%;height:100%;border:solid var(--wheel-border-width) var(--wheel-border-color);border-radius:50%;box-shadow:0 0 30px rgba(0,0,0,.2);overflow:hidden;transition:all 8s cubic-bezier(0, 0.99, 0.45, 0.99);z-index:1}.spinWheel .wheelWrap .wheel .area{position:absolute;top:0;left:50%;width:50%;height:50%;transform-origin:0 100%;overflow:hidden}.spinWheel .wheelWrap .wheel .area span{position:absolute;left:-100%;width:200%;height:200%;font-size:24px;font-weight:700;color:#fff;text-align:center;padding-top:20px}.spinWheel .wheelWrap .start{position:absolute;top:50%;left:50%;font-size:var(--spin-btn-font-size);font-weight:700;text-align:center;color:var(--spin-btn-color);text-transform:uppercase;background:var(--spin-btn-bg);width:100px;height:100px;line-height:100px;border-radius:50%;margin:-50px 0 0 -50px;box-shadow:0 0 30px rgba(0,0,0,.3);cursor:pointer;z-index:2}.spinWheel .wheelWrap .start:hover{background:var(--spin-btn-hover)}.spinWheel .wheelWrap .start:active{transform:scale(0.97)}.spinWheel .wheelWrap .marker{position:absolute;left:50%;top:-2px;width:4px;height:30px;margin:0 0 0 -20px;background:var(--spin-btn-bg);box-shadow:-2px 2px 2px 0 rgba(0,0,0,.3);transform:rotate(-4deg);z-index:2}.spinWheel .wheelWrap .msg *,.spinWheel .wheelWrap .sc-form-wrap *{color:var(--form-title-color)}.spinWheel .wheelWrap .msg,.spinWheel .wheelWrap .sc-form-wrap{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--panel-bg-color);border-radius:50%;text-align:center;z-index:3;opacity:0;pointer-events:none;transform:scale(0.2);transition:all .25s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}.spinWheel .wheelWrap .msg.active,.spinWheel .wheelWrap .sc-form-wrap.active{opacity:1;pointer-events:auto;transform:scale(1)}.spinWheel .wheelWrap .title{font-size:var(--form-title-size);font-weight:var(--form-title-weight);color:var(--form-title-color);padding:10px 0 10px 0}.spinWheel .wheelWrap .prizeMsg{font-size:var(--prize-msg-size);color:var(--prize-msg-color);padding-bottom:20px}.spinWheel .wheelWrap .sc-btn{display:flex;font-size:16px;font-weight:700;text-transform:uppercase;text-decoration:none;letter-spacing:1px;border:solid 1px var(--wheel-border-color);padding:10px 20px;transition:all .2s ease;color:var(--coupon-btn-color);background:var(--coupon-btn-bg);border-radius:var(--coupon-btn-radius);align-items:center}.spinWheel .wheelWrap .sc-btn:hover{background:var(--coupon-btn-hover)}.spinWheel .wheelWrap .sc-small{font-size:var(--privacy-size);color:var(--privacy-color);text-decoration:underline;padding:20px 0 0 0}.spinWheel .wheelWrap .sc-small:hover{opacity:.7}.spinWheel .wheelWrap .sc-form-wrap input{width:100%;max-width:240px;height:40px;padding:0 10px;font-size:16px;color:#0e0e0e;background:#f6f6f6;border:1px solid var(--input-border);border-radius:4px;margin-bottom:16px}.spinWheel .wheelWrap .sc-form-wrap input:focus{border-color:var(--input-focus);outline:none}.spinWheel .wheelWrap .sc-form-wrap button{width:100%;max-width:240px;font-size:var(--form-submit-size);padding:14px 20px;color:var(--form-submit-color);background:var(--form-submit-bg);border:none;border-radius:var(--form-submit-radius);cursor:pointer;transition:all .2s ease;box-shadow:0 8px 16px 0 rgba(0,0,0,.2)}.spinWheel .wheelWrap .sc-form-wrap button:hover{background:var(--form-submit-hover);box-shadow:0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);transform:scale(1.05)}
