/* 9Wicket login — source markup override only */

/* Keep the exact source curve; remove only its artificial gap */
.login-head,
.pass-head {
  margin-bottom: 0 !important;
}

/* Source dark panel below the curve */
html,
body {
  background: #111 !important;
  background-attachment: fixed !important;
}

/* Password: source-size eye, vertically centered in its own input */
#passwordErrorClass {
  position: relative !important;
}
#passwordErrorClass i.fa {
  position: absolute !important;
  top: 50% !important;
  right: 3vw !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  font-size: 5.2vw !important;
  line-height: 1 !important;
}
#passwordErrorClass input[name="password"] {
  padding-right: 12vw !important;
}

/* Validation: one input only; canvas is the number on the right */
#validCodeErrorClass {
  position: relative !important;
  display: block !important;
}
#validCodeErrorClass input[name="code"] {
  width: 100% !important;
  height: 10.66667vw !important;
  box-sizing: border-box !important;
  padding-right: 25vw !important;
}
#validCodeErrorClass #canvas {
  position: absolute !important;
  top: 50% !important;
  right: 2.2vw !important;
  transform: translateY(-50%) !important;
  width: 20vw !important;
  height: 8.4vw !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Login source appearance */
#loginBtn.btn-send {
  height: 10.66667vw !important;
  line-height: 10.1vw !important;
  background: linear-gradient(#3f3f3f 0%, #080808 100%) !important;
  border: 1px solid #000 !important;
  border-radius: 1.2vw !important;
  color: #ffbd16 !important;
  font-size: 3.2vw !important;
}

/* Download app: source black bar, icon + text animate together */
#appDesign.downloadappbtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 10.66667vw !important;
  min-height: 0 !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 1.2vw !important;
  overflow: hidden !important;
}
#appDesign.downloadappbtn i,
#appDesign.downloadappbtn p,
#appDesign.downloadappbtn span,
#appDesign.downloadappbtn svg,
#appDesign.downloadappbtn svg * {
  color: #dfff00 !important;
  fill: currentColor !important;
  margin: 0 !important;
  animation: appPulse 1.4s infinite ease-in-out !important;
}
#appDesign.downloadappbtn i {
  font-size: 5.2vw !important;
  line-height: 1 !important;
  margin-right: 2vw !important;
}
#appDesign.downloadappbtn p {
  font-size: 3.2vw !important;
  line-height: 1 !important;
}
@keyframes appPulse {
  0%,100% { color: #dfff00; fill: #dfff00; }
  33% { color: #ff174f; fill: #ff174f; }
  66% { color: #35f7b5; fill: #35f7b5; }
}

/* Payment logos remain independent cards, not one merged strip */
.marquee-image {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 18.66667vw !important;
  height: 10.66667vw !important;
  padding: 0 !important;
  margin: 0 1.33333vw !important;
  object-fit: contain !important;
  background: #fff !important;
}

/* Restore source support footer and its active detail */
#supportWrap {
  display: block !important;
}
.support-wrap .support-service a {
  display: inline-flex !important;
}
.support-wrap .support-info {
  display: flex !important;
}
.support-wrap .support-detail {
  display: none !important;
}
.support-wrap .support-detail.open {
  display: block !important;
}

/* final visual corrections requested */

/* form position + source-like spacing */
.login-wrap,
.login-form,
.form-wrap {
  padding-top: 3vw !important;
}

/* validation number: centered at right inside same field */
#validCodeErrorClass #canvas {
  top: 50% !important;
  right: 2.4vw !important;
  transform: translateY(-50%) !important;
  width: 19vw !important;
  height: 8vw !important;
}

/* yellow Login button */
#loginBtn.btn-send {
  background: linear-gradient(180deg, #ffd42a 0%, #ffb80c 100%) !important;
  color: #111 !important;
  border: 1px solid #c58a00 !important;
}

/* pink Download App button */
#appDesign.downloadappbtn {
  background: linear-gradient(180deg, #ff2873 0%, #e80052 100%) !important;
}
#appDesign.downloadappbtn i,
#appDesign.downloadappbtn p,
#appDesign.downloadappbtn span,
#appDesign.downloadappbtn svg,
#appDesign.downloadappbtn svg * {
  color: #dfff00 !important;
  fill: #dfff00 !important;
}

/* footer policy text: soft white */
.policy-link,
.policy-link a,
.footer-policy,
.footer-policy a {
  color: rgba(255,255,255,.72) !important;
}

/* policy row should remain readable over black panel */
.policy-link {
  opacity: 1 !important;
}

/* Move only the form section down ~18px below the curve */
.login-head + *,
.login-head ~ form,
.login-head ~ .login-box,
.login-head ~ .login-content {
  position: relative !important;
  top: 18px !important;
}

/* Keep footer/support from moving: compensate only the following layout flow */
#supportWrap {
  margin-top: 18px !important;
}

/* Captcha number: same right-edge alignment as password eye icon */
#validCodeErrorClass #canvas {
  top: 50% !important;
  right: 3vw !important;
  transform: translateY(-50%) !important;
  width: 18vw !important;
  height: 8vw !important;
}

/* final captcha right alignment: match password eye icon edge */
#validCodeErrorClass #canvas {
  right: 1.2vw !important;
  width: 14vw !important;
  height: 8vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Captcha number source position: canvas shifts right, number aligns near input right edge */
#validCodeErrorClass #canvas {
  position: absolute !important;
  top: 50% !important;
  right: -30px !important;
  transform: translateY(-50%) !important;
  width: 85px !important;
  height: 30px !important;
}

/* Download App button: slightly shorter vertically */
#appDesign.downloadappbtn {
  height: 8.8vw !important;
  min-height: 8.8vw !important;
}

#appDesign.downloadappbtn i {
  font-size: 4.4vw !important;
}

#appDesign.downloadappbtn p {
  font-size: 2.9vw !important;
}

/* FRAME_SIZE_ONLY_V1 — no color/button/background changes */
html{
  overflow-x:hidden !important;
}

body{
  max-width:430px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow-x:hidden !important;
}

.login-head{
  width:100% !important;
  max-width:430px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden !important;
}

.login-head #poupppLogo{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  object-fit:fill !important;
}

form[name="loginForm"],
.form-login,
.marquee,
.policy-link,
#supportWrap{
  max-width:430px !important;
  box-sizing:border-box !important;
}

/* FRAME_SIZE_ONLY_V1 — no color/button/background changes */
html{
  overflow-x:hidden !important;
}

body{
  max-width:430px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow-x:hidden !important;
}

.login-head{
  width:100% !important;
  max-width:430px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden !important;
}

.login-head #poupppLogo{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  object-fit:fill !important;
}

form[name="loginForm"],
.form-login,
.marquee,
.policy-link,
#supportWrap{
  max-width:430px !important;
  box-sizing:border-box !important;
}