/* Language-specific styles */
.en {
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
}

.en .btn-popup-mnp,
.en .header {
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
}

.en .header-result {
  max-width: 340px;
}

.en .header-result-top {
  max-width: 340px;
}


@media screen and (max-width: 991.98px) {
  .en .header-result {
    max-width: 270px;
  }

  .en .header-result-top {
    max-width: 270px;
  }  
}

/* Backdrop */
.popup-mnp-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000000;
  background-color: #000;
  opacity: 0.5;
}

/* Main Container */
.popup-mnp-container {
  line-height: normal !important;
  z-index: 1000001;
  position: fixed;
  max-width: 1024px;
  width: 100%;
  height: 470px;
  opacity: 0.98;
  background-color: #e7eaf1;
  color: #444;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  text-shadow: none;
  overflow: hidden;
  display: flex;
  transition: transform 0.4s, -webkit-transform 0.4s;
  transition-timing-function: ease-out;
  transform-origin: 0 0;
}

.popup-mnp-container.scale {
  transform: scale(1.02) translate(-50%, -50%);
}

/* Spinner */
.popup-mnp-container .spinner {
  background: url('data:image/svg+xml, <svg width="29" height="29" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M4.38798 12.616C3.36313 12.2306 2.46328 11.5721 1.78592 10.7118C1.10856 9.85153 0.679515 8.82231 0.545268 7.73564C0.411022 6.64897 0.576691 5.54628 1.02433 4.54704C1.47197 3.54779 2.1845 2.69009 3.08475 2.06684C3.98499 1.4436 5.03862 1.07858 6.13148 1.01133C7.22435 0.944078 8.31478 1.17716 9.28464 1.68533C10.2545 2.19349 11.0668 2.95736 11.6336 3.89419C12.2004 4.83101 12.5 5.90507 12.5 7" stroke="white" /></svg>')
    no-repeat center;
  content: "";
  width: 29px;
  height: 29px;
  margin: auto;
  display: flex;
  border: 0;
  justify-content: center;
  align-items: center;
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Background and Promo Images */
.popup-mnp-container .bg-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
}

.popup-mnp-container .promo-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  object-fit: cover;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Dismiss Button */
.popup-mnp-container .btn-dismiss {
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  padding: 10px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  position: fixed;
  transition: all 0.3s ease-in-out;
  z-index: 10;
  cursor: pointer;
}

.popup-mnp-container .btn-dismiss:hover {
  background-color: #cdcdcd;
  opacity: 0.8;
}

.popup-mnp-container .btn-dismiss img {
  width: 100%;
  height: 100%;
}

/* Primary Button */
.popup-mnp-container .btn-popup-mnp {
  min-width: 176px;
  background-color: #7151d2;
  padding: 0.5rem 3rem;
  border-radius: 4em;
  outline: none;
  border: 0;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-block;
  cursor: pointer;
}

.popup-mnp-container .btn-popup-mnp:hover {
  background-color: #672aa9;
}

/* Terms and Conditions Remarks */
.popup-mnp-container .tnc-remark {
  font-size: 8px;
  padding: 0 0.5rem;
  color: #000;
  text-align: center;
  position: absolute;
  bottom: 1%;
  margin: 0;
}

.popup-mnp-container .result-tnc-remark {
  font-size: 10px;
  padding: 0 0.5rem;
  color: #000;
  text-align: center;
  position: absolute;
  bottom: 1%;
  margin: 0;
}

.popup-mnp-container .line-break-tnc {
  display: none;
}

/* Header Styles */
.popup-mnp-container .header-Offer {
  font-size: 2rem;
  font-weight: bold;
  padding: 5px;
  background-clip: text;
  background-image: linear-gradient(90deg, #7c52a0 0%, #774fda 101.73%);
  color: white;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: calc(2rem / 8 * 2);
}

.popup-mnp-container .header {
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #7151d2;
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
  margin-top: 0;
}

/* Form Container */
.popup-mnp-container .container-form {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.popup-mnp-container .container-form .container-content {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1rem;
}

.popup-mnp-container .container-form .container-content .input-mobile-number {
  border: 1px solid #cecece;
  border-radius: 2px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: #000;
  text-align: center;
  outline: none;
  line-height: 1.5;
  margin: 1rem 0;
  min-width: 70%;
}

.popup-mnp-container .container-form .container-content .input-mobile-number:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(113, 81, 210, 0.25);
}

.popup-mnp-container .container-form .container-content .input-mobile-number:disabled {
  background-color: #cecece;
  border: 1px solid #cecece;
}

/* Feedback Messages */
.popup-mnp-container .container-form .container-content .feedback-mobile-number {
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #ff0000;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}

.popup-mnp-container .container-form .container-content .feedback-mobile-number::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5966_2920' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.49996 1.66669C4.27996 1.66669 1.66663 4.28002 1.66663 7.50002C1.66663 10.72 4.27996 13.3334 7.49996 13.3334C10.72 13.3334 13.3333 10.72 13.3333 7.50002C13.3333 4.28002 10.72 1.66669 7.49996 1.66669ZM6.91663 4.58335V5.75002H8.08329V4.58335H6.91663ZM8.08329 9.83335C8.08329 10.1542 7.82079 10.4167 7.49996 10.4167C7.17913 10.4167 6.91663 10.1542 6.91663 9.83335V7.50002C6.91663 7.17919 7.17913 6.91669 7.49996 6.91669C7.82079 6.91669 8.08329 7.17919 8.08329 7.50002V9.83335ZM2.83329 7.50002C2.83329 10.0725 4.92746 12.1667 7.49996 12.1667C10.0725 12.1667 12.1666 10.0725 12.1666 7.50002C12.1666 4.92752 10.0725 2.83335 7.49996 2.83335C4.92746 2.83335 2.83329 4.92752 2.83329 7.50002Z' fill='black'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5966_2920)'%3E%3Crect x='0.5' y='0.5' width='14' height='14' fill='%23FF0000'/%3E%3C/g%3E%3C/svg%3E%0A");
}

/* Result Container */
.popup-mnp-container .container-form .container-result {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  gap: 15px;
}

.popup-mnp-container .container-form .container-result .result-tick {
  background: url('data:image/svg+xml,<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.346 26.0824C50.346 12.5896 39.4079 1.65156 25.9152 1.65156C12.4224 1.65157 1.48437 12.5896 1.48437 26.0824C1.48437 39.5751 12.4224 50.5132 25.9152 50.5132C39.4079 50.5132 50.346 39.5751 50.346 26.0824Z" fill="%23DFD6FF"/><path d="M26 51.9991C19.0554 51.9991 12.5262 49.2949 7.6152 44.3839C2.70417 39.4738 0 32.9446 0 26C0 19.0554 2.70417 12.5262 7.6152 7.6152C12.5262 2.70417 19.0545 0 26 0C32.9455 0 39.4738 2.70417 44.3848 7.6152C49.2958 12.5262 52 19.0545 52 26C52 32.9455 49.2958 39.4738 44.3848 44.3848C39.4738 49.2958 32.9446 52 26 52V51.9991ZM26 3.13744C13.3937 3.13744 3.13839 13.3928 3.13839 25.9991C3.13839 38.6053 13.3947 48.8607 26 48.8607C38.6053 48.8607 48.8616 38.6044 48.8616 25.9991C48.8616 13.3937 38.6053 3.13744 26 3.13744Z" fill="%237C73D5"/><path d="M36.7764 14.4738L22.681 28.5693L15.1609 21.0492C13.4646 19.3519 8.692 24.1245 10.3883 25.8218L17.9084 33.3418L22.681 38.1144L27.4536 33.3418L41.549 19.2464C43.2453 17.5491 38.4737 12.7775 36.7764 14.4738Z" fill="%237C73D5"/></svg>')
    no-repeat center;
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  margin-bottom: 1rem;
}

.popup-mnp-container .container-form .container-result .header-result-top {
  font-weight: 700;
  color: #1e1e1e;
  font-size: 1.25rem;
  white-space: pre-wrap;
  color: #774fda;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.popup-mnp-container .container-form .container-result .header-result {
  font-weight: 700;
  color: #1e1e1e;
  font-size: 1.25rem;
  white-space: pre-wrap;
}

.popup-mnp-container .container-form .container-result .remark {
  color: #1e1e1e;
  font-size: 1.25rem;
  white-space: pre-wrap;
}

.popup-mnp-container .container-form .remark {
  font-family: "Noto Sans HK", "MHeiHK", "HelveticaNeue", Arial, sans-serif;
  font-size: 0.6rem;
  color: #000000;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1rem;
}

/* Tablet (1200px) */
@media (max-width: 1199.98px) {
  .popup-mnp-container {
    height: 41.3vw;
    width: 90vw;
    max-height: 470px;
  }

  .popup-mnp-container .container-form .container-result .header {
    font-size: 1.75rem;
  }
}

/* Medium screens (992px) */
@media screen and (max-width: 991.98px) {
  .popup-mnp-container .header-Offer {
    font-size: 1.25rem;
    margin: 0;
  }

  .popup-mnp-container .header {
    font-size: 1.25rem;
  }

  .popup-mnp-container .container-form .container-content {
    font-size: 1rem;
  }

  .popup-mnp-container .container-form .container-content .input-mobile-number {
    margin: 5px;
  }
}

/* Small screens (768px) */
@media (max-width: 767.98px) {
  .popup-mnp-container .container-form .container-content {
    font-size: 0.85rem;
  }

  .popup-mnp-container .container-form .container-result .header {
    font-size: 1rem;
  }

  .popup-mnp-container .container-form .container-result .remark {
    font-size: 0.75rem;
  }
}

/* Mobile (576px) */
@media screen and (max-width: 576px) {
  .en .header-Offer {
    font-size: 1.5rem !important;
  }

  .en .popup-mnp-container .container-content {
    font-size: 1rem !important;
  }

  .en .popup-mnp-container .header {
    font-size: 1.5rem !important;
  }

  .header-Offer {
    margin-bottom: 0 !important;
  }

  .popup-mnp-container {
    max-width: 370px;
    max-height: 666px;
    width: 90vw;
    height: 162vw;
  }

  .popup-mnp-container .header-Offer {
    font-size: 2rem;
  }

  .popup-mnp-container.scale {
    transform: scale(1.04) translate(-50%, -50%);
  }

  .popup-mnp-container .bg-img {
    max-width: none;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .popup-mnp-container .promo-img {
    top: unset;
    bottom: 0;
    width: 100%;
    height: 51.5%;
  }

  .popup-mnp-container .tnc-remark {
    position: relative !important;
    bottom: 0 !important;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }

  .popup-mnp-container .result-tnc-remark {
    position: relative !important;
    bottom: 0 !important;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }

  .popup-mnp-container .line-break-tnc {
    display: block;
  }

  .popup-mnp-container .header {
    font-size: 2rem;
    margin-bottom: 0;
  }

  .popup-mnp-container .container-form {
    width: 100%;
    height: 48.5%;
  }

  .popup-mnp-container .container-form .container-content {
    margin-bottom: auto;
    justify-content: center;
    font-size: 1.25rem;
  }

  .popup-mnp-container .container-form .container-content .input-mobile-number {
    min-width: 90%;
    margin: 1rem 0;
    margin-bottom: 1rem;
  }

  .popup-mnp-container .container-form .container-content .feedback-mobile-number {
    margin-bottom: 0.5rem;
  }

  .popup-mnp-container .container-form .container-result {
    margin-bottom: auto;
    justify-content: center;
    font-size: 1.25rem;
  }

  .popup-mnp-container .container-form .container-result .header {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .popup-mnp-container .container-form .container-result .remark {
    font-size: 1rem;
  }

  .popup-mnp-container .container-form .remark {
    font-size: 6px;
    margin-bottom: 0.5rem;
  }
}

/* Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}