@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600;700&display=swap');

/* ===== Card (glass dark) ===== */
.um {
  width: calc(100% - 32px) !important; max-width: 440px !important; margin: 28px auto !important;
  box-sizing: border-box !important; background: rgba(15,16,22,0.72) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 22px !important;
  padding: 28px 22px 26px !important; box-shadow: 0 18px 50px rgba(0,0,0,0.5) !important;
}

/* ===== Header (ลดช่องว่างใต้ header) ===== */
.reg-head { text-align: center; margin-bottom: 8px !important; }
.reg-title { font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 23px; color: #fff; }
.reg-sub { font-size: 12.5px; color: #8b909b; margin-top: 7px; line-height: 1.5; }

/* ===== Fields ===== */
.um-field { margin-bottom: 12px !important; }
.um-field-label { margin: 0 0 6px !important; padding: 0 2px !important; }
.um-field-label label { margin: 0 !important; padding: 0 !important; font-weight: 500 !important; font-size: 13px !important; color: #9aa0a6 !important; letter-spacing: .2px; }
.um-field-label .um-clear { display: none !important; }
.um-field-area { margin: 0 !important; }
.um-field-area input.um-form-field {
  border: 1.5px solid rgba(255,255,255,0.12) !important; border-radius: 13px !important;
  height: 52px !important; line-height: normal !important; padding: 0 16px !important; font-size: 16px !important;
  background: #191b22 !important; box-shadow: none !important; color: #fff !important; width: 100% !important; box-sizing: border-box !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.um-field-area input.um-form-field::placeholder { color: #5b606b !important; }
.um-field-area input.um-form-field:focus { border-color: #ff3b5c !important; box-shadow: 0 0 0 3px rgba(255,59,92,.18) !important; }

/* ซ่อน input password เดิม */
input.um-pin-orig.um-form-field { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0 !important; padding: 0 !important; border: 0 !important; }

/* ===== PIN ===== */
.pin-wrap { display: flex; gap: 8px; }
.pin-box { flex: 1 1 0; min-width: 0; height: 54px; text-align: center; font-size: 22px; font-weight: 700; color: #fff; border: 1.5px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important; background: #191b22 !important; transition: border-color .15s, box-shadow .15s, background .15s; -moz-appearance: textfield; caret-color: #ff3b5c; }
.pin-box:focus { border-color: #ff3b5c !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255,59,92,.2); background: #20222b !important; }
.pin-box::-webkit-outer-spin-button, .pin-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Buttons (จัดกลางด้วย flex + padding:0) ===== */
.um input[type=submit].um-button, .um button.um-button {
  display: inline-block !important; height: 52px !important; line-height: 52px !important; padding: 0 24px !important;
  box-sizing: border-box !important; border-radius: 13px !important; vertical-align: middle !important;
  background: #ff3b5c !important; background-image: none !important; color: #fff !important;
  font-weight: 700 !important; font-size: 16px !important; border: 0 !important;
  box-shadow: 0 4px 14px rgba(255,59,92,.28) !important; text-align: center !important;
}
.um a.um-button, .um .um-button.um-alt {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 52px !important; line-height: 1 !important; padding: 0 24px !important;
  box-sizing: border-box !important; border-radius: 13px !important; vertical-align: middle !important;
  background: transparent !important; background-image: none !important; color: #cfd3da !important;
  font-weight: 600 !important; font-size: 16px !important; border: 1.5px solid rgba(255,255,255,0.22) !important;
  box-shadow: none !important; text-decoration: none !important;
}

/* ============ LOGIN PAGE (scoped .um-login) ============ */
.um-login .login-head{text-align:center;margin-bottom:18px}
.um-login .login-title{font-family:'Kanit',sans-serif;font-weight:700;font-size:26px;color:#fff;letter-spacing:.3px;margin-bottom:12px}
.um-login .login-logo{display:block;max-width:80%;max-height:120px;height:auto;margin:0 auto 10px}
.um-login .login-sub{font-size:13px;color:#9aa0a6;line-height:1.5}
.um-login .um-field-label{display:none!important}
.um-login .um-field{margin-bottom:3px!important}
.um-login .um-row{margin:0 0 8px 0!important}
.um-login .um-col-alt{margin-top:4px!important}
.um-login .um-field-area{position:relative}
.um-login .um-field-area input.um-form-field{height:60px!important;border-radius:32px!important;padding:0 20px 0 70px!important;background:#e9ebef!important;border:0!important;color:#23262e!important;font-size:16px!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)!important}
.um-login .um-field-area input.um-form-field::placeholder{color:#8b909b!important;opacity:1}
.um-login .um-field-area input.um-form-field:focus{box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 0 0 3px rgba(255,140,0,.32)!important}
.um-login .um-field-username .um-field-area::before,.um-login .um-field-user_password .um-field-area::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background-color:#cfd4db;background-position:center;background-size:24px 24px;background-repeat:no-repeat;z-index:2}
.um-login .um-field-username .um-field-area::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23454a55'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-3.6 0-9 1.8-9 5v2h18v-2c0-3.2-5.4-5-9-5z'/%3E%3C/svg%3E")}
.um-login .um-field-user_password .um-field-area::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23454a55'%3E%3Cpath d='M14.5 3a6.5 6.5 0 0 0-6.3 8.2L3 16.4V21h4.6v-2.2h2.2v-2.2h2.2l1.3-1.3A6.5 6.5 0 1 0 14.5 3zm2.3 4.7a1.6 1.6 0 1 1-2.3-2.3 1.6 1.6 0 0 1 2.3 2.3z'/%3E%3C/svg%3E")}
.um-login .um-field-checkbox{color:#cfd3da!important;font-size:14px}
.um-login .um-left.um-half{width:100%!important;float:none!important;margin:18px 0 0!important}
.um-login .um-right.um-half{display:none!important}
.um-login input[type=submit].um-button{width:100%!important;border-radius:32px!important;height:58px!important;line-height:58px!important;background:linear-gradient(180deg,#ff9d2e,#ff7a12)!important;background-image:linear-gradient(180deg,#ff9d2e,#ff7a12)!important;box-shadow:0 4px 10px rgba(0,0,0,.22)!important;font-size:18px!important;color:#fff!important}
.um-login .um-col-alt-b{display:none!important}
.um-login .login-links{display:flex;justify-content:space-between;margin-top:20px;padding:0 6px}
.um-login .login-links a{color:#e6e8ec;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.um-login .login-links a:hover{color:#fff}

/* ===== LOGIN tighten v2 (gap + checkbox) ===== */
.um-login .um-col-1 .um-field{margin:0 0 3px!important}
.um-login .um-col-1 .um-field:last-child{margin-bottom:0!important}
.um-login .um-field-area{margin:0!important}
.um-login .um-field-checkbox input{position:absolute!important;opacity:0;width:1px;height:1px;margin:0!important}
.um-login label.um-field-checkbox{display:flex!important;align-items:center;gap:9px;color:#cfd3da!important}
.um-login .um-field-checkbox-state{margin:0!important;flex:0 0 auto;line-height:1!important}
.um-login .um-field-checkbox-option{margin:0!important;padding:0!important;line-height:1!important}

/* ===== LOGIN tighten v4 (FINAL) ===== */
.um-login .um-field-area input.um-form-field{margin:0!important}
.um-login .um-col-1 .um-field{margin:0 0 3px!important}
.um-login .um-col-1 .um-field:last-child{margin-bottom:0!important}
.um-login .um-field-checkbox input[type=checkbox]{position:absolute!important;opacity:0;width:1px;height:1px;margin:0!important}
.um-login label.um-field-checkbox{display:inline-block!important;position:relative!important;color:#cfd3da!important}
.um-login .um-field-checkbox-state{display:inline-block!important;vertical-align:middle!important;float:none!important;position:static!important;margin:0 0 0 15px!important;line-height:1!important;left:auto!important;top:auto!important}
.um-login .um-field-checkbox-option{display:inline-block!important;vertical-align:middle!important;padding:0!important;margin:0!important;line-height:1!important}

/* ===== LOGIN gap v5: input block ตัด baseline gap ===== */
.um-login .um-field-area input.um-form-field{display:block!important;margin:0!important}
.um-login .um-field-area{line-height:0!important}
.um-login .um-col-1 .um-field{margin:0 0 3px!important}
.um-login .um-col-1 .um-field:last-child{margin-bottom:0!important}

/* LOGIN gap v6 FINAL */
.um-login .um-col-1 .um-field{margin:0 0 3px!important;padding:0!important}
.um-login .um-col-1 .um-field-area{margin:0!important;padding:0!important;line-height:0!important}
.um-login .um-col-1 .um-field input.um-form-field{display:block!important;margin:0!important;vertical-align:top!important}
.um-login .um-col-1 .um-field:last-child{margin-bottom:0!important}

/* ============ REGISTER PAGE (match login) ============ */
.um-register .reg-head{display:none!important}
.um-register .login-head{text-align:center;margin-bottom:18px}
.um-register .login-logo{display:block;max-width:80%;max-height:120px;height:auto;margin:0 auto 10px}
.um-register .login-sub{font-size:13px;color:#9aa0a6;line-height:1.5}
.um-register .um-field-label{display:none!important}
.um-register .um-row{margin:0!important}
.um-register .um-field{margin:0 0 3px!important;padding:0!important}
.um-register .um-field-area{position:relative;margin:0!important;padding:0!important;line-height:0!important}
.um-register .um-field-area input.um-form-field{display:block!important;margin:0!important;height:60px!important;border-radius:32px!important;padding:0 20px 0 70px!important;background:#e9ebef!important;border:0!important;color:#23262e!important;font-size:16px!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)!important}
.um-register .um-field-area input.um-form-field::placeholder{color:#8b909b!important;opacity:1}
.um-register .um-field-area input.um-form-field:focus{box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 0 0 3px rgba(255,140,0,.32)!important}
.um-register .um-field-user_login .um-field-area::before,.um-register .um-field-user_email .um-field-area::before,.um-register .um-field-password .um-field-area::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background-color:#cfd4db;background-position:center;background-size:24px 24px;background-repeat:no-repeat;z-index:2}
.um-register .um-field-user_login .um-field-area::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23454a55'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-3.6 0-9 1.8-9 5v2h18v-2c0-3.2-5.4-5-9-5z'/%3E%3C/svg%3E")}
.um-register .um-field-user_email .um-field-area::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23454a55'%3E%3Cpath d='M3 5.5h18c.55 0 1 .45 1 1v11c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1v-11c0-.55.45-1 1-1zm9 6.2 7.4-4.7H4.6L12 11.7zM4 9v7.5h16V9l-8 5L4 9z'/%3E%3C/svg%3E")}
.um-register .um-field-password .um-field-area::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23454a55'%3E%3Cpath d='M14.5 3a6.5 6.5 0 0 0-6.3 8.2L3 16.4V21h4.6v-2.2h2.2v-2.2h2.2l1.3-1.3A6.5 6.5 0 1 0 14.5 3zm2.3 4.7a1.6 1.6 0 1 1-2.3-2.3 1.6 1.6 0 0 1 2.3 2.3z'/%3E%3C/svg%3E")}
.um-register input[type=submit].um-button{border-radius:32px!important;height:54px!important;line-height:54px!important;background:linear-gradient(180deg,#ff9d2e,#ff7a12)!important;background-image:linear-gradient(180deg,#ff9d2e,#ff7a12)!important;box-shadow:0 4px 10px rgba(0,0,0,.22)!important;color:#fff!important;border:0!important}
.um-register a.um-button.um-alt{border-radius:32px!important;height:54px!important}