/* Themed Register Modal matching site colors */
:root {
  --rg-gold: #f1cf73;
  --rg-gold-deep: #675c00;
  --rg-blue-1: #0a092a;
  --rg-blue-2: #202680;
}

/* Modal Shell (overrides inline fallback) */
.rg-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100000;padding:16px;backdrop-filter: blur(2px);} 
.rg-modal.open{display:flex;}
.rg-modal__dialog{width:min(760px,96vw);max-height:92vh;background:linear-gradient(180deg,var(--rg-blue-1) 0%, var(--rg-blue-2) 100%);border:2px solid var(--rg-gold);border-radius:14px;box-shadow:0 0 28px rgba(241,207,115,.25), 0 12px 40px rgba(0,0,0,.5);padding:14px 14px 18px;position:relative;color:#fff;overflow:hidden;}
.rg-modal__close{position:absolute;top:8px;right:10px;background:transparent;color:#fff;border:none;font-size:28px;line-height:1;cursor:pointer;opacity:.9}
.rg-modal__close:hover{opacity:1}
.rg-modal__body{background:rgba(255,255,255,.04);border:1px solid rgba(241,207,115,.25);border-radius:10px;overflow:auto;max-height:calc(92vh - 54px);padding:14px;color:#fff;box-shadow: inset 0 0 18px rgba(0,0,0,.25);} 

/* Form Wrapper */
.register-popup-wrap{max-width:620px;margin:0 auto;font-family:"Kanit",sans-serif;touch-action:manipulation}
.register-popup-wrap h3{margin:0 0 12px;font-weight:700;letter-spacing:.3px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
/* Force labels in register popup to gold and spaced */
.register-popup-wrap .form-label{color:var(--rg-gold) !important;display:block;margin-bottom:6px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6) !important}
.register-popup-wrap .field,.register-popup-wrap .short-field,.register-popup-wrap .mb-3{margin-bottom:16px}

/* Inline fields spacing */
.register-popup-wrap .short-field{display:flex;gap:16px;flex-wrap:wrap}
.register-popup-wrap .short-field > *{flex:1 1 0;min-width:0}

/* Inputs */
.register-popup-wrap input, .register-popup-wrap select{
  width:100%;height:46px;border:1px solid rgba(241,207,115,.35);border-radius:10px;padding:0 14px;background:rgba(255,255,255,.92);color:#111;outline:none;transition:box-shadow .2s,border-color .2s;margin-bottom:12px;font-size:16px;line-height:1.4
}
.register-popup-wrap input:focus, .register-popup-wrap select:focus{border-color:var(--rg-gold);box-shadow:0 0 0 4px rgba(241,207,115,.25)}
.register-popup-wrap input[readonly]{background:#f7f7f7;color:#333}

/* Step buttons */
.popup-actions{display:flex;gap:12px;margin-top:16px}
.btn-next,.btn-prev,.btn-submit,.rg-btn-submit{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:44px;border-radius:10px;padding:0 16px;font-weight:600;cursor:pointer;transition:transform .05s ease, box-shadow .2s;font-size:16px}
.btn-next,.btn-submit{background:linear-gradient(180deg,var(--rg-gold) 0%, var(--rg-gold-deep) 100%);color:#000;border:2px solid var(--rg-gold);text-shadow:0 1px 1px rgba(255,255,255,.35);box-shadow:0 0 18px rgba(241,207,115,.25)}
.btn-next:hover,.btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(241,207,115,.35)}
/* Dedicated submit (register) to blue theme like login */
.rg-btn-submit{background:linear-gradient(180deg, var(--rg-blue-2) 0%, var(--rg-blue-1) 100%) !important;background-image:linear-gradient(180deg, var(--rg-blue-2) 0%, var(--rg-blue-1) 100%) !important;background-color:var(--rg-blue-2) !important;color:#fff !important;border:2px solid #2e6abc !important; text-shadow:none !important; box-shadow:0 0 0 3px rgba(46,106,188,.28),0 8px 22px rgba(0,0,0,.35),0 0 22px rgba(70,138,219,.35), inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25) !important; padding-top:0 !important; padding-bottom:0 !important; line-height:44px !important; margin:0 !important;}
.rg-btn-submit:hover{transform:translateY(-1px); box-shadow:0 0 0 4px rgba(46,106,188,.32),0 12px 28px rgba(0,0,0,.45),0 0 30px rgba(70,138,219,.55), inset 0 1.5px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,0,0,.28) !important;}
/* Stronger specificity inside modal to beat generic button[type=submit] */
.rg-modal .register-popup-wrap .rg-btn-submit{
  background:linear-gradient(180deg, var(--rg-blue-2) 0%, var(--rg-blue-1) 100%) !important;
  background-image:linear-gradient(180deg, var(--rg-blue-2) 0%, var(--rg-blue-1) 100%) !important;
  background-color:var(--rg-blue-2) !important;
  color:#fff !important;
  border:2px solid #2e6abc !important;
  /* override generic button[type=submit] */
  width:auto !important;
  height:44px !important;
  border-radius:10px !important;
  font-size:16px !important;
  margin-top:0 !important;
  padding:0 16px !important;
  line-height:44px !important;
}
/* Extra safety: attribute selector + class */
.rg-modal .register-popup-wrap button[type="submit"].rg-btn-submit{
  width:auto !important;
  height:44px !important;
  border-radius:10px !important;
  font-size:16px !important;
  margin-top:0 !important;
  padding:0 16px !important;
  line-height:44px !important;
}
.btn-prev{background:transparent;border:2px solid var(--rg-gold);color:var(--rg-gold)}
.btn-prev:hover{background:rgba(241,207,115,.08)}

/* Success card */
.reg-success { max-width: 520px; margin: 0 auto; font-family: "Kanit", sans-serif; }
.reg-cred { margin-bottom: 12px; }
.reg-cred label { display:block; font-size:14px; color:#fff; margin-bottom:6px; }
.reg-cred__row { display:flex; gap:8px; align-items:center; }
.reg-cred__input { flex:1; height:42px; border:1px solid rgba(241,207,115,.35); border-radius:8px; padding:0 10px; background:#fff; color:#111; }
.reg-cred__copy { height:42px; background:linear-gradient(180deg,var(--rg-gold) 0%, var(--rg-gold-deep) 100%); color:#000; border:2px solid var(--rg-gold); border-radius:8px; padding:0 12px; cursor:pointer; box-shadow:0 0 12px rgba(241,207,115,.2); }
.reg-cred__copy:hover { box-shadow:0 6px 16px rgba(241,207,115,.35); }
.reg-actions { display:flex; gap:10px; margin-top:14px; }
.reg-btn { display:inline-flex; align-items:center; justify-content:center; height:44px; border-radius:10px; padding:0 16px; text-decoration:none; font-weight:600; }
.reg-btn--primary { background:linear-gradient(180deg,var(--rg-gold) 0%, var(--rg-gold-deep) 100%); color:#000; border:2px solid var(--rg-gold); box-shadow:0 0 18px rgba(241,207,115,.25) }
.reg-btn--primary:hover { box-shadow:0 6px 18px rgba(241,207,115,.35) }
.reg-btn--ghost { background:transparent; color:var(--rg-gold); border:2px solid var(--rg-gold); }
.reg-btn--ghost:hover { background:rgba(241,207,115,.08); }

/* Mobile tweaks */
@media (max-width:576px){
  /* place modal near top with breathing space */
  .rg-modal{ align-items:flex-start; padding-top:20px; }
  /* let dialog auto-height and cap by viewport */
  .rg-modal__dialog{ width:94vw; height:auto; max-height:88vh; border-radius:12px; padding:10px }
  /* scroll only the inner body when taller than viewport */
  .rg-modal__body{ max-height:calc(88vh - 36px) }
  .btn-next,.btn-prev,.btn-submit,.rg-btn-submit{flex:1}
  .register-popup-wrap .short-field{gap:12px}
}

/* Fix label visibility on success step (step3) - use unique wrapper class */
.rg-modal .register-popup-wrap .mainstep.step3{
  /* Override any global behavior */
  all: initial;
  display: block;
  width: 100%;
  font-family: "Kanit", sans-serif;
  color: #fff;
}
/* Success field container - unique class to avoid collision */
.rg-success-info-row{
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  position: relative !important;
  clear: both !important;
}
/* Success label - unique class */
.rg-success-label{
  all: unset !important;
  display: block !important;
  color: #ffd700 !important;
  font-family: "Kanit", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 8px rgba(255,215,0,.4) !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 10 !important;
}
/* Success input - already has rg-cred__input class */
.rg-modal .register-popup-wrap .mainstep.step3 .rg-cred__input{
  all: unset !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #111 !important;
  font-family: "Kanit", sans-serif !important;
  font-size: 16px !important;
  border: 1px solid rgba(241,207,115,.35) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 42px !important;
  line-height: 42px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}