/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Mengimpor font dari Google Fonts */

*{
  margin: 0; /* Menghapus margin default pada semua elemen */
  padding: 0; /* Menghapus padding default pada semua elemen */
  box-sizing: border-box; /* Memastikan bahwa padding dan border tidak menambah ukuran elemen */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins untuk semua elemen */
}

body{
  display: flex; /* Menggunakan flexbox untuk penataan elemen */
  align-items: center; /* Memusatkan elemen secara vertikal */
  justify-content: center; /* Memusatkan elemen secara horizontal */
  min-height: 100vh; /* Menentukan tinggi minimum sebesar 100% dari tinggi viewport */
  padding: 0 10px; /* Memberikan padding horizontal untuk responsivitas */
  background: #675AFE; /* Memberikan warna latar belakang biru keunguan */
}

::selection{
  color: #fff; /* Warna teks saat dipilih menjadi putih */
  background: #675AFE; /* Warna latar belakang saat teks dipilih menjadi biru keunguan */
}

.wrapper{
  width: 370px; /* Lebar elemen wrapper */
  padding: 30px; /* Memberikan padding ke dalam wrapper */
  border-radius: 7px; /* Membuat sudut elemen menjadi melengkung */
  background: #fff; /* Warna latar belakang putih */
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); /* Menambahkan bayangan halus */
}

.wrapper header{
  font-size: 28px; /* Ukuran font untuk header */
  font-weight: 500; /* Ketebalan font medium */
  text-align: center; /* Posisi teks di tengah */
}

.wrapper form{
  margin: 40px 20px 0; /* Memberikan margin pada formulir */
}

form :where(input, select, button){
  width: 100%; /* Semua input, select, dan button akan memiliki lebar penuh */
  outline: none; /* Menghilangkan outline bawaan */
  border-radius: 5px; /* Membuat sudut elemen melengkung */
  border: none; /* Menghilangkan border */
}

form p{
  font-size: 18px; /* Ukuran font teks paragraf */
  margin-bottom: 5px; /* Memberikan jarak bawah */
}

form input{
  height: 50px; /* Menentukan tinggi input */
  font-size: 17px; /* Ukuran font dalam input */
  padding: 0 15px; /* Memberikan padding horizontal pada input */
  border: 2px solid #999; /* Warna border abu-abu */
}

form input:focus{
  padding: 0 14px; /* Mengurangi padding saat fokus */
  border: 2px solid #675AFE; /* Mengubah border menjadi biru keunguan saat input aktif */
}

form .drop-list{
  display: flex; /* Menggunakan flexbox untuk menyusun elemen secara horizontal */
  margin-top: 20px; /* Memberikan margin atas */
  align-items: center; /* Memusatkan elemen secara vertikal */
  justify-content: space-between; /* Menyusun elemen dengan jarak yang merata */
}

.drop-list .select-box{
  display: flex; /* Menggunakan flexbox */
  width: 115px; /* Lebar elemen dropdown */
  height: 45px; /* Tinggi elemen dropdown */
  align-items: center; /* Memusatkan elemen secara vertikal */
  border-radius: 5px; /* Membuat sudut elemen melengkung */
  justify-content: center; /* Memusatkan elemen secara horizontal */
  border: 1px solid #999; /* Warna border abu-abu */
}

.select-box img{
  max-width: 21px; /* Maksimum lebar gambar bendera */
}

.select-box select{
  width: auto; /* Ukuran dropdown menyesuaikan kontennya */
  font-size: 16px; /* Ukuran font dropdown */
  background: none; /* Menghapus warna latar belakang */
  margin: 0 -5px 0 5px; /* Memberikan margin pada dropdown */
}

.select-box select::-webkit-scrollbar{
  width: 8px; /* Lebar scrollbar */
}

.select-box select::-webkit-scrollbar-track{
  background: #fff; /* Warna latar belakang scrollbar */
}

.select-box select::-webkit-scrollbar-thumb{
  background: #888; /* Warna thumb scrollbar */
  border-radius: 8px; /* Membuat sudut thumb melengkung */
  border-right: 2px solid #ffffff; /* Memberikan efek pemisah */
}

.drop-list .icon{
  cursor: pointer; /* Mengubah cursor menjadi pointer saat diarahkan */
  margin-top: 30px; /* Memberikan margin atas */
  font-size: 22px; /* Ukuran ikon */
}

form .exchange-rate{
  font-size: 17px; /* Ukuran font teks kurs */
  margin: 20px 0 30px; /* Memberikan jarak atas dan bawah */
}

form button{
  height: 52px; /* Tinggi tombol */
  color: #fff; /* Warna teks putih */
  font-size: 17px; /* Ukuran font tombol */
  cursor: pointer; /* Mengubah cursor menjadi pointer */
  background: #675AFE; /* Warna latar tombol biru keunguan */
  transition: 0.3s ease; /* Efek transisi saat hover */
}

form button:hover{
  background: #4534fe; /* Mengubah warna latar tombol saat hover */
}