/* import google font- poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Mengimpor font "Poppins" dari Google Fonts dengan berbagai ketebalan (400, 500, 600) */

/* Reset default margin dan padding untuk semua elemen, serta menggunakan box-sizing border-box */
*{
  margin: 0; /*menghapus margin default */
  padding: 0%; /*menghapus padding default */
  box-sizing: border-box; /* mengatur box model agar padding dan border termasuk dalam ukuran elemen */
  font-family: 'Poppins', sans-serif; /*menggunakan font poppins sebagai font utama, dengan sans-serif sebagai alternatif */
}

/* mengatur tata letak body, wrapper dan content agar berada di tengah secara vertikal dan horizontal */
body, .wrapper, .content{
  display: flex; /*menggunakan flexbox untuk mengatur tata letak */
  align-items: center;
  justify-content: center;
}

body{
  padding: 0 10px;
  min-height: 100vh;
  background: #4a98f7;
}

.wrapper{
  width: 440px;
  padding: 30px 30px 38px;
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.wrapper img{
  max-width: 103px; /*mengatur ukuran maksimum gambar agar tidak melebihi 103px */
}

.wrapper h1{
  font-size: 38px; 
  font-weight: 500;
  margin: 30px 0;
}

.wrapper .content{
  width: 100%;
  justify-content: space-between;
}

.content.disable{
  cursor: no-drop; /* mengubah kursor menjadi tanda larangan saat content dalam keadaan disable*/
}

.content .column{
  padding: 0 10px; /* memberikan ruang dalam elemen column */
  border-radius: 5px; /*membuat sudut elemen menjadi melengkung */
  border: 1px solid #bfbfbf; /* menambahkan border dengan warna abu abu*/
  width: calc(100% / 3 - 5px); /*mengatur lebar setiap kolom agar proposional dan mempertimbangkan jarak antar elemen */
}

.content.disable .column{
  opacity: 0.6; /* mengurangi opasitas elemen saat dalam keadaan disable*/
  pointer-events: none; /* menonaktifkan interaksi pengguna dengan elemen*/
}

.column select{
  width: 100%; /* membuat elemen select menyesuaikan lebar container */
  height: 53px; /*mengatur tinggi dropdown */
  border: none; /*menghapus border bawaan */
  outline: none; /*menghilangkan efek outline saat elemen dipilih */
  background: none; /*menghilangkan warna latar belakang */
  font-size: 19px; /*menentukan ukuran font */
}

.wrapper button{
  width: 100%; /*mengatur lebar tombol agar sesuai dengan container */
  border: none; /*menghapus border bawaan */
  outline: none; /*menghilangkan efek outline saat elemen dipilih */
  color: #fff; /* memberikan warna teks putih */
  cursor: pointer; /*mengubah kursor menjadi tangan saat tombol dapat diklik */
  font-size: 20px; /*menentukan ukuran font */
  padding: 17px 0; /* memberikan ruang dalam tombol*/
  margin-top: 20px; /*memberikan jarak atas tombol dari elemen sebelumnya */
  border-radius: 5px; /*membuat sudut tombol melengkung */
  background: #a498f7; /*memberikan warna llatar belaakang tombol biru */
}