body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: url("https://blogger.googleusercontent.com/img/a/AVvXsEitb2NOW2bARs8MSCOewqTa-pCl_2GsglQfXtXN6fbf1gTirJHu7D20fZkpdb2z1eiIS97N9qjHJeJFxoRxJiA2MfT6AutVzvXDb1Rd3OKxy4nO98dBeVhkyrw0aWcbUtkDlDEFJ14MqJf9iyA4PY2wlS2nEWzn_BbKHvspwv38-YWarKVRBUIReQ58ziT3") no-repeat center center fixed;
      background-size: cover;
      color: white;
      text-align: center;
    }

    .container {
      padding: 40px 20px 100px;
    }

    .logo {
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .instruction {
      font-size: 15px;
      margin-bottom: 20px;
    }

    .input-group {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      gap: 10px;
    }

    .country-code {
      background-color: white;
      color: black;
      border-radius: 10px;
      padding: 10px 15px;
      display: flex;
      align-items: center;
    }

    .country-code img {
      width: 20px;
      height: auto;
      margin-right: 8px;
    }

    .phone-input {
      padding: 12px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      width: 200px;
      text-align: left;
      font-weight:bold;
      outline: none;
      transition: border 0.3s;
    }

    .phone-input.error {
      border: 1px solid red;
    }

    .description {
      font-size: 12px;
      color: #f0f0f0;
      margin: 20px 30px;
    }

    .description b {
      color: white;
    }

    #lanjutBtn {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: white;
      color: #ccc;
      font-weight: bold;
      padding: 14px 120px;
      font-size: 15px;
      border: 1px solid #ccc;
      border-radius: 10px;
      cursor: pointer;
    }

    .loading {
      display: none;
      position: relative;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 50px;
      height: 50px;
    }

    .loading img.static-image {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .loading img.spinner {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 10%;
      left: 10%;
      transform: translate(-50%, -50%);
      animation: spin 0.7s linear infinite;
      z-index: 2;
    }

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

    .label-row {
      display: flex;
      justify-content: flex-start;
      gap: 58px;
      margin-left: -0px;
      font-size: 14px;
    }