/* Spider Groove tip jar: styles the Gravity Forms "Tip Jar" form (CSS class sg-tipform) and the [sg_tipjar] jar. Used on: Tip Jar page. */

/* ---------- form ---------- */
.sg-tipform_wrapper{--t1:#FFB23F;--t2:#FF3D2E;--t3:#E0218A;--line:rgba(255,255,255,.1);position:relative;margin:0 !important;padding:clamp(22px,3vw,36px);border-radius:26px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 45%,rgba(255,61,46,.04));box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.sg-tipform_wrapper::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(130deg,rgba(255,178,63,.65),transparent 35%,transparent 65%,rgba(224,33,138,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sg-tipform_wrapper .gform_fields{display:grid !important;grid-template-columns:repeat(12,minmax(0,1fr)) !important;gap:22px 18px !important}
.sg-tipform_wrapper .gfield{grid-column:1/-1 !important;margin:0 !important;padding:0 !important}
.sg-tipform_wrapper .gfield.sg-tip-half{grid-column:span 6 !important}
@media (max-width:640px){.sg-tipform_wrapper .gfield.sg-tip-half{grid-column:1/-1 !important}}
.sg-tipform_wrapper .gfield_label,.sg-tipform_wrapper legend.gfield_label{display:block;margin:0 0 10px !important;font:600 12px/1.2 "JetBrains Mono",ui-monospace,monospace !important;letter-spacing:.18em !important;text-transform:uppercase;color:rgba(255,255,255,.62) !important}
.sg-tipform_wrapper .gfield_required{color:var(--t1) !important}
.sg-tipform_wrapper .gfield_description{margin-top:8px !important;padding:0 !important;font-size:13px !important;color:rgba(207,199,189,.6) !important}
.sg-tipform_wrapper input[type=text],.sg-tipform_wrapper input[type=email],.sg-tipform_wrapper textarea{width:100% !important;padding:14px 16px !important;border-radius:14px !important;border:1px solid var(--line) !important;background:rgba(7,6,9,.55) !important;color:#fff !important;font-size:16px !important;box-shadow:none !important;transition:border-color .5s,box-shadow .5s,background .5s}
.sg-tipform_wrapper textarea{min-height:110px !important;height:110px !important}
.sg-tipform_wrapper input:focus,.sg-tipform_wrapper textarea:focus{outline:none !important;border-color:rgba(255,178,63,.6) !important;box-shadow:0 0 0 4px rgba(255,178,63,.12) !important;background:rgba(7,6,9,.75) !important}
.sg-tipform_wrapper ::placeholder{color:rgba(255,255,255,.3)}

/* tiers: three menu cards */
.sg-tipform_wrapper .sg-tip-tiers .gfield_radio{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.sg-tipform_wrapper .sg-tip-tiers .gfield_radio{grid-template-columns:1fr}}
.sg-tipform_wrapper .sg-tip-tiers .gchoice{position:relative;margin:0 !important}
.sg-tipform_wrapper .sg-tip-tiers .gchoice input{position:absolute;opacity:0;pointer-events:none}
.sg-tipform_wrapper .sg-tip-tiers .gchoice label{position:relative;display:flex !important;flex-direction:column;align-items:flex-start;gap:8px;max-width:none !important;width:100%;height:100%;margin:0 !important;padding:16px 16px 14px !important;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#fff !important;font:700 15px/1.25 var(--sg-body,sans-serif) !important;cursor:pointer;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .6s,background .6s,box-shadow .6s}
.sg-tipform_wrapper .sg-tip-tiers .gchoice label::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,rgba(255,178,63,.18),transparent 60%);opacity:0;transition:opacity .6s}
.sg-tip__ico{width:34px;height:34px;padding:7px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line);fill:none;stroke:var(--t1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s cubic-bezier(.2,.8,.2,1),background .6s,stroke .6s}
.sg-tip__price{font:800 26px/1 var(--sg-head,sans-serif);letter-spacing:.01em;background:linear-gradient(90deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-tipform_wrapper .sg-tip-tiers .gchoice label:hover{transform:translateY(-4px);border-color:rgba(255,178,63,.4)}
.sg-tipform_wrapper .sg-tip-tiers .gchoice label:hover .sg-tip__ico{transform:rotate(-8deg) translateY(-2px)}
.sg-tipform_wrapper .sg-tip-tiers .gchoice input:checked+label{transform:translateY(-4px);border-color:transparent;background:linear-gradient(150deg,rgba(255,178,63,.18),rgba(224,33,138,.1));box-shadow:0 0 0 1.5px var(--t1),0 22px 40px -18px rgba(255,90,40,.6)}
.sg-tipform_wrapper .sg-tip-tiers .gchoice input:checked+label::after{opacity:1}
.sg-tipform_wrapper .sg-tip-tiers .gchoice input:checked+label .sg-tip__ico{background:linear-gradient(135deg,var(--t1),var(--t2) 60%,var(--t3));stroke:#140a06;border-color:transparent}
.sg-tipform_wrapper .sg-tip-tiers .gchoice input:focus-visible+label{outline:2px solid var(--t1);outline-offset:3px}

/* amount: one big glowing number */
.sg-tipform_wrapper .sg-tip-amt .ginput_container{position:relative}
.sg-tipform_wrapper .sg-tip-amt input[type=text]{padding:16px 20px !important;font:800 clamp(34px,4vw,46px)/1 var(--sg-head,sans-serif) !important;letter-spacing:.02em;color:#fff !important;border-radius:18px !important;background:linear-gradient(90deg,rgba(255,178,63,.08),rgba(7,6,9,.6) 60%) !important}
.sg-tipform_wrapper .sg-tip-amt.is-low input[type=text]{border-color:rgba(255,61,46,.7) !important;animation:sgTipNudge .7s cubic-bezier(.36,.07,.19,.97)}
@keyframes sgTipNudge{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* total */
.sg-tipform_wrapper .sg-tip-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 0 !important;border-top:1px dashed rgba(255,255,255,.12)}
.sg-tipform_wrapper .sg-tip-total .gfield_label{margin:0 !important}
.sg-tipform_wrapper .sg-tip-total input.ginput_total{width:auto !important;max-width:60%;padding:0 !important;border:0 !important;background:none !important;text-align:right;font:800 34px/1 var(--sg-head,sans-serif) !important;color:var(--t1) !important;text-shadow:0 0 24px rgba(255,120,40,.45)}

/* card (Stripe) and PayPal fields */
.sg-tipform_wrapper .sg-tip-card .ginput_container,.sg-tipform_wrapper .sg-tip-paypal .ginput_container{padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(7,6,9,.55)}
.sg-tipform_wrapper .sg-tip-paypal .ginput_container{background:rgba(255,255,255,.04)}

/* pay with: two-way switch */
.sg-tipform_wrapper .sg-tip-pay .gfield_radio{display:inline-grid !important;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(7,6,9,.5)}
.sg-tipform_wrapper .sg-tip-pay .gchoice{margin:0 !important}
.sg-tipform_wrapper .sg-tip-pay .gchoice input{position:absolute;opacity:0;pointer-events:none}
.sg-tipform_wrapper .sg-tip-pay .gchoice label{display:block !important;max-width:none !important;margin:0 !important;padding:10px 26px !important;border-radius:999px;font:700 14px/1 var(--sg-body,sans-serif) !important;color:rgba(255,255,255,.6) !important;cursor:pointer;transition:color .5s,background .5s}
.sg-tipform_wrapper .sg-tip-pay .gchoice input:checked+label{background:linear-gradient(90deg,var(--t1),var(--t2));color:#140a06 !important}

/* submit */
.sg-tipform_wrapper .gform_footer{margin:26px 0 0 !important;padding:0 !important}
.sg-tipform_wrapper .gform_button{position:relative;width:100%;padding:20px 28px !important;border:0 !important;border-radius:999px !important;background:linear-gradient(90deg,var(--t1),var(--t2) 55%,var(--t3)) !important;color:#140a06 !important;font:800 18px/1 var(--sg-head,sans-serif) !important;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;overflow:hidden;box-shadow:0 22px 50px -18px rgba(255,80,40,.8);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;background-size:160% 100% !important;animation:sgTipBtn 6.85s ease-in-out infinite alternate}
.sg-tipform_wrapper .gform_button:hover{transform:translateY(-3px);box-shadow:0 30px 60px -20px rgba(255,80,40,.95)}
@keyframes sgTipBtn{to{background-position:100% 0}}

/* errors and thank-you */
.sg-tipform_wrapper .gfield_validation_message,.sg-tipform_wrapper .validation_message{margin-top:8px !important;padding:8px 12px !important;border-radius:10px;border:1px solid rgba(255,61,46,.4) !important;background:rgba(255,61,46,.08) !important;color:#ffb7ad !important;font-size:13px !important}
.sg-tipform_wrapper .gform_validation_errors{border-radius:14px !important;border-color:rgba(255,61,46,.4) !important;background:rgba(255,61,46,.08) !important}
.sg-tipform_wrapper .gform_validation_errors h2{color:#ffb7ad !important;font-size:15px !important;text-transform:none !important}
.sg-tip-thanks{padding:clamp(24px,3vw,40px);border-radius:26px;border:1px solid rgba(255,178,63,.35);background:linear-gradient(150deg,rgba(255,178,63,.12),rgba(224,33,138,.06))}
.sg-tip-thanks__big{font:800 clamp(30px,3.6vw,44px)/1.05 var(--sg-head,sans-serif) !important;text-transform:uppercase;background:linear-gradient(90deg,#FFB23F,#FF3D2E 55%,#E0218A);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- [sg_tipjar] ---------- */
.sg-jar{--fill:.24;position:relative;max-width:360px;margin:0 auto}
.sg-jar svg{display:block;width:100%;height:auto;overflow:visible;animation:sgJarFloat 8.09s ease-in-out infinite alternate}
@keyframes sgJarFloat{to{transform:translate(4px,-10px) rotate(.6deg)}}
.sg-jar__shadow{fill:rgba(0,0,0,.55);filter:blur(6px)}
.sg-jar__fill{transform:translateY(calc((1 - var(--fill)) * 175px));transition:transform 2.6s cubic-bezier(.2,.8,.2,1)}
.sg-jar__coins ellipse{stroke:#8a4a0c;stroke-width:1}
.sg-jar__coins .sg-jar__rim{fill:none;stroke:rgba(255,240,200,.55)}
.sg-jar__glass{fill:url(#sgJarGlass);stroke:rgba(255,255,255,.28);stroke-width:2}
.sg-jar__shine{fill:none;stroke:rgba(255,255,255,.35);stroke-width:6;stroke-linecap:round;opacity:.55}
.sg-jar__shine--b{stroke-width:3;opacity:.25}
.sg-jar__neck{fill:url(#sgJarLid);stroke:rgba(0,0,0,.4)}
.sg-jar__label rect{fill:#efe4d2;stroke:rgba(0,0,0,.25)}
.sg-jar__tips{font:800 34px/1 var(--sg-head,sans-serif);letter-spacing:.08em;fill:#1b1418}
.sg-jar__small{font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;fill:#8b3a22}
.sg-jar__coin-drop{opacity:0;transform:translate(150px,20px);animation:sgCoinDrop 11.09s cubic-bezier(.45,0,.55,1) infinite}
.sg-jar__coin-drop ellipse{stroke:#8a4a0c;stroke-width:1.2;animation:sgCoinSpin 1.62s linear infinite}
.sg-jar__coin-drop text{font:800 15px/1 var(--sg-head,sans-serif);fill:#7a3e08}
.sg-jar.is-drop .sg-jar__coin-drop{animation:sgCoinDropNow 2.2s cubic-bezier(.45,0,.55,1) 1}
@keyframes sgCoinSpin{0%,100%{rx:15px}50%{rx:2px}}
@keyframes sgCoinDrop{0%,62%{opacity:0;transform:translate(150px,-30px)}66%{opacity:1}82%{opacity:1;transform:translate(150px,170px)}86%,100%{opacity:0;transform:translate(150px,200px)}}
@keyframes sgCoinDropNow{0%{opacity:0;transform:translate(150px,-30px)}12%{opacity:1}74%{opacity:1;transform:translate(150px,170px)}100%{opacity:0;transform:translate(150px,200px)}}
.sg-jar__spark{fill:#FFE2A8;opacity:0;transform:translate(214px,104px);animation:sgJarSpark 6.85s ease-out infinite}
.sg-jar__spark--b{animation-delay:-2.62s;animation-duration:8.09s}
.sg-jar__spark--c{animation-delay:-4.24s;animation-duration:9.71s}
@keyframes sgJarSpark{0%{opacity:0;transform:translate(196px,104px) scale(.4) rotate(0)}18%{opacity:1}70%{opacity:0;transform:translate(250px,30px) scale(1) rotate(90deg)}100%{opacity:0;transform:translate(250px,30px)}}
.sg-jar__note{margin:18px 0 0 !important;padding:0 !important;text-align:center;font:600 13px/1.6 "JetBrains Mono",ui-monospace,monospace !important;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55) !important}
@media (prefers-reduced-motion:reduce){.sg-jar svg,.sg-jar__coin-drop,.sg-jar__coin-drop ellipse,.sg-jar__spark,.sg-tipform_wrapper .gform_button{animation:none}.sg-jar__fill{transition:none}}