/* Jimmy Player Register — frontend form. All look comes from --jpr-* vars
   set inline on .jpr-wrap (see JPR_Render::css_vars). Editing colours/sizes
   is done in the admin Design tab, never here. */

.jpr-wrap{
  --jpr-page-bg:#0b1f3a; --jpr-card-bg:#0f2547; --jpr-card-border-color:#1d3a63;
  --jpr-card-border-width:1px; --jpr-card-radius:14px; --jpr-card-width:480px;
  --jpr-card-padding:28px; --jpr-card-shadow:0 10px 30px rgba(0,0,0,.25); --jpr-bg-image:none;
  --jpr-header-color:#ffd912; --jpr-header-size:24px;
  --jpr-desc-color:#cdd9ec; --jpr-desc-size:14px;
  --jpr-label-color:#cdd9ec; --jpr-label-size:13px;
  --jpr-input-bg:#fff; --jpr-input-text:#111; --jpr-input-border-color:#b19554;
  --jpr-input-border-width:1px; --jpr-input-radius:10px; --jpr-input-pad-y:11px;
  --jpr-input-pad-x:14px; --jpr-input-font:14px; --jpr-placeholder-color:#8d8d8d;
  --jpr-focus-color:#ffd912; --jpr-gap:14px;
  --jpr-iconbox-bg:#ffd912; --jpr-iconbox-color:#0b1f3a;
  --jpr-btn-bg:#ffd912; --jpr-btn-bg-hover:#e6c310; --jpr-btn-text:#0b1f3a;
  --jpr-btn-radius:10px; --jpr-btn-pad-y:13px; --jpr-btn-pad-x:20px; --jpr-btn-font:16px;
  --jpr-btn-width:100%; --jpr-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --jpr-subtitle-color:#8ea3c2; --jpr-subtitle-size:12px;

  font-family:var(--jpr-font); box-sizing:border-box;
  display:flex; justify-content:center;
  background:var(--jpr-page-bg); background-image:var(--jpr-bg-image);
  background-size:cover; background-position:center; padding:24px;
}
.jpr-wrap *,.jpr-wrap *::before,.jpr-wrap *::after{box-sizing:border-box}

.jpr-form{
  width:100%; max-width:var(--jpr-card-width);
  background:var(--jpr-card-bg);
  border:var(--jpr-card-border-width) solid var(--jpr-card-border-color);
  border-radius:var(--jpr-card-radius);
  box-shadow:var(--jpr-card-shadow);
  padding:var(--jpr-card-padding);
  display:flex; flex-direction:column; gap:var(--jpr-gap);
}
/* "vertical" layout = no card chrome, just stacked fields */
.jpr-layout-vertical .jpr-form{background:transparent;border:0;box-shadow:none;padding:0}

.jpr-header{
  color:var(--jpr-header-color); font-size:var(--jpr-header-size);
  font-weight:900; text-align:center; margin-bottom:4px; line-height:1.2;
}
.jpr-desc{
  color:var(--jpr-desc-color); font-size:var(--jpr-desc-size);
  text-align:center; line-height:1.5; margin:-2px 0 6px;
}

.jpr-field{display:flex; align-items:stretch}
.jpr-label{display:block; color:var(--jpr-label-color); font-size:var(--jpr-label-size); font-weight:600; margin-bottom:5px}
.jpr-control{flex:1; min-width:0}

/* .jpr-wrap prefix raises specificity above the host theme's `input[type=…]`
   rules (Astra etc.) so our border-radius / border / padding always win. */
.jpr-wrap .jpr-input{
  width:100%; height:auto; min-height:0; background:var(--jpr-input-bg); color:var(--jpr-input-text);
  border:var(--jpr-input-border-width) solid var(--jpr-input-border-color);
  border-radius:var(--jpr-input-radius);
  padding:var(--jpr-input-pad-y) var(--jpr-input-pad-x);
  font-size:var(--jpr-input-font); font-weight:600; outline:none; line-height:1.3;
  box-shadow:none; transition:border-color .12s, box-shadow .12s;
}
/* host themes often force a fixed select/input height with border-box, which
   clips our padded text — let padding define the height instead. */
.jpr-wrap select.jpr-input{height:auto; min-height:0; line-height:1.3}
.jpr-wrap .jpr-input::placeholder{color:var(--jpr-placeholder-color); font-weight:400}
.jpr-wrap .jpr-input:focus{border-color:var(--jpr-focus-color); box-shadow:0 0 0 3px color-mix(in srgb, var(--jpr-focus-color) 35%, transparent)}
.jpr-wrap select.jpr-input{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238d8d8d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  /* force padding + height so a host-theme `select` rule (often #main select)
     can't collapse the dropdown shorter than the text inputs beside it. */
  padding:var(--jpr-input-pad-y) 34px var(--jpr-input-pad-y) var(--jpr-input-pad-x)!important; height:auto!important}

/* icon box on the left; the input keeps BOTH right corners rounded to the same
   --jpr-input-radius (left corners squared so they butt against the icon box). */
.jpr-wrap.jpr-has-icons .jpr-iconbox{
  display:flex; align-items:center; justify-content:center; width:42px; flex:0 0 42px;
  background:var(--jpr-iconbox-bg); color:var(--jpr-iconbox-color);
  border-radius:var(--jpr-input-radius) 0 0 var(--jpr-input-radius);
}
.jpr-wrap.jpr-has-icons .jpr-control .jpr-input{
  border-top-left-radius:0; border-bottom-left-radius:0; border-left:0;
  border-top-right-radius:var(--jpr-input-radius); border-bottom-right-radius:var(--jpr-input-radius);
}

/* icon box on the RIGHT (komax-style): the icon sits after the input, the input
   keeps its left corners rounded and a divider border between them. Overrides the
   left rules above via source order at equal specificity. */
.jpr-wrap.jpr-icons-right .jpr-field{flex-direction:row-reverse}
.jpr-wrap.jpr-icons-right .jpr-iconbox{
  border:var(--jpr-input-border-width) solid var(--jpr-input-border-color); border-left:0;
  border-radius:0 var(--jpr-input-radius) var(--jpr-input-radius) 0;
}
.jpr-wrap.jpr-icons-right .jpr-control .jpr-input{
  border-top-left-radius:var(--jpr-input-radius); border-bottom-left-radius:var(--jpr-input-radius);
  border-top-right-radius:0; border-bottom-right-radius:0;
  border-left:var(--jpr-input-border-width) solid var(--jpr-input-border-color);
  border-right:var(--jpr-input-border-width) solid var(--jpr-input-border-color);
}

.jpr-agreement{display:flex; gap:8px; align-items:flex-start; color:var(--jpr-label-color); font-size:13px; line-height:1.4; cursor:pointer}
.jpr-agreement input{margin-top:2px; flex:0 0 auto}
.jpr-agreement a{color:var(--jpr-header-color)}

/* .jpr-wrap prefix raises specificity above host-theme button rules
   (.btn / button[type=submit] / .elementor-button) so our bg + text colour win
   — themes that force white button text were overriding Template-B dark text. */
.jpr-wrap .jpr-submit{
  width:var(--jpr-btn-width); height:auto; min-height:0; align-self:var(--jpr-btn-align,center);
  background:var(--jpr-btn-bg); color:var(--jpr-btn-text);
  border:0; border-radius:var(--jpr-btn-radius);
  padding:var(--jpr-btn-pad-y) var(--jpr-btn-pad-x);
  font-size:var(--jpr-btn-font); font-weight:800; cursor:pointer; margin-top:4px;
  transition:background .15s, transform .05s; text-shadow:none;
}
.jpr-wrap .jpr-submit:hover:not(:disabled){background:var(--jpr-btn-bg-hover); color:var(--jpr-btn-text)}
.jpr-wrap .jpr-submit:active{transform:scale(.99)}
.jpr-subtitle{text-align:center; color:var(--jpr-subtitle-color); font-size:var(--jpr-subtitle-size); margin-top:2px; line-height:1.4}
.jpr-submit:disabled{opacity:.6; cursor:not-allowed}

.jpr-error{color:#ff6b6b; font-size:13px; min-height:1em; text-align:center}
.jpr-success{background:#d1fae5; color:#065f46; border-radius:10px; padding:20px; text-align:center}
.jpr-success .jpr-buttons{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.jpr-success .jpr-buttons a{padding:9px 16px; border-radius:8px; text-decoration:none; font-weight:700}

/* horizontal layout = fields in a row (desktop) */
@media(min-width:781px){
  .jpr-layout-horizontal .jpr-form{flex-direction:row; flex-wrap:wrap; align-items:flex-end; max-width:none}
  .jpr-layout-horizontal .jpr-field{flex:1 1 180px}
  .jpr-layout-horizontal .jpr-header{flex:1 0 100%}
  .jpr-layout-horizontal .jpr-submit{width:auto}
}

/* jpr-banner-overlap-fix: 站台把承载 [vortex_register] 的 Elementor shortcode widget
   设了负 top-margin(让旧 komax 表单叠进上方 banner)。Vortex 表单顶部直接就是输入框,
   会被 z-index 更高的 banner 盖住。清掉该负边距,让表单干净落在 banner 下方。 */
.elementor-widget-shortcode:has(.jpr-wrap) > .elementor-widget-container{margin-top:0 !important;}

/* ============================================================================
   Success POP-UP (v1.0.15) — two variants driven by --jpr-accent (site brand).
   mm = clean modal · myan = clipboard + bubble check. Green check = success.
   ============================================================================ */
.jpr-ok-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(20,30,45,.5);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.jpr-ok-ov.jpr-show{opacity:1}
.jpr-ok-ov *{box-sizing:border-box}
.jpr-ok-stage{width:100%;display:flex;align-items:center;justify-content:center}
.jpr-ok-x{position:absolute;top:10px;right:10px;z-index:9;width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.jpr-ok-x:hover{background:rgba(0,0,0,.32)}
.jpr-ok-x svg{width:13px;height:13px;display:block;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}

/* shared buttons */
.jpr-ok-btns{display:flex;gap:10px;width:100%}
.jpr-ok-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  font-weight:700;font-size:14px;padding:12px 8px;border-radius:11px;color:#fff;line-height:1.1}
.jpr-ok-b:hover{filter:brightness(1.06)}
.jpr-ok-ic{display:inline-flex;align-items:center;justify-content:center;flex:none}
.jpr-ok-ic svg{width:20px;height:20px;display:block}
.jpr-ok-ic.jpr-ok-ic-tg svg{width:18px;height:18px;transform:translateX(-1px)}

/* ---------- MM : clean modal ---------- */
.jpr-ok-mm{position:relative;width:290px;max-width:100%;background:#fff;border-radius:20px;padding:58px 26px 26px;
  text-align:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 26px 60px -24px rgba(20,30,45,.7);
  transform:scale(.86);opacity:0}
.jpr-ok-mm.jpr-play{animation:jprPop .5s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes jprPop{to{transform:scale(1);opacity:1}}
.jpr-ok-badge{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;
  background:var(--jpr-accent);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 8px 14px rgba(255,255,255,.28),0 0 0 8px rgba(255,255,255,.16),0 10px 22px -8px rgba(0,0,0,.4)}
.jpr-ok-badge::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0}
.jpr-ok-mm.jpr-play .jpr-ok-badge::after{animation:jprRing 1.1s ease-out .25s}
@keyframes jprRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.jpr-ok-mm .jpr-ok-title{font-size:24px;font-weight:800;color:#2f3540;letter-spacing:-.01em;margin:0 0 8px}
.jpr-ok-mm .jpr-ok-msg{color:#95a0af;font-size:13px;line-height:1.55;margin:0 0 22px}

/* check svg (shared by badge + green check) */
.jpr-ok-badge svg,.jpr-ok-gcheck svg{width:46px;height:46px}
.jpr-ok-badge path,.jpr-ok-gcheck path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.jpr-ok-mm.jpr-play .jpr-ok-badge path{animation:jprDraw .45s ease-out .35s forwards}
@keyframes jprDraw{to{stroke-dashoffset:0}}

/* ---------- MYAN : clipboard + bubble check ---------- */
.jpr-ok-myan{position:relative;width:300px;max-width:100%;display:flex;flex-direction:column;align-items:center;
  transform:translateY(14px) scale(.9);opacity:0}
.jpr-ok-myan.jpr-play{animation:jprPopup .55s cubic-bezier(.2,1.2,.4,1) forwards}
@keyframes jprPopup{to{transform:none;opacity:1}}
.jpr-ok-clip{position:relative;z-index:1;width:208px;height:150px;background:var(--jpr-accent);border-radius:22px;
  box-shadow:0 10px 22px -10px rgba(15,40,70,.5),inset 0 -5px 0 rgba(0,0,0,.07)}
.jpr-ok-pk{position:absolute;top:8px;width:82px;height:82px;border-radius:18px;background:var(--jpr-accent);filter:brightness(.8);z-index:-1}
.jpr-ok-pk.l{left:14px;transform:rotate(-8deg)} .jpr-ok-pk.r{right:14px;transform:rotate(8deg)}
.jpr-ok-cliptop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:58px;height:34px;z-index:2}
.jpr-ok-body{position:relative;z-index:2;width:300px;max-width:100%;border-radius:20px;margin-top:-50px;overflow:hidden;
  box-shadow:0 34px 74px -20px rgba(10,32,60,.9)}
.jpr-ok-bodytop{background:#fff;padding:58px 22px 16px;text-align:center}
.jpr-ok-myan .jpr-ok-title{font-size:23px;font-weight:800;color:#2f3540;letter-spacing:-.01em;margin:0}
.jpr-ok-myan .jpr-ok-msg{color:#8a95a4;font-size:13px;line-height:1.5;margin:8px auto 0;max-width:30ch}
/* fused bottom button bar (no white behind → no corner AA leak) */
.jpr-ok-bar{gap:0;width:100%;margin:0}
.jpr-ok-bar .jpr-ok-b{border-radius:0;padding:16px 8px;font-size:15px}
/* title diagonal glint */
.jpr-ok-glint{display:inline-block;
  background:linear-gradient(105deg,#2f3540 0%,#2f3540 42%,#8892a3 47%,#c2ccdb 50%,#8892a3 53%,#2f3540 58%,#2f3540 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  will-change:background-position}
.jpr-ok-myan.jpr-play .jpr-ok-glint{animation:jprGlint 5.5s linear infinite}
@keyframes jprGlint{0%{background-position:170% 0}34%,100%{background-position:-145% 0}}
/* green check zone straddling clip / body seam */
.jpr-ok-checkzone{position:absolute;z-index:3;top:56px;left:50%;transform:translateX(-50%);width:130px;height:90px;display:flex;align-items:center;justify-content:center}
.jpr-ok-ml{position:absolute;top:36px;height:3.5px;border-radius:2px;background:rgba(255,255,255,.9)}
.jpr-ok-ml.l1{left:6px;width:15px;transform:rotate(20deg)} .jpr-ok-ml.l2{left:2px;width:19px;transform:translateY(15px)}
.jpr-ok-ml.r1{right:6px;width:15px;transform:rotate(-20deg)} .jpr-ok-ml.r2{right:2px;width:19px;transform:translateY(15px)}
.jpr-ok-bub{position:absolute;border-radius:50%;background:#fff;pointer-events:none}
.jpr-ok-bub.a{width:50px;height:50px;left:calc(50% - 25px);top:calc(50% - 25px);opacity:.16}
.jpr-ok-bub.b{width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px);opacity:.2}
.jpr-ok-bub.c{width:12px;height:12px;left:78%;top:16%;opacity:.6}
.jpr-ok-bub.d{width:9px;height:9px;left:18%;top:30%;opacity:.55}
.jpr-ok-bub.e{width:7px;height:7px;left:74%;top:70%;opacity:.5}
.jpr-ok-myan.jpr-play .jpr-ok-bub.a{animation:jprBub 2.7s ease-in-out infinite}
.jpr-ok-myan.jpr-play .jpr-ok-bub.b{animation:jprBub 2.2s ease-in-out infinite .5s}
.jpr-ok-myan.jpr-play .jpr-ok-bub.c{animation:jprBub2 2.4s ease-in-out infinite}
.jpr-ok-myan.jpr-play .jpr-ok-bub.d{animation:jprBub2 2s ease-in-out infinite .6s}
.jpr-ok-myan.jpr-play .jpr-ok-bub.e{animation:jprBub2 2.6s ease-in-out infinite .3s}
@keyframes jprBub{0%,100%{transform:scale(.8);opacity:.08}50%{transform:scale(1.15);opacity:.22}}
@keyframes jprBub2{0%,100%{transform:scale(.5);opacity:.15}50%{transform:scale(1.15);opacity:.6}}
.jpr-ok-gcheck{position:relative;z-index:2;width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#4bd964,#34c44e 60%,#22a83c);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -6px rgba(34,168,60,.6)}
.jpr-ok-gcheck svg{width:38px;height:38px}
.jpr-ok-gcheck path{stroke-width:6.5}
.jpr-ok-myan.jpr-play .jpr-ok-gcheck path{animation:jprHandwrite 2s ease-in-out infinite .3s}
@keyframes jprHandwrite{0%{stroke-dashoffset:40}30%{stroke-dashoffset:0}82%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}

@media (prefers-reduced-motion:reduce){
  .jpr-ok-ov *{animation-duration:.001s!important;animation-iteration-count:1!important}
  .jpr-ok-mm,.jpr-ok-myan{opacity:1!important;transform:none!important}
  .jpr-ok-badge path,.jpr-ok-gcheck path{stroke-dashoffset:0!important}
  .jpr-ok-glint{-webkit-text-fill-color:#2f3540;color:#2f3540}
}